电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
样式表(CSS)学习(二)
样式表(CSS)学习(二)
2005-12-30 19:13:59  文/45IT收集   出处:电脑软硬件应用网   

ID selector 

ID selector 其实跟独立 class selector 的功能一样. 而区别在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML元素有帮助. 如果你用 CSS-P 来定位, 有 ID 的 HTML 元素可以被 CSS-P和JavaScript 来操纵.它的语法如下 

   #IDname {property:value}

假如我们有下面的定义 

  #yelowone {color: yellow}

我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如 

  <SPAN ID="yellowone">text here</SPAN>

字形与大小 
CSS 用来控制字形的性质是 font-family,控制字体大小的性质是 font-size. 比如 

  H1, H2, P {font-family: 楷体;font-size: 9pt}

CSS 允许你给 font-family 多于一个以上的字形,使得用户浏览器按顺序检测和使用字体,每个字形之间要用逗号隔开. 比如 

  H1, H2, P {font-family: 楷体, 黑体, 宋体}

斜体 
如果想让字体成为斜体, 要用 font-style 性质, 比如 

  P {font-style: italic}

加重 
用 font-weight 来调节文字的粗细, 比如 

  P {font-weight: bold}

font-style 的可能的值是 lighter, normal, bold, bolder 

如何用 CSS 来控制网页中文字定位? 

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

  P.double {line-height: 2}

请看下面的比较. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的. 

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

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

  P.right {text-align: right}

请看下面的比较. 这 一 行 左 边 看 齐 

这 一 行 右 边 看 齐 

这 一 行 在 中 间 
 


text-align 可以有 left, right, center, 和 justify
段落的首行空格 

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

  P {text-indent: 1cm}

请看下面的例子. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米. 
 
字母的大小写 

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

  P {text-transform: capitalize}

请看下面的比较. 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://nicchina.com/
QQ:30196310

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    网页设计的形象思维归纳
    彻底去掉动易内容页顶部的“改变图片…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号