码迷,mamicode.com
首页 > Web开发 > 详细

重温CSS之文档结构

时间:2016-02-19 09:08:19      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

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

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

技术分享
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>文档结构</title>
 6 </head>
 7 
 8 <body>
 9     <h1>CSS规则</h1>
10     <p>样式表由一些<strong>样式规则</strong>组成。</p>
11     <ul>
12         <li>选择器
13     
14             <ul>
15                 <li>类选择器</li>
16                 <li>ID选择器</li>
17                 <li><em>包含</em>选择器</li>
18             </ul>
19             <li>属性</li>
20             <li>值</li>
21         </li>
22     </ul>
23 </body>
24 </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要谨慎使用。

元素分类:

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

重温CSS之文档结构

标签:

原文地址:http://www.cnblogs.com/shouce/p/5199734.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!