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 la unidad del tamaño es un error común entre los principiantes en CSS. En HTML puedes escribir simplemente ancho="100", pero en CSS debes dar una unidad exacta, como por ejemplo: ancho:100px ancho:100em. Solo hay dos excepciones para no 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. Sensibilidad a mayúsculas y minúsculas
Cuando se utiliza CSS en XHTML, los nombres de los 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. Cancele la calificación del elemento antes de class e id
. Cuando escribe para definir clase o id para un elemento, puede omitir la calificación del elemento anterior, porque la ID es única en una página y las clases se pueden usar varias veces en la página. . No tiene sentido que califiques un elemento. Por ejemplo:
div#content { /* declaraciones */ }
fieldset.details { /* declaraciones */ }
Se puede escribir como #content { /* declaraciones */ }
.detalles { /* declaraciones */ }
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. se puede heredar directamente en el elemento secundario y no es necesario repetir la definición. Pero tenga en cuenta que el navegador puede anular su definición con algunos valores predeterminados.
7. El principio del primero más cercano
Si hay varias definiciones del mismo elemento, la definición más cercana (nivel mínimo) tendrá prioridad. Por ejemplo, existe este fragmento de código Actualización: Lorem ipsum dolor set.
En el archivo CSS, has definido el elemento p y una clase "actualización"
pag {
margen:1em 0;
tamaño de fuente: 1em;
color:#333;
}
.actualizar {
peso de fuente: negrita;
color:#600;
}
De estas dos definiciones, se utilizará class="update" porque la clase 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. Definiciones de clases múltiples
Una etiqueta puede definir múltiples 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 a <div class="one two"></div> 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 selectores descendientes 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:
<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Artículo 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Elemento 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Elemento 1</a> </li>
</ul>
</div>
La definición CSS para este código es:
div#subnav ul { /* Algunos estilos */ }
div#subnav ul li.subnavitem { /* Algunos estilos */ }
div#subnav ul li.subnavitem a.subnavitem { /* Algunos estilos */ }
div#subnav ul li.subnavitemselected { /* Algunos estilos */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Algunos estilos */ }
Puede reemplazar el código anterior con el siguiente método<ul id="subnav">
<li> <a href="#"> Artículo 1</a> </li>
<li class="sel"> <a href="#"> Artículo 1</a> </li>
<li> <a href="#"> Artículo 1</a> </li>
</ul>
La definición de estilo es:
#subnav { /* Algunos estilos */ }
#subnav li { /* Algunos estilos */ }
#subnav a { /* Algunos estilos */ }
#subnav .sel { /* Algunos estilos */ }
#subnav .sel a { /* Algunos estilos */ }
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 agregar comillas a la ruta de la imagen de fondo, porque las comillas no son necesarias. Por ejemplo:
fondo:url("imágenes/***.gif") #333;
Se puede escribir como fondo:url(images/***.gif) #333;
Si agrega comillas, provocará algunos errores en el navegador.
11. Selectores de grupo (selectores de grupo)
Cuando algunos tipos de elementos, clases o identificadores tienen algunos atributos en común, puede utilizar selectores de grupo para evitar múltiples definiciones repetidas. Esto puede ahorrar bastantes bytes.
Por ejemplo: para definir la fuente, color y margen de todos los títulos, puedes escribir:
h1,h2,h3,h4,h5,h6 {
familia de fuentes: "Lucida Grande", Lucida, Arial, Helvetica, sans-serif;
color:#333;
margen:1em 0;
}
Si hay elementos individuales que necesitan definir estilos independientes durante el uso, puede agregar nuevas definiciones o sobrescribir definiciones antiguas, por ejemplo:
h1 { tamaño de fuente: 2em }
h2 { tamaño de fuente: 1,6 em }
12. Especifique los estilos de enlace en el orden correcto.
Cuando utilice CSS para definir varios estilos de estado de un enlace, preste atención al orden en que están escritos: :enlace :visitado :hover :activo. La primera letra extraída es "LVHA", que puedes recordar como "LoVe HAte" (te guste o lo odies). ¿Por qué está tan definido? Puede consultar la "Especificidad del enlace" de Eric Meyer.
Si sus usuarios necesitan usar el control del teclado y necesitan conocer el foco del enlace actual, también puede definir el atributo :focus. El efecto del atributo :focus también depende de la posición donde escribe. Si desea que el elemento enfocado muestre el efecto :hover, escriba :focus antes de :hover si desea que el efecto de enfoque reemplace el efecto :hover. pones :focus Después de :hover.
13. Borrar flotantes
Un problema de CSS muy común es que cuando se usa flotante para el posicionamiento, la capa subyacente está cubierta por la capa flotante o las subcapas anidadas en la capa exceden el alcance de la capa exterior.
La solución habitual es añadir un elemento extra detrás de la capa flotante, como un div o un br, y definir su estilo como claro: ambos. Este método es un poco descabellado, pero afortunadamente existe una buena manera de resolverlo. Consulte este artículo "Cómo borrar flotadores sin marcas estructurales" (Nota: este sitio traducirá este artículo lo antes posible).
Los dos métodos anteriores pueden resolver muy bien el problema del desbordamiento flotante, pero ¿qué sucede si realmente necesita borrar la capa o los objetos en la capa? Un método simple es utilizar el atributo de desbordamiento. Este método se publicó originalmente en "Liquidación simple de flotadores" y se ha discutido ampliamente en "Liquidación" y "Flotadores de compensación súper simples".
Cuál de los métodos claros anteriores es más adecuado para usted depende de la situación específica y no se discutirá aquí. Además, algunos artículos excelentes han dejado muy claro la aplicación de flotadores. Se recomienda leer: "Floatutorial", "Containing Floats" y "Float Layouts".
14. Centrado horizontal (centrado)
Esta es una técnica simple, pero vale la pena repetirla porque veo demasiadas preguntas para principiantes que preguntan esto: ¿Cómo centrar CSS horizontalmente? Debe definir el ancho del elemento y definir el margen horizontal, si su diseño está contenido en una capa (contenedor), como esta:
Puedes definirlo para que esté centrado horizontalmente de esta manera:
#envoltura {
width:760px /* Cambia al ancho de tu capa*/
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 {
width:760px /* Cambia al ancho de tu capa*/
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("main.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 demasiadas técnicas (trucos) de CSS. No importa lo que Microsoft esté a punto de lanzar, si CSS es mejor compatible. En la versión beta de IE7, ambos métodos son los más seguros.
1. El método de anotación (a) oculta una definición de CSS en IE. Puede utilizar un selector secundario:
html>cuerpo p {
/* Contenido de definición */
}
(b) El siguiente método de escritura solo puede ser entendido por el navegador IE (oculto de otros navegadores)
* html p {
/* declaraciones */
}
(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 es más comprobable 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. Como esto:
<!--[si IE]>
<enlace rel="hoja de estilo" tipo="texto/css" href="es decir.css" />
<![endif]-->
17. Habilidades de depuración: ¿Qué tamaño tiene la capa?
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.