CSS一般称为CSS样式表或层叠样式表（级联样式表），
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及总体排版等，并且还能够针对不一样的浏览器设置不一样的样式。php
CSS规则由两个主要部分构成：选择器以及一条或多条声明。
每条声明由一个属性和一个值组成。属性(property)是设置的样式属性，每一个属性有一个值，属性和值被冒号分开。css
好比 selector{property：value}
选择器一般是须要改变样式的HTML元素。html
好比 h1{color:red; font-size:14px;} h1是选择器，color和font-size是属性，red和14px是值。
注意：
若是定义不止一个声明则须要用分号将每一个声明分开。例如：p{text-align:center;color:red}
若是值为若干单词，则要给值加引号： 例如：p {font-family: "sans serif";}api
选择器的分组浏览器
h1,h2,h3,h4,h5,h6 {
color: green;
}
继承及其问题：根据 CSS，子元素从父元素继承属性。布局
body {
font-family: Verdana, sans-serif;
}
CSS 建立样式表分为三种状况：字体
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div{width:200px; height:200px; border:1px solid red;}
</style>
</head>
<div style="width:200px;height:100px;border:1px solid black;"></div>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
样式优先级：内联样式>内部样式>外部样式url
三种样式表区别：spa
样式表 优势 缺点 使用状况 控制范围 行内 书写方便 没有实现样式和结构相分离 较少 控制一个标签(少) 内部 部分结构和样式相分离 没有完全分离 较多 控制一个页面(中) 外部 彻底实现结构和样式相分离 须要引入 最多，推荐 控制整个站点(多)
id 选择器能够为标有特定 id 的 HTML 元素指定特定的样式，id 属性和身份证同样具备惟一性。
HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。
注意： id 属性不能以数字开头。设计
语法：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
class 选择器用于描述一组元素的样式，也叫作类选择器。
class 能够在多个元素中使用，而且一个元素也能够指定多个类名。
在 CSS 中，类选择器以一个点 "." 号来定义。
一样的类名的第一个字符也不能使用数字。
语法：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
相同点：
不一样点：
最多见的CSS选择器就是元素选择器，也就是标签选择器，也就是在HTML中元素的最基本的选择器。
语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优势是能快速为页面中同类型的标签统同样式，同时这也是他的缺点，不能设计差别化样式。
background 属性用于定义 HTML 元素的背景。
定义元素背景效果的 CSS 属性有五种：
background-color 背景颜色
background-image 背景图像
background-repeat 背景图像设置水平或垂直平铺或不平铺
background-position 背景图像设置定位
background-attachment 背景图像设置固定或滚动
背景属性简写：
body{
background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
当使用简写属性时，属性值的顺序依次为：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
CSS文本格式主要分为：文本颜色(color)、文本对齐方式、文本修饰、文本阴影、文本缩进、文本间距、字间距、文本空白处理、文本转换。
文本对齐方式:text-align属性有四个值：left,center,right,justify(两端对齐)。属性默认值为auto。
文本修饰：text-decoration 属性用来设置或删除文本的修饰。
主要是用来删除超连接的下划线，也可使用其余值来设置文本的修饰。
text-decoration:overline， 设置文本上划线。
text-decoration:line-through， 设置文本中间划线。
text-decoration:underline， 设置文本下划线。
文本阴影：text-shadow: x y shadow color；
其中 x 是水平阴影的偏移值，
y 是垂直阴影的偏移值，
shadow 用于指定阴影的模糊值，即模糊效果的做用距离，不容许负值。
color 指定阴影的颜色。该属性有两个做用，产生阴影和模糊主体。
文本缩进：用来指定文本的首行缩进，容许为负值，若是值是负数，第一行则向左缩进。
CSS表示为：text-indent:2em，em 是相对文字大小的单位，1em 就是1个文字大小，2em 就是两个文字大小。
文本间距：行高，也就是文本行的高度。例如：line-height：22px；
字间距：letter-spacing 和 word-spacing 这两个属性均可用来增长或减小文本间的空白，即字间距。
不一样的是：
letter-spacing 属性设置字符间距，而 word-spacing 属性设置单词间距。
注意：
word-spacing 属性对中文无效，所以在设置中文的字间距时请使用 letter-spacing 属性。
letter-spacing 和 text-align:justify 是两个冲突的属性，不能同时使用；
text-align:justify 是设置内容根据宽度自动调整字间距，使各行的长度刚好相等，实现文本两端对齐效果，
而 letter-spacing 是指定一个固定的字间距。
文本空白处理：white-space 属性指定元素内的空白如何处理，默认值为 normal 空白会被浏览器忽略。
该属性还有4个值：
nowrap 文本不会换行，禁止换行，文本会在同一行上继续，直到遇到<br/> 标签为止。
pre 空白会被浏览器保留，这种方式相似 HTML 中的 <pre> 标签，用于定义预格式文本。
pre-wrap 指定保留空白符序列，可是正常地进行换行。
pre-line 指定合并空白符序列，可是保留换行符，并容许自动换行。
文本转换：text-transform 属性控制文本中的字母。
是用来指定在一个文本中的大写和小写字母，可用于将全部字句变成大写或小写字母，或每一个单词的首字母大写。
text-transform:capitalize; 定义文本中的每一个单词以大写字母开头。
text-transform:uppercase; 定义文本仅有大写字母。
text-transform:lowercase; 定义文本仅有小写字母。
font 属性可用于设置文本字体，定义样式，如加粗，大小等，属于复合属性，也叫作简写属性。
简写顺序：
font-style(字体样式) --> font-variant(字体变形) --> font-weight(字体加粗) --> font-size(字体大小)/line-height --> font-family(设置文本字体)
注意，font-size 和 font-family 的值是必需的，不然无效。
(1)是绝对或相对大小，可使用px、em、%和em组合来设置。
<head>
<style>
body{font-size:100%}
p{font-size:2.5em; } /* 2.5*16=40px */
</style>
</head>
<body>
<p>使用%和em组合设置</p>
</body>
(2)font-style 属性主要用于指定斜体文字。
属性有三个值：
连接的四种状态是：
做用：1 设置不一样的列表项标记 2 设置列表项标记为图像
修改列表项标记使用 list-style-type，使用图像做为标记能够利用 list-style-image 属性完成。
无序列表常常用来作导航栏菜单，一般都须要隐藏无序列表项的标记，那么就使用 list-style-type:none，表示无标记。
list-style-type 属性的默认值为 disc 实心圆，即小黑点。
除了无标记还能够修改标记，例如circle空心圆，square实心方块。
有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。
要指定列表项标记的图像，可使用 list-style-image 属性，只须要简单地设置一个 url() 值，就能够将图像做为标记类型。
列表属性简写：list-style：list-style-type，list-style-position，list-style-image;
表格边框： border
表格宽度和高度：width 和 height
表格对齐:text-align 和 vertical-align
表格内边距:tr,td的padding设置
<head>
<style>
#tab{
width:50%;
font-family:"微软雅黑";
/*设置是否将表格边框合并为单一线条的边框*/
border-collapse:collapse;
}
#tab th,#tab td{
/*表格边框*/
border:1px solid #7AC942;
/*表格内边距*/
padding:5px 10px;
}
#tab th{
color:white;
background-color:#9C3;
font-size:1.125em;
/*左对齐*/
text-align:left;
padding-top:4px;
padding-bottom:8px;
}
#tab .list td{
/*边颜色*/
color:#000;
/*背景颜色*/
background-color:#FFC;
}
caption{
margin-bottom:10px;
font-weight:bold;
}
</style>
</head>
<body>
<table id="tab">
<caption>食物类别</caption>
<thead>
<tr class="list">
<th>粗粮</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
</thead>
<tbody>
<tr>
<td>大豆</td>
<td>黄瓜</td>
<td>香蕉</td>
</tr>
<tr class="list">
<td>高粱</td>
<td>菠菜</td>
<td>柠檬</td>
</tr>
<tr class="list">
<td>燕麦片</td>
<td>白菜</td>
<td>西瓜</td>
</tr>
</tbody>
</table>
</body>
h1{color:gray;}
p{color:gray;}
能够写成：h1, p{color:gray;}
.div1 p{
color:white;
}
.div1 p a{
color:yellow;
font-weight:bold;
}
<div class="div1">
<p>嵌套选择器
<a href="#">深层嵌套选择器</a>
</p>
</div>
*{
padding:0;
margin:0;
}
<head>
<style>
[title]{
color:red;
}
</style>
</head>
<body>
<h1>h1 标题不带有 title 属性</h1>
<h2 title="标题">h2 能够设置样式</h2>
<a href="#" title="连接">超连接能够设置样式</a>
</body>
<head>
<style>
[title=Hello]{
color:blue;
}
</style>
</head>
<body>
<h1 title="Hello world">h1 标题 title="Hello world"</h1>
<h2 title="Hello">h2 能够设置样式</h2>
<a href="#" title="Hello">超连接能够设置样式</a>
</body>
：[attr~=value]：[attr|=value] 例如：把包含 title='Hello' 的元素的字体设置为绿色，使用 ~ 分隔属性和值
<head>
<style>
[title~=Hello]{
color:green;
}
[lang|=zh]{
color:gray;
}
</style>
</head>
<body>
<h1 title="world">h1 标题 title="world"</h1>
<h2 title="Hello">h2 能够设置样式</h2>
<h3 title="Hello Web">h3 能够设置样式</h2>
<a href="#" title="Hello world">超连接能够设置样式</a>
<a href="#" lang="zh-TW">超连接能够设置样式</a>
</body>
<head>
<style>
input[type="text"]{
width:150px;
display:block;
margin-bottom:5px;
background-color:yellow;
}
input[type="button"]{
width:120px;
margin-top:5px;
background-color:green;
}
</style>
</head>
<body>
<form name="input" action="demo.php" method="get">
用户名：<input type="text" name="user" placeholder="请输入登陆名">
昵 称：<input type="text" name="name" placeholder="请输入角色名">
<input type="button" value="查询">
</form>
</body>
CSS 伪类是用来向一些选择器添加特殊的效果。
语法：选择器:伪类{attr:value;}
CSS 类也可使用伪类：选择器.class:伪类{attr:value;}
在浏览器中，连接的不一样状态均可以以不一样的方式显示：
a:link{color:#FF0000;} /* 未访问的连接显示为红色 */
a:visited{color:#00FF00;} /* 已访问的连接显示为绿色 */
a:hover{color:#FF00FF;} /* 鼠标划过连接显示为紫红色 */
a:active{color:#0000FF;} /* 已选中的连接显示为蓝色 */
注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 以后，
a:active 必须被置于 a:hover 以后，才是有效的。
<body>
<p>第一个 p 元素</p>
<p>第二个 p 元素</p>
<p>第三个 p 元素</p>
</body>
选择做为任何元素的第一个子元素 p。选择器使用 p:first-child。
选择全部 p 元素中的第一个子元素 b。选择器使用 p>b:first-child。
选择全部做为第一个子元素 p 中的全部 b 元素。选择器使用 p:first-child b。
使用 :lang 伪类能够为不一样的语言定义特殊的规则：
html:lang(zh-CN){
color:blue;
}
:lang(en)>p{
color:gray;
}
CSS 伪元素是用来为一些选择器添加特殊的效果。
语法：选择器:伪元素{attr:value;}
CSS 类也可使用伪元素：选择器.class:伪元素{attr:value;}
h1:before{
content:url(images/logo.gif);
}
h1:after{
content:url(images/logo.gif);
}
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容，该属性用于定义元素以前或以后放置的生成内容。
content 的内容通常能够为四种：
块级元素(block-level):每一个块元素一般都会独自占据一整行或多整行，
能够对其设置宽度、高度、对齐等属性，经常使用于网页布局和网页结构的搭建。
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
行内元素(inline-level):不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，
通常不能够设置高度，宽度，对齐等属性，经常使用于控制页面中文本的样式。
常见的行内元素有<a/>、<strong/>、<b/>、<em/>、<i><i/>、<del/>、<s>、<ins>、<u>、<span>等， 其中<span>标签最典型的行内元素。
注意：
它们都是文字类块级标签，里面不能放其余块级元素。
在行内元素中有几个特殊的标签——<img />、<input />、<td>，
能够对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
CSS层叠性：是指多种CSS样式的叠加。
CSS继承性：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。
想要设置一个可继承的属性，只需将它应用于父元素便可。简单理解就是： 子承父业。
CSS优先级：定义CSS样式时，常常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
使用了 !important声明的规则。
考虑权重时，须要注意的一些点：
盒子模型：就是把HTML页面中的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。
每一个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
盒子边框（border）
语法：border : border-width || border-style || border-color 经常使用属性值：none：没有边框即忽略全部边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、 dotted(点线)、double(双实线)
1 外边距实现盒子居中
知足两个条件：
而后给元素左右的外边距都设置为auto。
例如：.header{ width:960px; margin:0 auto;}
2 文字盒子居中
按照优先使用宽度 （width）、其次 使用内边距（padding）、再次 外边距（margin）。
width > padding > margin
缘由：
语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float:属性值;} 属性值能够是left，right，both，none。
目的：为了让多个块级元素同一行上显示。
-static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
彻底脱标，不占有位置，不随着滚动条滚动。