1.
CSS(Cascading Style Sheet) 级联（层叠）样式表！ 网页样式的设计！
96年 css1.0
04年 css2.1
10年 css3.0
优势：
01.页面和样式的分离
02.便于我们修改和使用
03.多个页面的应用，css样式可以复用
04.层叠，一个元素可以多次设置样式！
05.页面压缩
设置HTML文件样式的计算机语言！
可以对网页中的文字，颜色，字体大小，边框，背景，高度，网页定位等样式的设定！
例子：
之前设计表格的时候！ 每一个单元格都是td！
我们想让每个td的内容都居中显示？？？ 我们怎么做？？
在每个td上 都加上align="center"! 但是麻烦！
现在 我们可以通过 css的选择器 来统一给整个页面中的所有td设置样式！
怎么设置呢？？
td{ //页面中所有的td内容 水平居中！
text-align:center;
}
CSS的语法规则：
选择器｛ //开发者模式 便于阅读
属性1：值1;
属性2：值2;
属性3：值3; //最后一个;可以省略不写！但是不建议省略！
｝
选择器｛属性1：值1;属性2：值2;属性3：值3;｝ //生产者模式 减少内存
HTML中引入CSS样式的3种方式：
例子：
假如我们是一个包工头，现在需要对我们已经建好的楼房进行装修！
两种选择：
01.自己装修 == 》行内样式 <a href="#" style="color:red">百度</a>
02.别人装修
001.自己人装修 == 》内部样式
002.其他人装修 == 》外部样式
如果说自己人和其他人以及你自己都想干装修！
肯定是自己说了算！！！！
css样式的优先级：
行内样式 > 内部样式 > 外部样式
导入外部样式的两种方式：
01.链接式 <link rel="stylesheet" href="外部文件位置" type="text/css">
02.导入式
<style type="text/css">
@import "外部文件位置";
</style>
链接式的导入式的区别：
01.链接式的link属性XHTML @import 属于css2.1
02.链接式优先加载css样式，再加载页面中的html内容！
03.@import先加载页面中的html内容，再加载css样式！
04.@import存在浏览器兼容性问题！
css中最重要就是 选择器：
选择器：
1.基本选择器
01.标签选择器 p{} a{} div{}
02.类选择器 .a 获取页面中class属性值是a的元素 可以有N个
<span class="a">第一个span标签</span>
<span class="a">第二个span标签 </span>
<span class="a">第三个span标签</span>
<div class="a">第1个div标签</span>
<div class="a">第2个div标签</span>
03.id选择器 #a 获取页面中id属性值是a的元素 只能有1个
<div id="a"></div>
2.高级选择器
01.交集选择器
02.并集选择器
03.层次选择器
01.后代选择器
02.子选择器
03.相邻兄弟选择器 之后的一个兄弟元素
04.通用兄弟选择器 之后的所有兄弟元素
04.结构伪类选择器 *****
05.属性选择器 [属性=属性值]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>标签选择器</title> <!-- 内部样式设置 style标签应该写在head标签中 <style type="text/css"> h1{ /* h1 页面中所有的h1标签*/ color: red; /*color 属性 red 属性值*/ font-size: 50px; } </style> 我们css的优势之一是 网页和样式的分离--> <!-- 链接式 <link rel="stylesheet" type="text/css" href="css/first.css">--> <!--导入式--> <style type="text/css"> @import "css/first.css"; </style> </head> <body> <!--需求：让页面中所有的h1标签 字体颜色为 红色 字体大小50px--> <h1 style="color: pink">这是1级标题</h1> <!--验证优先级--> <h1>这是1级标题</h1> <h1>这是1级标题</h1> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>类选择器</title> <!--需求： 让页面中的class属性值为box的盒子颜色变成红色--> <style type="text/css"> .box{ /*.box 类选择器 选取页面中的class属性值为box的元素*/ color:red; } /* 我想让2 3 盒子也有这个样式*/ .boxSize{ font-size: 52px; } </style> </head> <body> <div class="boxSize">这是第1个盒子</div> <!--说明这个div同时具有两个class样式--> <div class="box boxSize">这是第2个盒子</div> <div class="box boxSize">这是第3个盒子</div> <div class="box">这是第4个盒子</div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>id选择器</title> <!--在一个页面中id属性值相同的而只能有一个！ 页面id唯一！--> <style type="text/css"> /*给id="box2"的元素设置 颜色为 红色*/ #box2{ color: red; } /*给id="box3"的元素设置 字体大小 50px*/ #box3{ font-size: 50px; } </style> </head> <body> <div>这是第1个盒子</div> <div id="box2">这是第2个盒子</div> <div id="box3">这是第3个盒子</div> <div>这是第4个盒子</div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选择器的优先级</title> <!--需求： 分别使用 标签，类和id三种选择器 设置div的样式 --> <style type="text/css"> div{ color: red; } .myDiv{ color: black; } #name{ color: pink; /* 页面显示的是 粉色*/ } /* id选择器 > 类选择器 > 标签选择器 */ </style> </head> <body> <div id="name" class="myDiv">开始验证优先级</div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>元素的继承性</title> <!-- 需求 ： 给页面中id为first的div设置样式 给页面中id为second的div设置样式 --> <style type="text/css"> #first{ color: red; } #second{ color: pink; } #third{ color: greenyellow; } </style> </head> <body> <div id="first"> 第一个 <div id="second"> 第二个 <div id="third"> 第三个 </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>并集选择器</title> <!-- 需求 给id="mySpan1" ，class="mySpan2" 标签是div的所有元素 设置相同的样式！ --> <style type="text/css"> /* 多个选择器都具有的样式. 每个选择器之间使用,隔开 多个选择器没有顺序 */ #mySpan1,.mySpan2,div{ color:red; } </style> </head> <body> <div>第1个盒子</div> <div>第2个盒子</div> <span id="mySpan1">这是第1个span</span> <span class="mySpan2">这是第2个span</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>交集选择器</title> <!-- 交集选择器的规则 01：标签选择器+id选择器 02：标签选择器+类选择器 03.多个选择器直接连着写，不需要有符号隔开 必须标签选择器在前！--> <style type="text/css"> /* 需求： 页面中 class="mySpan2" 并且 标签是div的元素 设置样式 */ div.mySpan2{ color: red; } </style> </head> <body> <div>第1个盒子</div> <div class="mySpan2">第2个盒子</div> <span id="mySpan1">这是第1个span</span> <span class="mySpan2">这是第2个span</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>后代选择器</title> <!-- 需求： 改变body中 所有span元素的样式 后代选择器 中间使用空格隔开 包含子和孙子等所有的子孙节点 --> <style type="text/css"> body span{ color: red; } </style> </head> <body> <div> 儿子div1 <span>相对于body来说是孙子span1</span> </div> <div>儿子div2 <span>相对于body来说是孙子span2</span> </div> <span>相对于body来说是儿子span1</span> <span>相对于body来说是儿子span2</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>子选择器</title> <!-- 需求： 改变body中 所有子元素是span的样式 只包含子节点 --> <style type="text/css"> body>span{ color: red; } /*选择body中子元素是div的节点，如果div中还有其他的节点，也会随之改变*/ body>div{ color: red; } </style> </head> <body> <div> 儿子div1 <span>相对于body来说是孙子span1</span> </div> <div>儿子div2 <span>相对于body来说是孙子span2</span> </div> <span>相对于body来说是儿子span1</span> <span>相对于body来说是儿子span2</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>相邻兄弟节点选择器</title> <!-- 需求： 改变id=""second"的div元素后面第一个兄弟节点的样式 --> <style type="text/css"> #second+span{ color: red; } </style> </head> <body> <div> 儿子div1 <span>相对于body来说是孙子span1</span> </div> <div id="second">儿子div2 <span>相对于body来说是孙子span2</span> </div> <span>相对于body来说是儿子span1</span> <span>相对于body来说是儿子span2</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>通用兄弟选择器</title> <!-- 需求： 改变id=""second"的div元素后面所有兄弟节点的样式 --> <style type="text/css"> #second~span{ color: red; } </style> </head> <body> <div> 儿子div1 <span>相对于body来说是孙子span1</span> </div> <div id="second">儿子div2 <span>相对于body来说是孙子span2</span> </div> <span>相对于body来说是儿子span1</span> <span>相对于body来说是儿子span2</span> <span>相对于body来说是儿子span3</span> <span>相对于body来说是儿子span4</span> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>结构伪类选择器</title> <!-- 不需要在节点上新增额外的id或者class属性 ，需要我们知道节点的位置（下标）--> <style type="text/css"> /*01.改变ul中第一个li的样式 ul li:first-child{ color: red; }*/ /*02.改变ul中最后一个li的样式 ul li:last-child{ color: red; }*/ /*03.改变第3个div的样式 body中如果第3个元素是div就改变样式， 否则都没有效果！ 着重于顺序！ body div:nth-child(3){ color: red; }*/ /*04.改变页面中第2个span元素的样式 nth-of-type： 先查询类型 再看顺序 body span:nth-of-type(2){ color: red; } body div:nth-of-type(3){ color: red; } */ </style> </head> <body> <div>div1</div> <div>div2</div> <span>span1</span> <div>div3</div> <span>span2</span> <ul> <li>第1个列表的第1项</li> <li>第1个列表的第2项</li> <li>第1个列表的第3项</li> <li>第1个列表的第4项</li> </ul> <ul> <li>第2个列表的第1项</li> <li>第2个列表的第2项</li> <li>第2个列表的第3项</li> <li>第2个列表的第4项</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> /* 01.改变元素id="first"的样式 div[id="first"]{ color: red; }*/ /*02.改变所有id属性元素 div[id]{ color: red; }*/ /*03.改变所有id属性值以h开头元素 div[id^="h"]{ color: red; }*/ /*04.改变所有id属性值以a结尾元素 div[id$="a"]{ color: red; }*/ /*04.改变所有id属性值包含i的元素 div[id*="i"]{ color: red; }*/ </style> </head> <body> <div id="first">第1个</div> <div id="haha">第2个</div> <div id="heihei">第3个</div> <div>第4个</div> <div style="color: red;font-size: 50px">第5个</div> </body> </html>