20 consejos útiles de CSS para principiantes

En los viejos tiempos, dependemos mucho de los desarrolladores y programadores para ayudar a actualizar el sitio web, incluso cuando es solo uno menor. Gracias a la CSS y su flexibilidad, los estilos pueden extraerse independientemente de los códigos. Ahora, con un entendimiento básico de CSS, incluso un principiante puede cambiar fácilmente el estilo de un sitio web.

Ya sea que esté interesado en elegir CSS para crear su propio sitio web, o simplemente para modificar un poco la apariencia de su blog, siempre es bueno comenzar con lo básico para obtener una base más sólida. Echemos un vistazo a algunos Consejos CSS Pensamos que podría ser útil para principiantes. Lista completa despues del salto.

1. Utilizar reset.css

   Cuando se trata de representar estilos CSS, los navegadores como Firefox e Internet Explorer tienen diferentes maneras de manejarlos.. reset.css restablece todos los estilos fundamentales, por lo que comienza con una nueva hoja de estilo en blanco real.

   Aquí hay algunos de uso común reset.css marcos - Yahoo Reset CSS, El restablecimiento de CSS de Eric Meyer, Trípoli

2. Usar CSS de taquigrafía

   Shorthand CSS le proporciona una forma más corta de escribir sus códigos CSS, y lo más importante de todo: hace que el código sea más claro y fácil de entender..

   En lugar de crear CSS como este

   .encabezado fondo-color: #fff; imagen de fondo: url (image.gif); repetición de fondo: no repetición; posición de fondo: arriba a la izquierda; 

   Puede ser corto en lo siguiente:

   .encabezado fondo: #fff url (image.gif) no-repetir arriba a la izquierda

   Más - Introducción a CSS Shorthand, Propiedades útiles de la taquigrafía de CSS

3. Comprensión Clase y CARNÉ DE IDENTIDAD

   Estos dos selectores suelen confundir a los principiantes. En CSS, clase está representado por un punto "." mientras carné de identidad es un hash '# ". En pocas palabras carné de identidad Se usa en un estilo que es único y no se repite., clase Por otro lado, se puede reutilizar..

   Más - Clase vs. ID | Cuándo usar Class, ID | Aplicando Clase e ID juntos

4. El poder de

5. a.k.a lista de enlaces, es muy útil cuando se usan correctamente con
   o
   , Particularmente para diseñar un menú de navegación..

   • Olvidar , tratar

     Una de las mayores ventajas de CSS es el uso de

     Para lograr una flexibilidad total en términos de estilo..

     son diferentes

     , donde los contenidos están 'bloqueados' dentro de una

     la celda Es seguro decir más Diseños son alcanzables con el uso de y un estilo adecuado, bueno, tal vez excepto los contenidos tabulares masivos. Más - Las mesas estan muertas, Tablas vs. CSS, CSS vs tablas Herramientas de depuración de CSS Siempre es bueno obtener una vista previa instantánea del diseño mientras se ajusta el CSS, esto ayuda a comprender y depurar mejor los estilos CSS. Aquí hay algunas herramientas gratuitas de depuración de CSS que puede instalar en su navegador: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar y Firebug. Evite los selectores superfluos A veces, su declaración CSS puede ser más simple, lo que significa que si se codifica lo siguiente: ul li … ol li … tabla tr td … Se pueden acortar a solo li … td … Explicación: solo existirá dentro o y y solo estará adentro así que realmente no es necesario reinsertarlos. Conocimiento !importante Cualquier estilo marcado con !importante será tomado en uso independientemente si hay una regla de sobrescritura debajo. .página fondo-color: azul! importante; color de fondo: rojo; En el ejemplo anterior, color de fondo: azul Será adaptado porque está marcado con !importante, incluso cuando hay una color de fondo: rojo; Por debajo de eso. !importante se usa en situaciones en las que desea forzar un estilo sin que se sobrescriba, pero puede que no funcione en Internet Explorer. Reemplazar texto con imagen Esto es comúnmente práctica para reemplazar título De un título basado en texto a una imagen. Así es como lo haces.. h1 text-indent: -9999px; fondo: url ("title.jpg") no-repetir; ancho: 100px; altura: 50px; Explicación: texto-sangría: -9999px; tira el título del texto fuera de la pantalla, reemplazado por una imagen declarada por fondo: … con un fijo anchura y altura. Entender el posicionamiento CSS El siguiente artículo le da una comprensión clara sobre el uso de posicionamiento CSS - posición: … Más - Aprender posicionamiento CSS en diez pasos CSS @importar vs Hay 2 formas de llamar a un archivo CSS externo - respectivamente usando @importar y . Si no está seguro de qué método utilizar, aquí hay algunos artículos que lo ayudarán a decidir.. Más - Diferencia entre @import y enlace Diseñando formularios en CSS Los formularios web se pueden diseñar y personalizar fácilmente con CSS. Estos siguientes artículos le muestran cómo: Más - Forma sin mesa, Jardín de formas, Estilo incluso más controles de forma Inspírate Si busca inspiración en un sitio web basado en CSS bien diseñado, o simplemente navegue para encontrar una buena interfaz de usuario, aquí le presentamos un sitio de muestra de CSS que recomendamos: CSS Remix CSS belleza CSS Elite CSS Mania Fuga de CSS Mantenga los códigos CSS limpios Si sus códigos CSS están desordenados, terminará codificando confusamente y tendrá dificultades para modificar el código anterior. Para empezar, puedes crear una sangría adecuada, coméntalas correctamente. Más - 12 principios para mantener su código limpio, Formato de códigos CSS en línea Medición de la tipografía: px vs em Tener problemas para elegir cuándo usar la unidad de medida px o em? Los siguientes artículos pueden brindarle una mejor comprensión de las unidades de tipografía.. Tabla de compatibilidad de navegadores CSS Todos sabemos que cada navegador tiene diferentes formas de representar estilos CSS. Es bueno tener una referencia, un gráfico o una lista que muestre la compatibilidad completa con CSS para cada navegador. Tabla de soporte CSS: # 1, # 2, # 3, # 4. Diseño multicolumnas en CSS ¿Tiene problemas para que la columna izquierda, media y derecha se alineen correctamente? Aquí hay algunos artículos que podrían ayudar: En busca del Santo Grial Columnas de imitación Principales razones por las que tus columnas de CSS están en mal estado Cajas de Litte (ejemplos) Diseños de varias columnas Salir de la caja Columnas absolutas Obtenga un editor de CSS gratis Los editores dedicados son siempre mejores que un bloc de notas. Aquí hay algunos que recomendamos: Más - CSS simple, Bloc ++, Un editor de estilo CSS Entender los tipos de medios Hay pocos tipos de medios cuando declaras CSS con . Impresión, proyección y pantalla son algunos de los tipos más utilizados. Comprenderlos y utilizarlos de manera adecuada permite una mejor accesibilidad para el usuario. El siguiente artículo explica cómo tratar con los tipos de medios CSS.. Más - CSS y tipos de medios, Tipos de medios W3, Tipos de medios CSS, Tipos de medios CSS2 20 aplicaciones de iPhone útiles para desarrolladores y diseñadores 20 útiles herramientas SVG para mejores gráficos 20 fuentes ultra ligeras y elegantes para diseñadores web Siguiente articulo 20 complementos útiles para la barra lateral de Firefox Artículo anterior 20 aplicaciones útiles para sacar el máximo provecho de Instagram