CSS es la forma principal actual de diseño de páginas web y también es el contenido principal que le presenta 52CSS.com. Dado que CSS se usa ampliamente en casi todos los sitios web, tomemos un tiempo para crear una hoja de estilo y asegurarnos de que cumple. buenos estándares. Los siguientes consejos serán de gran ayuda para los principiantes en CSS durante el proceso de desarrollo. Puede aprender sobre las diez habilidades que los principiantes en DivCSS deben conocer y su comprensión de los estándares web.
1. índice Las definiciones aquí le ayudarán a usted y a otros desarrolladores a comprender los sitios web y los archivos CSS. También le ayudarán a comprender qué contienen los archivos CSS. La sección de índice contiene un párrafo de comentario CSS formateado.
1. Proporcionar la información del autor del archivo CSS 2. Definir el diseño del sitio web (número de columnas, estáticas/dinámicas) [columnas, estáticas/líquidas]
3. Realice un seguimiento continuo de las versiones de los archivos (muy útil cuando el archivo tiene varios autores o necesita actualizarse en el futuro)
2. Punto de anclaje Los anclajes son como marcadores dentro del mismo archivo CSS. Los anclajes le permiten ver todo el archivo CSS con claridad y mantenerlo organizado.
Los anclajes deben definirse en el índice de CSS (mencionado anteriormente), y como CSS no tiene su propio sistema de anclaje, utilicé un truco simple para definir los anclajes en el documento.
El método consiste en utilizar un carácter relativamente raro para definir el comentario. Cuando desee encontrar un punto de anclaje, puede copiar y buscar el definidor del punto de anclaje desde el índice y encontrar el punto de anclaje.
3. Redefinición La redefinición es un método utilizado para anular los estilos de etiquetas predeterminados de HTML y redefinirlos. ¿Alguna vez has visto un código CSS como este? ¡Solo quiere darle estilo a ese elemento específico!
Un uso muy hermoso en CSS son los selectores contextuales, usémoslo:
4. Reglas de nomenclatura Un factor clave es dar a los elementos nombres precisos y limpios. Esto evitará confusiones y hará que la lectura de su CSS sea más fácil y rápida.
5. Abreviatura La función de abreviatura en CSS es una propiedad que le permite combinar muchas propiedades del mismo tipo en una.
Las abreviaturas de CSS facilitan el proceso de desarrollo y mantienen sus archivos CSS limpios, breves y legibles. A continuación se muestran algunos ejemplos:
6. Duendes Traducirlo al elfo no parece profundizar la comprensión perceptiva del artículo. Por el contrario, cuando lo leí en inglés, no lo entendí, así que simplemente no lo traduje. Combinar todas las imágenes de fondo en una y usar la posición del fondo para mostrar diferentes partes es lo que llamamos CSS Sprites.
CSS Sprites puede reducir la cantidad de solicitudes HTTP, ahorrar ancho de banda y acelerar la lectura. Al mismo tiempo, también puede evitar la inestabilidad de la imagen (por ejemplo, cuando el mouse pasa sobre una imagen, se puede mostrar el efecto de otra imagen, y la última imagen esperará medio día para aparecer con una conexión lenta a Internet) .
El mejor y más popular ejemplo de CSS Sprites es el sistema de menús del sitio web de Apple:
7. Aclaración La explicitación del selector es el proceso de priorizar cuál usar cuando se pueden usar varias reglas para el mismo elemento.
En pocas palabras, cada selector de CSS tiene un peso. La suma de todos los pesos de un selector determina sus propiedades en el documento. La claridad puede ser de gran ayuda cuando el documento CSS es tan grande que no sabes qué elemento tiene mayor peso.
Bueno, la claridad es un área tan grande en CSS que es difícil de explicar en unas pocas oraciones. Veamos un ejemplo:
8. Restablecimiento de atributos Los restablecimientos de propiedades globales garantizan que un sitio web aparezca casi idénticamente en todos los navegadores. En cada caso, diferentes navegadores utilizan su propio conjunto de configuraciones de estilo predeterminadas para todos los sitios web, lo que hará que nuestro sitio web aparezca de manera diferente en diferentes navegadores. Un reinicio global de propiedades corregirá esta situación y le permitirá construir su sitio desde una base absolutamente consistente.
No siempre recomiendo usar marcos CSS, pero aún así necesitas usar el restablecimiento de CSS. Existen muchos métodos de reinicio diferentes, desde simples hasta complejos.
9. Trucos CSS Incluso si es un CSS perfecto, no puede producir exactamente la misma visualización en todos los navegadores. Cada navegador tiene una forma diferente de interpretar CSS. Con todo, si necesita que su sitio web sea coherente en todos los navegadores, debe utilizar CSS Hacks.
El uso de CSS Hacks reducirá los errores al validar CSS, estoy de acuerdo. Una forma alternativa de lograr esto es usar un único archivo CSS diferente para cada navegador y decirle al navegador qué CSS específico debe usarse al incluir etiquetas específicas del navegador en el HTML. Siempre creo un "fuck-ie.css" en todos mis proyectos :) (Nota del traductor: aquí el autor usa malas palabras para expresar su enojo hacia IE. Si se traduce como "acoplamiento con IE.css", el mundo no lo haría ¿No será más armonioso?)
Después de usar este método, se verificará su "archivo CSS principal". Al mismo tiempo, también se verificará el archivo "fuck-ie.css", pero solo sobrescribirá el "archivo CSS principal" en el navegador IE.
10. Verificación Siempre es importante validar su CSS cuando lo crea. Esto garantizará que su CSS esté libre de errores y pueda ser interpretado correctamente por todos los navegadores.
W3C Validator es una herramienta de validación de CSS en línea muy popular.
