# CSS 选择器

# CSS 基础选择器

# 标签选择器

# 简介

标签选择器是指用 HTML 标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

# 作用

标签选择器可以把某一类标签选择出来，比如所有的 <div> 标签和所有的 <span> 标签

# 优点

能快速为页面中的同类型标签设置统一样式

# 缺点

不能设计差异化样式，只能选择全部的当前标签

# 语法

div {

    color: green;

}

# 类选择器

# 简介

如果要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器

# 语法

.类名 {

    属性1: 属性值1;

    ...

}

# 类选择器 - 多类名

可以给一个标签使用多个类名

<div class="red green"></div>

# id 选择器

# 简介

id 选择器不得重复

# 语法

<div id="id"></div>

# 通配符选择器

# 简介

在 CSS 中，通配符选择器使用 * 来定义，他表示选取页面中的所有元素（标签）

# 语法

* {

    属性1: 属性值1;

    ...

}

# CSS 字体属性

# 字体系列

CSS 使用 font-family 属性定义文本的字体类型

p {

    font-family: 'Microsoft Yahei';

}

# 字体大小

CSS 使用 font-size 属性定义字体大小

p {

    font-size: 16px;

}

# 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细

p {

    font-weight: 400;

}

# 文本样式

CSS 使用 font-style 属性设置文本的风格

p {

    font-style: normal;    //默认

    font-style: italic;    //斜体

}

# 文本属性

字体属性代码可以综合来写，可以节约代码

body {

    font: font-style font-weight font-size/line-height font-family;    //size和family必须在

}

# 文本属性

# 文本颜色

color 属性定义文本颜色

div{

    color: red;

    //color #FF0000;    //16进制

}

# 对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式

div {

    text-align: center;

}

# 装饰文本

text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等

div {

    text-decoration: underline;

}

# 文本缩进

text-indent 属性来指定文本的第一行缩进，通常是将段落的首行缩进

div {

    text-indent: 10px;

    text-indent: 2em;        //em相对于当前元素的单位大小

}

# 行间距

line-height 属性用于设置行间的距离，所以控制文字行与行之间的距离

p {

     line-height: 50px;

}

# CSS 的引入样式

# CSS 的三种样式表

• 行内样式表
• 内部样式表
• 外部样式表

# 内部样式表

写一个 <style> 标签，一般写在 head 标签内

# 行内样式表

<div style="color: red;">内部样式表</div>

# 外部样式表

• 新建后缀名为.css 的文件
• 在 HTML 页面中，使用 <link> 标签引入这个文件

<link rel="stylesheet" href="style.css">

# Emmet 语法

# 快速生成 HTML 结构语法

• 生成标签，直接输入标签名按下 tab 健即可，比如 div 然后 tab 健，就可以生成 <div></div>
• 如果想要生成多个相同标签，加上 * 就可以，比如 div*3 就可以快速生成 3 个 div
• 如果有父子级关系的标签，可以用 >，比如 ul>li 就可以了
• 如果有兄弟关系的标签，用 + 就可以比如，div+p
• 如果生成带有类名或者 id 名的，直接写.demo 或者 #demo，tab 健就可以了
• 如果生成 div 的类名是有顺序的，可以使用自增符合 $
• 如果想要生成的标签内部写内容，可以用 {} 表示

# 快速生成 CSS 样式语法

CSS 基本采取简写样式即可

• 比如 w200 按下 tab 可以生成 width: 200px;
• 比如 lh26 按下 tab 就可以生成 line-height: 26px;

# 快速格式化代码

• 右键点格式化文档
• 快速格式化快捷键 shift+alt+f

# CSS 复合选择器

# 复合选择器介绍

• 复合选择器可以更准确，更高效的选择目标元素
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的符合选择器包括：后代选择器，子选择器，并集选择器，伪装选择器等

# 后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为了外层标签的后代

ol li {

    color: red;

}

• 元素 1 和元素 2 中间用空格隔开
• 元素 1 是父级，元素 2 是子级，最终选择的是元素 2
• 元素 2 可以是儿子，也可以是孙子，只要是元素 1 的后代即可
• 元素 1 和元素 2 可以是任意的基础选择器

# 子选择器（重要）

子元素选择器只能选择作为某元素最近一级的元素，即亲儿子

div > a {

    color: pink;

}

• 元素 1 和元素 2 中间用大于号隔开
• 元素 1 是父级，元素 2 是子级，最终选择的是元素 2
• 元素 2 必须是亲儿子，其孙子，重孙之类不归他管

# 并集选择器（重要）

并集选择器可以使用多组标签，同时定义相同的样式，通常用于集体的声明

并集选择器是各选择器通过英文逗号链接而成，任何形式的选择器都可以作为并集选择器的一部分

div,

span,

.pig {

     color: pink;

}

• 元素 1 和元素 2 中间用逗号隔开
• 逗号可以理解为和的意思
• 并集选择器通常用于集体的声明

# 伪类选择器

伪类选择器用于某些选择器添加的特殊效果，比如给链接添加特殊效果，或选择第一个，第 n 个元素

# 链接伪类选择器

# a:link

选择所有未被选择的链接

a:link {

     color: pink;

}

# a:visited

选择所有已被访问的链接

a:visited {

    color: green;

}

# a:hover

选择鼠标指针位于其上的链接

a:hover {

      color: skyblue;

}

# a:active

选择活动链接（鼠标按下未弹起的链接）

a:active{

      color: red;

}

# 链接伪类使用的注意事项

• 为了确保生效，请按照 LVHA 的顺序进行声明 link visited hover active
• 记忆法：love hate
• 因为 a 链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式

//开发中常用

a {

      color: black;

      text-decoration: none;

}

a:hover {

      color: pink;

      text-decoration: underline;

}

# :focus 伪类选择器

: focus 伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况下类表单元素才能获取，因此这个选择器也是针对表单元素来说

input:focus {

       background-color: pink;

       color: red;

}

# CSS 元素显示模式

# CSS 元素显示模式介绍

HTML 元素一般分为块元素和行内元素两种类型

# 块元素

# 常见块元素

<h> 、 <p> 、 <div> 、 <ul> 、 <ol> 、 <li>

# 块级元素特点

• 比较霸道，自己独占一行
• 高度，宽度，外边距以及内边距都可以控制
• 宽度默认是容器（父级宽度）的 %100
• 是一个容器及盒子，里卖弄可以放行内或者块级元素
• 文字类元素内不能使用块级元素

# 行内元素

# 常见行内元素

<a> 、 <strong> 、 <b> 、 <em> 、 <i> 、 <del> 、 <s> 、 <ins> 、 <u> 、 <span>

# 行内元素特点

• 相邻行内元素在一行上，一行可以显示多个
• 高，宽，直接设置是无效的
• 默认宽度就 i 是它本身内容的宽度
• 行内元素只能容纳文本和其他行内元素
• 链接里面不能放链接
• 特殊情况 <a> 里面可以方块级元素，但是 <a> 给转换一下块级模式最安全

# 行内块元素

# 常见行内块元素

<img> 、 <input> 、 <td>

# 行内块元素特点

• 和相邻行内元素（行和快）在一行上，但是他们之间会有空白缝隙，一行可以显示多个
• 默认宽度为它本身内容的宽度
• 高度，行高，外边距以及内边距都可以控制

# 元素显示模式切换

# disploy：block

a {

    width: 500;

    height: 200px;

    color: pink;

    display: block;

}

# display：inline

div {

     width: 250px;

     height: 250px;

     background-color: red;

     display: inline;

 }

# display：inline-block

span {

    width: 250px;

    height: 250px;

    color: skyblue;

    display: inline-block

}

# CSS 的背景

# 背景颜色

background-color: 颜色值;    //一般情况下背景颜色默认值为transparent（透明）

# 背景图片

background-image: url(url);    //none为没有背景图片

# 背景平铺

background-repeat: no-repeat;//不平铺    repeat平铺    repeat-x repeat-y 沿xy平铺

# 背景图片位置

background-position: x y;

• 参数为方位名词：跟顺序没有关系，left,right,top,center
• 参数是精确单位
• 参数是混合单位

# 背景图像固定

background-attachment: scrool | fixed    //随对象滚动 | 背景图象固定

# 背景复合写法

background: 背景颜色，背景图片地址 背景平铺 背景图象滚动 背景图片位置  //没有顺序要求

# 背景颜色半透明

background:rgba(0,0,0,0.3);    //最后一个参数是透明度 取值范围是0~1

# 三大特性

# 层叠性

相同的选择器设置相同的样式，此时一个样式就会被覆盖另一个冲突的样式

层叠性原则：

• 样式冲突，遵循就近原则，哪个样式谨，就执行哪个样式
• 样式不冲突，不会重叠

div {

      color: red;

      font-size: 20px;

}

div {

       color: pink;

}

//pink覆盖red

# 继承性

行高的继承性

body {

      color: pink;

      font: 12px/1.5 Microsoft YaHei;

}

• 行高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父类的行高 1.5
• 此时子元素的行高是：当前元素字体大小的 * 1.5
• body 行高 1.5 这样写法最大的优势就 i 是里面元素可以根据自己文字大小自动调整行高

# 优先级

权重叠加，如果是复合选择器，则会权重叠加，需要计算权重

ul li {

     color: green;

}

//权重为0，0，0，2

li {

     color: pink;

}

//权重为0，0，0，1

# 盒子模型

# 网页布局

• 先准备好相关的网页元素，网页元素基本都是盒子 Box
• 利用 CSS 设置好盒子样式，然后摆放到相应的位置
• 往盒子里边装内容

# 盒子模型的组成

# 边框（border）

border-width: 5px;

border-style: solid;    //实线

border-style: dashed;    //虚线

border-style: dotted;    //点线

border-color: pink;

//简写

border: 1px solid red;    //没有顺序

border-top: 5px solid red;    //设置上边框

border-bottom: 10px dashed purple;    //设置下边框

# 表格的细线边框

border-collapse: collapse;    //collapse是合并的意思。表示相邻边框合在一起

边框会影响盒子的实际大小

# 内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离

简写方法

# 外边距（margin）

外边距让块级盒子水平居中

• 盒子必须设置了宽度（width）
• 盒子左右的外边距都设置为 auto

# 外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并，经常出现塌陷问题

• 可以为父元素定义上边框
• 可以为父元素定义内边距
• 可以为父元素添加 overflow: hidden;

# 清除内外边距

* {

    margin: 0;

    padding: 0;

}

# 圆角边框（重点）

border-radius: length;

• 参数值可以为数值（像素）或者百分比的形式
• 如果是正方形，想要设置一个圆，把数值改成高度或者宽度的一半即可，或者写为 50%
• 如果是个矩形，设置高低的一半可以把两边变成半圆
• 该属性是一个简写属性，可以跟四个值，分别代表左上，右上，右下，左下
• 分开写：border-top-left-radius 等

# 盒子阴影（重点）

box-shadow: h-shadow v-shadow blur spread color inset;

• 默认外阴影 outset, 但是不可以写这个单词
• 盒子阴影不占用空间，不会影响盒子排列

# 文字阴影

text-shadow: h-shadow v-shadow blur color;

# 浮动

# 传统网页布局的三种方式

• 标准流
• 浮动
• 定位

# 浮动定义

float 属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或者另一浮动的边缘

float:属性值;

# 浮动的特性（重难点）

# 浮动元素会脱离标准流（脱标）

• 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）
• 浮动的盒子不在保留原先的位置

# 浮动元素一行显示

注意：浮动元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下，多出盒子会另起一行对齐

浮动元素具有行内块元素的特点

# 浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

# 清除浮动

# 语法

选择器{clear: 属性值}

# 清除浮动的方法

• 额外标签法称为隔墙法，是 W3C 推荐的
• 父级添加 overflow 属性
• 父级添加 after 属性
• 父级添加双伪元素

# 额外标签法

额外标签法会在浮动元素末尾添加一个空的标签，例如 <div style="clear: both"></div>

• 优点：通俗易懂，书写方便
• 缺点：添加许多无意义的标签，结构化较差

注意：要求新的标签必须是块级元素

# 父级添加 overflow

可以给父级添加 overflow 属性，将其属性设置为 hidden，auto，scroll

• 优点：代码简洁
• 缺点：无法显示溢出部分

# after：伪元素法

.clearfix:after {

    content:"";

    display: block;

    height 0;

    clear:both;

    visibillity:hidden;

}

.clearfix{    /*IE6 7 专有 */

    *zoom:1;

}

• 优点：没有添加标签
• 缺点：照顾低版本浏览器

# 双伪元素清除浮动

.clearfix:before,clearfix:after {

    content:"";

    display:table;

}

.clearfix:after {

    clear:both;

}

.clearfix {

    *zoom: 1;

}

• 优点：代码简洁
• 缺点：照顾低版本浏览器

# CSS3 新特性

# CSS3 新增选择器

• 属性选择器
• 结构伪类选择器
• 伪元素选择器

# 属性选择器

# 结构伪类选择器

# 区别

• nth-child 对父元素里面所有孩子排序选择，先找第几个孩子，再看是否匹配类型
• nth-of-type 对父元素里面指定元素的进行排序选择，先去匹配 E，再根据 E 找第几个孩子

# nth-child (n) 选择某个父元素的一个或者多个特定的子元素

• n 可以为数字，关键字和公式
• n 如果是数字，就可以选择第 n 个元素，里面数字从 1 开始
• n 可以为关键字：even 偶数 odd 奇数
• n 可以是公式：如果是 n，则从 0 考试计算，但是第 0 个和超出部分会忽略掉

# 伪类元素选择器（重点）

伪元素选择器可以帮助我们利用 CSS 创建新标签元素

• before 和 after 创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法：element：before {}
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为 1

# CSS3 盒子模型

• box-sizing: border-box;

# CSS3 其它特性

# CSS 滤镜 filter

filter: 函数 () ；例如 filter:blur (5px)； blur 模糊处理，数值越大越模糊

# CSS3 calc 函数

width: calc(100% - 30px);    //括号里面可以使用+ - * /来计算

# CSS3 过渡

transition: 要过渡的属性 花费时间 运动曲线 何时开始；

transition: all 0.5s ease 0.5s;

• 属性：想要变化的 CSS 属性，宽度高度，背景颜色，内外边框都可以，如果想要所有属性都变化，写一个 all 就可以
• 花费时间：单位是秒，比如 0.5s
• 运动曲线：默认是 ease（可以省略）
• 何时开始：单位是秒，可以设置触发时间，默认是 0s