1. Introducción a CSS
1.1 ¿Qué es CSS?
- CSS se refiere a hojas de estilo en cascada
- CSS describe cómo mostrar elementos HTML en pantalla, papel u otros medios
- CSS ahorra mucho trabajo. Puede controlar múltiples diseños de páginas web al mismo tiempo.
1.2, método de importación CSS
Método de importación | posición de escritura | Ámbito de actuación | Escenas a utilizar |
---|---|---|---|
Incorporado | CSS está escrito en la etiqueta de estilo. La etiqueta de estilo generalmente se coloca en la cabeza | la página actual | pequeña caja |
superar a | CSS se escribe en un archivo CSS separado y se importa a través de la etiqueta de enlace | multiples paginas | proyecto |
En línea | CSS está escrito en el atributo de estilo de la etiqueta. | pestaña actual | Usar con js |
2. Selector de CSS
2.1, selector básico de CSS
2.1.1 Selector de identificación
- Estructura : #id valor de atributo { css nombre de atributo: valor de atributo; }
- Función : a través del valor del atributo id, busque la etiqueta con este valor del atributo id en la página y establezca el estilo
punto importante:
- atributo id en todas las etiquetas
- El valor del atributo id es similar a un número de identificación, que es único y no repetible en una página
- Solo puede haber un valor de atributo de identificación en una etiqueta
- Un selector de ID solo puede seleccionar una etiqueta
2.1.2 Selectores de clase
- Estructura : .class { css nombre de atributo: valor de atributo; }
- Función : a través del nombre de la clase, busque todas las etiquetas con este nombre de clase en la página y configure el estilo
punto importante:
- Hay un atributo de clase en todas las etiquetas, y el valor de atributo del atributo de clase se convierte en el nombre de clase
- Los nombres de las clases pueden consistir en números, letras, guiones bajos y guiones, pero no pueden comenzar con números o guiones.
- Una etiqueta puede tener varios nombres de clase al mismo tiempo, y los nombres de clase están separados por espacios
- Los nombres de las clases se pueden repetir y un selector de clase puede seleccionar varias etiquetas al mismo tiempo
2.1.3 Selectores comodín
- Estructura :
*
{ nombre de atributo css: valor de atributo; } - Función : encuentre todas las etiquetas en la página y configure el estilo
Nota: De forma predeterminada, se eliminan los atributos propios del navegador, el margen y el relleno.
2.1.4 Selector de etiquetas
- Estructura : nombre de etiqueta { css nombre de atributo: valor de atributo; }
- Función : a través del nombre de la etiqueta, encuentre todas esas etiquetas en la página y configure el estilo
punto importante:
- El selector de etiquetas selecciona un tipo de etiqueta, no una sola
- El selector de etiquetas puede encontrar la etiqueta correspondiente sin importar qué tan profunda sea la relación de anidamiento
2.1.5 Selectores de atributos
Atributos | ilustrar |
---|---|
[atributo] | Seleccione varios attribute elementos con el atributo |
[atributo=valor] | attribute=value Todos los elementos seleccionados |
[atributo~=valor] | Selecciona todos los elementos cuyo attribute atributo contiene la palabra value |
[atributo^=valor] | Selecciona todos los elementos cuyo atributo valor de atributo value comienza con |
[atributo$=valor] | value Selecciona todos los elementos cuyo atributo valor de atributo termina con |
[atributo*=valor] | Selecciona cada elemento cuyo atributo atributo contiene value una subcadena |
- Estructura : nombre de etiqueta { css nombre de atributo: valor de atributo; }
- Función : a través del nombre de la etiqueta, encuentre todas esas etiquetas en la página y configure el estilo
punto importante:
- El selector de etiquetas selecciona un tipo de etiqueta, no una sola
- El selector de etiquetas puede encontrar la etiqueta correspondiente sin importar qué tan profunda sea la relación de anidamiento
2.2 Selector combinado
Selector | efecto | Formato | ejemplo |
---|---|---|---|
selector de descendientes | encontrar descendencia | Los selectores están separados por espacios. | .padre .hijo { css } |
selector de niños | buscando hijo | Los selectores están > separados por |
.padre > .hijo { css } |
selector de unión | encontrar elementos de varias categorías | Los selectores están , separados por |
div,p,span {css} |
selector de intersección | Encuentre elementos que satisfagan múltiples selectores al mismo tiempo | al lado del seleccionador | p.rojo { css } |
selector de hermanos | Coincide con todos los elementos de intervalo después de la etiqueta p | Los selectores están ~ separados por |
p ~ lapso |
selector adyacente | Coincide con el primer elemento de intervalo de la etiqueta p | Los selectores están + separados por |
p + lapso |
2.3 Selector de pseudo clase
Pseudo-clase : agregue efectos especiales a selectores específicos sin generar nuevos elementos
Selector | Descripcion funcional |
---|---|
E: primer hijo | Elemento E que es el primer hijo del elemento padre |
E: último hijo | Elemento E que es el último hijo del elemento padre |
E:nth-hijo(n) | Como el enésimo elemento secundario E del elemento principal |
E: n-ésimo-último-hijo(n) | Seleccione el último elemento secundario enésimo del elemento principal |
E: primero de tipo | Selecciona el primer elemento E del tipo especificado dentro del elemento principal |
E: último tipo | Selecciona el último elemento del tipo especificado dentro de un elemento principal |
E: enésimo de tipo (n) | Selecciona el enésimo elemento E del tipo especificado dentro del elemento principal |
E: n-ésimo-último-de-tipo | Selecciona el último elemento E n del tipo especificado dentro del elemento principal |
E:raíz | Seleccione el elemento raíz del documento donde se encuentra el elemento coincidente E, es decir, html |
E: hijo único | Seleccione el elemento principal que contiene solo un elemento secundario y el elemento secundario coincide con el elemento E |
E: solo de tipo | Seleccione el elemento principal para que contenga solo un elemento secundario del mismo tipo, y el elemento secundario coincide con el elemento E |
E:vacío | Selecciona un elemento que no tiene hijos y que tampoco contiene ningún nodo de texto |
E:enlace | Seleccionar todos los enlaces no visitados |
E:activo | Seleccione un elemento de enlace en el estado activo |
E: visitado | Seleccionar elementos ya visitados |
E: flotar | Seleccione un elemento en el estado del mouseover |
E: marcado | <input type="checkbox" checked> elemento seleccionado |
2.4 Selector de pseudo-elementos
Pseudo-elementos : inserte elementos o estilos adicionales antes y después del elemento de contenido.Estos elementos no se generan en el documento html y solo son visibles externamente.
Selector | Descripcion funcional |
---|---|
::antes | Crear un pseudo-elemento para colocar delante del elemento seleccionado |
::después | Crear un pseudo-elemento para colocar después del elemento seleccionado |
::primera letra | Seleccione la primera letra de la primera fila de varios elementos |
::primera linea | la primera línea del elemento seleccionado |
::selección | Seleccione la parte resaltada haciendo clic y arrastrando el mouse |
2.5、伪类和伪元素区别
- 伪元素只能在选择器中出现一次,而且只在末尾出现
- 伪类只设置样式,不会创建新元素。而伪元素会创建新元素
- 伪类的效果可以通过添加实际的类来实现;伪元素也可以通过添加元素来实现
3、字体和文本样式
3.1、字体样式
属性名 | 样式 | 属性值 |
---|---|---|
font-size | 字体大小 | 数字+px |
font-weight | 字体粗细 | 正常:normal或数字400; 加粗:bold或数字700 |
font-style | 是否倾斜 | 正常(默认值):normal; 倾斜:italic |
font-family | 字体系列 | sans-serif(无衬线字体); serif(衬线字体); monospace(等宽字体) |
font | 字体连写 | style weight size family |
3.2、文本样式
属性名 | 样式 | 属性值 |
---|---|---|
text-indent | 文本缩进 | 数字+px; 数字+em(推荐:1em = 当前标签的font-size的大小) |
text-align | 对齐方式 | left: 左对齐; center: 居中对齐; right: 右对齐 |
text-decoration | 文本修饰 | underline: 下划线; line-through: 删除线; overline: 上划线; none: 无装饰线 |
line-height | 文本行高 | 数字+px; 倍数(当前标签font-size的倍数) |
4、背景相关属性
4.1、背景颜色
属性名:background-color
属性值:
颜色取值 | 示例 |
---|---|
关键字 | red、green、yellow等 |
rgb表示法 | rgb(255,255,255) |
rgba表示法 | rgba(255,255,255,1) |
十六进制 | #ffffff; |
注意点:
- 背景颜色默认值是透明的:rgba(0,0,0,0)或transparent
- 背景颜色不会影响盒子大小,一般在布局中使用,方便看清盒子大小和位置
4.2、背景图片
属性名:background-image
属性值:background-image: url(‘图片的路径’)
注意点:
- 背景图片默认实在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果,类似于背景不能撑开盒子
4.3、背景平铺
属性名:background-repeat
属性值:
取值 | 效果 |
---|---|
repeat | (默认值)水平和垂直方向都平铺 |
no-repeat | 不平铺 |
repeat-x | 沿水平方向(x轴)平铺 |
repeat-y | 沿垂直方向(y轴)平铺 |
4.4、背景位置
属性名:background-position
属性值:background-position: 水平方向位置 垂直方向位置
4.5、img标签和背景图片的区别
- img标签是一个标签,不设置宽高默认会以原来尺寸显示
- 背景图片只是装饰的CSS样式,不能撑开元素的宽高
5、元素的显示模式
5.1、块级元素
属性:display: block
特点:
- 独占一行(一行只能显示一个)
- 宽度默认是父元素的宽度,高度默认由内容撑开
- 可以设置宽高
代表标签:
- div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等
5.2、行内元素
属性:display: inline
特点:
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
代表标签:
- a、span、b、u、i、s、strong、ins、em、del等
5.3、行内块元素
属性:display: inline-block
特点:
- 一行可以显示多个
- 可以设置宽高
代表标签:
- input、textarea、button、select等
- 特殊情况:img标签有行内块元素特点,但在谷歌浏览器中显示的是inline
6、CSS三大特性
6.1、继承性
特点:子元素有默认继承父元素样式的特点(子承父业)
继承属性:
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
应用场景:
- 可以直接给ul设置list-style:none属性,从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
继承失效情况:被浏览器默认样式给覆盖了
6.2、层叠性
特性:
- 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
- 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
- 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断
6.3、优先级
选择器 | 示例 | 权重值 |
---|---|---|
!important | background-color: #fff !important; | 正无穷 |
内联选择器 | <span style='color: #333;'>样式作用元素</span> |
1000 |
ID选择器 | #id | 100 |
类选择器、属性选择器、伪类选择器 | .class | 10 |
标签选择器、伪元素选择器 | div、p | 1 |
通配符选择器 | * |
0 |
继承属性 | <div style='color:#333;'><span>样式作用元素</span></div> |
-1 |
说明
- 权重值是256进制的
- 同一行的选择器权重值相加,权重值高的样式生效,如果权重值相同,后面写的覆盖前面
- 不是同一行的直接找按权重值相加计算,权重值高的样式生效
7、盒子模型
7.1、盒子模型介绍
盒子的概念:
- 页面中的每一个标签都可以看做是一个盒子;通过盒子的视角,可以更方便的进行布局
- 浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域,我们也形象称之为盒子
盒子模型:CSS中规定盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成
7.1.1 内容的宽度和高度
作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性:width / height
常见取值:数字 + px
7.1.2 边框 (border)
作用:设置边框粗细、边框样式、边框颜色效果
属性:
作用 | 属性名 | 属性值 |
---|---|---|
边框粗细 | border-width | 数字 + px |
边框样式 | border-style | 实线 solid 、虚线 dashed 、点线 dotted |
边框颜色 | border-color | 颜色取值 |
边框连写形式:边框粗细 边框样式 边框颜色
例如:border: 1px solid #333;
单方向设置:border-方位名词: 1px solid red;
7.1.3 内边距 (padding)
作用:设置边框与内容区域之间的距离
属性名:padding
常见取值:
取值 | 示例 | 含义 |
---|---|---|
一个值 | padding: 10px; | 上下左右都设置为10px |
两个值 | padding: 10px 20px; | 上下设置为10px、左右设置为20px |
三个值 | padding: 10px 20px 30px | 上设置为10px、左右设置为20px、下设置为30px |
四个值 | padding: 10px 20px 30px 40px | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
单方向设置:padding-方位名词: 10px;
7.1.4 外边距 (margin)
作用:设置边框以外,盒子与盒子之间的距离
属性名:margin
常见取值:
取值 | 示例 | 含义 |
---|---|---|
一个值 | margin: 10px; | 上下左右都设置为10px |
两个值 | margin: 10px 20px; | 上下设置为10px、左右设置为20px |
三个值 | margin: 10px 20px 30px | 上设置为10px、左右设置为20px、下设置为30px |
四个值 | margin: 10px 20px 30px 40px | 上设置为10px、右设置为20px、下设置为30px、左设置为40px |
单方向设置:margin-方位名词: 10px;
7.1.5 盒子实际大小计算公式
- 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
- 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
问题:当盒子被border和padding撑大后,如何解决?
- 手动内减:手动计算多余大小,在内容中减去
- 自动内减:给盒子设置属性 box-sizing: border-box;
7.1.6 相邻盒子之间margin计算规则
- 水平方向的盒子,两者距离为margin之和
- 垂直方向的盒子,两者距离为margin的最大值
7.1.7 塌陷现象
场景:互相嵌套和块级元素,子元素的magin-top会作用在父元素上
结果:导致父元素一起往下移动,引起父元素塌陷
解决方式:
- 给父元素设置border-top或者padding-top(分割父子元素的margin-top)
- 给父元素设置overflow: hidden;
- 转换成行内块级元素 display: inline-block;
- 设置浮动 float: left;
- 添加伪类
常用清除浮动和父元素塌陷伪类:
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
8、 标准流
标准流:又称文档流,是浏览器在渲染元素时默认采用的一套排版规则,规定了该以何种方式排列元素
排版规则:
- 块级元素:从上到下,垂直布局,独占一行
- 行内元素 或 行内块元素:从左到右,水平布局,空间不够自动换行
9、 浮动
9.1、浮动的特点
- 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
- 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
- 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素会受到上面块级元素边界的影响
- 浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
注意点:浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中
9.2、浮动的作用
- 图文环绕
- 网页布局,让垂直布局的盒子变成水平布局
9.3、浮动的代码
属性:float
- 左浮动: float: left;
- 右浮动: float: right;
9.4、浮动带来的影响
影响:子元素设置浮动,此时子元素脱离标准流无法撑开父元素,会影响页面其他元素的布局
9.5、清除浮动的方法
- 直接设置父元素高度
- 优点:简单直接,方便
- 缺点:有些元素无固定高度,无法设置高度
- 在父元素内容的最后添加一个块级元素,并给块级元素添加属性 clear: both;
- 缺点:会在页面中添加额外的标签,会让页面结构变得复杂难以阅读
- 单伪元素清除法
基本写法:
.clearfix::after {
content: "";
display: block;
clear: both;
}
补充写法:
.clearfix::after {
content: "";
display: block;
clear: both;
/* 在网页中看不到伪元素 */
height: 0;
visibility: hidden;
}
- 优点:直接给标签添加类即可清除浮动
-
双伪元素清除法
.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}
.clearfix::after {
clear: both;
}
- 优点:直接给标签添加类即可清除浮动
- 给父元素设置overflow: hidden;
- 优点:简单直接,方便
10、 BFC
10.1、BFC介绍
- 块格式化上下文(Block Formatting Context)是web页面的可视CSS渲染的一部分,是块盒子的布局过程中发生的区域,也是浮动元素与其他元素交互的区域。
10.2、创建BFC的方法
- html标签是BFC盒子
- 浮动元素是BFC盒子
- 行内元素是BFC盒子
- overflow属性值不为visible是BFC盒子
- position: absolute或fixed
10.2、BFC盒子特点
- BFC盒子会默认包裹住内部子元素(标准流、浮动流)-> 应用场景:清除浮动
- BFC盒子本身与子元素之间不存在margin的塌陷现象 -> 应用场景:解决margin的塌陷
11、定位
11.1、定位的应用场景
- 可以解决盒子与盒子之间的层叠问题
- 定位之后的元素层级最高,可以层叠在其他盒子之上
- 可以让盒子始终固定在屏幕中的某个位置
11.2、使用定位的步骤
11.2.1 设置定位方式
属性名:position
定位方式:
定位方式 | 属性值 | 相对于谁移动 | 是否占位置 |
---|---|---|---|
静态定位 | static | 不能通过方位属性移动 | 占位置 |
相对定位 | relative | 相对于自己原来的位置 | 占位置 |
绝对定位 | absolute | 相对于最近的且有定位的祖先元素移动 | 不占位置(脱标) |
固定定位 | fixed | 相对于浏览器可视区域 | 不占位置(脱标) |
11.2.2 设置偏移值
- 偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
- 选取的原则为就近原则
方向 | 属性名 | 属性值 | 含义 |
---|---|---|---|
水平 | left | 数字+px | 距离左边的距离 |
水平 | right | 数字+px | 距离右边的距离 |
垂直 | top | 数字+px | 距离上边的距离 |
垂直 | bottom | 数字+px | 距离下边的距离 |
11.3、定位方式
11.3.1 静态定位
介绍:静态定位是默认值,就是标准流,不能通过方位属性进行移动
代码:position: static;
11.3.2 相对定位
介绍:相对于之前的位置进行位移
代码:position: relative;
特点:
- 需要配合方位属性实现移动
- 相对于原来的位置进行移动
- 在页面中占位置,没有脱离标准流
应用场景:
- 配合绝对定位(子绝父相)
- 小范围移动
11.3.3 绝对定位
介绍:相对于之前的位置进行位移
代码:position: absolute;
特点:
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置,脱离标准流
- 相对于最近的有定位(非static)的祖先元素进行移动
应用场景:
-
配合相对定位(子绝父相)
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>水平垂直居中</title> <style> /* 相对于浏览器可视区域进行移动 */ .father { position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; background-color: pink; transform: translate(-50%, -50%); } /* 相对于最近的有定位(非static)的祖先元素进行移动 */ .son { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; background-color: red; transform: translate(-50%, -50%); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
11.3.3 固定定位
介绍:相对于浏览器进行定位
代码:position: fixed;
特点:
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置,脱离标准流
- 相对于最近的有定位(非static)的祖先元素进行移动
应用场景:
- 让盒子固定在屏幕中的某个位置
12 元素层级(z-index)
12.1、 元素层级关系
- 不同布局方式的层级关系
- 标准流 < 浮动 < 定位
- 不同定位之间的层级关系
- 相对、绝对、固定默认层级相同
- 在HTML中写在下面的元素层级更高,会覆盖上面的元素
12.2、 改变层级的方式
- 给元素添加属性z-index;属性值越大,层级越高
13、 装饰
13.1、 基线
介绍:浏览器文字类型元素排版中存在用于对齐的基线(baseline)
13.2、 文字对齐
属性名:vertical-align
属性值:
属性值 | 效果 |
---|---|
baseline | 默认,基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
应用场景:
- 解决文本框和表单按钮无法对齐问题、
- 解决input和img无法对齐问题
- 解决div中的文本框无法贴顶问题
- 解决div不设置高度时,img标签下会存在额外间隙问题
- 使用line-height让img标签垂直居中问题
13.3、 光标类型
介绍:设置鼠标光标在元素上时显示的样式
属性名:cursor
属性值:
属性值 | 效果 |
---|---|
default | 默认值,通常是箭头 |
pointer | 小手效果,提示用户可以点击 |
text | 工字型,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |
13.4、边框圆角
介绍:让盒子四角变得圆润,增加页面细节,提高用户体验
属性名:border-radius
取值:数字+px、百分比
13.5、 overflow
介绍:控制溢出部分的显示效果
属性值 | 效果 |
---|---|
visible | 默认值,溢出部分可见 |
hidden | 溢出部分隐藏 |
scroll | 无论是否溢出,都显示滚动条 |
auto | 根据是否溢出,自动显示或隐藏滚动条 |
13.6、元素隐藏
介绍:让元素本身在浏览器中不可见
属性:
- visibility: hidden;
- display: none;
区别:
- visibility: hidden;隐藏元素本身,并且在网页中占位置
- display: none;隐藏元素本身,并且在网页中不占位置
13.6、元素透明度
介绍:让元素整体(包括内容)一起变透明
属性名:opacity
属性值:0 ~ 1之间的数字
- 1:表示完全不透明
- 0:表示完全透明