重温CSS之文档结构_html/css_WEB-ITnose
程序员文章站
2022-04-25 12:38:47
...
出处:http://limits.cnblogs.com
我们来看看几个基本的HTML页面
1 2 3 4 5文档结构 6 7 8 9CSS规则
10样式表由一些样式规则组成。
11
- 12
- 选择器13 14
- 15
- 类选择器 16
- ID选择器 17
- 包含选择器 18
- 属性 20
- 值 21 22
显示如下:
文档结构如下图:
特殊性:
规定了不同规则的权重,当多个规则都可用于同一个元素时,权重越高的样式会被优先采用。
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要谨慎使用。
元素分类:
- 块级元素(display:block):每个块级元素都从一个新行开始,而且其后的元素也需要另起一行开始标题、段落、表格、层、body等都是块级元素;
- 内联元素(display:inline):内联元素不需要在新行显示,而且也不强迫其后的元素换行,如a,em,span等都是内联元素,内联元素可以为任何其他元素的子元素;
- 列表项(display:list-item):只有li元素是默认此类型,此元素的表现形式和列表一样;
- 隐藏元素(display:none):当某个元素被设置为display:none的时候,浏览器会完全忽略掉此元素,此元素将不会被显示,也不会占据位置。
上一篇: 单例模式之php兑现
下一篇: php的整数类型及转换
推荐阅读
-
HTML5之SVG 2D入门8—文档结构及相关元素总结
-
BootStrap底层结构CSS概览,HTML5文档类型
-
CSS3之圆角_html/css_WEB-ITnose
-
CSS3之弹性布局_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
html之div始终停留在屏幕中间部分_html/css_WEB-ITnose
-
CSS文档流_html/css_WEB-ITnose
-
CSS 之 核心篇_html/css_WEB-ITnose
-
DOCTYPE是什么鬼?文档模式又是什么鬼?_html/css_WEB-ITnose
-
css学习笔记二之inline-block_html/css_WEB-ITnose