CSS: es la abreviatura de Cascading Style Sheet, traducida como [Cascading Style Sheet], que es un conjunto de reglas de formato. Es un lenguaje de marcado utilizado para controlar (mejorado) el estilo de la página web y permitir la separación de la información de estilo del contenido web.
Composición de CSS: La definición de CSS se compone de tres partes: selector (Selector), propiedades (propiedades) y valor de propiedad (valor). Sintaxis: selector{propiedad:valor} (selector{propiedad:valor de propiedad})
Cosas a tener en cuenta:
1. El bloque de declaración CSS consta de: selector + "{" + uno o más atributos CSS + "}".
2. CSS no distingue entre mayúsculas y minúsculas y se recomiendan minúsculas en la sintaxis de CSS.
1. Selectores CSS
Es el nombre de un estilo CSS. Cuando se muestra un estilo CSS en un documento HTML, se utiliza un CSS. ¿Cómo usarlo? En este momento, el selector CSS (nombre CSS) se usa para especificar que esta etiqueta HTML usa este estilo CSS.
2. Sintaxis del selector
Un selector CSS define un estilo.
nombre del selector {declaración;}
Por ejemplo:
p{font-size:12px;}.dreamdublue{color:azul;}.dreamdu18px{font-size:18px;}#dreamdured{color:rojo;}P, dreamdublue y dreamdured son todos selectores.
3. Reglas de nomenclatura del selector
Los selectores de CSS pueden utilizar letras inglesas mayúsculas y minúsculas, números, guiones, subrayados, dos puntos y puntos.
(1) Letras inglesas mayúsculas y minúsculas AZ az
(2) Números 0-9
(3) Guión -
(4) Subrayado_
(5) Dos puntos:
(6) Periodo.
Nota: los selectores CSS solo pueden comenzar con letras.
4. Clasificación de selectores
Los selectores CSS se pueden dividir en muchas categorías, como: selector de tipo, selector de identificación, selector de clase, selector universal, selector de grupo, selector de inclusión, selector de elemento específico, selector de subobjeto, selector de atributo, selector relacionado. Selectores de vecinos, etc. Se presentarán y analizarán uno por uno a continuación.
1. Selector de tipo: el selector de tipo es el elemento de la página web en sí y el nombre del elemento se utiliza directamente al definir.
Cuerpo{/*Definir atributos de página*/}Div{Width:774px;/*Defina todos los elementos div para que tengan un ancho de 774 píxeles*/}2. selector de id: es único. Los valores de id de diferentes elementos no se pueden repetir. El selector de id define diferentes estilos para los objetos específicos de cada elemento, lo que facilita a los usuarios controlar la página con mayor precisión. Cuando utilice el selector de identificación, primero debe definir un atributo de identificación para cada elemento.
<divid="top"></div>Cuando utilice el selector de ID, debe utilizar # para la identificación: #top{Width:774px;/*Defina que todos los elementos div tengan un ancho de 774 píxeles*/}3. Selector de clase: se puede definir el mismo nombre de clase para diferentes tipos de elementos en un documento. La clase puede unificar elementos del mismo estilo en una categoría. Al utilizar el selector de clase, primero debe definir un atributo de clase para cada elemento. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>Cuando utilice el selector de clases, debe utilizar inglés (punto) para la identificación. : . rojo{Color:rojo;}4. Selector universal: Es un selector especial, representado por *, que es un selector usado pero fácil de ignorar.
*{font-size:12pt;/*Defina el tamaño de todas las fuentes del documento en 12pt*/}5. Selector de grupo: el selector de grupo no es un tipo de selector, sino un método de selección. Cuando varios objetos definen el mismo estilo, podemos agruparlos en un grupo. Esto puede simplificar la lectura y escritura de código, como por ejemplo:
.class1{font-size:13px;color:rojo;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}Se puede agrupar en:
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:rojo;}.class2{color:azul;}Hay dos principios para usar la agrupación: 1. Principio de aspecto 2. Principio de proximidad (si varios elementos son adyacentes, puede considerar usar selectores de agrupación dentro de un módulo)
6. Contiene selectores: el tipo de selectores más útil, que puede simplificar el código y lograr una amplia gama de control de estilo. Por ejemplo:
.div1h2{/*Defina el estilo de título de todos los h2 en la capa de clase div1*/font-size:18px;}.div1p{/*Defina el estilo de título de todos los p en la capa de clase div1*/font-size:12px ;}7. Selectores especificados por elemento: a veces queremos controlar el estilo de un determinado elemento dentro de un cierto rango. En este caso, podemos usar selectores de clase o de identificación en combinación. Por ejemplo:
span.red{/*Defina el color del elemento con clase red en el elemento span como red*/color:red;}div#top{/*Defina el ancho del elemento con id como top en el elemento div como 100 %*/ancho:100% ;}por ejemplo:<div><h2><h2><p></p><span></span></div>Obviamente no es posible usar el selector de noticias en el código anterior. No es bueno usar P directamente. El selector de tipo h2 tampoco es bueno. Entonces puedes usar el elemento para especificar el selector.
p.noticias{} h2.noticias{} span.noticias{}
8. Selectores de subobjetos: al igual que los selectores de elementos, son selectores de restricción, es decir, los estilos de elementos que cumplen con las condiciones de restricción se definen dentro de un cierto rango de elementos. El selector específico del elemento usa atributos de clase e identificación como restricciones, mientras que el sub. -selectores de objetos El selector utiliza id y subobjeto como restricciones.
#main>table{/*Define el estilo de la tabla de subobjetos en el módulo principal con id como main*/width:788px;font-size:12px;}#main>.title{/*Define el subobjeto en el módulo principal con id como principal La clase del objeto es el estilo del título*/color:red;font-style:italic;}9. Selector de atributos: el selector de atributos consiste en agregar un corchete después del elemento, y varios atributos o expresiones se enumeran entre corchetes. Hay 7 formas específicas de selectores de atributos:
(1) Coincidencia de atributos de existencia: controle el estilo del elemento haciendo coincidir los atributos existentes. Generalmente, los atributos coincidentes deben incluirse entre paréntesis y solo se deben enumerar los nombres sin asignar valores:
h1[class]{color:red;/*Se aplica a cualquier elemento h1 con atributo class independientemente del valor de class*/}img[alt]{border:none;/*Se aplica a cualquier elemento img con atributo alt independientemente de alt ¿Cuál es el valor*/}a[href][title]{font-weight:bold;/*funciona como un elemento con atributos href y title*/}(2) Coincidencia precisa de atributos: el estilo se aplicará solo cuando el valor del atributo coincida completamente con el valor del atributo especificado. Los selectores de identificación y clase son en realidad una selección de atributos precisa.
a[href=www.163.com][title=NetEase]{font-size:12px;/*La dirección de la función apunta a www.163.com y el mensaje de título es un elemento de NetEase*/}(3) Los espacios en blanco se combinan individualmente: al definir una lista de cadenas para atributos, puede controlar el estilo del elemento siempre que coincida con cualquiera de las cadenas.
<spanclass=abc>Quién controla mi estilo</span> Puedes usar los siguientes estilos para controlar: [class^=a]{color:red;} o: [class^=b]{color:red;} o: [clase^=c]{color:rojo;} o: span[clase^=c]{color:rojo;}(4) Coincidencia de guiones: la función y el uso son los mismos que los de la coincidencia de espacios en blanco, pero la lista de cadenas en la coincidencia de guiones está separada por guiones.
<span>Quién controlará mis estilos</span>
Esto se puede controlar usando los siguientes estilos:
[clase|=a]{color:rojo;} o: [clase|=a]{color:rojo;} o: [clase|=b]{color:rojo;} o: [clase|=c]{color :rojo;} o: span[clase|=c]{color:rojo;}(5) Selector de prefijo: siempre que el carácter inicial del valor del atributo coincida con la cadena especificada, el estilo se puede aplicar al elemento. La coincidencia de prefijos se implementa utilizando el formulario [^=]:
<div>Coincidencia de prefijos</div>
Puede utilizar los siguientes controles de estilo.
[clase^=mi]{color:rojo;}(6) Coincidencia de sufijos: a diferencia del prefijo, siempre que el carácter final del atributo coincida con el carácter especificado, utilice el control de formulario [$=].
<div>Coincidencia de sufijos</div>
Puede utilizar los siguientes controles de estilo.
[clase$=Prueba]{color:rojo;}(7) Coincidencia de subcadenas: el estilo se aplica siempre que la cadena especificada exista en el atributo y se controle en el formulario [*=].
<div>Coincidencia de subcadenas</div>
Puede utilizar los siguientes controles de estilo.
[clase*=est]{color:rojo;}10. Selector adyacente: se refiere al siguiente elemento adyacente al elemento.
div+p{font-size:24px;/*Se aplica a todos los elementos p inmediatamente después del elemento div, definiendo el tamaño de fuente del elemento p como 14px*/}por ejemplo:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>Para controlar el elemento p inferior por separado, a menos que defina una clase y un atributo de identificación para él, puede hacerlo usando selectores adyacentes.
#sub_wrap+p{font-size:14px;}