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

 <!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要谨慎使用。

元素分类：

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

重温CSS之文档结构的更多相关文章

  1. CSS 基础：HTML 标记与文档结构(1)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  2. CSS设计指南之一 HTML标记与文档结构

    HTML标记与文档结构 之所以从HTML讲起,是因为CSS的用途就是为HTML标记添加样式. 1.1 HTML标记基础 对于每个包含内容的元素,根据它所包含的内容是不是文本,有两种不同的方式给它们加标 ...

  3. HTML5的文档结构和新增标签

    一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

  4. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. html 初识 文档结构 常用标签

    HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...

  7. HTML的文档结构与语法（一）

    一.走进Web开发 Web运行的原理: 二.HTML 1.1什么是html HTML是用来描述网页的一种语言 HTML指的是超文本标记语言(Hyper Text Markup Language) 超文 ...

  8. Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构

    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

  9. Mongodb：修改文档结构后出现错误：Element '***' does not match any field or property of class ***.

    Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***. Mongodb是一种面向文档的 ...

随机推荐

  1. centos 7 安装截图软件shutter

    1.解决 epel-release依赖问题 ,执行命令: yum insatll epel-release 2.然后下载nux-dextop-release-0-5.el7.nux.noarch.rp ...

  2. java自定义注解学习（一）_demo小练习

    自定义注解 现在大家开发过程中,经常会用到注解. 比如@Controller 等等,但是有时候也会碰到自定义注解,在开发中公司的记录日志就用到了自定义注解.身为渣渣猿还是有必要学习下自定义注解的. 这 ...

  3. nestd事务如果报错了 则回滚到外部事物保存点 且外部事物如果没异常的话 会正常提交 nested事务并不会提交；如果外部事物报错了 内部事务会一同回滚

    nestd事务如果报错了 则回滚到外部事物保存点 且外部事物如果没异常的话 会正常提交 nested事务并不会提交:如果外部事物报错了 内部事务会一同回滚

  4. word 里面没输入法

    文件,选项,高级,输入法控制处于活动状态   ,有勾选就去掉,无勾选就勾上,确定后重开word即可

  5. 【ARC082E】ConvexScore

    Description 给定二维直角坐标系上的N个点\((X_i,Y_i)\),定义一个有N个点中的部分点所构成点集为"凸点集",当且仅当该集合内的所有点恰好构成一个面积为正的凸多 ...

  6. 动态dp 板子

    动态dp 瞎扯两句吧 先从序列上理解,维护链的最大独立集. 考虑是从左边转移的,那么矩阵的转移唯一,直接放在线段树上就可以了. 放在树上的话,儿子都可以转移,把轻儿子的转移放在子链链头更新,然后每条链 ...

  7. 【uoj228】 基础数据结构练习题

    http://uoj.ac/problem/228 (题目链接) 题意 给出一个序列,维护区间加法,区间开根,区间求和 Solution 线段树.考虑区间开根怎么做.当区间的最大值与最小值相等时,我们 ...

  8. 【CH6201】走廊泼水节

    题目大意:给定一棵树,要求增加若干条边,将其转化为完全图,且该完全图以该树为唯一的最小生成树,求增加的边权最小是多少. 题解:完全图的问题一般要考虑组合计数.重新跑一遍克鲁斯卡尔算法,每次并查集在合并 ...

  9. oracle递归查询（查询条件ID下得所有子集）

    一.CREATE TABLE TBL_TEST ( ID    NUMBER, NAME  VARCHAR2(100 BYTE), PID   NUMBER                       ...

  10. P1858 多人背包

    P1858 多人背包 题目描述 求01背包前k优解的价值和 要求装满 调试日志: 初始化没有赋给 dp[0] Solution 首先补充个知识点啊, 要求装满的背包需要初始赋 \(-inf\), 边界 ...