css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.通用属性
-
name：名称，可以重复，可以一样;
-
class：类名，可以重复，也可以拥有多个，给CSS用的；如<p class=”one two”></p>;
-
id：唯一标示，不能重复，一般多用在JavaScript中；命名规则与其他语言的标示命名规则一样;
-
title：标题，可以在标签中添加；如<img src=”1.jpg” title=”这是一张图片”>;
2.标签关系
-
后代关系：父子关系（包含关系）;
-
兄弟关系：同父关系;
3.CSS-层叠样式表
-
CSS注释：/注释内容写在这里，给程序员看，页面上不显示/;
-
CSS语法规则：所有符号都以英文输入法状态下输入，要小写，大括号里写属性，每条属性语句都以分号结束，属性值要带像素单位（px）；格式：属性:属性值;
4.CSS的引入方式
-
行内引入：在标签中加样式的引入方式；格式：<标签 style=”background:red; font-size:20px;”>内容</标签>;注意：代码可维护性极差，CSS代码与html结构没有实现分离；影响的范围只在当前标签;
-
内嵌引入：在网页头部中加<style type=”text/css”>CSS样式</style>;注意：代码可维护性比较差，没有实现CSS代码与HTML结构分离，影响范围只在当前页面;
-
外联引入：在网页外创建一个xx.css文件，网页头部中利用<link rel=”stylesheet” type=”text/css” href=”xx.css”>;注意：代码可维护性高，CSS代码与HTML结构完全分离，影响范围整个网站所有引入CSS文件网页中;
5.CSS核心语法：
-
结构格式：选择器{属性：属性值；属性：属性值；…}；例：p{background:red;color:gray;size:20px;};
-
选择器：选择页面元素的工具;
-
大括号：大括号里面写样式内容;
6.选择器
-
基础选择器：
-
通用选择器：用来初始化网页默认样式的，样式表开头就写；格式：*{padding:0;margin:0;};
-
标签选择器:给指定标签加样式；格式：p{color:green;};
-
类选择器：选择制定类选择器样式；格式:.class名{background:pink;};注意：class名在标签中定义，如class=”one”;如果几个块内容样式一样，那么给他们一样的样式就可以;
-
id选择器：唯一标示，不能重复出现；格式：#id名{backgound-image:url(1.jpg);}注意：id名在标签中定义id=”one”;id不能随表加，几个块内容样式一样时几个块的id名都得不一样;;
id和class的区别：注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器，那么即使两个DOM节点样式完全相同，那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护！！！极大的增加了维护的成本;
-
伪类选择器：顺序LoVe HAte原则，可以跳过去，但顺序不能换；分别是链接状态(link)，访问过的状态(visited)，活动状态(hover)和点击状态(active);
描点类：a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 获取焦点时的样式a:focus{};注意：属性中可以加文本属性，背景颜色和图片；a{}与a:link{}实现的效果是一样的;
列表类：li:link{color:yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};注意：属性中可以加文本系列属性，背景颜色和图片等;
-
复合选择器：
-
分组选择器（并集选择器，多元选择器）：用来给多个元素加同一个样式；例：.one,#one,a,span{color:red;font-size:14px;}意思是类one,#one,a标签，span标签有共同属性;
-
后代选择器：给子类元素加属性;例：.one a{text-decoration:none;}意思是类one的后代a标签修饰的内容无下划线;
-
子元素选择器（指定式选择器）：给指定的子元素加属性；例：#one>p{color:red;};意思是给id选择器one的儿子p标签休息的内容加属性;
-
相邻元素选择器：
1.两个紧挨着的兄弟选择器加属性,不给自己加属性，只给后面的兄弟加属性；.one+p{background:red;};
2.one~p{background:green}意思是给one选择器后面的所有p标签元素加属性，前提是他们拥有一个父类;
-
属性选择器：
1.给带有属性的元素的加属性;img[id]{background:red;}给带id的元素加属性;
给带有指定属性值的元素加属性：img[src=”b.jpg”]{background:red;}给带b.jpg的元素加属性;
3.给带有指定字符开头的的元素加属性：img[src^=”b”]{background:red;}给以b开头的所有元素加属性;
4.选择器带有以指定属性值为结尾的元素：img[src$=”b”]{background:red;}给以b结尾的所有元素加属性;
5.选择器带有包含指定属性值的元素:img[src*=”b”]{background:red;}给含b的所有元素加属性;
7.元素包含（显示方式的分类）
-
块元素：用来排版，结构 典型的有：p，p，li，h1，dt;
-
元素自己独占一行显示（与宽度无关）;
-
可以设置宽度和高度;
-
当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度;
-
行内元素： 用来加样式的；span,a,font,strong;注意：行内元素不要给上下的margin和padding，上下会被忽略，左右起作用（一般不用）;
-
元素在一行上显示;
-
不能直接设置宽度和高度;
-
行内块元素：image,input;
-
元素在一行上显示;
-
可以设置宽度和高度;
-
转换关系：行内包含行内；块元素包含块元素，块元素可以包含行内元素;
-
Display: inline 将元素转化为行内元素
-
Display：inline-block 将元素转化行内块元素
-
Display: block 将元素转化为块元素
8.CSS的属性
-
字体有关属性：
-
font-size:字体大小，多少像素，px;
-
font-weight:字体粗细，bold（700-900），normal，可以写100-900;
-
font-style：字体倾斜，italic，normal;
-
font-family:字体，微软雅黑，黑体;
-
属性连写：font: font-style font-weight font-size/line-height font-family;注意： font属性联写必须有 font-size 和font-family(其他属性可以不写)；font-size 和font-family的顺序不能换;
-
文本：
-
color:颜色;
-
text-indent：缩进
