CSS es un lenguaje informático que se utiliza para expresar estilos de archivos como HTML (una aplicación del lenguaje de marcado generalizado estándar) o XML (un subconjunto del lenguaje de marcado generalizado estándar).
CSS no solo puede modificar estáticamente páginas web, sino que también puede cooperar con varios lenguajes de secuencias de comandos para formatear dinámicamente varios elementos de las páginas web.
CSS puede realizar un control preciso a nivel de píxel sobre el diseño de las posiciones de los elementos en las páginas web, admite casi todos los tamaños y estilos de fuente y tiene la capacidad de editar objetos de páginas web y estilos de modelos. Para un estudio en profundidad, busque "tutorial de vídeo CSS del sitio web chino php" en Baidu y aprenda en línea de forma gratuita.
1. Atributos comunes
nombre: nombre, puede repetirse, puede ser el mismo; clase: nombre de clase, puede repetirse o puede tener varios, usado para CSS, como <p class="one two"></p>; identificador, no puede La repetición se usa generalmente en JavaScript; las reglas de nomenclatura son las mismas que las reglas de nomenclatura de etiquetas en otros idiomas;
título: título, que se puede agregar en la etiqueta, como <img src="1.jpg" /title="Esta es una imagen">;/
2. Relación de etiquetas
Relación descendente: relación entre padres e hijos (incluida la relación);
Relación fraternal: relación del mismo padre;
3.Hojas de estilo CSS en cascada
Comentarios CSS: /El contenido del comentario está escrito aquí para que el programador lo vea y no se mostrará en la página/;
Reglas gramaticales de CSS: todos los símbolos deben ingresarse utilizando el método de entrada en inglés, en minúsculas, y los atributos deben escribirse entre llaves. Cada declaración de atributo debe terminar con un punto y coma y el valor del atributo debe tener un formato de unidad de píxel (px); : atributo: valor del atributo;
4. Cómo introducir CSS
Introducción en línea: el método de introducción para agregar estilos en etiquetas; Formato: <tag style="background:red; font-size:20px;">Content</tag>; y html La estructura no está separada; el alcance de la influencia está solo en la etiqueta actual; introducción en línea: agregue <style type="text/css">estilo CSS</style> en el encabezado de la página web; la capacidad de mantenimiento del código es relativamente pobre, no se da cuenta de la separación del código CSS y la estructura HTML, y el alcance de la influencia es solo en la página actual;
Introducción al enlace externo: cree un archivo xx.css fuera de la página web y utilice <link rel="stylesheet" type="text/css" href="xx.css"> en el encabezado de la página web; el código es altamente fácil de mantener. El código CSS está completamente separado de la estructura HTML, lo que afecta a todas las páginas web que introducen archivos CSS en todo el sitio web;
5.Sintaxis principal de CSS:
Formato estructural: selector {atributo: valor del atributo; atributo: valor del atributo;...}; Ejemplo: p{fondo:rojo;color:gris;tamaño:20px;};Selector: una herramienta para seleccionar elementos de la página;
Llaves: el contenido del estilo se escribe dentro de las llaves;
6. Selector
Selector básico:
Selector universal: se utiliza para inicializar el estilo predeterminado de la página web, escrito al principio de la hoja de estilo; formato: *{padding:0;margin:0;}; agrega estilo al formato especificado: p; {color:verde; }; Selector de clase: elija especificar el estilo del selector de clase; Formato: .nombre de clase {fondo: rosa;}; los estilos de contenido de varios bloques son iguales, entonces simplemente dales el mismo estilo;
selector de id: identificador único, no se puede repetir; formato: #id name{backgound-image:url(1.jpg);} Nota: el nombre de id se define en la etiqueta id="one"; , cuántas veces Cuando el estilo de contenido de cada bloque es el mismo, los nombres de ID de varios bloques deben ser diferentes;;
La diferencia entre identificación y clase: preste atención al punto anterior: la identificación debe poder determinar de forma única el nodo DOM. Si usa el selector de ID en todo el artículo, incluso si los dos estilos de nodo DOM son exactamente iguales, debe escribir el estilo del nodo dos veces. Si desea mantenerlo más adelante, debe mantener el código en ambos lugares. ! ! Aumenta considerablemente los costos de mantenimiento;
Selector de pseudoclase: principio secuencial de LoVe HAte, puede saltar, pero el orden no se puede cambiar: estado del enlace (enlace), estado visitado (visitado), estado activo (desplazar el cursor) y estado de clic (activo);
Clase de dibujo de puntos: a:link{color:amarillo;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} estilo al enfocarse a:focus{}; Nota: Se pueden agregar atributos de texto, colores de fondo e imágenes a los atributos; a{} y a:link{} logran el mismo efecto; clase de lista: li:link{color:amarillo;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};Nota: Se pueden agregar atributos de series de texto, colores de fondo e imágenes a los atributos;
Selector compuesto:
Selector de grupo (selector de unión, selector múltiple): se usa para agregar el mismo estilo a múltiples elementos, por ejemplo: .one, #one, a, span{color:red;font-size:14px;} significa Clase uno, #one; , una etiqueta y una etiqueta de intervalo tienen atributos comunes; selector de descendientes: agregue atributos a los elementos de la subclase; ejemplo: .one a{text-decoration:none;} significa el contenido modificado por la etiqueta a del descendiente de la clase uno Sin subrayado; selector de elemento secundario (selector especificado): agregue atributos al elemento secundario especificado, por ejemplo: #one>p{color:red;}; significa agregar el contenido que descansa en la etiqueta p del hijo del selector de identificación;
Selector de elementos adyacentes:
1. Dos selectores de hermanos adyacentes agregan atributos. No se agregan atributos a sí mismos, solo agregan atributos al siguiente hermano .one+p{fondo:rojo;} 2.one~p{fondo:verde} significa Es; para agregar atributos a todos los elementos de la etiqueta p después de un selector, siempre que tengan una clase principal;
Selector de atributos:
1. Agregue atributos a elementos con atributos; img[id]{background:red;} Agregue atributos a elementos con id;
Agregue atributos a elementos con valores de atributos especificados: img[src="b.jpg"]{background:red;}Agregue atributos a elementos con b.jpg;
3. Agregue atributos a los elementos que comienzan con el carácter especificado: img[src^="b"]{background:red;} Agregue atributos a todos los elementos que comiencen con b; 4. El selector tiene el valor del atributo especificado al final. : img[src$="b"]{background:red;}Agregue atributos a todos los elementos que terminan en b 5. El selector tiene elementos que contienen el valor de atributo especificado: img[src*="b" ]{background:red; ;}Agregar atributos a todos los elementos que contengan b;
7. Inclusión de elementos (clasificación de métodos de visualización)
Elementos de bloque: utilizados para la composición tipográfica. Las estructuras típicas incluyen: p, p, li, h1, dt;
El elemento se muestra en su propia línea (independientemente del ancho y el alto se pueden configurar);
Cuando se anida un elemento a nivel de bloque, si no se establece el ancho del elemento secundario, el ancho del elemento secundario será el ancho del elemento principal;
Elementos en línea: se utilizan para agregar estilos; span, a, font, strong; Nota: No proporcione márgenes superior e inferior ni relleno a los elementos en línea. Se ignorarán los superiores e inferiores, y los izquierdo y derecho funcionarán (generalmente no se usan). );
Los elementos se muestran en una línea;
El ancho y el alto no se pueden establecer directamente;
Elementos de bloque en línea: imagen, entrada;
Los elementos se muestran en una línea;
Se puede configurar el ancho y el alto;
Relación de conversión: en línea contiene elementos de bloque en línea; los elementos de bloque pueden contener elementos en línea;
Pantalla: inline convierte elementos en elementos en línea Pantalla: inline-block convierte elementos en elementos de bloque en línea
Pantalla: bloque Convertir el elemento en un elemento de bloque
8.Propiedades CSS
Propiedades relacionadas con la fuente:
tamaño de fuente: tamaño de fuente, cuántos píxeles, px; peso de fuente: grosor de fuente, negrita (700-900), normal, puede escribir 100-900; estilo de fuente: inclinación de fuente, cursiva, familia de fuentes; : fuente, Microsoft YaHei, HeiTi;
Concatenación de atributos: fuente: estilo de fuente peso de fuente tamaño de fuente/alto de línea familia de fuente Nota: La concatenación de atributos de fuente debe incluir tamaño de fuente y familia de fuente (se pueden omitir otros atributos tamaño de fuente y fuente); -El orden de la familia no se puede cambiar;
texto:
color: color; sangría de texto: sangría [la unidad es em]; decoración de texto: línea de texto [subrayado, sobrerayado, tachado de línea, ninguna línea de cancelación]; distancia; alineación de texto: alineación horizontal [predeterminado izquierda, centro, derecha];
altura de línea: altura de línea, la altura de la línea donde se encuentra el texto [cuando la altura de la línea es igual a la altura del elemento, el texto está centrado verticalmente];
Tamaño: es el tamaño del elemento del bloque. El ancho y el alto no se pueden configurar para elementos en línea. Si desea configurarlo, debe convertirlo;
ancho: ancho;
altura: altura;
Atributos de list ul y li: el tipo de estilo de lista se puede agregar a ul pero no es necesario agregarlo a li;
list-style-type:none; Elimina símbolos, cuadrados, círculos, círculos sólidos de disco. No es necesario escribirlos después de agregar imágenes list-style-type:none;list-style-image:url(1.jpg) Borde de la imagen: 1px rojo sólido; establezca un borde para ul en su conjunto;
posición-estilo-lista: exterior; estilo de posicionamiento de la imagen: interior, exterior;
fondo:
Color de fondo color de fondo imagen de fondo imagen de fondo Nota: al configurar la imagen de fondo, asegúrese de establecer el ancho y el alto del mosaico de fondo repetición de fondo: repetir (valor predeterminado) | x | (mosaico horizontal) repetición-y (mosaico vertical) posición de fondo: establece el valor específico: izquierda|parte superior|cneter; número, el primer valor representa la dirección horizontal, el segundo valor representa la dirección vertical, establezca el formato de configuración de la imagen de fondo frontal en imagen de fondo establezca si el fondo es fijo adjunto de fondo: desplazamiento (valor predeterminado) desplazamiento fijo ( imagen fija);
Escritura conjunta de atributos: sin límite de cantidad o pedido: fondo:url("") rojo sin turba 30px 40px;
altura de línea: modelo de cuadro: utilizado para el diseño de páginas web, se debe establecer el ancho
Propiedades del borde del cuadro: componentes:
Ancho y alto del borde: ancho del borde: 1 px; Color del borde: color del borde: rojo; Estilo del borde: estilo del borde: línea sólida y punteada/línea punteada discontinua/ninguno; Nota: No hay restricción de orden al escribir atributos juntos. No es necesario escribir el color del borde y no es necesario escribir el ancho del borde. Métodos de escritura separados: borde del borde: margen interior de relleno: establezca la distancia entre ellos. contenido y el borde del cuadro
Margen: establece la distancia entre cuadros
p{ancho:300px;alto:200px;borde superior:1px rojo sólido;borde-izquierdo:1px rojo sólido;borde-derecho:1px rojo sólido;borde-inferior:1px rojo sólido;}
Para configurar propiedades individualmente:
color superior del borde: rojo; estilo superior del borde: sólido; ancho superior del borde: 1 px;
Tamaño de la caja:
Dónde afecta el tamaño del cuadro: el cuadro heredado está dentro del rango de ancho del cuadro principal y el valor de relleno no afectará el cálculo del tamaño del cuadro: ancho = ancho del contenido + bordes izquierdo y derecho + relleno izquierdo y derecho.
El borde puede afectar el tamaño del cuadro y el relleno puede afectar el tamaño del cuadro.
En el futuro, al implementar el diseño del cuadro de página, si se establecen márgenes internos para el cuadro, el valor correspondiente se debe restar del ancho o alto del contenido.
Margen: establece la distancia entre cuadros
Centrar el cuadro: Atributo escritura conjunta:
El cuadro debajo del flujo estándar está centrado: margen: 0px automático; el cuadro posicionado está centrado: primero tome la mitad del cuadro principal y luego retroceda la mitad de su propio ancho: 10px, arriba, derecha, abajo, izquierda. 10pxMargin: 10px, 20px, arriba, abajo, 10px, izquierda y derecha, 20pxMargin: 10px 20px 30px 10px arriba, 20px izquierda y derecha, 30px abajo
Margen: 10px 20px 30px 40px arriba derecha abajo izquierda
Aviso:
Atributo de escritura conjunta:
Relleno: 10px; la distancia entre arriba, derecha, abajo e izquierda es 10pxRelleno: 10px 20px; arriba e abajo 10px izquierdo y derecho 20pxRelleno: 10px 20px 30px;
Relleno: 10px 20px 30px 40px; arriba, derecha, abajo, izquierda;
Cuando dos cuadros se muestran verticalmente, los márgenes están sujetos al valor máximo establecido (el primer caso de fusión de márgenes). Cuando dos cuadros se muestran horizontalmente, los márgenes se superponen y se colapsan (un problema difícil) de resolver.
relleno: establece la distancia entre el contenido y el borde del cuadro
Establecer un borde para el cuadro principal
Establecer desbordamiento: oculto para el cuadro principal;
Márgenes claros:
Método 1: *{relleno: 0; margen: 0;}
Método 2: Cuerpo,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.Tres características principales de CSS
Herencia:
Heredable: color, alineación de texto, sangría de texto, tamaño de fuente, peso de fuente, familia de fuentes No heredable: decoración de texto, borde, visualización, margen, flotante, relleno La premisa para que se produzca la herencia es entre etiquetas. para una relación anidada, se puede heredar el color del texto; se puede heredar el tamaño de la fuente; se puede heredar la altura de la línea;
Características especiales:
El color del texto en el elemento principal no se puede heredar (en cascada)
<h1></h1> Las etiquetas de título no pueden heredar el tamaño del texto del elemento principal
Superposición: la superposición se refiere a la cobertura de estilos.
La naturaleza en cascada de los estilos no tiene nada que ver con el orden en que se llaman los estilos, sino con el orden en que se definen los estilos.
La premisa para que ocurra la cascada: conflicto de estilo
Prioridad:
Peso: Introducción en línea (1000) > id (100) > clase (10) > etiqueta (1) > general (0). Cuanto mayor sea el valor, mayor será la prioridad.
Los pesos son los mismos y los siguientes estilos funcionarán
10. Notas de conocimientos complementarios
Escritura de optimización de formulario: <lable for="one">Nombre de usuario:</lable><input type="text" id="one">Icono de lista de formato: estilo de lista: ningunoFusión de formulario: colapso de borde: colapso (Establecer fusión de bordes de tablas, aplicable a tablas) Desbordamiento del "contexto de formato" de Bfc:
visible: valor predeterminado. El contenido no se recortará y se presentará fuera del cuadro del elemento oculto: el contenido se recortará y el contenido restante será invisible. Cuando la imagen cambie de posición, el elemento principal también cambiará su posición. el elemento principal puede hacer que el elemento principal cambie su posición. La posición del elemento permanece sin cambios. desplazamiento: el contenido se recortará, pero el navegador mostrará barras de desplazamiento para ver el contenido restante.
automático: si el contenido está recortado, el navegador muestra barras de desplazamiento para ver el resto del contenido
11. Flujo estándar: los elementos a nivel de bloque se muestran en una línea. Modo de visualización de flujo estándar: el modo de visualización predeterminado de los elementos;
12. Flotante: flotante se utiliza para resolver el problema de ajuste de texto e imágenes que se utiliza para crear barras de navegación y diseños de páginas web;
Uso: Flotar:izquierda|derecha Características: Flota lo que quieras
Los elementos configurados para flotar no ocupan su posición original (fuera del script), lo que permite que los elementos a nivel de bloque se muestren como flotantes en una línea y se puedan convertir en elementos de bloque en línea.
Durante el proceso de conversión de modo, utilice la pantalla si puede.
Flotador claro:
Definición: borrar el flotador no significa eliminar el flotador; borrar el flotador se refiere al impacto de borrar el flotador. Preste atención al momento de uso: cuando el elemento secundario está configurado para flotar y el elemento principal no tiene altura, el diseño de la página se confundirá. ; en este caso, borre el flotador.
Método flotante claro: [x] Nota: Agregue un elemento de bloque vacío (<p></p>, etiqueta) después del elemento que se va a borrar y agregue clear:both left |right al elemento vacío agregado.
13. Posicionamiento: Orientación: izquierda, derecha, arriba, abajo (para más detalles, vaya al canal de tutoriales CSS del sitio web chino php)
Posicionamiento estático: el posicionamiento estático es el método de visualización del flujo de elementos estándar. posición: estático es el posicionamiento predeterminado.
Posicionamiento absoluto: posicionamiento relativo al elemento padre o elemento ancestro del elemento posicionado. Si el elemento padre y el elemento ancestro no existen, se encontrará que la capa contenedora original no ocupa la posición anterior;
Al configurar el posicionamiento absoluto para un solo elemento, el posicionamiento se establece en función de la esquina superior izquierda del navegador (cuerpo). Cuando los cuadros están anidados, si el cuadro principal no establece el posicionamiento, el cuadro secundario establece el posicionamiento según la esquina superior izquierda del navegador. Cuando los cuadros están anidados, si el cuadro principal está ubicado, el cuadro secundario se coloca según la esquina superior izquierda del cuadro principal. Se establece el posicionamiento absoluto para el cuadro y el cuadro no ocupa ninguna posición (fuera del script). Después de establecer el posicionamiento absoluto para el elemento en línea, el elemento se convierte en un elemento de bloque en línea.
Nota: Una vez que el elemento se establece en posicionamiento absoluto, la posición del elemento se puede establecer arbitrariamente a través del nombre de orientación específica.
Posicionamiento relativo: relativo a la posición original del elemento, ocupará la posición anterior: relativa;
Una vez que el elemento se establece en posicionamiento relativo, ocupa la posición original. Establecer el posicionamiento relativo con su propia posición como referencia. El posicionamiento relativo no puede realizar la conversión de modo del elemento.
El hijo debe estar en la misma posición que el padre (el elemento hijo está configurado en posicionamiento absoluto y el elemento padre está configurado en posicionamiento relativo)
Posicionamiento fijo: relativo a toda la posición estable; el posicionamiento fijo no ocupa la posición (fuera de etiqueta: convierte elementos en línea en posición de elementos de bloque en línea: fijo);
Problemas de jerarquía:
Habrá problemas jerárquicos solo cuando se establezca el posicionamiento. Hay posicionamiento relativo, absoluto y de otro tipo entre elementos hermanos cuya estructura de documento HTML está en la parte posterior y en la capa más externa (nivel superior).
Índice Z: establece el nivel. El valor es un número. Siempre que haya posicionamiento, se utilizará la configuración de posicionamiento.
14. CSS Elf Rabbit: seleccione documentos transparentes
El punto del sistema de coordenadas en el navegador tiene la dirección correcta como dirección positiva, y la dirección debajo del punto es positiva. El sprite CSS es una forma de procesar la imagen de fondo de la página web.
Uso de sprites
Cuando use fw, debe abrir el mapa de sprites en el modo abierto. Cuando use el mapa de sprites como imagen de fondo, a menudo se usa junto con la posición de fondo para medir las coordenadas de los elementos en el mapa de sprites. selector.
O use la letra de atajo: k
15. Visibilidad CSS
desbordamiento: oculto Ocultar la parte sobrante visualización: ninguno Ocultar el elemento directamente mostrar: bloque Mostrar el elemento (mejor combinado con js) visibilidad: oculto Ocultar la visualización del elemento: ninguno Ocultar el elemento y no ocupar la posición;
visibilidad: oculto; oculta el elemento y ocupa su posición original
16. Centrar imágenes y texto
Cada elemento de bloque interno tiene una alineación vertical predeterminada: línea base
alineación vertical: la alineación vertical media y el bloque en línea coinciden mejor;
17. Evite el flujo fuera de lo estándar
En el proceso de diseño de la página web, utilice el flujo estándar si puede. El flujo estándar no puede resolver la flotación.
Utilice margen izquierdo/margen derecho y establezca el valor en automático para empujar automáticamente el cuadro hacia los dos lados exteriores.
18. Especificaciones de inclusión de etiquetas
p puede contener cualquier etiqueta en la secuencia estándar la etiqueta p no puede contener p y la etiqueta de título y la etiqueta de lista la nota de título puede contener otras etiquetas
Los elementos en línea no deben contener otras etiquetas.
19. Resumen de configuración de ancho y alto
Después de flotar, el elemento puede establecer el ancho y el alto. Después del posicionamiento absoluto, el elemento puede establecer el ancho y el alto.
Después del posicionamiento fijo, el elemento puede establecer el ancho y el alto.
20. Actualice a CSS3
CSS3 y CSS2: CSS es potente y el código es conciso
Selector de pseudoclase:
El primer elemento hijo: primer hijo El mejor elemento: último hijo El enésimo elemento hijo: n-ésimo (n) es un número impar para el elemento hijo: n-ésimo (impar o (n-ésimo); 2n+1))
Elemento par: nth-child(even or (nth-child(2n))
sombra de texto: sombra de texto: horizontal, vertical, sombra sombra de cuadro: sombra de cuadro: horizontal, vertical, sombra
fondo: fondo