1. Utilice abreviaturas CSS
El uso de abreviaturas puede ayudar a reducir el tamaño de sus archivos CSS y hacerlos más fáciles de leer. Para conocer las reglas principales de la abreviatura de CSS, consulte el "Resumen de sintaxis de abreviaturas de CSS común", que no se describirá aquí.
2. Defina la unidad claramente a menos que el valor sea 0.
Olvidarse de definir las unidades de una dimensión es un error común entre los novatos en CSS. En HTML puedes escribir simplemente ancho=100, pero en CSS debes dar una unidad exacta, como por ejemplo: ancho:100px ancho:100em. Sólo hay dos excepciones en las que no se pueden definir unidades: altura de fila y valor 0. Además, otros valores deben seguir a la unidad. Tenga cuidado de no agregar espacios entre el valor y la unidad.
3. Distingue entre mayúsculas y minúsculas
Cuando se utiliza CSS en XHTML, los nombres de elementos definidos en CSS distinguen entre mayúsculas y minúsculas. Para evitar este error, recomiendo usar minúsculas para todos los nombres de definiciones.
Los valores de clase e id también distinguen entre mayúsculas y minúsculas en HTML y XHTML. Si debe escribir mayúsculas y minúsculas, confirme cuidadosamente que su definición en CSS sea coherente con las etiquetas en XHTML.
4. Cancelar las restricciones de elementos antes de clase e identificación.
Cuando escribe para definir una clase o identificación para un elemento, puede omitir la calificación del elemento anterior, porque la identificación es única en una página y se puede usar varias veces en la página. No tiene sentido que califiques un elemento. Por ejemplo:
div#contenido { }
conjunto de campos.detalles { }
se puede escribir como
#contenido { }
.detalles { }
Esto ahorra algunos bytes.
5.Valor predeterminado
Por lo general, el valor predeterminado de relleno es 0 y el valor predeterminado de color de fondo es transparente. Pero el valor predeterminado puede ser diferente en diferentes navegadores. Si tiene miedo a los conflictos, puede definir los valores de margen y relleno de todos los elementos en 0 al comienzo de la hoja de estilo, de esta manera:
* {
margen:0;
relleno: 0;
}
6. No es necesario definir repetidamente valores heredables.
En CSS, los elementos secundarios heredan automáticamente los valores de atributos del elemento principal, como el color, la fuente, etc., que se han definido en el elemento principal y se pueden heredar directamente en el elemento secundario sin una definición repetida. Pero tenga en cuenta que el navegador puede anular su definición con algunos valores predeterminados.
7. Primer principio reciente
Si hay varias definiciones del mismo elemento, se dará prioridad a la definición más cercana (nivel mínimo). Por ejemplo, existe este fragmento de código.
Actualización: Lorem ipsum dolor set
En el archivo CSS, ha definido el elemento p y una actualización de clase.
pag {
margen:1em 0;
tamaño de fuente: 1em;
color:#333;
}
.actualizar {
peso de fuente: negrita;
color:#600;
}
De estas dos definiciones, se usará class=update porque class está más cerca que p. Puede consultar "Cálculo de la especificidad de un selector" del W3C para obtener más información.
8. Múltiples definiciones de clases
Una etiqueta puede definir varias clases al mismo tiempo. Por ejemplo: primero definimos dos estilos, el primer estilo tiene un fondo de #666; el segundo estilo tiene un borde de 10 px.
.uno{ancho:200px;fondo:#666;}
.dos{borde:10px sólido #F00;}
En el código de la página, podemos llamar así
El efecto de visualización final es que este div tiene un fondo #666 y un borde de 10px. Sí, es posible hacer esto, puedes intentarlo.
9. Utilice selectores descendientes
Los principiantes en CSS no saben que el uso de subselectores es una de las razones que afecta su eficiencia. Los subselectores pueden ayudarle a guardar muchas definiciones de clases. Echemos un vistazo al siguiente código:
La definición CSS para este código es:
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
Puede reemplazar el código anterior con el siguiente método
La definición de estilo es:
#subnav { }
#subnavli { }
#subnav a { }
#subnav.sel { }
#subnav .sel a { }
Utilice subselectores para hacer que su código y CSS sean más concisos y fáciles de leer.
10. No es necesario agregar comillas a la ruta de la imagen de fondo.
Para ahorrar bytes, recomiendo no citar la ruta de la imagen de fondo, ya que las comillas no son necesarias. Por ejemplo:
fondo:url(imágenes
margen:0 automático;
}
Pero IE5/Win no puede mostrar esta definición correctamente. Usamos un truco muy útil para resolverlo: usar el atributo text-align. Como esto:
cuerpo {
alineación de texto:centro;
}
#envoltura {
ancho: 760 px;
margen:0 automático;
alineación de texto: izquierda;
}
La regla text-align:center; del primer cuerpo define que todos los elementos del cuerpo en IE5/Win están centrados (otros navegadores simplemente centran el texto), y el segundo text-align:left es centrar el texto en #warp to. la izquierda.
15. Importar y ocultar CSS
Debido a que los navegadores más antiguos no admiten CSS, un enfoque común es utilizar la técnica @import para ocultar CSS. Por ejemplo:
@importar URL (principal.css);
Sin embargo, este método no funcionó para IE4, lo que me dio dolor de cabeza por un tiempo. Después lo escribí así:
@importar principal.css;
De esta forma, CSS se puede ocultar en IE4 Jaja, también ahorra 5 bytes. Si desea conocer la explicación detallada de la sintaxis de @import, puede ver aquí el "gráfico de filtros CSS de centricle".
16. Optimización para IE
A veces, es necesario definir algunas reglas especiales para los errores del navegador IE. Aquí hay demasiados trucos de CSS. Solo uso dos de ellos, independientemente de si Microsoft es mejor en la próxima versión beta de IE7. el más seguro.
1. Método de anotación
(a) Para ocultar una definición de CSS en IE, puede utilizar un selector secundario:
html>cuerpo p {
}
(b) El siguiente método de escritura solo puede ser entendido por el navegador IE (oculto de otros navegadores)
* html p {
}
(c) A veces, desea que IE/Win esté activo pero IE/Mac esté oculto, puede usar el truco de la barra invertida:
* html p {
declaraciones
}
2. Método de comentarios condicionales.
Otro método, que creo que está más probado que CSS Hacks, es utilizar los comentarios condicionales de atributos privados de Microsoft (comentarios condicionales). Con este método, puede definir algunos estilos por separado para IE sin afectar la definición de la hoja de estilos principal.
17. Consejos de depuración: ¿Qué tamaño tienen las capas?
Al depurar errores de CSS, debes ser como una máquina de escribir y analizar el código CSS línea por línea. Normalmente defino un color de fondo en la capa en cuestión para que sea obvio cuánto espacio ocupa la capa. Algunas personas sugieren usar el borde, lo cual generalmente es posible, pero el problema es que a veces el borde aumentará el tamaño de los elementos, y el borde superior y el boeder inferior destruirán el valor del margen vertical, por lo que es más seguro usar el fondo.
Otra propiedad que suele causar problemas es el contorno. El contorno parece boeder, pero no afecta el tamaño ni la posición del elemento. Sólo unos pocos navegadores admiten el atributo de esquema; los únicos que conozco son Safari, OmniWeb y Opera.
18. Estilo de escritura de código CSS
Al escribir código CSS, cada uno tiene sus propios hábitos de escritura en cuanto a sangría, saltos de línea y espacios. Después de una práctica constante, decidí adoptar el siguiente estilo de escritura:
selector1,
selector2 {
propiedad:valor;
}
Cuando uso definiciones de unión, normalmente escribo cada selector en su propia línea para que sea más fácil encontrarlos en el archivo CSS. Agregue un espacio entre el último selector y las llaves {. También escriba cada definición en su propia línea. El punto y coma debe colocarse directamente después del valor del atributo.
Estoy acostumbrado a agregar un punto y coma después de cada valor de atributo. Aunque las reglas permiten que no sea necesario escribir el punto y coma después del último valor de atributo, si desea agregar un nuevo estilo, es fácil olvidarse de agregar el punto y coma. causar un error, por lo que aún lo agrega mejor.
Finalmente, la llave de cierre } se escribe sola en una línea.
Los espacios y los saltos de línea ayudan a la lectura.
