题外话：
HTML是一种结构化语言，而CSS是它的补充；这是一种样式语言。CSS是前端三板斧之一，因此学习CSS很重要。而我还是菜鸟，所以需要加强学习CSS。这个是我学习CSS权威指南的笔记，如有不对，请谅解和指出。谢谢大家。
正文：

第一章 CSS和文档
----------

1.CSS，称为层叠样式表。使用CSS的理由有：a.易于使用，样式表能大大减少Web创作人员的工作量；b.在多个页面上使用样式，可以创建一个样式表，然后把这个样式表应用到多个页面；c.层叠，CSS还规定了冲突规则；这些规则统称层叠；d.缩减文件大小，它有助于尽可能地缩减文档大小，以便加快下载；e.为将来准备。
2.元素
元素是文档结构的基础，文档中的每个元素都对文档的表现起一定作用。在CSS中，至少在CSS2.1中，这意味着每个元素生成一个框(box，也称为盒。通俗的说，就是包装盒)，其中包含元素的内容。
3.替换和非替换元素
在CSS中，元素通常有两个形式：替换和非替换。
**替换元素（replaced element）**：指用来替换元素的内容部分并非由文档内容直接表示，(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如： <img src=”howdy.jpg” /> <input type="submit" name="submit" value="提交" />浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
**非替换元素（noreplaced element）**：大多数HTML和XHTML元素都是替换元素，这意味着，其内容由浏览器在元素本身生成的框中显示。例如，<span>hi this is noreplaced element</span>就是个非替换元素，文本“hi this is noreplaced element”将由浏览器显示。段落p、标题<h1>到<h6>、表单元格<table></table>和列表<ul><ol>和XHTML的几乎所有元素是非替换元素。
4.元素显示角色
CSS2.1还使用另外两种基本元素类型：块级（block-level）元素和行内（inline-level）元素。
**块级元素**
块级元素生成一个元素框（默认地）它会填充其父元素的内容区，旁边不能有其他元素。换句话说就是它在元素框之前和之后生成了“分隔符”。最为熟悉应该是p和div。替换元素可以是块级元素，不过通常都不是。而列表项是块级元素的特例。除了表现方式与其他块元素一致，列表项还会生成一个标记符——无序列表中这通常是个圆点，有序列表中则是一个数字。这个标记符会“关联”到元素框。除此之外，列表项与其他块级元素相同。
**行内元素**
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。例如a元素、strong元素和em元素。在HTML和XHTML中，块级元素不能继承行内元素（即不能嵌套在行内元素），但是在CSS中，对于显示角色如何嵌套不存在任何限制。要了解这是如何工作的，下面来考虑一个CSS属性display。display有很多值，目前只关注block和inline。考虑下面标记：
```
<body>
<p>This is a paragraph with <em>an inline element</em>within it.</p>
</body>
```
这有2个块级元素（body和p）和一个行内元素（em）。按照XHTML规范，em可以继承p，但是反过来就不行。一般地，XHTML层次结构要求：行内元素可以继承块级元素，而反之不允许。与此不同，CSS就没有这种限制。如下：

```
p{display:inline;}
em{display:block;}
```
这会使元素在一个行内框中生成一个块框，这是完全合法的。不违反任何规范。唯一问题是如果试图如下反转元素的嵌套关系：`<em><p>boom</p></em>`不论通过CSS对显示角色做什么改变，在XHTML中都是不合法。
5.link标记
link标记基本目的是允许HTML创作人员将包含link标记的文档与其他文档相关联。CSS使用这个标记来链接样式表和文档。如有一个sheet1.css的样式表要链接到HTML文件，**代码`<link rel="stylesheet" type="text/css" href="sheet1.css">`。这个样式表并不是HTML文档的一部分，但是仍会由HTML文档使用，这称为外部样式表（external style sheet），为了成功地加载一个外部样式表，link必须放在head元素中，但不能放在其他元素内部（如title）。**对于link标记的余下部分，其属性和值都很直接明了，rel代表“关系（relation）”，在这里，关系为stylesheet。type总是设置为tex/css。这个值描述了使用link标记加载的数据的类型。href属性的值表示样式表的URL。可以是绝对URL和相对URL。media属性，这里使用的值为all,说明这个样式表要应用于所有表现的媒体。CSS2为这个属性定义很多可取值。all:用于所有表现媒体。aural：用于语音合成器、屏幕阅读器和文档的其他声音表现。braille：用于Braille设备表现文档使用。还有其他值不一一说明。3个比较主要的是all、screen和print。注意一个文档可能关联有多个链接样式表。如果是这样，文档最初显示时只会使用rel为stylesheet的link标记。因此，如果希望链接名为basic.css和splach.css的两个样式表，可以如下设置`<link rel="stylesheet" type="text/css href="basic.css/> <link rel="stylesheet" type="text/css href="splash.css/>"`
候选样式表——将rel设置为alternate stylesheet，就可以定义候选样式表，只有在用户选择这个样式才会用于文档表现。
6.@import指命
与link标记类似，@import指命用于指示浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一区别在于命令的具体语法和位置。@import命令必须放在style容器中。要放在其他CSS规则之前，否则将根本不起作用。

```
<style type="text/css">
    @import url(styles.css);
    h1{color:gray;}
</style>
```

7.CSS注释
CSS支持注释。与C与C++注释非常相似，CSS注释也用/*和*/包围：`/*this is a css1 comment*/`,也可以跨多行

/* this is boom
        can be sw
        any
    */
注意不能嵌套。
8.内联样式：只想想为单个元素指定一些样式，而不需要嵌套和外部样式表，就可以使用HTML的style属性来设置一个内联样式。

```
<p style="color:gray">the most wonderful</p>
```
除了在body外部出现的标记（例如，head或title），style属性可以与任何其他HTML标记关联。

更多细节请看《CSS权威指南》

CSS权威指南学习笔记系列(1)CSS和文档的更多相关文章

  1. CSS权威指南学习笔记 —— 初步认识CSS

    层叠样式表(Cascading Style Sheets,CSS)可以影响文档的表现.CSS是依附于文档的,如果不存在某种文档,CSS基本上是没有用的. 为什么会有CSS 在web早期(1990-19 ...

  2. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  3. CSS权威指南学习笔记 —— HTML元素分类

    HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...

  4. css权威指南学习笔记

    2016-08-03 1,继承 一般大多数框模型属性都是不能继承的.如:padding .margin .border .background 都不能继承. 继承值,完全没有特殊性.(就是优先级最低) ...

  5. css权威指南学习笔记--列表与生成内容

    列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|o ...

  6. HTTP权威指南-学习笔记

    目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...

  7. JavaScript 权威指南-学习笔记（一）

    本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...

  8. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

  9. css权威指南读书笔记-第10章浮动和定位

    这一章看了之后真是豁然开朗,之前虽然写了圣杯布局和双飞翼布局,有些地方也是模糊的,现在打算总结之后再写一遍. 以下都是从<css权威指南>中摘抄的我认为很有用的说明. 浮动元素 一个元素浮 ...

随机推荐

  1. angularjs学习笔记三——directive

    AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...

  2. Extjs之rowEditing编辑状态时列不对齐

    Extjs在使用rowEditing的时候,会在每一列加上editor属性,表示当处于编辑状态时这一列的值是什么类型的,后突然发现在rowEditing处于编辑状态时每一列的宽度边框了,如果列数非常多 ...

  3. 栈的链式存储方法的C语言实现

    /* 编译器:Dev-c++ 5.4.0 文件名:linkStack.cpp 代码版本号:1.0 时间:2015年10月15日18:56:06 */ #include <stdio.h> ...

  4. PHP之路——验证码实现

    验证码生成并保存到session <?php //开始session session_start(); //画布大小 $image = imagecreate(100, 40); $color ...

  5. windows10 预览版 中英文官方下载地址+激活密钥+网盘分享

    windows10 预览版 中英文官方下载地址+激活密钥+网盘分享 产品密钥:NKJFK-GPHP7-G8C3J-P6JXR-HQRJR 英语 64 位 (x64)  http://iso.esd.m ...

  6. 构建高可用web站点学习（一）

    单个服务器如何处理请求 web服务器最简单的形式就是一个程序,它侦听HTTP请求,在收到一个HTTP请求之后做出回复.当然在接收请求后服务器所做的东西是我们关注的焦点.在下文中也会提及到node是如何 ...

  7. 《FPGA零基础入门到精通视频教程》-第001b讲软件的破解

    高清视频和配套讲义这里下载 http://www.fpgaw.com/thread-68128-1-1.html 优酷视频地址,不是很清楚

  8. SPSS相关和回归分析

    1.语文和数学成绩都受IQ的影响而且相互影响,则分析语文和数学的关系时需要偏相关分析.2.距离分析用于探索相似性,比如给了某年的12个月三个城市的气温数据,然后分析,会得到一个相似性矩阵,这是个对称阵 ...

  9. 【Oracle】Windows 7下完全卸载Oracle 11g数据库

    闲来无事,想把Oracle 11g重装一下,记录如下:   (1)首先在服务中停止所有的Oracle服务:   (2)开始 -> 程序 -> Oracle-OraDb11g_home1 - ...

  10. angular2 学习笔记 ( Component 组件)

    refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/late ...