CSS
概念：CSS:层叠样式表(Cascading Style Sheets)
css可以用来为网页创建样式表，通过样式表可以对网页进行装饰。
所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低的
css可以分别为网页的各个层次设置样式。
优势：内容与表现分离
网页的表现统一，容易修改。
丰富的样式，使得页面布局更加灵活。
减少网页的代码量，增加网页的浏览速度，节省网络带宽。
运用独立于页面的CSS，有利于网页被搜索引擎搜录。
基本语法
CSS由两个主要的部分构成：选择器，以及一条或多条声明。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来：
p {color:red;text-align:center;}
为了让CSS可读性更强，你可以每行只描述一个属性。
实例：
p{color:red; text-align:center;}
注释
CSS注释以 “/” 开始, 以 “/” 结束, 实例如下:
/这是个注释/
p{
text-align:center;
/这是另一个注释/
color:black;
font-family:arial;}
内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。
你可以使用style>标签在文档头部定义内部样式表。
在头标签里定义内部样式
<head>
<style>
p{
color: hotpink;
}
</style>
<head>行内样式
由于要将表现和内容混杂在一起，行内样式会损失掉样式表的许多优势。
请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用行内样式，你需要在相关的标签内使用样式（style）属性。多个样式之间用(;)隔开
style 属性可以包含任何 CSS 属性。
也可以多重样式重叠
例：
<p style="color: aquamarine;">使用行内样式该表这段文字的颜色</p>外部样式
外部样式表:当样式需要应用于很多页面时，外部样式表将是理想的选择
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用link>标签链接到样式表。link标签在文档的头部
浏览器会从文件style.css中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件中不能包含任何的HTML标签。
样式表应该以.css扩展名进行保存
“就近原则”：
如下方例子：
对P标签设置了3种样式表：行内样式、内部样式、外部样式，这三类样式表字体颜色方面有冲突，因为行内样式离P标签最近，所以最终显示的字体颜色为红色，继承内部样式表的背景颜色，外部样式表的字体加粗
<head>
<link rel="stylesheet" href="../css/style.css"/>
<style>
p{
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p style="color: red;">使用外部样式表改变这段文字的颜色</p>
<body>CSS选择器
标签选择器
标签选择器(元素选择器)
文档的元素就是最基本的选择器
如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a
id选择器
要给添加样式的标签设置一个ID名称
可以为标有特定ID的HTML元素指定特定的样式(独一无二)
HTML元素以Id属性来设置ID选择器，CSS中ID选择器以”#”符号来定义
格式：#ID名{
}
Class选择器
类选择器：就是给要添加样式的标签加上一个类名，关键字class
用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
在HTML中以class属性表示，在CSS中类选择器以一个点”.”符号显示。
语法：.类名（例如:.class1{..}）
并集选择器
并集选择器:创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
或者理解成将多个相同样式定义的选择器以逗号进行分组。
语法：选择器，选择器，选择器{}
后代选择器
多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边
即右边的选择器只能在左边的选择器范围内选择
子元素选择器
子代选择器和后代选择器很像，不过只选择匹配元素中的直接后代
目标元素为匹配第一个选择器的元素的直接后代,且匹配第二个选择器
用于选择指定标签元素的第一代子元素
语法：第一个选择器>第二个选择器
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
<style>
/*第一代元素*/
.food>li{
border: 1px solid red;
}
/*后代元素中的第一个子元素,指的是该元素的所有后代，包括后代的后代*/
.food li:first-child{
background-color: yellow;
border: 1px solid red;
}
/*后代元素中的最后一个子元素，指的是该元素的直接下一代*/
.food >li:last-child{
background-color: gray;
border: 1px solid right: ;;
}
</style>兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
例：
<head>
<style>
h1+#p1{
color: red;
}
.p2+p{
color: blue;
}
</style>
</head>
<body>
<div class="test1">
<h1>山东省景点</h1>
<p id="p1">五岳独尊-泰山</p>
<p>孔孟之乡-济宁</p>
<p class="p2">江北水城-聊城</p>
<p>人间仙境-蓬莱</p>
</div>
</body>伪类选择器
动态伪类选择器：根据条件的改变匹配元素，是相对于文档的固定状态来说的。
:link选择器 ：选择未访问链接元素
:visited选择器 ：选择已访问的链接元素
:hover选择器 ：鼠标悬停在其上的元素
:active选择器： 被用户激活的元素，通常意味着用户即将点击该元素
属性选择器
对带有指定属性的 HTML 元素设置样式
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
例：
<head>
<style>
a[href="#"]{
color: red;
font-size: 30px;
}
<style>
<head>
<body>
<a href="#" title="百度" >百度一下</a>
<body><head>
<style>
form input[name="UserName"]{
color: red;
background-color: yellow;
}
<style>
<body>
<form name="input" action="" method="get">
<input type="text" name="UserName" value="zhangsan" size="20" /><br />
<input type="button" value="submit" />
</form>
<body>CSS基本样式
文本样式
1.text-align：设置文本水平对齐方式，常用值： left right center
2.line-height：设置文本行高属性
3.text-indent：设置文本首行缩进
4.text-decoration：设置文本装饰文本样式有无下划线
常用属性：none 默认值：标准 （常用在超链接设置，超链接默认属性是text-decoration：underline）
underline：设置文本下划线
overline：设置文本上划线
line-through：设置文本删除线
在style里设置
背景样式
背景颜色
background-color：#F5E2EC;
背景透明
background:transparent;
背景图片
background-image ：url(/image/bg.gif);
背景固定
background-attachment ：fixed;
背景重复
background-repeat ： repeat;
background-repeat ：no-repeat;
background-repeat ： repeat-x;
background-repeat ： repeat-y;
指定背景位置
background-position : 90% 90%;
background-position : top;
background-position : buttom;
background-position : left;
background-position : right;
background-position : center;
链接样式
注意：如果要给链接添加链接样式时，顺序如下
未访问的连接样式
a:link{
color: red;
text-decoration: none;
}已访问的连接样式
a:visited{
color: blue;
text-decoration:none;
}鼠标移动到连接
a:hover{
color: #FFFF00;
text-decoration:none;
}鼠标点击
a:active{
color: darkmagenta;
text-decoration: none;
}注意：最常用的 a:link a:hover 不要添加过多的链接样式
列表样式
类型
list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置
list-style-position: outside;(外) inside;
图像
list-style-image: url(..);
表格样式
如果需要把表格显示为单线条边框，请使用 border-collapse 属性
table,th,td{
border: 1px solid green;/*设置边框的样式*/
}table{
width: 500px;
border-collapse: collapse;/*折叠边框*/
text-align: center;
}