Resumen de los puntos básicos de conocimiento de CSS

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:

  1. atributo id en todas las etiquetas
  2. El valor del atributo id es similar a un número de identificación, que es único y no repetible en una página
  3. Solo puede haber un valor de atributo de identificación en una etiqueta
  4. 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:

  1. 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
  2. Los nombres de las clases pueden consistir en números, letras, guiones bajos y guiones, pero no pueden comenzar con números o guiones.
  3. Una etiqueta puede tener varios nombres de clase al mismo tiempo, y los nombres de clase están separados por espacios
  4. 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:

  1. El selector de etiquetas selecciona un tipo de etiqueta, no una sola
  2. 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 attributeelementos con el atributo
[atributo=valor] attribute=valueTodos los elementos seleccionados
[atributo~=valor] Selecciona todos los elementos cuyo attributeatributo contiene la palabra value
[atributo^=valor] Selecciona todos los elementos cuyo atributo valor de atributo valuecomienza con
[atributo$=valor] valueSelecciona todos los elementos cuyo atributo valor de atributo termina con
[atributo*=valor] Selecciona cada elemento cuyo atributo atributo contiene valueuna 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:

  1. El selector de etiquetas selecciona un tipo de etiqueta, no una sola
  2. 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、伪类和伪元素区别

  1. 伪元素只能在选择器中出现一次,而且只在末尾出现
  2. 伪类只设置样式,不会创建新元素。而伪元素会创建新元素
  3. 伪类的效果可以通过添加实际的类来实现;伪元素也可以通过添加元素来实现

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
特点

  1. 独占一行(一行只能显示一个)
  2. 宽度默认是父元素的宽度,高度默认由内容撑开
  3. 可以设置宽高

代表标签

  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等

5.2、行内元素

属性:display: inline
特点

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签

  • a、span、b、u、i、s、strong、ins、em、del等

5.3、行内块元素

属性:display: inline-block
特点

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签

  • input、textarea、button、select等
  • 特殊情况:img标签有行内块元素特点,但在谷歌浏览器中显示的是inline

6、CSS三大特性

6.1、继承性

特点:子元素有默认继承父元素样式的特点(子承父业)

继承属性

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height

应用场景

  1. 可以直接给ul设置list-style:none属性,从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小

继承失效情况:被浏览器默认样式给覆盖了

6.2、层叠性

特性

  1. 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
  2. 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
  3. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断

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

说明

  1. 权重值是256进制的
  2. 同一行的选择器权重值相加,权重值高的样式生效,如果权重值相同,后面写的覆盖前面
  3. 不是同一行的直接找按权重值相加计算,权重值高的样式生效

7、盒子模型

7.1、盒子模型介绍

盒子的概念

  1. 页面中的每一个标签都可以看做是一个盒子;通过盒子的视角,可以更方便的进行布局
  2. 浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域,我们也形象称之为盒子

盒子模型:CSS中规定盒子分别由:内容区域(content)内边距区域(padding)边框区域(border)外边距区域(margin)构成

7.1.1 内容的宽度和高度

作用:利用 widthheight 属性默认设置是盒子 内容区域 的大小

属性: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撑大后,如何解决?

  1. 手动内减:手动计算多余大小,在内容中减去
  2. 自动内减:给盒子设置属性 box-sizing: border-box;
7.1.6 相邻盒子之间margin计算规则
  1. 水平方向的盒子,两者距离为margin之和
  2. 垂直方向的盒子,两者距离为margin的最大值
7.1.7 塌陷现象

场景:互相嵌套和块级元素,子元素的magin-top会作用在父元素上

结果:导致父元素一起往下移动,引起父元素塌陷

解决方式

  1. 给父元素设置border-top或者padding-top(分割父子元素的margin-top)
  2. 给父元素设置overflow: hidden;
  3. 转换成行内块级元素 display: inline-block;
  4. 设置浮动 float: left;
  5. 添加伪类

常用清除浮动和父元素塌陷伪类

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

8、 标准流

标准流:又称文档流,是浏览器在渲染元素时默认采用的一套排版规则,规定了该以何种方式排列元素

排版规则

  1. 块级元素:从上到下,垂直布局,独占一行
  2. 行内元素行内块元素:从左到右,水平布局,空间不够自动换行

9、 浮动

9.1、浮动的特点

  1. 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
  2. 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
  3. 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素会受到上面块级元素边界的影响
  5. 浮动元素有特殊的显示效果
  • 一行可以显示多个
  • 可以设置宽高

注意点:浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中

9.2、浮动的作用

  1. 图文环绕
  2. 网页布局,让垂直布局的盒子变成水平布局

9.3、浮动的代码

属性float

  1. 左浮动: float: left;
  2. 右浮动: float: right;

9.4、浮动带来的影响

影响:子元素设置浮动,此时子元素脱离标准流无法撑开父元素,会影响页面其他元素的布局

9.5、清除浮动的方法

  1. 直接设置父元素高度
  • 优点:简单直接,方便
  • 缺点:有些元素无固定高度,无法设置高度
  1. 在父元素内容的最后添加一个块级元素,并给块级元素添加属性 clear: both;
  • 缺点:会在页面中添加额外的标签,会让页面结构变得复杂难以阅读
  1. 单伪元素清除法

基本写法

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

补充写法

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    /* 在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}
  • 优点:直接给标签添加类即可清除浮动
  1. 双伪元素清除法

    .clearfix::before,
    .clearfix::after {
    content: “”;
    display: table;
    }
    .clearfix::after {
    clear: both;
    }

  • 优点:直接给标签添加类即可清除浮动
  1. 给父元素设置overflow: hidden;
  • 优点:简单直接,方便

10、 BFC

10.1、BFC介绍

  • 块格式化上下文(Block Formatting Context)是web页面的可视CSS渲染的一部分,是块盒子的布局过程中发生的区域,也是浮动元素与其他元素交互的区域。

10.2、创建BFC的方法

  1. html标签是BFC盒子
  2. 浮动元素是BFC盒子
  3. 行内元素是BFC盒子
  4. overflow属性值不为visible是BFC盒子
  5. position: absolute或fixed

10.2、BFC盒子特点

  1. BFC盒子会默认包裹住内部子元素(标准流、浮动流)-> 应用场景:清除浮动
  2. BFC盒子本身与子元素之间不存在margin的塌陷现象 -> 应用场景:解决margin的塌陷

11、定位

11.1、定位的应用场景

  1. 可以解决盒子与盒子之间的层叠问题
  • 定位之后的元素层级最高,可以层叠在其他盒子之上
  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;
特点

  1. 需要配合方位属性实现移动
  2. 相对于原来的位置进行移动
  3. 在页面中占位置,没有脱离标准流

应用场景

  1. 配合绝对定位(子绝父相)
  2. 小范围移动
11.3.3 绝对定位

介绍:相对于之前的位置进行位移
代码:position: absolute;
特点

  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置,脱离标准流
  4. 相对于最近的有定位(非static)的祖先元素进行移动

应用场景

  1. 配合相对定位(子绝父相)

     <!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;
特点

  1. 需要配合方位属性实现移动
  2. 相对于浏览器可视区域进行移动
  3. 在页面中不占位置,脱离标准流
  4. 相对于最近的有定位(非static)的祖先元素进行移动

应用场景

  1. 让盒子固定在屏幕中的某个位置

12 元素层级(z-index)

12.1、 元素层级关系

  1. 不同布局方式的层级关系
  • 标准流 < 浮动 < 定位
  1. 不同定位之间的层级关系
  • 相对、绝对、固定默认层级相同
  • 在HTML中写在下面的元素层级更高,会覆盖上面的元素

12.2、 改变层级的方式

  • 给元素添加属性z-index;属性值越大,层级越高

13、 装饰

13.1、 基线

介绍:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

13.2、 文字对齐

属性名:vertical-align
属性值

属性值 效果
baseline 默认,基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

应用场景

  1. 解决文本框和表单按钮无法对齐问题、
  2. 解决input和img无法对齐问题
  3. 解决div中的文本框无法贴顶问题
  4. 解决div不设置高度时,img标签下会存在额外间隙问题
  5. 使用line-height让img标签垂直居中问题

13.3、 光标类型

介绍:设置鼠标光标在元素上时显示的样式
属性名:cursor
属性值

属性值 效果
default 默认值,通常是箭头
pointer 小手效果,提示用户可以点击
text 工字型,提示用户可以选择文字
move 十字光标,提示用户可以移动

13.4、边框圆角

介绍:让盒子四角变得圆润,增加页面细节,提高用户体验
属性名:border-radius
取值:数字+px、百分比

13.5、 overflow

介绍:控制溢出部分的显示效果

属性值 效果
visible 默认值,溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出,都显示滚动条
auto 根据是否溢出,自动显示或隐藏滚动条

13.6、元素隐藏

介绍:让元素本身在浏览器中不可见

属性

  1. visibility: hidden;
  2. display: none;

区别

  1. visibility: hidden;隐藏元素本身,并且在网页中占位置
  2. display: none;隐藏元素本身,并且在网页中不占位置

13.6、元素透明度

介绍:让元素整体(包括内容)一起变透明
属性名:opacity
属性值:0 ~ 1之间的数字

  • 1:表示完全不透明
  • 0:表示完全透明

Supongo que te gusta

Origin blog.csdn.net/qq_40046544/article/details/126066028
Recomendado
Clasificación