一、CSS的引入方式
1.行内样式
<p style="color: blue;">这是一个p标签！</p>
2.内嵌样式
<style> p { color: red; } </style>
3.外联样式
1.链接式（常用）
<link rel="stylesheet" href="index.css">
2.导入式
<!--导入式--> <style type="text/css"> @import url('./index.css'); </style>
注意：@import url()必须写在文件最开始的位置。
链接式与导入式的区别
1、<link/>标签属于XHTML,@import是属性css2.1 2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示 3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中 4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
1.通用元素选择器 *: 所有的标签都变色
2.标签选择器：匹配所有使用p标签的样式 p{color:red}
3.id选择器：匹配指定的标签 #p2{color:red}
4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /*标签选择器*/ /*所有标签是div的都变了*/ div{ font-family: 华文彩云; } /*id选择器*/ /*给id='c2'的设置样式，id一般不常用。因为id是不能重复的。*/ #c2{ background-color: blueviolet; font-size: larger; } /*calss类选择器*/ .a1{ color: red; } 或 p.a1{ color: blue; } /*通用元素选择器*/ *{ background-color: aquamarine; color: red; } </style> <body> <div id="c1"> <div id="c2"> <p>hello haiyan</p> <div class="a1">哇啊卡卡</div> </div> <p>hi haiyan</p> </div> <span>啦啦啦</span> <p>p2</p> <div class="a1"> <p class="a2">你好啊</p> <h1>我是h1标签</h1> </div> </body> </html> 复制代码
2.组合选择器
1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red}
2.子代选择器（只在儿子层找） .c2>p{color:red}
3.多元素选择器：同时匹配所有指定的元素 .div,p{color:red}
或者
.c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}
不常用
3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}
4.兄弟选择器：同一级别的，离得很近的.c2~p{color:red}
5.多元素选择器： .c2 .c3,.c2~ .c3{ color:red }
.a1 .a2, .a1~p{
2 color: blue;
3 font-size: 15px;
4 background-color: red;
5 }
6 #下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用
7 .a1 .a2{
8 color: blue;
9 font-size: 15px;
10 background-color: red;
11 }
12 .a1~p{
13 color: blue;
14 font-size: 15px;
15 background-color: red;
16 }
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style> /*后代选择器(部分层级)：选择所有类为a1的p标签*/ .a1 p{ background-color: blue; } /*子代选择器*/ .c2>p{ color: crimson; } /*毗邻选择器*/ .a2+p{ background-color: aquamarine; } /*兄弟选择器:同一级别的，离得很近的*/ .a2~p{ background-color: blueviolet; } /*多元素选择器：同时匹配所有指定的元素*/ .div,p{ background-color: aquamarine; } .a1 .a2, .a1~p{ color: blue; font-size: 15px; background-color: red; } #下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用 /*.a1 .a2{*/ /*color: blue;*/ /*font-size: 15px;*/ /*background-color: red;*/ /*}*/ /*.a1~p{*/ /*color: blue;*/ /*font-size: 15px;*/ /*background-color: red;*/ /*}*/ </style> </head> <body> <p>hi say hello........</p> <div class="a1"> <div class="a2"> <p id="s1">过去永远是画面</p> <div class="c2"> <p>那片海</p> </div> </div> <p>huhhdhshsdfdfgfdgd</p> <h1 class="a3">第一章</h1> <h2>第二章</h2> </div> <div class="a1"> <em>lalalalla啦啦啦啦案例</em> <div class="a2"> <p>hohou后</p> <b>海燕®</b> </div> </div> <h5>你好</h5> <p>好好好</p> </body> </html>
3.属性选择器
1 E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
2 比如“[cheacked]”。以下同。） p[title] { color:#f00; }
3
4
5 E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
6
7
8 E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
9 td[class~=”name”] { color:#f00; }
10
11 E[attr^=val] 匹配属性值以指定值开头的每个元素
12 div[class^="test"]{background:#ffff00;}
13
14 E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
15
16 E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
index.css
/*1.匹配所有haiyan属性的，并且只是在div标签的*/
div[haiyan]{
color: yellowgreen;
}
/*2.匹配所有haiyan=wawa的并且只是在div标签的*/
div[haiyan=wawa]{
color: aqua;
}
/*2.上面的优先级和下面的优先级本应该是一样的*/
/*应该显示下面的，但是，由于上面查找的范围
比下面的范围广，所以它会把上面的也显示了。*/
/*3.匹配所有属性为haiyan，并且具有多个空格分割的值，*/
/*其中一个只等于wawa的*/
div[haiyan~=wawa]{
color: blueviolet;
}
/*4.匹配属性值以指定值开头的每个元素，
并且是在div标签里的*/
div[haiyan^=w]{
background-color: aquamarine;
}
div[egon^=w]{
background-color: aquamarine;
}
/*5.匹配属性值以指定值结尾的每个元素 */
div[haiyan$=a]{
background-color: blueviolet;
}
/*6.匹配属性值中包含指定值的每个元素 */
div[haiyan*=a]{
background-color: blueviolet;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <link rel="stylesheet" href="index.css"> </head> <body> <div> <div haiyan = " wawa ">你好</div> <div haiyan = "wawa">哎呀呀啊</div> <div egon = "wawa">da大</div> <div haiyan="cccc">啊啊哈</div> </div> </body> </html>
4.伪类
anchor伪类：专用于控制链接的显示效果
'''
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
'''
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类</title> 6 <style> 7 /*没访问之前*/ 8 a:link{ 9 color: blue; 10 } 11 /*鼠标放在链接上的状态*/ 12 a:hover{ 13 color: chartreuse; 14 } 15 /*访问过后*/ 16 a:visited{ 17 color: red; 18 } 19 /*鼠标点击的时候*/ 20 a:active{ 21 color: aqua; 22 } 23 24 /*在p标签属性为c2的后面加上内容*/ 25 p.c2:after{ 26 content: 'hello'; 27 color: chartreuse; 28 } 29 30 /*在所有的p标签的前面加上内容*/ 31 p:before{ 32 content: '你猜'; 33 color: forestgreen; 34 } 35 span{ 36 background-color: aqua ; 37 /* 100px;*/ 38 /*height: 50px;*/ 39 /*span标签是一个内联标签，设置了窗宽不起作用*/ 40 /*它是跟着你设置的文本的大小变化的*/ 41 } 42 </style> 43 </head> 44 <body> 45 <p>你是谁？</p> 46 <p class="c2">你是谁？</p> 47 <p class="c3">你是谁？</p> 48 <a href="" id="c1">lalala</a> 49 <span>zzzz小</span> 50 </body> 51 </html>
before after伪类
:before p:before 在每个<p>元素之前插入内容 :after p:after 在每个<p>元素之后插入内容 例：p:before{content:"hello";color:red;display: block;}
5.css优先级和继承
css的继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
层叠性
层叠性： 权重的标签覆盖掉了权重小的标签
权重： 谁的权重大，浏览器就会显示谁的属性
数：id的数量 class的数量 标签的数量，按此顺序
/*1 0 0 */显示红色 #box{ color: red; } /*0 1 0*/ .container{ color: yellow; } /*0 0 1*/ p{ color: purple; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层叠性2</title> <style type="text/css"> /*2 0 1*/ #box1 #box2 p{ color:yellow; } /*1 1 1*/ #box2 .wrap3 p{ color:red; } /*1 0 3*/ div div #box3 p { color:purple; } /*0 3 4*/ div.wrap1 div.wrap2 div.wrap3 p{ color:blue; } </style> </head> <body> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div> </body> </html>
显示黄色
层叠性权重相同的处理
当权重一样的时候 是以后设置的属性为准。 前提是权重一样，后来者居上
总结：
先看有没有被选中，如果选中了，就数数（ id,class,标签的数量）谁的权重大，就显示谁的属性。权重一样大，后来者居上。
如果没有被选中，权重为0，如果属性都是被继承下来的，继承的为0，若权重都是0，'就近原则'：谁描述的近，就显示谁的属性。
第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同
第二种现象： 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。
第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'
!important 的使用
!important :设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。尽量不用!important,因为使用它会影响页面的布局
盒模型
"box model"这一术语是用来设计和布局时使用
盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。
盒模型的属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
盒模型的计算
如果一个盒子设置了padding，border，width，height，margin（先不设置margin）
盒子的真实宽度=width+2*padding+2*border
盒子的真实宽度=height+2*padding+2*border
要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。
padding
padding：就是内边距的意思，它是边框到内容之间的距离
padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样
background-color这个属性将填充所有的border以内的区域
padding的设置
padding有四个方向，分别描述4个方向的padding。
描述的方法有两种
1、写小属性,分别设置不同方向的padding
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
2、写综合属性，用空格隔开
/*上 右 下 左*/
padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
默认有padding的标签
比如ul标签，有默认的padding-left值。
那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
我们现在初学可以使用通配符选择器，这种方法效率不高
*{
padding:0;
margin:0;
}
我们要使用并集选择器选中页面中应有的标签
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form, fieldest,legend,input,button,textarea,p,blockquote,th,td{ margin:0 padding:0}
边框-border
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色
border-radius: 5px; 设置圆角
写border的方法
按照三要素写：
border- 3px;
border-style: solid;
border-color: red;
bordr: 10px solid red;综合写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border制作三角形</title> <style type="text/css"> /*用border制作三角*/ div{ width:0; height:0; border-bottom:200px solid red; border-left:200px solid transparent; border-right:200px solid transparent; } </style> </head> <body> <div></div> </body> </html>
margin:外边距。表示边框到最近盒子的距离。
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px;
什么是标准文档流
指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会把 脱离文档流的元素 当做不存在而进行定位。
标准文档流下 有哪些微观现象？
1.空白折叠现象：多个空格会被合并成一个空格显示到浏览器页面中
2.高矮不齐，底边对齐：文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
3.自动换行，一行写不满，换行写：如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
块级元素与行内元素
CSS块级元素和行内元素的分类：
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
块级元素：所有的容器级标签都是块级元素，还有p标签。
块级元素可以转换为行内元素：
给一个块级元素（比如div）设置：
display: inline;
这个标签将立即变为行内元素，此时它和一个span无异，inline就是“行内”，设置宽高无效，可并排
行内元素转换为块级元素：
给一个行内元素（比如span）设置：
display: block;
这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思，设置宽度、高度，独占一行，若不设宽度，将充满整个父级。
/*隐藏标签，不占位置*/ display:none; /*隐藏当前的标签，占位置*/ visibility:hidden;
浮动
浮动是css里面布局最多的一个属性
浮动四大特性：
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由"子围"效果：div浮动，文字围绕着div中的img围绕来
4.收缩的效果：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
清除浮动:
清除浮动的方法:
- 给父盒子设置高度
- clear:both :给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both
- 伪元素清除法
- overflow：hidden
常用：
伪元素清除法
.clearfix:after{ /*必须要写这三句话*/ content: '.'; clear: both; display: block; } 给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
overflow:hidden
overflow属性规定当内容溢出元素框时发生的事情。
margin塌陷问题
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，以大的数值为准，那么我们称这种现象叫塌陷.常见于不浮动的盒子垂直margin垂直方向的问题
给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
margin：0 auto;
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位 margin:0 auto,不能用
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系
父盒子里有子盒子，可以选择padding，进行调整位置
三、文本属性与字体属性
文本属性
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离，单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
阴影
text-shadow：水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色
文字溢出
ext-overflow:clip | ellipsis
字体属性
字体大小 font-size：20px;
字体粗细:
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
字体系列:font-family
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
font 属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
行高 line-height
单行文本垂直居中:
行高的高度等于盒子的高度，可以使当行文本垂直居中
多行文本垂直居中:
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
看共几行，文字占的总高度。看盒子高度，进行计算，算出合适的居中值。
vertical-align
定义行内元素的基线相对于该元素所在行的基线的垂直对齐
background
background-color属性表示背景颜色
background-color: rgb(0,0,0);
background-color: red;
background-color: #ff0000;
background-img:表示设置该元素的背景图片
background-repeat:表示设置该元素平铺的方式
background-position: 属性设置背景图像的起始位置。
background-attach :设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动
四、定位：
1.相对定位 2.绝对定位 3.固定定位
相对定位
相对于自己原来的位置定位
绝对定位
特性：
1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
参考点(重点)：
一、单独一个绝对定位的盒子：页面的左上角或者首屏页面左下角为参考点来调整位置。
二、以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
2.如果父亲设置了定位，那么以父亲为参考点。
绝对定位的盒子居中
*{ padding: 0; margin: 0; } .box{ width: 100%; height: 69px; background: #000; } .box .c{ width: 960px; height: 69px; background-color: pink; /*margin: 0 auto;*/ position: relative; left: 50%; margin-left: -480px; /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/ }
固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
练习：返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding:0; margin:0; } p{ width:100px; height:100px; background-color:red; position:fixed; bottom:100px; right:100px; line-height:100px; font-size:20px; text-align:center; color:#fff; } </style> </head> <body> <div> <p>返回顶部</p> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> </div> <script src="./jquery-3.2.1.js"></script> <script type="text/javascript"> $(function () { $('p').click(function () { $('html').animate({ "scrollTop":0 },2000) }) }) </script> </body> </html>
固定导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航栏</title> <style type="text/css"> *{ padding:0; margin:0; } body{ /*给body设置导航栏的高度，来显示下方图片的整个内容*/ padding:49px; } ul{ list-style:none; } a{ text-decoration: none; } .wrap{ width:100%; height:49px; background-color:#000; /*设置固定定位后，一定要加top与left属性 */ position:fixed; top:0; left:0; } .wrap .nav{ width:960px; height:49px; margin:0 auto; } .wrap .nav ul li{ float:left; width:160px; height:49px; /*line-height:49px;*/ text-align:center; } .wrap .nav ul li a{ width:160px; height:49px; display:block; color:#fff; font:20px/49px "HanziPen SC"; } .wrap .nav ul li a:hover{ background-color:red; font-size:23px; } </style> </head> <body> <div class="wrap"> <div class="nav"> <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> </ul> </div> </div> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> <img src="./1.jpg" alt=""> </body> </html>
z-index
设置元素的堆叠顺序
四大特性
- 数值大的压盖住数值小
- 定位了的元素，才能有z-index,浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认值为0
- 从父现象：父辈的z-index起到决定性作用。父辈值小，子辈值再大也是小。