共计 4299 个字符，预计需要花费 11 分钟才能阅读完成。
在学完 HTML 的根底内容之后，开始接触到 CSS，发现 bracket 的确十分不便，快捷键 ctrl+ e 即可关上光标所在位置的标签的 css 内容，十分不便进行批改。以下是 CSS 的基础知识笔记（还没有学到盒模型）：
1.CSS 指层叠样式表。款式通常贮存在样式表中，定义如何显示 HTML 元素。把款式增加到 HTML 中，是为了解决内容与体现拆散的问题。
内部样式表可极大进步工作效率，通常存储在 CSS 文件中。多个款式定义能够层叠为一。
样式表极大地提高了工作效率。它使得开发者能够同时扭转站点中所有界面的布局和外观。
2. 怎么应用 CSS：参考 w3school HTML 基础教程中的 HTML CSS。内部样式表能够将款式利用到很多界面，外部样式表实用于单个文件的特地款式（在 head 局部中）。个别元素实用于内联款式（在某一元素的属性中）。
当同一个 HTML 元素被不止一个款式定义时，一般而言，所有的款式会依据上面的规定层叠于一个新的虚构样式表中，其中（4）领有最高的优先权。（如果有的属性只在低优先度的样式表中被选择器定义了，而在搞优先度的样式表中未被定义，则改属性会从低优先度的样式表中继承过去。）
1）浏览器缺省设置
2）内部样式表
3）外部样式表（位于 <head> 标签外部）
4）内联款式（在 HTML 元素外部）
3.CSS 语法分为 selector 和 declaration。Selector 能够有多个，用逗号隔开。
Selector 即为要扭转款式的 HTML 元素（例如 h1）。每个 declaration 由一个 property 和一个 style attribute 组成。
最好每行只形容一个属性，这样可读性比拟强。
CSS 对大小写不敏感，除了 class 和 id 的名称以外。
4.CSS 的语法有继承的原理。子元素总是从父元素继承属性。（例如，p，td，ul，ol 等都是 body 的子元素。）
新式浏览器无奈了解继承，须要从新把子元素写一遍。
能够独自创立针对子元素的非凡规定，这样它就能够解脱父元素的规定了。
注：font-family 最初加上 sans-serif，也是为了保障可能调用这个字体族外面的字体，因为大多数计算机里都有这种字体。
5. 派生选择器：通过上下文关系来定义某些原有元素的款式。例：
li strong{
font-style: italic;
font-weight: normal;
}意为将列表元素中的 strong 的含意由加粗变成斜体。
6.id 选择器：应用“#”来为标有特定 id 的 HTML 元素制订特定的款式。例：
HTML:<p id=”red”> 这个段落是红色 </p>
CSS:#red {color:red}Id 选择器常被用于建设派生选择器。一个 id 选择器作为派生选择器能够被应用很屡次，别离针对一个 id 下不同的元素。例：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}id 选择器也能够独立发挥作用：
#sidebar {
border: 1px dotted #000;
padding: 10px;
}依据这条规定，id 为 sidebar 的元素将领有一个像素宽的彩色点状边框，同时其四周会有 10 个像素宽的内边距（padding，外部空白）。老版本的 Windows/IE 浏览器可能会疏忽这条规定，除非特地地定义这个选择器所属的元素：
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}7. 类选择器：应用一个点号来示意。
CSS:
.center {text-align:cener}HTML:
<h1 class="center">
This heading will be center-aligned
</h1>和 id 选择器一样，类选择器也可被作为派生选择器。
.fancy td {
color: #f60;
background: #666;
}也能够在某种元素中基于类进行抉择：
td.fancy {
color: #f60;
background: #666;
}这样，则 class 为 fancy 的单元格会变成灰色背景的橙色字，而 class 为 fancy 的其余元素，以及 class 不为 fancy 的单元格，都不会变。
8. 属性选择器
属性选择器在为不含 class 或 id 的表单设置款式时特地有用。
能够为带有某些属性的元素（例：a 带有属性 href）设置格局。
[href]
{color:red;}还能够为属性为某些指定值，或是蕴含某些指定值的元素设置格局。
指定某些值：[title=W3School]
蕴含某些值，由空格连贯几个值：[title~=hello]
蕴含某些值，由连字符连贯几个值：[lang|=en]
（具体的属性选择器手册 w3school 上有）
9.CSS 如何连贯到 HTML：在 head 局部中通过 < link > 标签链接。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>内部样式表中不能蕴含任何 HTML 标签。
单个文档须要非凡款式时，倡议应用外部样式表。例如：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>当款式只用于一个款式时，才思考内联款式。因为这样会使体现和内容混淆在一起，损失掉样式表的许多劣势。例如：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>10.CSS 款式
1）CSS 背景：通过 background-color 调背景色，background-image 设置背景图像。能够通过 background-repeat、background-position 等调节背景图像的是否反复、地位等等信息。
用地位关键字确定地位，则（上下左右中）能够同时抉择两个不矛盾的同时应用，空格隔开。
用百分比确定地位，则第一个数字是程度地位，第二个数字是垂直地位。默认为 0% 0%。
用 px 长度值确定地位，从左上角开始算。默认为 0 0。
Background-attachment 属性能够使背景图像绝对可视区固定。
2）CSS 文本：通过 text 相干的文本属性，能够定义文本的外观。
text-indent 属性能够继承。它也能够应用各种长度单位。可正可负。
Text-align 不影响元素的地位，只有元素其中的文本受影响。
Word-spacing 和 letter-spacing 也可正可负。可应用 em 和 px。
text-transform：切换大小写。
如果多个 Text-decoration 利用于同一元素，会替换而不是累积。
White-space：解决空格和换行符。（具体应用见文档）
Line-height：设置行间距
文本方向：只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时，direction 属性才会发挥作用。
3）CSS 字体：倡议在 font-family 规定中都提供一个通用字体系列以作为备选。例如：h1 {font-family: Georgia, serif;}
这样，在零碎没有装置指定字体的状况下，仍然有候选字体能够抉择。
或者指定一系列相似字体：
p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}这样用户代理就会依照优先程序进行查找，并且选出最靠前的已装置字体进行应用。
如果字体名中有空格、#、$ 等符号，则字体名须要套引号。如果该 font-family 属性在 HTML 中，自身就有双引号，则用单引号。（或者反之）
Font-style 中，italic 和 oblique 是两种不同的斜体（italic 对字母构造有稍微批改）。在个别的浏览器中，二者没什么区别。
在字体大小（font-size）中，默认的 1em=16px。（如果父元素中 font-size 扭转过，则依照扭转后的值算即可）
应用 em 则能够在所有浏览器中调整文本大小。不过在 ie 中有问题，文本会更大或更小。
可用 font-variant 属性来应用小型大写字体。
4）CSS 链接：链接有四种状态，可依据不同状态调整链接的文本外观：
a:link {color:#FF0000;} /* 未被拜访的链接 */
a:visited {color:#00FF00;} /* 已被拜访的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针挪动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */其余各种文本属性这里也实用。
例：做一个方框链接
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{background-color:#7A991A;}
</style>
</head>
<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>5）CSS 列表：list-style 中只有三种属性，image，position，type。非常简单。
6）CSS 表格：corder-collapse 如果设为 collapse，则外边框和单元格边框相邻合并，编程单线条。其余属性也较简略，应用可间接看手册。（不过属性品种较多，参见 w3school 的 CSS 属性手册。理论设计中要调整数值很多）
7）CSS 轮廓：outline，属性非常简单，但属性的值较多。看手册即可。
接下来要学习 CSS 盒模型和定位相干常识，而后开始尝试制作动态网页啦！
