重温CSS之文档结构
2013-12-29 11:14
211 查看
我们来看看几个基本的HTML页面
显示如下:
文档结构如下图:
特殊性:
规定了不同规则的权重,当多个规则都可用于同一个元素时,权重越高的样式会被优先采用。
使用!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的时候,浏览器会完全忽略掉此元素,此元素将不会被显示,也不会占据位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文档结构</title> </head> <body> <h1>CSS规则</h1> <p>样式表由一些<strong>样式规则</strong>组成。</p> <ul> <li>选择器 <ul> <li>类选择器</li> <li>ID选择器</li> <li><em>包含</em>选择器</li> </ul> <li>属性</li> <li>值</li> </li> </ul> </body> </html>
显示如下:
文档结构如下图:
特殊性:
规定了不同规则的权重,当多个规则都可用于同一个元素时,权重越高的样式会被优先采用。
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的时候,浏览器会完全忽略掉此元素,此元素将不会被显示,也不会占据位置。
相关文章推荐
- CSS的分类、选择器、文档结构
- CSS入门:XHTML文档结构树
- CSS 基础:HTML 标记与文档结构(1)<思维导图>
- CSS入门 XHTML文档结构树
- CSS 基础:HTML 标记与文档结构(1)<思维导图>
- HTML&CSS之HTML文档结构/标签/元素
- HTML基础-HTML文档基本结构
- mfc浅析(1) 文档视图结构中,缺省的命令处理
- 使用Word2010灵活掌握文档结构
- 公开发布版的Windows Azure 基础结构服务中的 SQL Server – 文档和最佳实践(已更新),还有即将发布的博客
- 在XHTML文档中合适的使用CSS和JavaScript
- HTML 文档结构
- asp.net 文档结构运行顺序总结
- CSS-结构选择器和伪类伪元素
- DIV+CSS 让左右结构内容之间有一定距离
- 入分析MFC文档视图结构
- 文档视图结构解析
- 基于 Django1.10 文档的深入学习(28)—— Managing static files(e.g. images, JavaScript, CSS)
- DIV+CSS布局入门示例(二)写入整体层结构与CSS
- 文档/视图结构中的各个部分是如何联系到一起的