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, 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 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 la clase se puede 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 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 llamarlo así. El efecto de visualización final es que este div tiene un fondo #666 y un borde de 10 píxeles. 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:
〈div id=subnav〉
〈ul〉
〈li clase=subnavitem〉 〈a href=# clase=subnavitem〉Artículo 1〈/a〉〈/li〉
〈li clase=subnavitemｓｌｍｃｔｔ〉 〈a href=# clase=subnavitemｽｌｍｃｔｔ〉 Elemento 1〈/a〉 〈/li〉
〈li clase=subnavitem〉 〈a href=# clase=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=#〉 Elemento 1〈/a〉 〈/li〉
〈li clase=sel〉 〈a href=#〉 Elemento 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 Elemento 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(imágenes/***.gif) #333; |
Si agrega comillas, provocará algunos errores en el navegador.
11. Selectores de grupo
Cuando algunos tipos de elementos, clases o identificadores tienen algunas propiedades en común, puede utilizar selectores de grupo para evitar definiciones repetidas varias veces. 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. El orden correcto es: :enlace :visitado :hover :activo. La primera letra extraída es LVHA, que puedes recordar como LoVe HAte (me gusta odiar). ¿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. Flotador transparente
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 externa.
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
Este es un truco simple, pero vale la pena repetirlo porque veo muchas preguntas de novatos que hacen 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:
indefinido
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 (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í:
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 {
/* 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 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. Como esto:
indefinido
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.
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 } está escrita en una línea sola, con espacios y nuevas líneas para facilitar la lectura.
