Notas de estudio de CSS (primer contacto)

1. Definición

CSS es una hoja de estilo en cascada (hoja de estilo en cascada), también conocida como hoja de estilo en cascada, o hoja de estilo para abreviar.

2. Función

(1) Se utiliza para la definición de estilos de elementos en documentos HTML. Darse cuenta de la separación de contenido y rendimiento.

(2) Mejorar la capacidad de reutilización y mantenimiento del código. La extensión del archivo es .css.

3. La relación entre CSS y HTML

(1) HTML se usa para construir la estructura de la página web
(2) CSS se usa para construir el estilo de los elementos HTML
(3) HTML es el contenido de la página y CSS es el rendimiento de la página

结构层 HTML
表示层 CSS
行为层 JS

4. La forma de importar CSS

(1) El método en línea
agrega directamente el código CSS a la etiqueta de inicio con el atributo de estilo

 <p style="color:gold;" >金色字体</p>

(2) El estilo interno
agrega directamente el código CSS a la etiqueta de estilo de la cabeza

 <style>
     p{
    
    color:red;}
 </style>

(3) Hoja de estilo externa

<link rel="stylesheet" href=""/> 

(4) Introducción

<style>
     @import url(style.css);
</style>

优先级：行内样式>内部样式>外部样式>导入样式

5. Características de la hoja de estilo CSS

• Herencia
• En cascada
• prioridad

6, selector básico de CSS

• Selector universal, selector global (*)
  • Puede coincidir con cualquier elemento
  • A menudo se utiliza para establecer algunos estilos predeterminados, la
    prioridad más baja
• Selector de elementos
  • Elementos
    p, b, div, a, img, body, etc.en documentos HTML
• Selector de clases
  • Como: .body {color: red;} El
    nombre de la clase no puede comenzar con
    un número . El nombre de la clase en una página se puede repetir
• Selector de ID
  • #box {color: skyblue;}
    El nombre de la identificación no se puede repetir. El atributo de identificación es único
• Selector de combinación
  • Sintaxis: Selector 1, Selector 2, ... {}
    puede extraer estilos comunes y reducir códigos repetitivos

7, estilo básico CSS

• font-style Establece si el texto es cursiva
  normal (fuente normal). El valor predeterminado es
  cursiva. Por
  ejemplo:

p{
    
    font-style:italic;}     /*  倾斜 */

• font-family define el texto para usar una determinada fuente

p{
    
    font-family:microsoft YaHei;}

可以设置多个字体，排名越靠前优先级越高 默认值由浏览器决定

• font-weight especifica el grosor del texto

p{
    
     font-weight:normal;}   /*  默认值  */
p{
    
     font-weight:bold;}   /*  粗体  */

font-style 、 font-weight 、 font-size 、line-height 、 font-family

• Atributos de texto
  • text-decoration Establece si el texto tiene una línea de decoración, el valor predeterminado es ninguno

p{
    
    text-decoration:underline;}   /*   指定文字的修饰线是下划线  */
p{
    
    text-decoration:overline;}   /*   指定文字的修饰线是上划线  */
p{
    
    text-decoration:through;}   /*   指定文字的修饰线是贯穿线，类似于删除标签的效果  */

常用text-decoration:none;来去除a标签的下划线

• sangría de texto sangría de texto
  • La propiedad de sangría de texto se utiliza para especificar la sangría de la primera línea de texto y
    también puede ocultar el texto en un cuadro. Por
    ejemplo

p{
    
    text-indent:2em}    /*  首行缩进2个文字的大小  */
p{
    
    text-indent:-9999em;}    /*  用来隐藏文本   */

1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px， 那么，1em的默认大小是16px

• ajuste de palabra Establece si se envuelve la línea actual cuando excede el límite del contenedor especificado

  • Si la palabra en el contenedor es demasiado larga, hará que la palabra larga se desborde si excede el ancho del contenedor.
  • word-wrap: break-word; puede establecer el texto que es demasiado largo para ajustarse automáticamente.

• altura de línea Establece la altura de línea del objeto ( 不允许使用负值)
  normal Por defecto, establece un
  número de espaciado de línea razonable Establece el número, este número se multiplicará por el tamaño de fuente actual para establecer el espaciado de línea

8. Modelo de caja

El modelo de caja define principalmente cuatro áreas: contenido, relleno, borde y margen.

Todos los elementos del documento (etiquetas) generarán un cuadro rectangular, nos convertiremos en el cuadro del elemento (cuadro del elemento), que describe la posición y el tamaño de un elemento del documento en el resumen del diseño de página. Por lo tanto, además de su propio tamaño y ubicación, cada caja también afecta el tamaño y la ubicación de otras cajas.
Características del modelo de caja:

• Cada cuadro tiene 4 atributos: borde, borde, relleno y contenido;

• Cada atributo consta de 4 partes: superior, derecha, inferior e izquierda. Las 4 partes del atributo se pueden configurar al mismo tiempo o por separado.
  

• border
  : border-width || border-style || border-color
  注意：顺序不能错误。
  Cuando el atributo de estilo está vacío, no aparecerá el borde completo. Si no se escribe el ancho, habrá un valor predeterminado similar a tres, y si el color es no escrito, será el predeterminado. Es negro.

  radio del borde: esquina superior izquierda, esquina superior derecha, esquina inferior derecha, esquina inferior izquierda;

border-radius: 10px 40px;   /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
border-radius: 10px 40px  80px;  /* 左上角 10    右上角  左下角 40   右下角80 */
border-radius: 10px 40px  80px  100px; /* 左上角 10  右上角 40  右下角 80  左下角 100 */

扩展 ：
tabla {border-collapse: collapse; }
collapse 单词是合并的意思，通过该属性可以来设置一个细线表格

• El margen de
  margen es el área en blanco alrededor del borde del elemento, creará un área en blanco adicional fuera del elemento, el margen es transparente

  单边设置：
  margin-top/right/bottom/left:value;
  value可取值为像素、%、auto、负值
  外边框简写：
  margin:value(四个方向相同);
  margin:value(上下) value(左右)；
  margin:value(上) value(左右) value(下);
  margin:value(上) value(右) value(下) value(左)
  

Extensión 1: el cuadro está centrado horizontalmente

Puede hacer un cuadro centrado horizontalmente y debe cumplir las siguientes dos condiciones:

• Debe ser un elemento a nivel de bloque.

• La caja debe tener un ancho (ancho)

• Luego, establezca los márgenes izquierdo y derecho en automático, de modo que los elementos a nivel de bloque se puedan centrar horizontalmente.

.header{
    
     width:960px; margin:0 auto;} 

Extensión 2: Borrar los márgenes internos y externos predeterminados
de los elementos Para controlar más fácilmente los elementos en la página web, al crear la página web, puede usar el siguiente código para borrar los márgenes internos y externos predeterminados de los elementos:

* {
    
    
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

Tips: Los elementos en línea solo tienen márgenes izquierdo y derecho, pero no márgenes superior e inferior. Los márgenes internos también pueden tener problemas en navegadores de versiones inferiores como ie6. Tratamos de no especificar márgenes internos y externos superior e inferior para elementos en línea.

Extensión 3: fusión de márgenes

(1) Fusión de los márgenes exteriores verticales de los elementos de bloque adyacentes (colapso vertical de los márgenes exteriores)

Cuando dos elementos de bloque adyacentes se encuentran, si el elemento superior tiene un margen inferior inferior y el elemento inferior tiene un margen superior superior, el espacio vertical entre ellos no es margen inferior y margen superior La suma, sino el mayor de los dos. Este fenómeno se denomina fusión de los márgenes verticales de elementos de bloque adyacentes (también llamado colapso de márgenes ).

Solución: simplemente evítelo. Generalmente, margin-top o margin-bottom se agrega a un elemento, y no es necesario agregar margin-top o margin-bottom a dos elementos al mismo tiempo.

(2) Combinando los márgenes verticales de elementos de bloque anidados

Para dos elementos de bloque anidados, si el elemento principal no tiene un relleno superior ni un borde, el relleno superior del elemento principal se fusionará con el relleno superior del elemento secundario y el relleno combinado será el mayor de los dos. Más grande, incluso si el margen superior del elemento padre es 0, se producirá la fusión.

Solución:
(1) Se puede definir un borde superior o un relleno superior de 1 píxel para el elemento principal.
(2) Puede agregar overflow: hidden para el elemento principal.

• relleno

  内容区域和边框之间的空间，会扩大元素边框所占用的区域
  

Sintaxis: padding: value;
configuración unilateral:
padding-top / right / bottom / left: value; el
valor puede ser píxeles, porcentajes, pero no
una forma abreviada de relleno negativo :

   padding:value(四个方向相同);
   padding:value(上下) value(左右);
   padding:value(上) value(左右) value(下);
   padding:value(上) value(右) value(下) value(左);

• Contenido (contenido) ancho y alto (ancho y alto)

Utilice el atributo de ancho ancho y el atributo alto alto para controlar el tamaño de la caja.

Los valores de atributo de ancho y alto pueden ser valores en diferentes unidades o porcentajes relativos al elemento principal. El valor de píxel es el más comúnmente utilizado en el trabajo real.
La mayoría de los navegadores, como Firefox, IE6 y superiores, han adoptado la especificación W3C. Los principios de cálculo para el ancho y alto total del modelo de caja que se ajusta a la especificación CSS son:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素实际大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

注意：
1. El ancho del atributo de ancho y el alto del atributo de altura solo se aplican a elementos a nivel de bloque y no son válidos para elementos en línea (excepto la etiqueta img y la entrada).
2. Al calcular la altura total del modelo de caja, también se debe considerar la combinación de los márgenes verticales de las cajas superior e inferior.
3. Si un cuadro no tiene un ancho / alto determinado o hereda el ancho / alto del padre, el relleno no afectará el tamaño del cuadro.

(4) Estabilidad de diseño del modelo de caja

De acuerdo con la estabilidad, las recomendaciones son las siguientes:
use primero el ancho, luego el acolchado y luego el margen.

width > padding > margin

Razón:
Margin tendrá la fusión de márgenes y el error de duplicar el margen bajo ie6 (molesto), así que lo usé por última vez.
El relleno afectará el tamaño de la caja, y es necesario agregarlo y restarlo (problemático).
No hay problema con el ancho. A menudo usamos el método de ancho restante y el método de alto restante para hacerlo.

(5) Caja de sombra
caja de sombra: sombra horizontal sombra vertical distancia de desenfoque tamaño de la sombra color de la sombra sombra interior / exterior;

• Deben escribirse los dos primeros atributos. El resto se puede omitir.
• La sombra exterior (inicio) es el valor predeterminado, pero no se puede escribir, solo escriba recuadro si desea la sombra interior.
• Puede agregar varias sombras, como agregar sombras internas y externas al mismo tiempo

/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);

9, fondo de fondo

1.background-color: establece el color de fondo del cuadro. El color de fondo se puede rellenar con relleno o margen.
2.background-image: establece la imagen de fondo del cuadro. La etiqueta img también es un cuadro. También puedes establecer una imagen de fondo para el cuadro img.

• Una caja tiene exactamente el mismo tamaño que la imagen de fondo: cabe en
• Si un cuadro es más grande que la imagen de fondo: se colocará en mosaico en los ejes xey de forma predeterminada
• Si un cuadro es más pequeño que la imagen de fondo: solo se mostrará una parte de la imagen de fondo. La esquina superior izquierda de la imagen de fondo está alineada con la esquina superior izquierda del cuadro. La esquina superior izquierda se refiere al relleno, pero el borde también se rellenará con la imagen de fondo

3. repetición de fondo: controle si colocar en mosaico
repetir-x solo mosaico eje x repetir-y solo mosaico eje y repetir eje xey están en mosaico sin repetición no mosaico

4. Coloque una imagen de fondo grande o pequeña en un cuadro, puede usar la posición de fondo para posicionar

10. Elementos

• Elementos a nivel de bloque
  div, p, h, etc.

• Características:
  1. Línea exclusiva
  2. El ancho predeterminado es tan ancho como el elemento principal 3. El ancho y
  alto establecidos por css son válidos

• Los elementos en línea
  span, a, em, strong, etc.

• Características:
  1. No ocupará una fila por sí solo
  2. El ancho está determinado por el contenido
  3. Establecer el ancho en css no funciona

• 
  Etiqueta img de elemento de bloque en línea , etc.

• Características:
  1. No ocupará una fila por sí solo
  2. El ancho y la altura se pueden configurar y hacer efectivos

• Conversión de modo de elemento

  • bloqueo de pantalla;
    把某个元素的显示模式修改为块级元素，在img标签设置这个属性可以去除图片默认的3px间隙
  • pantalla: en línea;
    把某个元素的显示模式修改为行内元素
  • pantalla: bloque en línea;
    把某个元素的显示模式修改为行内块模式

• Visualización y ocultación de elementos

  • pantalla: ninguna; Sin modo de visualización, ni puede ver ni ocupar la posición
  • visibilidad: oculta; oculta, aunque invisible, pero ocupando una posición
  • visibilidad: visible; Visible (el valor predeterminado de visibilidad)