学习链接
目录
学习链接一、CSS简介1、书写CSS的语法规则2、快速入门 二、CSS代码的书写方式1、嵌入式2、外链式3、行内式4、注释 三、选择器1、基本选择器2、复合选择器3、伪类选择器3.1美化超链接 4、属性选择器 四、尺寸样式属性五、文本与字体属性1、文本属性2、字体属性 六、列表样式属性七、特性1、继承性2、优先级3、!important属性4、一个标签可以携带多个类名5、标准文档流 八、背景样式属性九、浮动清除浮动 十、盒子模型1、padding2、margin3、border 十一、display十二、position1、固定定位2、相对定位3、绝对定位 十三、z-index十四、CSS31、结构伪类2、伪元素3、文本阴影4、盒子阴影5、圆角矩形6、透明度一、CSS简介
CSS（Cascading Style Sheets 的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表。CSS主要是用来给HTML网页来设置外观或者样式。外观或者样式：HTML网页中文字的大小、颜色、字体，网页的背景颜色、背景图片等。1、书写CSS的语法规则
CSS代码是由选择器和一对大括号组成；大括号里面是由多条声明语句组成；每条声明语句都要使用英文分号分隔；每条声明语句由 属性:值(key:value) 组成；CSS中的属性值一般不加引号；在CSS中如果属性值为数值型数据时，一般情况下需要单位，如px（像素）；在CSS中不能出现HTML标签。2、快速入门
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>CSS快速入门</title><style type="text/css">/** 在这里写CSS代码* CSS代码：选择器:{语句1;语句2};*/p{color: #FF0000;/*给文本设置颜色为#FF0000*/font-size: 100px;/*设置字体大小为100px*/};</style></head><body><p>CSS样式</p></body></html>
二、CSS代码的书写方式
CSS代码应该书写在什么位置？书写方式分为三种：嵌入式、外链式、行内式
1、嵌入式
嵌入式就是将CSS代码嵌入到HTML文件中，嵌入式通过HTML中的< style >标签将CSS代码嵌入到HTML网页中。
语法格式：
<!-- 如果使用的是HTML5的文档，type属性可以省略不写 --><style type="text/css">/** 书写CSS代码* 选择器:{属性:值;属性:值};*/</style>
< style>< /style>可以出现在HTML中的任何位置，但是一般会放置在< head>标签中。范例
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>嵌入式CSS</title><style type="text/css">/** 嵌入式CSS* CSS代码：选择器:{语句1;语句2};*/div{width: 100px;/*设置宽度为100px*/height: 100px;/*设置高度为100px*/background-color: #FF0000;/*设置背景颜色为红色*/};</style></head><body><!-- 要使用CSS给div设置宽度100像素高度100像素以及背景颜色为红色，把div理解为存放东西的盒子--><div></div></body></html>
2、外链式
外链式是指单独写一个以.css为扩展名的文件，然后在< head>< /head>标签中使用< link />标签，将这个 css 文件链接到 html 文件中。css文件的名称需要为英文。css文件不能单独运行，必须依赖html文件。语法格式：<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>外链式CSS</title><!-- 将单独的css文件链接到当前的HTML文件中 --><link rel="stylesheet" href="./css/index.css"/></head><body></body></html>
css文件夹下的index.css文件
/** 在index.css文件中书写css代码* 这个文件里只能写css格式的代码* 选择器{属性:值};*/body{background-color: #f00;/*f00 --> ff0000 */}
确保 css 文件被正确引入：浏览器右键选检查，或F12，在network中找css文件的status状态，成功表示已经被加载，失败表示未被正确引入。link标签可以有多个，意味着一个 html 页面可以同时引入多个 css 文件。
3、行内式
将 CSS 代码写在 HTML 标签的 style 属性中；style 是一个通用属性，每一个标签里面都拥有这个属性。语法格式：<标签名 style="属性:值;属性:值;"></标签名>
范例
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>行内式CSS</title></head><body><!--使用行内式css将div设置为宽度100px，高度100px，背景颜色为红色--><div style="width:100px;height:100px;background-color:#ff0000;"></div></body></html>
总结
使用嵌入式CSS，只能作用于当前的HTML文件；使用外链式CSS，能作用于多个HTML文件。
4、注释
格式/* 注释的内容 */
上面的例子都有用到CSS注释sublime编辑器中有快捷方式来注释：Ctrl + Shift + /注意不要在 CSS 代码中使用 HTML的注释
三、选择器
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式选择器分为四大类：基本选择器、复合选择器、伪类选择器、属性选择器。1、基本选择器
通用选择器<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>通用选择器</title><style type="text/css">/*嵌入式选择器*//** 通用选择器* 格式 *{属性：值}* 作用：给HTML中所有的标签设置样式*/*{color:#00f;}</style></head><body><h2>中国四大名著</h2><ul><li>西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul></body></html>
标签选择器
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>标签选择器</title><style type="text/css">/*嵌入式选择器*//** 标签选择器* 格式 标签名{属性：值}* 作用：给指定的标签设置样式*/h2{color:#00f;}li{color: #f00;}</style></head><body><h2>中国四大名著</h2><ul><li>西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul><h2>你答对了吗？</h2></body></html>
类选择器
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>通用选择器</title><style type="text/css">/*嵌入式选择器*//** 类选择器* 格式 .class的属性值{属性：值}* 作用：给拥有指定的.class属性值的标签设置样式*//* 只要是.class属性的值为h的标签，都会设置样式*/.h{color:#00f;}/*先找到p标签，然后再去p标签里面找.class属性值为h1的标签，有就为其设置样式*/p.h1{color: #f00;}</style></head><body><h2 .class="h">中国四大名著</h2><ul><li .class="h1">西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul><p .class="h1">测试</p><p>测试</p></body></html>
id选择器
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>通用选择器</title><style type="text/css">/*嵌入式选择器*//** id选择器* 格式 #id的属性值{属性：值}* 作用：给拥有指定的id属性值的标签设置样式，但是要注意在一个HTML文件中id属性值必须是唯一的*/#h{color:#00f;}</style></head><body><h2 id="h">中国四大名著</h2><ul><li>西游记</li><li>三国演义</li><li>红楼梦</li><li>水浒传</li></ul></body></html>
2、复合选择器
多元素选择器范例<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>多元素选择器</title><style type="text/css">/** 多元素选择器* 格式：选择器1,选择器2,选择器n{属性：值;}* 作用：给列表中的所有选择器设置样式*/.box,p,h2,li{color:#f00;text-decoration: underline;}</style></head><body><div class="box">HTML</div><p>CSS</p><h2>php</h2><ul><li>北京</li><li>上海</li><li>广东</li><li>深圳</li></ul></body></html>
后代元素选择器：所有后代都选择，无论隔多少代
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>相邻元素选择器</title><style type="text/css">/** 相邻元素选择器* 格式：E + F{属性:值;}* 作用：满足E和F同级、相邻（E必须在F下面）才会匹配的选择器*/.box + p{color:#f00;text-decoration: overline;}</style></head><body><!-- class=box这个元素中有三个子元素第一个子元素：<h2>HTML</h2>第二个子元素：<div></div>第三个子元素：<h2>PHP</h2>第二个子元素里面还有一个子元素：<h2>CSS</h2>--><p>上面的元素</p><div class="box"><h2>HTML</h2><div><h2>CSS</h2></div><h2>PHP</h2></div><p>下面的元素</p></body></html>
3、伪类选择器
伪类选择器是用来给超链接的不同状态来设置样式。<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>伪类选择器</title><style type="text/css">a:link{color: #f00;}a:visited{color:#000;}a:hover{color:gold;}a:active{color:#0f0;}</style></head><body><a href="">baidu</a><a href="">qq</a><a href="">google</a></body></html>
超链接的不同状态是有顺序的，也就是说伪类选择器是有顺序的，如果不按照伪类选择器的顺序，样式就会失效。顺序：link、visited、hover、active
3.1美化超链接
一般情况下：去掉超链接的下划线，然后同时给超链接设置一个颜色正常状态与访问过后的状态的样式设置为相同的当鼠标放上的时候给其设置另外一个颜色激活状态一般不设置，因为激活状态时间太短4、属性选择器
属性选择器是与标签的属性名和属性值有关通过标签的属性名和属性值来匹配元素范例<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>属性选择器</title><style type="text/css">/* 通过属性选择器来匹配元素 *//* 第一种：[属性名] */p[align]{color:#f00;}/* 第二种：[属性名="值"] */h2[align="center"]{color:#f00;}/* 第三种（开头）：[属性名^="值"] */font[color^="#FF"]{border:1px solid #00f;}/* 第四种（结尾）：[属性值$="值"] *//* 第五种（包含）：[属性值*="值"] */</style></head><body><p align="center">test1</p><h2 align="center">test2</h2><p align="left">test3</p><font color="#FF0000">颜色</font><font color="#FFAA00">颜色</font><font color="#FFaabb">颜色</font><font color="#FFaacc">颜色</font><font color="#FFaadd">颜色</font></body></html>
四、尺寸样式属性
范例<!DOCTYPE html><!DOCTYPE html><html><head><meta charset="utf-8"><title>尺寸样式属性</title><style type="text/css">/*使用类选择器来设置样式*/.box{width:100px;height: 100px;background-color: #f00;}</style></head><body><!-- 给div标签设置高、宽、背景颜色 --><div class="box"></div></body></html>
span标签不能设置宽度，因为span标签是一个行内元素，不可以设置高宽，只有块级元素能设置高宽。
五、文本与字体属性
1、文本属性
范例<!DOCTYPE html><html><head><meta charset="utf-8"><title>文本属性</title><style type="text/css">.zhang{/*十进制表示颜色的方式在CSS中没有浏览器兼容性的问题*/color: rgb(255,0,0);text-decoration:underline;}h2{text-align:center;}.cap{text-transform: capitalize;}p{/* 一个em表示一个汉字的位置，可以为负数 */text-indent: 2em;/* 行高的值与高度的值相同，就可以实现文本垂直方向上居中对齐 */line-height:30px;height:30px;}</style></head><body><h2>文本属性</h2><p>测试文本属性，测试<span class="zhang">文本</span>属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性，测试文本属性。</p><div class="cap">cascading Style sheet</div></body></html>
2、字体属性
范例<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>字体属性</title><style type="text/css">.zhang{/* 将文本设置为斜体 */font-style:italic;/* 将文本设置为加粗 */font-weight:bold;/* 将文本大小设置为36px */font-size:36px;/* 将文本字体设置为楷体，没有该字体则使用下一个，都没有则会显示为宋体 */font-family:"楷体","微软雅黑";}i{/* 将斜体恢复正常 */font-style:normal;}b{/* 将加粗效果恢复正常 */font-weight:normal;}.zz{font:italic bold 24px "宋体";}</style></head><body><h3>测试字体属性</h3><p>测试字体属性测试<span class="zhang">字体</span>属性测试<i>字体</i>属性测试字体属性测试字体属性测试字体<b>属性</b>测试字体属性测试字体属性测试字体属性测试字体属性测试字体属性测试<span class="zz">字体</span>属性测试字体属性测试字体属性测试字体属性测试字体属性测试字体属性</p></body></html>
六、列表样式属性
这里的列表可以是 无序列表 或 有序列表但实际上主要说的是无序列表，因为使用较频繁范例<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>列表样式选择器</title><style type="text/css">/* 后代元素选择器 */.box ul{/* none:去除列表前的项目符号 */list-style-type:none;}.box ul li{border:1px solid #f00;height:35px;line-height: 35px;/* 项目符号的位置 */list-style-position:inside; /* 将列表前面的符号换成一张图片 *//** list-style-image: url(./image/tri.png)* 这种方式不能修改图片大小*/background: url(./image/tri.png) no-repeat 0rem 0rem;background-size: 1rem 1rem;text-indent: 2em;}</style></head><body><div class="box"><h2>请列出中国四大名著</h2><ul><li>西游记</li><li>红楼梦</li><li>三国演义</li><li>水浒传</li></ul></div></body></html>
七、特性
1、继承性
外层元素上的样式会被内层元素所继承
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>继承性</title><style type="text/css">body{color:#f00;}p{color:#00f;}</style></head><body><div><h2>h2标题</h2><p>p段落</p></div></body></html>
并不是所有的样式都能够被继承，只有文本与字体样式能够被继承实际工作中，往往会给body标签设置字体大小以及字体颜色。当内存元素上的样式与外层元素相同时，内层元素会覆盖外层元素
2、优先级
优先级：行内样式>id选择器>类选择器>标签选择器<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>优先级</title><style type="text/css">/* 标签选择器 */div{color:#f00;}/* 类选择器 */.d{color:#00f;}/* id选择器 */#dd{color:#0f0;}div h2{/* 1+1=2 */color: #ccc;}.d h2{/* 10+1=11 */color:#000;}#dd h2{/* 100+1=101 */color:#f00;}</style></head><body><div class="d" id="dd" style="color:skyblue;"><h2>h2标题</h2><p>p段落</p></div></body></html>
一般而言，选择器指向的越准确，优先级就越高不管是单个选择器还是多个选择器组合都可以通过以下数值相加计算
3、!important属性
主要用来提升属性的权重，其属性的权重值无穷大格式：属性:值 !important;<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>!important</title><style type="text/css">/** 使用!important属性* 属性:值 !important;* 加了!important属性，其权重值无穷大*/p{color:#f00 !important;font-size:20px;}.p1{color:#0f0;}#p2{color:#00f;font-size:100px;}</style></head><body><p class="p1" id="p2">test</p></body></html>
!important属性提升的只是该属性的权重，不是选择器的权重。
上面的例子可以看出字体大小是由id选择器中的font-size属性决定的。!important属性不能提升继承属性的权重。
4、一个标签可以携带多个类名
类名指的是class的属性值。一个标签可以有多个类名：class属性值可以有多个，每一个属性值之间用空格分隔。优点：1、减少CSS的代码量
2、多个类名的样式会叠加到当前元素上
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>多个类名</title><style type="text/css">/** class=div1的文字设置为加粗* class=div2的文字设置为红色* 第三个div的文字加粗并设置为红色*/.div1{font-weight:bold;}.div2{color:#f00;}</style></head><body><div class="div1">test</div><div class="div2">test</div><div class="div1 div2">test</div></body></html>
如果一个标签内的多个类名存在相同的样式，就会存在样式的冲突。
写在后面的样式作为标准
5、标准文档流
我们制作HTML网页时，遵循一个“流”的规则：从左至右、从上至下空白折叠现象：元素之间的写换行在浏览器中以空格显示，元素写在同一行之后就没有间隔高矮不齐，底部对齐：同一行的元素底部对齐八、背景样式属性
示例<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>背景样式属性</title><style type="text/css">/* 给body标签设置样式 */body{font-size:12px;color:#f60;}.box{width:400px;border: 1px solid #00f;margin-right: auto;margin-left: auto;}.box h2{height:35px;line-height:35px;color:gold;}.box ul li{/* 去除li前的项目符号 */list-style:none;height:30px;line-height: 30px;border:1px solid #ccc;background-image:url(./image/tri.png);background-repeat:no-repeat;background-size: 1rem 1rem;background-position: 0rem center;padding-left:15px;}/* 超链接美化 */a:link,a:visited{color:#444;text-decoration: none;}a:hover{color: #f00;}</style></head><body><div class="box"><h2>新闻列表</h2><ul><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li></ul></div></body></html>
background-color
用于给元素设置背景颜色，前提是这个元素有内容或者有宽高。background-image 用于给元素设置背景图片
1、图片的地址放在url()中；
2、同样的，这个元素要有内容或者有宽高；
3、背景图片默认是平铺的。background-repeat
用于设置背景图片是否平铺，已经平铺方向background-position
用于设置背景图片的位置，有水平位置和垂直位置两个值，表达方式有三种：（三种方式可以混用）
1、英文单词
水平方向：left、center、right
垂直方向：top、center、bottom
2、固定值
px px
3、百分比
九、浮动
行内元素的特性：让多个元素排在一行块级元素的特性：给元素设置宽高在标准文档流中的元素只有两种：块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。浮动元素可以让元素脱离标准文档流，就可以实现让多个元素排在同一行，并且可以设置宽高。浮动是通过一个浮动属性来实现的，有left和right两个值。特性：1、浮动元素脱离标准文档流，不再占用空间。
2、浮动元素的层级要比标准文档流的元素层级高，它会将标准文档流中的元素盖住
3、浮动元素会向左或向右进行浮动（移动）
4、浮动元素遇到父元素的边框或上一个浮动元素就停止浮动
5、浮动元素浮动后，其父元素不会再包裹着浮动元素
6、将行内元素进行浮动以后，这个行内元素就会变成块级元素
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>浮动</title><style type="text/css">.box1{width:600px;border: 1px solid #000;margin-left: auto;margin-right: auto;}.div1{width: 100px;height: 100px;background-color: #f00;/* 给这个元素增加浮动属性 */float:left;}.div2{width: 100px;height: 100px;background-color: #0f0;float:left;}.div3{width: 100px;height: 100px;background-color: #00f;float:right;}.box2{width:600px;border: 1px solid #000;margin-left: auto;margin-right: auto;}.s1{/* 行内元素设置宽高（在没有成为浮动元素时无效） */width:100px;height: 100px;background-color: #f00;float:left;}.s2{/* 行内元素设置宽高（在没有成为浮动元素时无效） */width:100px;height: 100px;background-color: #0f0;float:left;}.s3{/* 行内元素设置宽高（在没有成为浮动元素时无效） */width:100px;height: 100px;background-color: #00f;float:right;}</style></head><body><div class="box1"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div><div class="box2"><div style="height:100px"></div><span class="s1">文本一</span><span class="s2">文本二</span><span class="s3">文本三</span></div></body></html>
清除浮动
只要有浮动，必须有清除浮动；因为浮动元素会影响到下方元素的排版布局，还有浮动元素的父元素没有将浮动元素包裹。清除浮动后，不会影响浮动元素的下方排版布局，浮动元素的父元素在视觉上包裹着浮动元素清除浮动的三种方法：1、给浮动元素的父元素设置一个固定的高度
2、使用清除浮动的样式属性：clear
3、使用overflow:hidden这个属性清除浮动设置高度的方法不建议使用，因为一个元素的高度一般不手动设置，应该由其自身内容填充高度使用清除浮动的样式属性 clear，这个属性有三个值（left、right、both）一般用在最后一个浮动元素下面
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>清除浮动</title><style type="text/css">.box{width:600px;border:1px solid #000;margin-left: auto;margin-right: auto;}.box div{}.div1{background-color: #f00;float:left;width: 100px;height: 100px;}.div2{background-color: #0f0;float:left;width: 100px;height: 100px;}.div3{background-color: #00f;float:right;width: 100px;height: 100px;}.clear{clear: both;}</style></head><body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div><!-- 在最后一个浮动元素下面新建一个空白的div用于清除浮动 --><div class="clear"></div></div><h2>浮动与清除浮动</h2></body></html>
使用overflow:hidden属性清除浮动：原意是将溢出的部分进行隐藏，但是还可以用于清除浮动
用上面的例子举例：给浮动元素的父元素设置overflow:hidden
<div class="box" style="overflow:hidden">
十、盒子模型
CSS中的盒子的组成部分：内容(content)+内填物(padding)+边框(border)+外边距(margin)一个盒子的主要属性：width、height、padding、border、marginwidth指的是盒子内容的宽度，而不是盒子的宽度height指的是盒子内容的高度，而不是盒子的高度padding是内填充的意思，指的是里面的内容到盒子边框的距离border是外边框的意思，指的是盒子边框margin是外边距的意思，指的是盒子与盒子之间的距离一个盒子的总宽度为：盒子内容的宽度+左右两边的填充+左右两边的边框线
一个盒子的总高度为：盒子内容的高度+上下两边的填充+上下两边的边框线
盒子的高度一般不用设置，因为盒子的高度由盒子的内容决定
1、padding
padding是内填充的意思，指的是里面的内容到盒子边框的距离padding是有4个方向的，所以能分别描述这4个方向的padding方法有两种：1、padding-top、padding-right、padding-bottom、padding-left。
2、padding：这个属性描述4个方向是有顺序的，顺时针方向，从上开始：上、右、下、左。如果简写方法中padding只设置一个值表示4个方向的内填充都是这个值。如果简写方法中padding设置两个值表示上下方向的内填充为第一个值，左右为第二个值。如果简写方法中padding设置三个值，第一个值表示上、第二个值表示左右、第三个值表示下。
2、margin
margin是外边距的意思，指的是盒子与盒子之间的距离margin也是4个方向的，所以也能通过4个方向对其进行描述方法和padding相同，两种方法，只是把padding换成了marginmargin有塌陷现象：1、在标准文档流中，竖直方向的margin值不会叠加，会取较大值
2、水平方向没有margin塌陷现象
3、浮动元素没有margin塌陷现象
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>竖直反向的margin值不会叠加，取较大值</title><style type="text/css">div{width:100px;height:100px;}.div1{background-color: #f00;margin-bottom: 20px;}.div2{background-color: #00f;margin-top: 40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>
margin居中，margin的值可以是auto，当左外边距和右外边距都是auto时，这个盒子就会水平居中。
1、使用margin来实现水平居中时，盒子一定要有固定的宽度；
2、只有块元素可以实现水平居中，行内元素是不能实现居中的；
3、只有标准文档流中的盒子可以使用margin来居中；
4、margin属性用来实现盒子的水平居中，而不是文本的水平居中。
文本的水平居中是用text-align:center;实现的
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>margin居中</title><style type="text/css">.box{width: 100px;height: 100px;background-color: #f00;margin-left: auto; /* 左外边距 */margin-right: auto; /* 右外边距 */margin-top: 100px; /* 上外边距 */margin-bottom: 100px; /* 下外边距 */}p{height: 50px;background-color: skyblue;}</style></head><body><div class="box"></div><p></p></body></html>
善于使用父元素的padding，而不是子元素的margin
margin这个属性本意是用于描述兄弟元素之间的关系，不是用于描述父子元素之间关系的。如果是父子元素的关系，最好在父元素设置padding属性。
3、border
border边框的意思，有三个要素：粗细、线型、颜色。语法格式：border: 粗细 线型 颜色颜色可以省略不写，默认黑色；其他两个属性不能省略，省略会导致border设置失效。边框的线型：颜色用三种表达方式都可以。边框也有四个方向上的属性：border-top、border-right、border-bottom、border-left可以分别设置上面的粗细、线型、颜色。
十一、display
display是显示的意思，用来进行行内元素与块级元素之间的相互转化，将隐藏的元素显示或者将显示的元素隐藏。display的属性取值：inline、block、none。当我们将一个行内元素的display属性的值设置为block以后，这个元素就会被转换为块级元素（设置的宽高生效）。当我们将一个块级元素的display属性的值设置为inline以后，这个元素就会被转换为行内元素（设置的宽高失效）。将一个显示的元素display属性设置为none以后，这个元素就会隐藏。将一个隐藏的元素display属性设置为block以后，这个元素就会显示。显示/隐藏主要是JS来使用。示例：<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>display案例</title><style type="text/css">/* 通用选择器来去除HTML中所有标签的默认内填充与外边距 */*{margin:0px;padding:0px;}body{background-image: url(./image/background29.jpg);background-size: 100%;background-repeat:no-repeat;background-position: top center;}.nav{width:960px;height: 40px;margin-left: auto;margin-right:auto;}.nav ul{/* 将列表前的项目符号去除 */list-style:none;}.nav ul li{/* 把每个li标签向左浮动 */float:left;/* 给每个li标签设置宽度 */width:120px;text-align:center;background-image: url(./image/line.jpg);height:40px;line-height: 40px;}.nav ul li a{width: 120px;height: 40px;/* 将行内元素转换为块状元素 */display: block;}a:link,a:visited{text-decoration: none;color: white;}a:hover{background-image: url(./image/yellow_line.jpg);}</style></head><body><div style="height:40px"></div><div class="nav"><ul><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li><li><a href="#">test</a></li></ul></div></body></html>
十二、position
position表示位置的意思，主要用于实现对元素的定位。在CSS中定位分为三种：fixed(固定定位)、relative(相对定位)、absolute(绝对定位)。在使用定位属性时，一定要配合定位的坐标来使用。left：表示定位的元素离左边多远。
right：表示定位的元素离右边多远。
top：表示定位的元素离上边多远。
bottom：表示定位的元素离下边多远。
1、固定定位
固定定位，它是相对于浏览器窗口来进行定位；不管页面如何滚动，固定定位元素显示的位置不会改变。示例：<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>固定定位</title><style type="text/css">*{margin:0px;padding:0px;}p{width:100px;height:100px;background-color: #f00;}</style></head><body><p></p><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" ><img src="./image/line.jpg" alt="" ></body></html>
特点：
1、固定定位元素脱离了标准文档流
2、固定定位元素的层级比标准文档流里的元素高，所以固定定位元素会盖住标准文档流里的元素
3、固定定位元素不再占用空间
4、固定定位元素显示的位置不会随着浏览器滚动而滚动用固定定位返回网页顶部
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>使用固定定位来实现返回顶部的按钮</title><style type="text/css">*{margin:0px;padding: 0px;}a{width: 60px;height: 60px;display: block;background-color: #ccc;text-align:center;line-height: 30px;text-decoration: none;color:white;font-weight: bold;position: fixed;right:30px;bottom:30px;}div{height:200px;}.div1{background-color: #f00;}.div2{background-color: #0f0;}.div3{background-color: #00f;}.div4{background-color: #f00;}.div5{background-color: #0f0;}.div6{background-color: #00f;}</style></head><body><a href="#">返回<br/>顶部</a><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div></body></html>
用固定定位实现顶部导航栏
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>固定定位实现顶部导航栏</title><style type="text/css">*{margin:0px;padding: 0px;}body{padding-top: 60px;}.nav{width: 100%;height: 60px;background-color: #222222;position: fixed;left:0px;top:0px;}.nav .inner_c{width: 1000px;height:60px;margin:0px auto;}ul{list-style: none;}ul li{float:left;width:100px;height: 60px;line-height: 60px;text-align: center;}ul li a{display: block;width:100px;height: 60px;text-decoration: none;color:white;font-weight: bold;}a:hover{background-color: gold;}div{height:200px;}.div1{background-color: #f00;}.div2{background-color: #0f0;}.div3{background-color: #00f;}.div4{background-color: #f00;}.div5{background-color: #0f0;}.div6{background-color: #00f;}</style></head><body><div class="nav"><div class="inner_c"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div></div><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div></body></html>
2、相对定位
position:relative相对定位时相对于“原来的自己”进行定位。<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>相对定位</title><style type="text/css">*{margin:0px;padding:0px;}.box{width: 600px;border:1px solid #000;margin:100px auto;}.box div{width:100px;height: 100px;}.div1{background-color: #f00;}.div2{background-color: #0f0;/* 相对定位 */position:relative;left:100px;}.div3{background-color: #00f;}</style></head><body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body></html>
特点：
1、相对定位元素没有脱离标准文档流
2、相对定位元素如果没有设置定位的坐标，那么相对元素还在原来的位置
3、相对定位元素设置定位的坐标后，原本的位置会空白
4、相对定位元素会将标准文档流中的元素盖住
5、相对定位元素的定位坐标可以是负数
相对定位元素原本的位置会空白，所以相对定位很少单独使用，主要是用来配合“绝对定位”元素来使用的。
3、绝对定位
positon:absolute绝对定位是相对于“上级定位元素”来进行定位的。绝对定位元素会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性，那么它就会相对于其父元素来进行定位；但是如果其父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性，如果有就进行定位；如果没有设置，就会进行向上一级进行查找，直到相对于浏览器窗口来进行定位。<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>绝对定位</title><style type="text/css">*{margin:0px;padding:0px;}.box{width: 600px;border: 1px solid #000;margin:100px auto;position: relative;}.box div{width:100px;height:100px;}.div1{background-color: #f00;}.div2{background-color: #0f0;/* 绝对定位 */position:absolute;/* 设置定位的坐标 */right: 0px;top:0px;}.div3{background-color: #00f;}</style></head><body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body></html>
特点：
1、绝对定位元素脱离了标准文档流
2、绝对定位元素不再占用空间
3、绝对定位元素会盖住标准文档流中的元素
4、绝对定位元素相对于其上级定位元素进行定位，这里的上级定位元素可以是相对定位、固定定位和绝对定位，但一般只会给其上级定位元素设置相对定位属性。
十三、z-index
z-index表示压盖的层级关系只有定位的元素才有z-index值（即只有设置了固定定位、相对定位、绝对定位的元素才会有z-index值）z-index值没有单位，是一个正整数，默认的z-index值是0如果多个定位元素没有设置z-index属性，或者z-index值设置一样，那么写在HTML后面的定位元素就会盖住前面的定位元素。<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>z-index</title><style type="text/css">.div{width:100%;height:100%;position: relative;}.div1{width:200px;height:200px;background-color: #f00;/* 绝对定位 */position:absolute;/* 定位的坐标 */left:100px;top:100px;z-index: 1;}.div2{width:200px;height:200px;background-color: #0f0;/* 绝对定位 */position:absolute;/* 定位的坐标 */left:200px;top:200px;z-index: 2;}</style></head><body><div class="div"><div class="div1"></div><div class="div2"></div></div></body></html>
z-index的用途：如果后面有定位元素写在导航栏的后面，可能盖住导航栏，所以导航栏应该设置较高的z-index值。
十四、CSS3
CSS3与CSS2之间的区别CSS3 = CSS2 + 新语法 + 新的属性
1、结构伪类
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>结构伪类</title><style type="text/css">.box ul li:first-child{color:#f00;width:100px;height:30px;line-height: 30px;border: 1px solid #000;}.box ul li:last-child{color:#f00;width:100px;height:30px;line-height: 30px;border: 1px solid #000;}div ul li:only-child{color:#f00;}</style></head><body><div class="box"><ul><li>test1</li><li>test2</li><li>test3</li><li>test4</li><li>test5</li><li>test6</li><li>test7</li><li>test8</li></ul></div><div><ul><li>only-child</li></ul></div></body></html>
案例：使用CSS3中的结构伪类实现隔行变色的表格
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>CSS3中的结构伪类实现隔行变色表格</title><style type="text/css">table tr:nth-child(even){background-color: #f00;}table tr:nth-child(odd){background-color: #00f;}/* 当鼠标移动到tr上面时显示背景颜色为灰色 */table tr:hover{background-color: #ccc;}</style></head><body><table width="500" border="1" align="center">table>tr*20>td{ }*10<!-- 都是重复的，节省空间，不展开了 --></body></html>
合并表格的边框线border-collapse，值为：collapse
<style type="text/css">table{border-collapse: collapse;border-color: #ccc;}</style>
2、伪元素
示例省略。3、文本阴影
text-shadow有水平阴影、垂直阴影、模糊距离、阴影颜色四个属性。每个阴影有两个或三个长度值和一个可选的颜色值进行规定；省略的长度是0。文字阴影可以有多组值，表示多个阴影，多组之间用逗号隔开就可以；水平阴影正值在右边，负值在左边；垂直阴影正值在下边，负值在上边；模糊强度，值越大越模糊。4、盒子阴影
box-shadow：水平阴影、垂直阴影、模糊距离、阴影尺寸、颜色、内/外阴影。可以给div设置box-shadow，img图片也可以。示例省略。5、圆角矩形
border-radius：左上、右上、右下、左下。如果border-radius四个值相同，只需要写一个就行。不想有圆角的位置用0px就行。让div变圆形：div的高宽设置相同，然后设置border-radius为border高宽的一半。让div变椭圆：div的border-radius设置为高度的一半。让div变半圆：div的高度为宽度的一半，border-radius设置为高度值其他图案类似案例：（更多>）圆角矩形超链接<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>圆角矩形案例</title><style type="text/css">body{background-color: #ccc;}.more{width:60px;height:20px;background-color: #fff;text-align: center;line-height: 20px;margin:100px auto;/* 圆角矩形 */border-radius: 10px;font-size: 12px;font-family: "微软雅黑";}a{display:block;width:60px;height: 20px;border-radius: 10px;}a:link,a:visited{color: #000;text-decoration: none;}.more a:hover{background-color: #f00;color: #fff;}</style></head><body><div class="more"><a href="#">更多></a></div></body></html>
