Ensayo 3. Introducción a los conceptos básicos de CSS

Empezando con los conceptos básicos de CSS

1. Características de apilamiento

[Núcleo de
CSS ]: en cascada En CSS, el efecto de los elementos a los ojos de los usuarios a menudo se forma después de que se superponen varios estilos.

2 Flujo de documentos estándar

2.1 Orden de análisis de la página web, de arriba a abajo, de izquierda a derecha

2.2 En el flujo de documentos estándar, los elementos se clasifican

• Características de los elementos a nivel de bloque
  :

1. Fiesta exclusiva
2. . Si no establece el ancho, ocupará el 100% del ancho del elemento principal
3. Puede establecer contenido de estilo como ancho, alto, color de fondo, etc.
4. Se puede utilizar como contenedor para contener otras etiquetas.
   Por ejemplo:
   div, p, ul, li

• Características de los elementos en línea
  :

1. Paralelo con otros elementos en fila
2. No puede establecer el ancho o el alto. Su ancho es el ancho total del contenido y el alto es el alto de la línea.
   Por ejemplo:
   a, em

• Características de los elementos de bloque en línea
  :

1. Es decir, puede establecer el ancho y la altura, y también puede alinear con otros elementos
2. En circunstancias normales, debe convertirse a través de propiedades CSS para convertirse en elementos de bloque en línea.

2.3 La teoría del flujo de texto

El flujo de documentos se refiere a la disposición del contenido de los elementos de la página web, mientras que el flujo de texto se refiere al contenido del texto en la página web.

3.Atributos básicos comunes de css

3.1 atributos de texto

• font-size: Tamaño de fuente
  Unidad: px em…
  Para reducir las diferencias de visualización de fuentes entre sistemas, los fabricantes de navegadores de IE Netscape Mozilla celebraron una reunión en 1999 y determinaron conjuntamente que 16px / ppi es el valor predeterminado del tamaño de fuente estándar, que es 1em. De forma predeterminada, 1em = 16px, 0.75em = 12px; rem
• font-family: fuente de texto font
  -family: fuente 1, fuente 2, fuente 3;

1. El navegador buscará primero la fuente 1. Si existe, utilice la fuente para mostrar el contenido. Por ejemplo, si la fuente 1 no existe, buscará la fuente 2. Si la fuente 2 no existe, el contenido se mostrará de acuerdo con la fuente 3. Tampoco existe, se mostrará en la fuente predeterminada del sistema;
2. Cuando la fuente es china, se requieren comillas dobles;
3. Cuando la fuente en inglés se compone de varias palabras, agregue comillas dobles como ("Times New Roman")
4. Cuando la fuente en inglés consta de una sola palabra, no agregue comillas dobles, como: (Arial);
5. En el sistema operativo de la versión china de Windows, la fuente china predeterminada es Song Ti o New Song Ti, y la fuente en inglés predeterminada es Arial.

• color: color del texto color
  : valor del color;
  rojo / # f00 / rgb (255,0,0)
• font-weight: texto en negrita
  font-weight: negrita (negrita) / negrita (negrita) / normal (regular) / 100—900
  En la especificación css, la negrita de la fuente se subdivide en 9 niveles, respectivamente 100 ——900, donde 100 corresponde a la distorsión de fuente más leve y 900 corresponde a la distorsión de fuente más pesada
• estilo de fuente: texto inclinado

1. font-style：italic/oblique/normal(Cancelar inclinación, visualización normal);
2. Tanto la cursiva como la oblicua son texto inclinado, pero la diferencia es que la cursiva se refiere a la cursiva, mientras que la oblicua es el texto inclinado. Para las fuentes sin cursiva, se debe usar el valor del atributo Oblique para lograr el efecto de texto inclinado.

• alineación de
  texto : alineación horizontal alineación de texto: izquierda / derecha / centro / justificar Justificar en ambos extremos (en algunos navegadores, no funciona para chino);} solo para texto o imágenes
• alineación vertical: alineación vertical alineación
  vertical: de arriba hacia arriba / de abajo hacia abajo / centrado en el medio / línea de base (algunos tipos de elementos específicos funcionan);
• ine-height: altura de la línea de texto
  line-height:normal/value;}line-height:20px; line-height:2em; (cuando se omite la unidad de altura de la línea, el valor predeterminado es em)

1. Cuando la altura de la línea de una sola línea de texto es igual a la altura del contenedor, la única línea de texto se puede alinear verticalmente en el centro del contenedor;
2. Cuando la altura de línea de una sola línea de texto es menor que la altura del contenedor, la única línea de texto puede estar alineada más que verticalmente en el contenedor;
3. Cuando la altura de la línea de una sola línea de texto es mayor que la altura del contenedor, la única línea de texto se puede alinear verticalmente en el contenedor de abajo (IE6 y abajo tienen problemas de compatibilidad con el navegador)

• decoración de texto: decoración de texto
  text-decoration:none/underline/overline/line-through

1. ninguno: sin decoración
2. subrayado: añadir subrayado
3. overline: agregue un overline
4. line-through: agregar tachado

• text-indent: sangra la primera línea
  text-indent:value;

1. sangría de texto puede tomar un valor negativo;
2. El atributo de sangría de texto solo afecta a la primera línea.

• text-transform: recupera el caso de las letras inglesas
  text-transform: ninguna sin conversión / poner en mayúscula la primera letra en mayúsculas / mayúsculas todo en mayúsculas / minúsculas todo en minúsculas;
• espaciado entre letras:
  letter-spacing:value;
  controle el kerning de letras en inglés o caracteres chinos
• espaciado de palabras:
  word-spacing:value;
  control de espaciado de palabras espaciado de palabras en inglés
• fuente: atributo de taquigrafía de texto
  font:bolder italic 12px/1.5em "宋体";

1. Cuando se abrevian, la fuente y el tamaño de fuente son
   las abreviaturas de los atributos de fuente necesarios : tamaño de fuente, altura de línea, descripción de fuente: el valor del atributo de fuente debe escribirse en el siguiente orden (cada atributo está separado por un espacio) Secuencia: fuente-estilo fuente-peso fuente -tamaño / altura de línea familia de fuentes
2. Cuando se abrevian, el tamaño de fuente y el alto de línea solo se pueden componer de una barra / y no se pueden escribir por separado.
3. Esta abreviatura solo funciona en conjunto cuando las propiedades font-size y font-family se especifican al mismo tiempo. Si no establece el font-weight y font-style, utilizarán los valores predeterminados.

3.2 Lista de atributos

• Estilo de símbolo de
  lista tipo de estilo de lista: disco (círculo relleno) / círculo (círculo hueco) / cuadrado (cuadrado sólido) / ninguno (eliminar símbolo de lista);
• Utilice la imagen como símbolo de
  lista list-style-image: url (ruta y nombre completo de la imagen utilizada);
• Defina la posición del símbolo de
  lista lista-estilo-posición: afuera (afuera) / adentro (adentro);
• 
  Estilo de lista abreviado : ninguno;

3.3 propiedades de fondo

• background-color: color de fondo
• background-image: la
  URL de la imagen de fondo ()
  puede usar imágenes locales o imágenes en línea
• background-repeat: la imagen de fondo repite el mosaico
  no-repetir no mosaico / repetir mosaico / repetir-x mosaico del eje X / repetir-y mosaico del eje Y
• background-position: la posición de la imagen de fondo
  izquierda / centro / derecha / valor superior / centro / inferior / valor;

1. Alineación en la dirección horizontal (izquierda / centro / derecha) o valor
2. Alineación vertical (superior / central / inferior) o valor
3. background-position: valor 1 valor 2;
   dos valores: el primer valor representa el valor de la posición horizontal, y el segundo valor: el valor de la posición vertical.
   Cuando los dos valores están en el centro, escriba un valor para representar la posición horizontal y la posición vertical;
   cuando la imagen de fondo pequeña del elemento es grande, desea mostrar la imagen de fondo en la parte inferior derecha y ajustar la posición de la imagen de fondo con valores negativos;

• adjunto de fondo: la imagen de fondo es fija

1. archivo adjunto de fondo: fijo fijo / desplazamiento de desplazamiento;
2. fijo, no se desplaza con el contenido y fija la posición de acuerdo con la ventana visual;
3. scroll: desplaza junto con el contenido.

• Consejo: formato de imagen común

1. jpg: formato de compresión con pérdida, que reduce el volumen de la imagen al perder la calidad de la imagen en sí, y es adecuado para imágenes con colores intensos; (compuesto de píxeles, cuantos más píxeles sean más claros)
2. gif: formato de compresión sin pérdida, soporte para transparencia, soporte para animación, adecuado para imágenes con una pequeña cantidad de colores;
3. png: formato de compresión sin pérdida, admite transparencia, no admite animación (el formato de archivo de origen de los fuegos artificiales), adecuado para imágenes con una pequeña cantidad de colores;

3.4 Atributos flotantes

• gramática
  float:left/right/none;
• ¿Por qué flotar?
  Satisfacer nuestras necesidades de diseño
• Caracteristicas

1. Se desvió del flujo de documentos estándar, pero no del flujo de texto estándar
2. En un elemento padre, si un elemento hijo flota, es mejor dejar que otros elementos hijo floten también.

3.5 El impacto de flotar

• Afectará el diseño de los elementos posteriores.

3.6 Borrar el atributo de borrado flotante

• El
  valor predeterminado de ninguno , lo que permite flotadores en ambos lados
• left
  Clear left flotante / No permitir objetos flotantes a la izquierda
• right
  Clear right flotante / No permitir objetos flotantes a la derecha
• ambos
  extremos flotantes transparentes / Objetos flotantes no permitidos
• Consejo:
  1 Para el borrado de CSS, debe tener en cuenta: esta regla solo puede afectar al elemento en sí que usa el borrado, no a otros elementos.2
  Métodos comunes de escritura de CSS para borrar efectos flotantes
  .clearfix { *zoom: 1 }
.clearfix:before, .clearfix:after { content: " "; display: table }
.clearfix:after { clear: both }

4. Atributos y valores de atributo

El selector { atributo: valor del atributo; } debe escribir el terminador de la declaración, de lo contrario puede causar problemas después de que se comprime el código.