加载中...

css

其中 Y=css

源代码下载： learncss-cn.css

早期的web没有样式，只是单纯的文本。通过CSS，可以实现网页样式和内容的分离。

简单来说，CSS可以指定HTML页面上的元素所使用的样式。

和其他语言一样，CSS有很多版本。最新的版本是CSS 3. CSS 2.0兼容性最好。

你可以使用dabblet来在线测试CSS的效果。

  1. /* 注释 */
  3. /* ####################
  4.    ## 选择器
  5.    ####################*/
  7. /* 一般而言，CSS的声明语句非常简单。 */
  8. 选择器 { 属性: 值; /* 更多属性...*/ }
  10. /* 选择器用于指定页面上的元素。
  12. 针对页面上的所有元素。 */
  13. * { color:red; }
  15. /*
  16. 假定页面上有这样一个元素
  18. <div class='some-class class2' id='someId' attr='value' />
  19. */
  21. /* 你可以通过类名来指定它 */
  22. .some-class { }
  24. /* 给出所有类名 */
  25. .some-class.class2 { }
  27. /* 标签名 */
  28. div { }
  30. /* id */
  31. #someId { }
  33. /* 由于元素包含attr属性，因此也可以通过这个来指定 */
  34. [attr] { font-size:smaller; }
  36. /* 以及有特定值的属性 */
  37. [attr='value'] { font-size:smaller; }
  39. /* 通过属性的值的开头指定 */
  40. [attr^='val'] { font-size:smaller; }
  42. /* 通过属性的值的结尾来指定 */
  43. [attr$='ue'] { font-size:smaller; }
  45. /* 通过属性的值的部分来指定 */
  46. [attr~='lu'] { font-size:smaller; }
  48. /* 你可以把这些全部结合起来，注意不同部分间不应该有空格，否则会改变语义 */
  49. div.some-class[attr$='ue'] { }
  51. /* 你也可以通过父元素来指定。*/
  53. /* 某个元素是另一个元素的直接子元素 */
  54. div.some-parent > .class-name {}
  56. /* 或者通过该元素的祖先元素 */
  57. div.some-parent .class-name {}
  59. /* 注意，去掉空格后语义就不同了。
  60. 你能说出哪里不同么？ */
  61. div.some-parent.class-name {}
  63. /* 你可以选择某元素前的相邻元素 */
  64. .i-am-before + .this-element { }
  66. /* 某元素之前的同级元素（相邻或不相邻） */
  67. .i-am-any-before ~ .this-element {}
  69. /* 伪类允许你基于页面的行为指定元素（而不是基于页面结构） */
  71. /* 例如，当鼠标悬停在某个元素上时 */
  72. :hover {}
  74. /* 已访问过的链接*/
  75. :visited {}
  77. /* 未访问过的链接*/
  78. :link {}
  80. /* 当前焦点的input元素 */
  81. :focus {}
  83. /* ####################
  84.    ## 属性
  85.    ####################*/
  87. 选择器 {
  89.     /* 单位 */
  90.     width: 50%; /* 百分比 */
  91.     font-size: 2em; /* 当前字体大小的两倍 */
  92.     width: 200px; /* 像素 */
  93.     font-size: 20pt; /* 点 */
  94.     width: 5cm; /* 厘米 */
  95.     width: 50mm; /* 毫米 */
  96.     width: 5in; /* 英尺 */
  98.     /* 颜色 */
  99.     background-color: #F6E;  /* 短16位 */
  100.     background-color: #F262E2; /* 长16位 */
  101.     background-color: tomato; /* 颜色名称 */
  102.     background-color: rgb(255, 255, 255); /* rgb */
  103.     background-color: rgb(10%, 20%, 50%); /*  rgb 百分比 */
  104.     background-color: rgba(255, 0, 0, 0.3); /*  rgb 加透明度 */
  106.     /* 图片 */
  107.     background-image: url(/path-to-image/image.jpg);
  109.     /* 字体 */
  110.     font-family: Arial;
  111.     font-family: "Courier New"; /* 使用双引号包裹含空格的字体名称 */
  112.     font-family: "Courier New", Trebuchet, Arial; /* 如果第一个
  113.                              字体没找到，浏览器会使用第二个字体，一次类推 */
  114. }

使用

CSS文件使用 .css 后缀。

  1. <!-- 你需要在文件的 <head> 引用CSS文件 -->
  2. <link rel='stylesheet' type='text/css' href='filepath/filename.css' />
  4. <!-- 你也可以在标记中内嵌CSS。不过强烈建议不要这么干。 -->
  5. <style>
  6.    选择器 { 属性:值; }
  7. </style>
  9. <!-- 也可以直接使用元素的style属性。
  10. 这是你最不该干的事情。 -->
  11. <div style='property:value;'>
  12. </div>

优先级

同一个元素可能被多个不同的选择器指定，因此可能会有冲突。

假定CSS是这样的：

  1. /*A*/
  2. p.class1[attr='value']
  4. /*B*/
  5. p.class1 {}
  7. /*C*/
  8. p.class2 {}
  10. /*D*/
  11. p {}
  13. /*E*/
  14. p { property: value !important; }

然后标记语言为：

  1. <p style='/*F*/ property:value;' class='class1 class2' attr='value'>
  2. </p>

那么将会按照下面的顺序应用风格：

  • E 优先级最高，因为它使用了 !important，除非很有必要，尽量避免使用这个。
  • F 其次，因为它是嵌入的风格。
  • A 其次，因为它比其他指令更具体。
  • C 其次，虽然它的具体程度和B一样，但是它在B之后。
  • 接下来是 B。
  • 最后是 D。

兼容性

CSS2 的绝大部分特性兼容各种浏览器和设备。现在 CSS3 的兼容性也越来越好了。 但是兼容性问题仍然是需要留意的一个问题。

QuirksMode CSS是关于这方面最好的资源。

扩展阅读

还没有评论.