1. Especificaciones gramaticales básicas
Analice una declaración CSS típica:
p {COLOR:#FF0000;FONDO:#FFFFFF}
Entre ellos, "p" se llama "selectores", lo que indica que queremos definir el estilo de "p";
Las declaraciones de estilo están escritas entre llaves "{}";
COLOR y FONDO se denominan "propiedades" y las diferentes propiedades están separadas por punto y coma ";";
"#FF0000" y "#FFFFFF" son los valores de los atributos.
2. Valor del color
Los valores de color se pueden escribir en valores RGB, por ejemplo: color: rgb(255,0,0), o en hexadecimal, como en el ejemplo anterior color:#FF0000. Si los valores hexadecimales se repiten de dos en dos se pueden abreviar con el mismo efecto. Por ejemplo: #FF0000 se puede escribir como #F00. Sin embargo, no se puede abreviar si no se repite. Por ejemplo, #FC1A1B debe completarse con seis dígitos.
3. Defina la fuente
Los estándares web recomiendan los siguientes métodos de definición de fuentes:
cuerpo { familia de fuentes : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif }
Las fuentes se seleccionan en el orden indicado. Si la computadora del usuario contiene la fuente Lucida Grande, el documento se denominará Lucida Grande. Si no, se designa como fuente Verdana, si no hay Verdana, se designa como fuente Lucida, y así sucesivamente;
La fuente Lucida Grande es adecuada para Mac OS X;
La fuente Verdana es adecuada para todos los sistemas Windows;
Lucida es adecuada para usuarios de UNIX
"Song Ti" es adecuado para usuarios de chino simplificado;
Si ninguna de las fuentes enumeradas está disponible, se garantiza que se llamará a la fuente sans-serif predeterminada;
4.Selector de grupo
Cuando varios elementos tienen los mismos atributos de estilo, se puede llamar a una declaración junta y los elementos se separan por comas: p, td, li { font-size: 12px }
5. Derivar selectores
Puede utilizar selectores derivados para definir estilos para elementos secundarios dentro de un elemento, por ejemplo:
li fuerte {estilo de fuente: cursiva; peso de fuente: normal}
Es para definir un estilo en cursiva pero no en negrita para el subelemento fuerte debajo de li.
6.selector de identificación
El diseño con CSS se implementa principalmente utilizando la capa "div", y el estilo del div se define a través del "selector de id". Por ejemplo, primero definimos una capa
<div id="barra de menú"></div>
Luego defínelo así en la hoja de estilo:
#barra de menú {MARGEN: 0px; FONDO: #FEFEFE; COLOR: #666;}
Donde "barra de menú" es el nombre de identificación que define. Tenga en cuenta el signo "#" al frente.
El selector de id también admite la derivación, por ejemplo:
#barra de menú p {text-align: derecha; margen superior: 10px;
Este método se utiliza principalmente para definir capas y elementos que son más complejos y tienen múltiples elementos derivados.
6. Selector de categorías
Utilice un punto en CSS para indicar la definición del selector de categoría, por ejemplo:
.14px {color: #f60; tamaño de fuente: 14px;}
En la página, utilice el método class="nombre de categoría" para llamar:
<span class="14px">fuente de tamaño 14px</span>
Este método es relativamente simple y flexible y se puede crear y eliminar en cualquier momento según las necesidades de la página.
7. Defina el estilo del enlace.
En CSS se utilizan cuatro pseudoclases para definir estilos de enlace, a saber: a:link, a:visited, a:hover y a:active, por ejemplo:
a: enlace {peso de fuente: negrita; decoración de texto: ninguna; color: #c00;}
a: visitado {peso de fuente: negrita; decoración de texto: ninguna; color: #c30;}
a: pasar el cursor {peso de fuente: negrita; decoración de texto: subrayado; color: #f60;}
a:activo {peso de fuente: negrita; decoración de texto: ninguna; color: #F90;}
Las declaraciones anteriores definen respectivamente los estilos de "enlaces, enlaces visitados, cuando se pasa el mouse y cuando se hace clic". Tenga en cuenta que debe escribir en el orden anterior; de lo contrario, la visualización puede ser diferente de lo que esperaba. Recuerda que están en orden "LVHA".
Jaja, después de leer tanto, me siento un poco mareado. De hecho, hay muchas más especificaciones gramaticales para CSS. Estas son solo algunas de las más utilizadas. Después de todo, lo estamos haciendo paso a paso y es imposible engordar. de un bocado :)