在学完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盒模型和定位相干常识，而后开始尝试制作动态网页啦！