一.什么是css
CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
二.css的好处
1.内容与表现分离
2.网页的表现统一，容易修改
3.丰富的样式，使页面布局更加灵活
4.减少网页的代码量，增加网页浏览器速度，节省网络带宽
5.运用独立页面的css,有利于网页被搜索引擎收录
三.语法
/* 语法 */ 选择器{ 声明1; 声明2; 声明3 ....... } /* 例子 */ h1{ font-size: 25px; color: red; }
四.css的3种导入方式
4.1 行内样式:行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
<p style="color:red">我的一个段落</p>
4.2 内接样式(内嵌式):内嵌式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
4.3 外接样式:外接样式又分为两种:1.链接式,2.导入式
4.3.1 链接式,注意href后面的路径.
4.3.2 导入式
4.4导入式和外链式的区别:
1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
4.5 注意事项:
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会像导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
五.基础选择器
5.1 基本选择器
<!-- css选择器:1,基本选择器.2,高级选择器
1.1 标签选择器
特点:
1.标签选择器 可以选中所有的标签元素
2.不管标签藏的有多深,都可以被选中.所以标签选择器是"共性"的,而不是"特性"的.
1.2 id选择器
特点:
1.使用#id名的方式选中
2.id不能重复,id命名规范:要以字母开头,可以有数字,下划线,严格区分大小写!
3.任何标签都可以设置id
1.3 类选择器
特点:
1.使用.class名来选择
2.class名可以重复(反过来说,就是把当前标签设置成类的一个属性)
3.一个标签可以属于多个类(class="jack lucy lili"),每个类用空格隔开
实例:
可以对块级标签设置长宽
不可以对内联标签设长宽（它只会根据他的文字大小来变）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器</title> <style type="text/css"> /*标签选择器:匹配所有p标签*/ p{ color:red; font-size: 30px; } /* 如果一个标签下有其他的标签,那么其他的标签也会被统一样式.ul下面的li和span都会被统一样式 */ ul{ color: green; font-size:35px; } /*匹配指定的标签 */ #s1{ background: green } #s2{ font-size: 23px } /* 和标签选择器一样,id标签下如果有其他的标签,也会被统一样式 */ #s_box{ font-size:27px; background: pink } .title_h3{ background-color: green; } .title_h4{ background-color: pink; } /* 同样,一个类标签下有其他标签,也会被统一样式 */ .h_box{ color: red; } </style> </head> <body> <div> <p>我是一个段落</p> <ul> <li>哈哈哈哈 <span>我是span</span> </li> <li>我是一个列表元素</li> </ul> </div> <div> <div> <div> <div> <div> <p>我是另外一个段落</p> </div> </div> </div> </div> </div> <div> <span id="s1">浙江省</span> <span id="s2">上海市</span> </div> <div id="s_box"> <!-- id选择器对被选择的id下面所有的标签生效 --> <span>北京市</span> <span>天津市</span> </div> <div> <div class="h_box"> <h3 class="title_h3">我是一个三级标题.</h3> <h4 class="title_h4">我是一个四级标题.</h4> </div> </div> </body> </html>
六.组合选择器
6.1 后代选择器:在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器.选择器之间的空格是一种结合符（combinator）.后代选择器两个元素之间的层次间隔可以是无限的.div h2表示div下面所有的h2标签,无论div和h2之间的层次间隔是怎样的.
6.2 子元素选择器:用>表示指向子元素(> 两端可以有空格),只能选择作为某元素子元素的元素.
注意:子元素可以结合后代选择器使用,直接是顶层父标签 子元素选择器.
6.3 交集选择器:相交的部分就是要设置属性值的标签.
6.4 并集选择器(多元素选择器):多个元素设置统一样式.
6.5 属性选择器:根据属性值查找,一般在表单中使用比较多.
找到所有title属性等于hello的元素： [title="hello"] { color: red; } 找到所有title属性以hello开头的元素： [title^="hello"] { color: red; } 找到所有title属性以hello结尾的元素： [title$="hello"] { color: red; } 找到所有title属性中包含（字符串包含）hello的元素： [title*="hello"] { color: red; } 找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素： [title~="hello"] { color: red; }
总结属性选择器:包含某些字符使用*
以某些字符开头使用^
以某些字符结尾使用$
6.6 伪类选择器:
anchor伪类：专用于控制链接的显示效果. (爱恨原则)
1.没有被访问过的a标签的样式使用link
2.被访问过后的a标签样式使用visited
3.鼠标悬停时a标签的样式使用hover
4.鼠标点住a标签的样式使用active
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style type="text/css"> /*伪类选择器*/ /*没有被访问过的a标签的样式使用link*/ .box ul li.item1 a:link{ color: red; } /*visited表示被访问过后的a标签样式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标点住时a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; } </style> </head> <body> <div class="box"> <ul> <li class="item1"> <a href="#">张三</a> </li> <li class="item2"> <a href="#">李四</a> </li> <li class="item3"> <a href="#">王五</a> </li> <li class="item4"> <a href="#">马六</a> </li> </ul> </div> </body> </html>
before,after伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style type="text/css"> /*伪元素选择器*/ /*设置第一个字符的样式*/ p:first-letter{ color: red; font-size:30px; } /*一般都有一个conten属性(内容的意思)*/ /*使用befor和after伪元素必须结合content属性使用*/ p:before{ content: "jack"; } /**/ p:after{ content: "#" } </style> </head> <body> <!-- 伪元素选择器 --> <p>我是一个段落</p> </body> </html>