在学完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盒模型和定位相关知识，然后开始尝试制作静态网页啦！
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。