1. Hacer un buen uso de las abreviaturas de CSS puede reducir el tamaño del archivo de la página, aumentar la velocidad de descarga y hacer que el código sea conciso y legible.
como:
div{
borde superior: 1px sólido #cccccc;
borde izquierdo: 1px sólido #cccccc;
borde derecho: 1px solo #cccccc;
borde inferior: 1px sólido #cccccc;
}
se puede escribir como
p{border:1px solid #cccccc}
Otro ejemplo:
div{
margen superior: 10px;
margen derecho: 20px;
margen inferior: 30px;
margen izquierdo: 40px;
}
se puede reescribir como:
/*Presta atención al orden de escritura arriba, derecha, abajo e izquierda*/
div{margen:10px 20px 30px 40px}
/*Tenga en cuenta que los valores y las unidades no pueden tener espacios y cada valor está separado por un espacio*/
(Para obtener más detalles, consulte: manual de referencia de css2, resumen de abreviaturas de css comunes)
2. Puede establecer múltiples atributos de clase para un elemento html al mismo tiempo gobierna (múltiples definiciones de clase).
Generalmente lo escribimos como:
De hecho, podemos especificar varias reglas para el elemento p, como por ejemplo:
CSS:
.a{…}
.b{….}
HTML:
este elemento incluye los estilos establecidos en a y b
Nota: Separe varias reglas con espacios.
3. Defina la unidad claramente a menos que el valor sea 0.
Olvidarse de definir las dimensiones es un problema común entre los principiantes en CSS. En html podemos escribir ancho="100", pero se debe proporcionar una unidad precisa en css. Por ejemplo: ancho:100px;alto:50px;tamaño de fuente:9pt, excepto el valor 0, porque no importa para ninguna unidad. 0 valores son todos iguales en tamaño.
Nota: No agregue espacios entre el valor y la unidad.
4. Distinción de mayúsculas y minúsculas En xhtml, los nombres de elementos definidos por css distinguen entre mayúsculas y minúsculas. Los valores de clase e id también distinguen entre mayúsculas y minúsculas en html y xhtml. Por lo tanto, para evitar errores, se recomienda utilizar siempre minúsculas.
Por ejemplo, #aaa es diferente de #AAA. En xhtml, p y P también son diferentes. No se sobrescribirán.
Si #aaa está definido en css, usar AAA para aplicarlo en el elemento html no obtendrá el estilo definido en #aaa.
Código de muestra:
CSS:
#aaa{borde:1px sólido #ccc}
HTML:
no se puede mostrar un borde de 1 píxel
5. Principio de prioridad más reciente de CSS Si se definen varios estilos para un elemento, el nivel más reciente tendrá prioridad y el estilo más reciente anulará otras definiciones de estilo.
como:
CSS:
p{color:rojo}
.azul{color:azul}
.amarillo{color:amarillo}
HTML:
se muestra aquí en rojo
Se muestra aquí en azul.
Se muestra aquí en verde.
Se muestra aquí en amarillo.
Aviso:
(1) Preste atención a varias prioridades de estilos (las prioridades disminuyen de arriba a abajo):
--Configuración de estilo de elemento
--Configuraciones en el área de la cabeza
--Archivos css con referencias externas (2) La prioridad no la establece el orden de acceso, sino el orden de declaración en css.
Como en el ejemplo anterior, aquí se muestra en amarillo
porque .amarillo está después de .azul en la definición CSS.
6. Utilice subselectores para reducir la definición de identificación y clase. Por ejemplo:
#contener{..}
#contain_ul{...}
.contail_li{...}
se puede cambiar a:
#contener{..}
#containul{...}
.contain ul li{...}
7. No agregue comillas a la ruta de la imagen de fondo y cambie background:url("xxx.gif") a background:url(xxx.gif)
Porque agregar comillas provocará errores en algunos navegadores.
8. La ruta de la imagen de fondo es relativa a la ruta de la página CSS actual.
Por ejemplo:
Existe la siguiente estructura de directorios: imágenes
--xxx.gif
--css
--xx.css
--index.html
Contenido del código
index.html hace referencia al archivo xx.css.
xx.css debe hacer referencia a la imagen xxx.gif y su método de escritura es: background:url(../images/xxx.gif)
9. Utilice el selector de grupo para aplicar el mismo estilo a diferentes elementos como h1, h2, h3. , div{font-size:16px;font-weight:bold}
Luego, los estilos de los elementos h1, h2, h3 y div tienen 16 píxeles de fuente y
10 en negrita. Escriba el estilo de enlace correcto cuando utilice CSS para definir varios estados de enlaces, debe prestar atención al orden de escritura. es: :enlace: visitado :hover :activo.
Si no escribe en este orden, es posible que no pueda lograr el efecto que desea. Para recordar el orden, extraemos la primera letra de cada palabra: LVHA. Puedes recordar el orden memorizando las dos palabras LoVe y Hate.
11. Prohibir que el contenido se ajuste y obligar al contenido a ajustarse. En una tabla o capa, es posible que queramos que el contenido no se ajuste o fuerce el contenido a ajustarse. Podemos lograr estos requisitos a través de algunos atributos CSS.
Desactivar saltos de línea: espacio en blanco:nowrap
Salto de línea forzado: ajuste de palabra: salto de palabra: normal
12. La diferencia entre relativo y absoluto;
Absoluto, el método de escritura en CSS es: posición: absoluto; Significa posicionamiento absoluto. Se refiere a la esquina superior izquierda del navegador y coopera con ARRIBA, DERECHA, IZQUIERDA (en adelante, TRBL) para el posicionamiento. TRBL no está configurado. De forma predeterminada, el punto de origen es el punto original del padre. Si se establece TRBL y el padre no establece el atributo de posición, entonces el valor absoluto actual se colocará con la esquina superior izquierda del navegador como punto original, y la posición será determinada por TRBL.
Relativo, el método de escritura en CSS es: posición: relativa; Significa posicionamiento relativo absoluto. Se refiere al punto original del padre como punto original. Si no hay padre, el punto original del CUERPO se utiliza como punto original. y se coloca con TRBL Cuando hay atributos CSS como relleno en el nivel principal, el punto original del nivel actual se coloca con referencia al punto original del área de contenido principal.
13. Distinguir entre div y span
div es un elemento a nivel de bloque que puede contener párrafos, tablas, etc., y se utiliza para colocar contenido diferente. Generalmente, usamos divs para diseñar y posicionar cada bloque en la página web.
span es un elemento en línea sin significado práctico. Existe únicamente para aplicar estilos. Agregar un marcado a una parte del contenido puede establecer el estilo de su contenido definiendo un estilo en el span.
14. Distinguir entre visualización y visibilidad.
Tanto display:none como visibilidad:hidden pueden ocultar un elemento, pero visibilidad:hidden solo oculta el contenido del elemento, pero el espacio de posición utilizado aún se conserva.
Display: none equivale a eliminar el elemento de la página, y también se eliminará su posición ocupada.