css新手上路(3)

2016-01-29 12:05 5 1 收藏

css新手上路(3),css新手上路(3)

【 tulaoshi.com - Html 】

这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是

line-height: 行距
text-align: 向那个方向看齐
vertical-align: 向上还是向下看齐
text-indent: 段落第一行空格
text-transform: 字母的大小写
text-decoration: 给文字加装饰, 比如下滑线
行距
我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS
中的 line-height 可以取得这种调节

  P.double {line-height: 2}
请看下面的比较. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的.

这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的.




你要让 line-height 等于 3 的话, 那行距就更大了.

看齐
一般来说我们都是向左边看齐. 但有的时候也有其他的选择,
比如说向右边看齐.

    P.right {text-align: right}
    P.center {text-align: center}
    P.justify {text-align: justify}
请看下面的比较. 这 一 行 左 边 看 齐

这 一 行 右 边 看 齐

这 一 行 在 中 间




text-align 可以有 left, right, center, 和 justify

段落的首行空格
如果我们想让第一行的开头空几格, 可以用 text-indent, 比如

  P {text-indent: 1cm}
请看下面的例子. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米.




字母的大小写
这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以
用 text-transform 来改变英文的大小写. 比如, 让每个字的
第一个字母大写

    P.capitalize {text-transform: capitalize}
    P.up {text-transform: uppercase}
    P.low {text-transform: lowercase}
请看下面的比较. All the words' first letter have been capitalized in this line

All the letters are uppercase in this line

All the letters are lowercase in this line




文字的装饰
就是在文字上加下滑线, 或中间加条线的. 比如

    P.underline {text-decoration: underline}
    P.line-through {text-decoration: line-through}
请看下面的比较. Underline line

line-through line




其实最常用的是我们想去掉联接下面的下滑线.

  A {text-decoration: none}

来源:http://www.tulaoshi.com/n/20160129/1484602.html

延伸阅读
标签: Web开发
7. 文件上传 你可以利用PHP实现文件的上传功能,注意客户端的浏览器应该是Netscape3以上或者IE3以上的版本。同时,因为本程序与你的PHP配置文件(PHP3为php3.ini,PHP4为php.in)设置有关。在执行该程序之前请先检查您的PHP配置文件有没有做好如下的设置: 将;upload_tmp_dir该行的注释符,即前面的分号;去掉,使该行在php.ini文...
标签: PHP
  建设一个简单交互的网站(六) 9. 简易banner动态更替   不知大家有没有发现各大站点上的标头广告banner,我们每次访问这些站点时,都会看到不同的广告图标,或者如果你每次刷新页面时,这些广告banner就会不断地随机更替变换。要实现这种效果虽然用javascript也可以达到(象天极网站的动态变换广告banner就是通过调用ja...
标签: Web开发
简介 PHP是一种易于学习和使用的服务器端脚本语言。只需要很少的编程知识你就能使用PHP建立一个真正交互的WEB站点。本教程并不想让你完全了解这种语言,只是能使你尽快加入开发动态web站点的行列。我假定你有一些HTML(或者HTML编辑器)的基本知识和一些编程思想。 1.简介 PHP是能让你生成动态网页的工具之一。PHP代表:超...
标签: Web开发
使用PHP来操作Oracle数据库 11. 数据库连接 在上一节里,我们已经介绍了PHP与MySQL数据库的一些基本操作知识,在互联网中有关PHP与MySQL的教程也最多。MySQL是免费的,这一点也许就吸引了不少人。由于其广泛应用,我就不想在这里赘述MySQL的使用方法了。Oracle被大量在企业应用中采用,因此我们就利用Oracle来进一步介绍PHP与...
标签: Web开发
建设一个简单交互的网站(六) 9. 简易banner动态更替 不知大家有没有发现各大站点上的标头广告banner,我们每次访问这些站点时,都会看到不同的广告图标,或者如果你每次刷新页面时,这些广告banner就会不断地随机更替变换。要实现这种效果虽然用javascript也可以达到(象天极网站的动态变换广告banner就是通过调用javascript来...

经验教程

433

收藏

36
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部