PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

重温CSS之文档结构_html/css_WEB-ITnose

原创
2016-06-24 11:26:27 900浏览

出处:http://limits.cnblogs.com

我们来看看几个基本的HTML页面

 1  2  3  4  5 文档结构 6  7  8  9     

CSS规则

10

样式表由一些样式规则组成。

11
    12
  • 选择器13 14
      15
    • 类选择器
    • 16
    • ID选择器
    • 17
    • 包含选择器
    • 18
    19
  • 属性
  • 20
  • 21 22
23 24

显示如下:

文档结构如下图:

特殊性:

规定了不同规则的权重,当多个规则都可用于同一个元素时,权重越高的样式会被优先采用。

 

h1 {color:red;}/*特殊性=1*/p em{color:blue;}/*特殊性=2*/.divclass{color:yellow;}/*特殊性=10*/p.note em.dark{color:gray;}/*特殊性=22*/#id{color:black;}/*特殊性=100*/

使用!important来标识重要规则,如:p{color:red !important;},此时color:red将具有最高的权重性,因这样声明的规则将高于访问者本地样式的定义(就是P标签内的定义),所以!important要谨慎使用。

元素分类:

  1. 块级元素(display:block):每个块级元素都从一个新行开始,而且其后的元素也需要另起一行开始标题、段落、表格、层、body等都是块级元素;
  2. 内联元素(display:inline):内联元素不需要在新行显示,而且也不强迫其后的元素换行,如a,em,span等都是内联元素,内联元素可以为任何其他元素的子元素;
  3. 列表项(display:list-item):只有li元素是默认此类型,此元素的表现形式和列表一样;
  4. 隐藏元素(display:none):当某个元素被设置为display:none的时候,浏览器会完全忽略掉此元素,此元素将不会被显示,也不会占据位置。

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。