目录
CSS简介
什么是CSS：
CSS(Cascading Style Sheets的缩写)，翻译为“层叠样式表”或者“级联样式表”，简称样式表。
CSS的主要作用：
主要用来给HTML网页设置 外观或者样式(HTML网页中的文字大小、颜色、字体、网页的背景颜色、背景图片等)。
CSS的语法规则：
CSS代码由选择器和一对括号组成；大括号里面是由一条条的声明语句组成；每一条语句都要使用英文状态下面的分号；每一条语句是由“属性:值”组成；CSS中的属性值一般不加引号；在CSS中如果属性值为数值型数据的时候，一般情况下需要加单位，单位一般都是px(像素)；在CSS中不能出现HTML标签。
CSS代码的书写方式：
1.嵌入式：是通过HTML中的<style>标签将CSS代码嵌入到HTML中，语法规则如下：
<style type="text/css">
/*书写CSS代码,如果使用的是HTML5文档，type属性可以省略*/
选择器{属性:值;属性:值}
</style>2.外链式：是指单独写一个以.css为扩展名的文件，然后在<head></head>标签中使用<link/>标签，将这个css文件链接到html文件中，语法规则如下：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=], initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>引入外部样式表步骤：
1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中
2.在HTML页面中使用<link>标签引入这个文件
<link rel="stylesheet" href="css文件路径">
如果确保引入文件成功，以谷歌浏览器举例：
刷新网页出现.css文件可以说明我们引入文件成功，我们也可以引入多个CSS文件，只需要写link标签就可以了。
行内式：是指将CSS代码书写在HTML标签的style属性(style是一个通用属性，每一个标签里面都拥有这个属性)中，其语法格式如下：
<标签名 style="属性:值;属性:值"></标签名>
例如
<div style="width: 100px; height:100px; background-color:red"></div>总结：
使用嵌入式的方式来书写CSS代码，它只能作用于当前的HTML文件。
使用外链式的方式来书写CSS代码，它可以作用于多个HTML文件。
Emmet语法
快速生成html标签
1.生成标签直接输入标签名按Tab键就可以，如div然后按tab键，可以直接生成<div></div>
2.生成多个相同标签，如div*3
3.生成父子级关系，如ul>li
4.生成兄弟关系，如div+p
5.生成带有类名或者id名字的，直接写 .demo 或者 #two 然后tab键
6.生成div类名是有顺序的，可以用自增符号$
快速生成css样式
1.比如w200 按tab 直接生成 width：200px;
2.比如 ih26 按tab 直接生成 line-height：26px；
选择器
什么是选择器:
选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
选择器的分类:
1.基本选择器
2.复合选择器
3.伪类选择器
4.属性选择器
基本选择器
| 选择器 | 格式 | 含义 | 举例 |
|---|---|---|---|
| 标签选择器 | 标签名 {属性：值；} | 匹配对应的HTML标签 | p {font-size：15px；} |
| 类选择器 | .class属性值 {属性：值；} | 给拥有指定class属性值的元素设置样式 | .box {width：400px；} |
| id选择器 | #id属性值 {属性：值；} | 只能使用一次 | #title {color：red；} |
| 通用选择器 | * {属性：值；} | 通用选择器，将匹配HTML所有标签（IE6不支持，给大型网站增加负担） | * {background-color：green；} |
复合选择器
1.后代选择器
2.子元素选择器
3.并集选择器（多元素选择器）
4.伪类选择器
| 选择器 | 含义 | 举例 |
|---|---|---|
| 并集选择器（多元素选择器）： 选择器1，选择器2， {属性：值；} | 多元素选择器，同时匹配选择器1和选择器2，多个选择器之间用逗号分隔 | p,h1,h2 {margin:0px;} |
| 后代元素选择器： E F {属性：值；} | 后代元素选择器，匹配所有属于E元素后代的F元素 E和F之间用空格分隔 | #slidebar p {font-color:#000;} |
| 子元素选择器： E>F{属性：值；} | 子元素选择器，匹配所有E元素的子元素F | div> p{color:#008000;} |
| 相邻元素选择器: E+F {属性:值;} | 相邻元素选择器，匹配所有紧随E元素之后的同级元素F | div + div{color:#008c8c} |
伪类选择器
伪类选择器是用来给超级链接的不同状态来设置样式。
超级链接的四种不同状态：正常状态、访问过后状态、鼠标放上状态、激活状态。
1.链接伪类 2.结构伪类 等
下方为链接常用伪类选择器
| 选择器 | 含义 |
|---|---|
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :active | 鼠标放在元素上面时，点击的一瞬间 |
<!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.0">
<title>Document</title>
<style>
a:link{/* 正常状态 */
color: #f00;/* 红 */
}
a:visited{/* 访问过后状态 */
color: #000;/* 黑 */
}
a:hover{/* 鼠标悬停状态 */
color: gold;/* 黄 */
}
a:active{/* 激活状态 */
color: #0f0;/* 绿 */
}
</style>
</head>
<body>
<a href="http://www.bilibili.com">哔哩哔哩</a>
<a href="http://www.douyu.com">斗鱼</a>
<a href="http://www.123.com">123</a>
</body>
</html>默认正常状态下，我们设置为红色如下
总结：
超级链接的不同状态它其实是有顺序的，也就是说伪类选择器设置其实是有顺序的。如果不按照伪类选择器的顺序，那么样式就会失效。
顺序：要遵循 “爱恨法则” 要先有爱，才有恨。“Love Hate”。
超级链接的美化：
我们通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。一般情况下：
正常状态与访问过后的状态的样式设置为一样；当鼠标放上的时候给其设置为另外一个颜色，激活状态一般不会设置，因为激活状态的时间太短。举例：
/*正常状态与访问过后的状态*/
a:link,a:visited{
text-decoration: none; color: #444;
}
/*鼠标放上状态*/
a:hover{
color: #f00;
text-decoration:underline;
}
下方为：focus伪类选择器
:focuss伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
input:focus {
background-color:yellow;
}例如：
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:focus伪类选择器</title>
<style>
/* 把获得光标的input表单元素选取出来 */
input:focus {
/* 选框设置为红色 */
background-color: red;
/* 选框内的文字设置为绿色 */
color: green;
}
</style>
</head>
<body>
<!-- 三个表单 -->
<input type="text">
<input type="text">
<input type="text">
</body>效果为：
CSS字体属性
1.字体系列
CSS使用font-family属性定义文本的字体系列
p {font-family:"微软雅黑"；}
div {font-family：Arial,"Microsoft Yahei","微软雅黑"；}2.字体大小
CSS使用font-size属性定义文本的字体大小
p {
font-size:20px;
}·px（像素）
·谷歌浏览器默认的文字大小为16ox
·不同浏览器默认显示的字号大小不一致，我们尽量给一个明确值，不要默认大小
3.字体粗细
CSS使用font-weight属性定义文本的字体粗细
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400等同于normal，700等同于bold，（数字后面不跟单位） |
4.文字样式
CSS使用font-style属性定义文本的风格
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style：normal; |
| italic | 浏览器会显示斜体的字体样式 |
注意：平时我们很少给文字加斜体，反而要给斜体的标签（em，i）改为不倾斜的字体
5.文字复合属性写法
body {
font:font-style 风格是否斜体
font-weight 粗细
font-size/line-height 大小/行高
font-family 字体名称
;
}
注意：不能更换顺序，各个属性之间用空格隔开，必须保留font-size和font-family属性
6.字体属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 常用单位是px，一定要跟上单位 |
| font-family | 字体名 | 实际工作中按照约定来写 |
| font-weight | 字体粗细 | 加粗是700或者bold，不加粗是400或normal，数字不要跟单位 |
| font-style | 字体样式 | 倾斜是italic，不倾斜是normal |
| font | 字体连写 | 1.不能更换顺序 2.各个属性之间用空格隔开 3.必须保留font-size和font-family属性 |
CSS的文本属性
1.文本颜色
color属性用于定义文本的颜色
div {
color:red;
}
| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，pink等 |
| 十六进制 | #FF000,#FF6600,#29D794 |
| RGB代码 | rgb（225，0，0）或rgb（100%，0%，0%） |
2.对齐文本
text-align属性用于设置元素内文本内容的水平对其方式
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
3.装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
| 属性值 | 描述 |
|---|---|
| none | 默认没有装饰线 |
| underline | 下划线，链接a自带下划线 |
| overline | 上划线 |
| line-through | 删除线 |
4.文本缩进
text-indent属性用来指文本的首行缩进
div {
text-indent:10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
p {
text-indent:2em;
}
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
5.行间距
line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
p {
line-height:26px;
}
6.文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 通常使用十六进制，比如简易形式#fff |
| text-align | 文本对齐 | 设定文字水平的对齐方式 |
| text-indent | 文本缩进 | 通常用于段落的首行缩进2个字的距离（2em） |
| text-decoration | 文本修饰 | 下划线underline 取消下划线none |
| line-height | 行高 | 控制行与行之间的距离 |
CSS的元素显示模式
1.块元素
常见的块元素有<h1>~<h6> <p> <div> <ul> <ol> <li>等，其中<div>标签是最典型的块元素
块元素特点：
1.比较霸道，自己独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器及盒子，里面可以放行内或者块级元素
注意：文字类的元素内不能放块级元素
2.行内元素
常见的行内元素有<a> <strong> <b> <em> <i>等，其中<span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素
行内元素特点：
1.相邻行内元素在一行上，一行可以显示多个
2.高宽直接设置是无效的
3.默认宽度就是它本身的宽度
4.行内元素只能容纳文本或者其他行内元素
注意：链接里面不能再放链接特殊情况下，<a>里面可以放块级元素，但是给<a>转化一下块级元素更安全
3.行内块元素
在行内元素中有几个特殊的标签：<img/><input/><td>它们同时具有块元素和行内块元素的特点。称他们为行内块元素
特点：
1.和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
2.默认宽度就是它本身内同的宽度（行内元素特点）
3.高度，行高，外边距以及内边距都可以控制（块级元素特点）
总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽高 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 不可以直接设置宽度 | 不可以直接设置宽高 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 可以直接宽度和高度 | 可以设置宽高 | 它本身内容的宽度 |
元素显示模式的转换
特殊的情况下，我们需要元素模式的转换，简单礼节：一个模式的元素需要另一种模式的特性
如：想要增加链接<a>的触发范围
转换为块元素:display:block;
转换为行内元素：display:inline;
行内元素转换为行内块元素:display: inline-block;
例如：
<style>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素a转换为块级元素 */
display: block;
}
div {
width: 150px;
height: 50px;
background-color: purple;
/* 把块元素div转换为行内元素 */
display: inline;
}
span {
width: 100px;
height: 80px;
background-color: skyblue;
/* 把行内元素span转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body> 
一个小工具的使用 snipaste
简单而强大的截图工具，也可以将截图贴回屏幕上
常用快捷键：
1.F1截图，测量大小，设置箭头，书写文字
2.F3在桌面置顶显示
3.点击图片，alt取色
4.esc关闭
案例：小米侧边栏
<title>简单版小米侧边栏</title>
<style>
/* 1.把链接a转换为块级元素 */
a {
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
text-indent: 2em;
padding-top: 15px;
}
/* 2.鼠标经过链接变换背景颜色 */
a:hover {
background-color: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>效果为
单行文字垂直居中的代码
CSS没有提供文字垂直居中的代码，这里可以使用一个小技巧来实现
解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中
line-height:盒子的高度；
CSS的背景
背景属性可以设置背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等。
1.背景颜色
background-color:颜色值；
2.背景图片
background-image
语法格式：
background-image:none/url(url)
<style>
div {
width: 300px;
height: 300px;
/* 不要落下url（）背景图片地址 */
background-image: url(images/logo.png);
}
</style>
</head>
<body>
<div></div>
</body>| 参数值 | 作用 |
|---|---|
| none | 无背景图（默认） |
| url | 使用绝对护着相对地址指定背景图像 |
（1）背景平铺
在html页面上对背景图像进行平铺，可以使用background-repsat属性
background-repsat：repeat（平铺）；
no-repeat（不平铺）；
repeat-x（沿x轴平铺）；
repeat-y（沿y轴平铺）；
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png);
/*背景图片不平铺 */
background-repeat: no-repeat;
/*背景图片平铺 */
background-repeat: no-repeat;
/*背景图片沿着X轴平铺 */
background-repeat: repeat-x;
/*背景图片沿着Y轴平铺 */
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div></div>
</body>
注意：页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色
（2）背景图片位置
利用background-position属性改变图片在背景中的位置
background-position：x y；
代表：X坐标和Y坐标 ，可以使用方位名词或者精确单位
参数值 说明 length 百分数/由浮点数字和单位标识符组成的长度值 position 方位名词：top（上）、center（中）、bottom（下）、left（左）、center（中）、right（右）
<1>当参数是方位名词：
两个值前后顺序无关，比如background-position：left top；和background-position：top left；效果一致。
只指定了一个方位名词，另一个值省略，则第二个默认居中对齐。
<2>当参数是精确单位：
如果参数值是精确坐标，第一个一定是X坐标，第二个一定是Y坐标。
如果只指定一个数值，那么该数值一定是X坐标，另一个Y坐标默认垂直居中 。
<3>当参数是混合单位：
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是X坐标，第二个值是Y坐标。
（3）背景图像固定/背景附着
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
使用场景：后期可以制作视差滚动的效果
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随着对象内容滚动 |
| fixed | 背景图像固定 |
（4）背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并写在一个background中
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
背景颜色
背景图片地址
背景平铺
背景图像滚动
背景图片位置
<style>
div {
background:black url(images/bg.jpg) no-repeat fixed center top;
}
</style>（5）背景色半透明
background：rgba（0，0，0，0.3）；
注意：
·最后一个参数是alpha透明度，取值范围在0~1之间
·习惯把最后一个0.3写成 .3
·背景半透明是指盒子背景半透明，盒子里面的内容不受影响
3.背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值 十六进制 RGB代码 |
| background-image | 背景图片 | url（图片路径） |
| background-repeat | 是否平铺 | repat no-repat repat -x repat-y |
| background-position | 背景位置 | length position |
| background-attachment | 背景附着 | scroll(背景滚动) fixed（背景固定） |
| 背景简写 | 书写更方便 | 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 |
| 背景色半透明 | 背景颜色半透明 | background：rgba（0，0，0，0.3）； 后面必须是4个值 |
1554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
