一，CSS初识
CSS(cascading style sheet，层叠样式表)定义如何显示html元素
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化(渲染)
二，CSS语法
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束
选择器 {k1:v1;k2:v2;....}
CSS注释
/*注释*/
三，CSS的几种引入方式
1.行内式样：直接在标签中的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
2.内部样式：写在网页中的head标签中的style标签内，格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{background-color: #2b99ff;} </style> </head>
3.外部样式：写在单独的css文件中，在网页的head中通过link标签引用，推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
#123
/* 导航条样式区 */ p {color:green} /*个人中心样式区 */
四，CSS基本选择器
注意：
1.样式类名不要使用数字开头，有的浏览器不兼容
2.标签中的class属性如果有多个，要用空格分隔
1.元素选择器，根据标签进行选择
例：/*所有的p标签*/
p {color: "red";}
2.id选择器，语法：#+id
例：/*id是p1的标签*/
#p1 {color: red}
3.类选择器，语法："."+类名
例：/*有c2这个class的标签*/ .c2 {color: purple} 例：/*有c1这个class的i标签*/ i.c1 {color: yellow} <i class="c1">hello</i>
4.通用选择器
例：/*通用*/
* {color: black}
五，CSS组合选择器
1.后代选择器，又名子子孙孙选择器
例：/*找儿子标签：li的儿子a标签*/ li>a {color: red} <li><p><a href="">哈哈</a></p></li>
2.儿子选择器
例：/*子子孙孙中找标签*/ #d1 p {color: green} <div id="d1"> <div> <div> <p>我是一个儿子p标签！</p> </div> <p>我也是一个儿子P标签！</p> </div> <p>我是儿子p标签！</p> </div>
3.毗邻选择器
例：/*毗邻选择器：找下面紧挨着的，或者是说第几个p*/ div+p {color: blue} <div>div</div> <p>div下面的p标签</p>
4.弟弟选择器
例：/*弟弟选择器：同级往下面找 */ #d2~a {color: deeppink} <div id="d2">d2</div> <p>d2下面的p</p> <a href="">我是弟弟</a> <p>p标签</p> <a href="">我是二弟</a> <a href="">我是三第</a>
六，属性选择器
例：/* 找到所有有qs这个属性的标签 */ div[qs] {color: green} <div qs="nb"></div> 例：/* 找到qs属性值是nb2的标签 */ div[qs='nb2'] {color: yellow} <div qs="nb2"></div>
#不常用的属性选择器 例1：/*找到所有title属性以hello开头的元素*/ [title^="hello"] {color: red;} 例2：/*找到所有title属性以hello结尾的元素*/ [title$="hello"] {color: yellow;} 例3：/*找到所有title属性中包含（字符串包含）hello的元素*/ [title*="hello"] {color: red;} <div title="helloworld">helloworld</div> 例4：/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ [title~="hello"] {color: green;} <div title="hello world">hello world</div>
七，分组和嵌套
1.分组
当多个元素的样式相同的时候，我们没有必要重复第为每个元素都设置样式，我们可以通过在多个选择器之间选择使用逗号分隔的分组选择器来统一设置元素样式。
例：/*分组选择器之间使用","和" "隔开*/
第一种写法： #d1, .c1 {color: red;}
第二种写法：
div,
p {color:red;} <div id="d1">我是div</div> <p class="c1">我是p标签</p>
2.嵌套
基本选择器之间可以任意嵌套组合使用，比如：.c1类内部所有p标签设置字体颜色为红色
例：/*先找c1，再找c1里的p*/ .c1>p {color:red;} <div class="c1"> <p></p>
</div>
八，伪类选择器
/* 设置未访问的链接的颜色*/ a:link {color: #FF0000} /* 设置已访问的链接的颜色*/ a:visited {color: #00FF00} /* 鼠标移动到链接上的颜色 */ a:hover {color: #FF00FF} /* 选定的链接的颜色*/ a:active {color: #0000FF} /*input输入框获取焦点时样式*/ input:focus {outline: none;background-color: #eee;}
九，伪元素选择器
1.first-letter：常用作给首字母设置特殊样式，不能与before同用
/*设置p标签内的字符串首字符的大小和颜色*/ p:first-letter {font-size: 48px;color: red;}
2.before：用作给某标签的前面插入内容，多用于清除浮动
/*在每个<p>元素之前插入内容*/ p:before {content:"*";color:red;}
3.after：用作给某标签的后面插入内容，多用于清除浮动
/*在每个<p>元素之后插入内容*/ p:after {content:"[?]";color:blue;}
十，选择器的优先级
1.CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承时一种机制，它允许样式不仅可以应用于某个特定元素，还可以应用于它的后代。
/*例如一个body定义了的字体颜色值也会应用到段落的文本中*/ body {color: red;}
此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重非常低，比普通元素的权重还低，权重为0。
2.选择器的优先级
1.当选择器类型相同时：
谁最后加载听谁的
2.当选择器不同的时候
1.内联样式(权重1000)>ID选择器(权重100)>class选择器(权重10)>元素选择器(权重1)=通用选择器>CSS继承(权重0)
2.无视上面的优先级强制使样式生效，不推荐使用：!important
/*!important使样式强制生效*/ p {color:green !important;}
3.当使用递归的选择器时，权重可以叠加，但是权重计算永不进位
/* 权重100 */ #p1 {color: orange} /* 权重20 */ .c1>.c2 {color: yellow} /* 权重10 */ .c2 {color: green} /* 权重1 */ p {color: red} <div class="c1"> <p class="c2" id="p1" >c1内部的p标签</p> </div>
十一，CSS属性相关
1.宽和高
/*
width属性可以为元素设置宽度
height属性可以为元素设置高度
块级标签才能设置宽度，内联标签的宽度有内容来决定
*/
div {width: 1000px;background-color: red} span {width: 1000px;background-color: red}
2.字体属性
文字字体：font-family可以把多个字体名称作为一个"回退"系统保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值，如果识别不了则使用浏览器默认字体
body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
3.字体大小
/*设置标签内的字体大小*/ p {font-size: 14px;}
4.字重（粗细）
/*
normal：默认值，标准粗细
bold：粗体
bolder：更粗
lighter：更细
100~900：设置具体粗细，400等同于normal，而700等同于bold
inherit：继承父元素字体的粗细值
*/
p {font-weight:normal;}
5.文本颜色
指定颜色的三种方法：
1.十六进制值：#FF0000
2.一个RGB值：RGB(255,0,0)
3.颜色的名字：red,green..
4.RGBA(255,0,0,0.3)：第四个值为alpha，指定了色彩的透明度，范围为0.0到1.0之间
p {font-size: 24px;color: rgba(255,20,147,0.4)} p {font-size: 24px;color: rgb(255,20,147)} p {font-size: 24px;color: deeppink} p {font-size: 24px;color: #ff1896}
6.文字属性
1.文字对齐：text-align属性规定元素中的文本的水平对齐方式
/* left：左边对齐，默认值 right：右对齐 center：居中对齐 justify：两端对齐 */ 例：/*中间对齐*/ div {text-align: center;}
2.文字装饰：text-decoration属性用来给文字添加特殊效果
/* none：默认，定义标准的文本 underline：定义文本下的一条线 overline：定义文本上的一条线 line-through：定义穿过文本下的一条线 inherit：继承父元素的text-decoration属性的值 */ 例：/*常用的为去掉a标签默认的下划线*/ a {text-decoration：none;}
3.首行缩进：将段落的第一行缩进n个像素
例：/*将段落的第一行缩进32个像素*/ p {text-indent：32px}
7.背景属性
<style> .c1 { height: 100px; width: 100px; color: red; /*背景颜色*/ background-color: green; /*背景图片*/ background-image：url('1.jpg'); /* 背景重复 repeat(默认)：背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ background-repeat: no-repeat; /*背景位置*/ /*另一种格式：background-position: 200px 200px;*/ background-position: right top; } </style> <div class="c1">div标签</div>
/*简写*/ background: red url("3.jpg") no-repeat right top;
雪碧图：
<!--为了减少网页请求图片的次数，将很多小图片放在一个大图片中，通过blackground-postion指定，一般在比较旧的网页上比较常见，以下为同原理的示例--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滚动背景图示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
8.边框
/* none：无边框 dotted：点状虚线边框 dashed：矩阵虚线边框 solid：实线边框 */ #i1 { /*设置边框宽度*/ border-width: 2px; /*设置为实线边框*/ border-style: solid; /*设置边框颜色*/ border-color: red; }
/*简写*/ #i1 {border: 2px solid red;}
除了可以统一设置边框为还可以单独为某一个边框设置样式
例：#i1 { border-top-style:dotted; border-top-color: red; border-right-style:solid; border-right-color:yellow; border-bottom-style:dotted; border-bottom-color:deeppink; border-left-style: dashed; border-left-color:green; } <span id="i1">123123</span>
border-radius：这个属性能实现圆角边框的效果
/*将border-radius设置为长或高的一半即可得到一个圆形*/ i1 { background-color: red; border-radius: 50%; }
9.display属性：用于控制html元素的显示效果
/*none：HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用*/ p {display:"none";} /*block：默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分*/ p {display:"block";} /*inline：按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响*/ p {display:"inline";} /*inline-block：使元素同时具有行内元素和块级元素的特点*/ p {display:"inline-block";}
display:"none"与visibility:hidden的区别
isibility:hidden:
可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none:
可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
10.CSS盒子模型
1.margin(外边距):
用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到互相隔开的目的
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; } /*推荐使用简写：顺序：上右下左*/ .margin-test {margin: 5px 10px 15px 20px;} /*常见居中*/ .mycenter {margin: 0 auto;}
2.padding:
用于控制内容与边框之间的距离
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } /*推荐使用简写，顺序：上右下左*/ .padding-test {padding: 5px 10px 15px 20px;} /* 补充padding的常用简写方式： 提供一个，用于四边； 提供两个，第一个用于上－下，第二个用于左－右； 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下； 提供四个参数值，将按上－右－下－左的顺序作用于四边； */
3.border(边框):
围绕在内边框和内容外的边框
4.content(内容):
盒子的内容，显示文本和图像
如图：
11.float
在CSS中，任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是何种元素
关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
由于浮动框不在文档的普通流中，所以文档的普通流中的框表现得就像浮动框不存在一样
/*none：默认值，不浮动*/ /*right：向右浮动*/ .right { width: 80%; height: 1000px; background-color: green; float: right; } /*left：向左浮动*/ .left { width: 20%; height: 1000px; background-color: red; float: left; }
12.clear属性：规定元素的哪一侧不允许其他浮动元素
/* left：在左侧不允许浮动元素 right：在右侧不允许浮动元素 both：在左右两侧均不允许浮动元素 none：默认值。允许浮动元素出现在两侧 inherit：规定应该从父元素继承clear属性的值 注意：clear属性只会对自身起作用，而不会影响其他元素。 */ p {clear：both;} /*父标签塌陷问题*/ .clearfix:after { content: ""; display: block; clear: both; }
父标签塌陷问题解决例子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } .c1 { border: 1px solid black; /*height: 102px;*/ } .c2 { height: 100px; width: 200px; background-color: red; border: 1px solid black; } .c3 { width: 100%; height: 200px; background-color: deeppink; } .left { float: left; } .right { float: right; } .clearfix:after { content: ''; display: block; clear: both; } </style> </head> <body> <div class="c1 clearfix"> <div class="c2 left"></div> <div class="c2 right"></div> <!--<div class="cc"></div>--> </div> <div class="c3"></div> </body> </html>
13.overflow溢出属性
/* visible：默认值。内容不会被修剪，会呈现在元素框之外 hidden：内容会被修剪，并且其余内容是不可见的 scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 inherit：规定应该从父元素继承 overflow 属性的值 */ /* overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向） */ .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; }
圆形头像实例
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>圆形的头像示例</title> <style> * { margin: 0; padding: 0; background-color: #eeeeee; } .header-img { width: 150px; height: 150px; border: 3px solid white; border-radius: 50%; overflow: hidden; } .header-img>img { max-width: 100%; } </style> </head> <body> <div class="header-img"> <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html>
14.定位(position)
1.static：默认值，无定位，不能当做绝对定位的参照物，并且设置标签对象的left、top等值时不起作用的
2.relative(相对定位)：相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物
3.absolute(绝对定位)：
相对已经定位过的祖先标签，做的定位
多用于页面局部的布局，注意要和定位过的祖先标签配合使用
绝对定位和浮动一样，标签都会脱离文档，别的标签可以占用他的位置
4.fixed(固定)
固定定位相对于屏幕固定显示在某个位置
固定定位的元素也是脱离文档的
返回顶部按钮
<!--返回顶部按钮实例--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>返回顶部示例</title> <style> * { margin: 0; } .d1 { height: 1000px; background-color: #eeee; } .scrollTop { background-color: darkgrey; padding: 10px; text-align: center; position: fixed; right: 10px; bottom: 20px; } </style> </head> <body> <div class="d1">111</div> <div class="scrollTop">返回顶部</div> </body> </html>
15.z-index：
设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index仅能在定位元素上奏效
<!--自定义模态框示例-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定义模态框</title> <style> .cover { background-color: rgba(0,0,0,0.65); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; } .modal { background-color: white; position：absolute width: 300px; height: 400px; left: 50%; top: 50%; margin: -100px 0 0 -200px; z-index: 1000; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div>
<form action="">
<p><input type="text"></p>
</form> </body> </html>
16.opacity：
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明
/*opacity整体设置透明，rgba是只透明被设置的部分*/
p {opacity: 0.5}