Share
Tenemos una nueva y completa guía de aprendizaje para ayudarlo a aprender CSS en línea, ya sea que esté comenzando con los conceptos básicos o si desea explorar CSS más avanzados. Revisa Aprender CSS: la guía completa.
CSS trabaja de la mano con HTML; HTML ordena la estructura de la página, CSS hace que se vea bonita y agrega niveles sutiles de interacción. Como diseñador web, debería familiarizarse con estos dos idiomas. Incluso si no hace la codificación usted mismo, comprender cómo funcionan le ayudará a diseñar para la web.
C.S.S. representa Hojas de estilo en cascada; documentos que contienen reglas de estilo para aplicar a HTML (o XML, junto con algunos otros formatos estructurales). Múltiples reglas de estilo pueden apuntar a un elemento HTML, en cuyo caso debe haber una manera de determinar qué regla debe tener efecto. El termino en cascada describe el proceso de filtrado de las reglas generales, hasta que se encuentra la regla más específica. Esa regla entonces es elegida para hacer su trabajo ...
A través de CSS, la presentación se puede separar de la estructura. Resuelve la necesidad de combinar reglas de estilo entre HTML, como esto:
Presentación dentro de la estructura. Ew. que mantiene los documentos limpios y SECOS.
CSS es leído por los navegadores web. Toman el documento de marcado, luego aplican las reglas de estilo a los elementos dentro de ese documento..
No siempre interpretan las reglas de estilo de la misma manera, y a medida que los navegadores se desarrollan, también lo hace su apoyo a las nuevas propuestas de estilo. A menudo son los propios fabricantes de navegadores quienes experimentan con las propiedades de CSS, con la esperanza de que los usuarios adopten sus sugerencias..
En última instancia, depende del World Wide Web Consortium (W3C) si las propiedades de CSS están estandarizadas o no.
La sintaxis CSS comprende algunas piezas fundamentales; Reglas, selectores, declaraciones, propiedades y valores..
Esta regla de CSS contiene todos los otros bits y bobs que acabamos de mencionar.
Los selectores apuntan a los elementos dentro del marcado HTML, luego las declaraciones dentro de las llaves definen cómo se deben diseñar esos elementos. Puede haber múltiples declaraciones dentro de una sola regla; Cada declaración que comprende una propiedad con un valor asociado..
Hay muchas formas de seleccionar elementos HTML, desde sencillos selectores de tipo:
Esto seleccionará todas las imágenes y aplicará relleno cero a todas ellas.. Entonces nosotros tenemos selectores de clase, que apuntan a todos los elementos con una clase específica aplicada a ellos. Echa un vistazo a este marcado, con su correspondiente CSS:
Aquí hay un ancla, de la que podría haber muchos ... 
... entonces esto seleccionará todos los anclajes con una clase de "resaltado" y los pondrá de color naranja. Nota: Al contrario de lo que pueda escuchar, no existe tal cosa como un Clase CSS. Existen Selectores de CSS cual objetivo Clases de HTML. Puedes leer más sobre esto en tantek.com y 456 Berea St.
Hay muchos posibles selectores para aprender. Hay aún más propiedades para familiarizarse con (mira esta lista en el sitio de W3C). Más adelante veremos las tareas durante las cuales se te pedirá que aprendas un montón de cada una. Tener la mayor cantidad de dedos posible te hará un mejor codificador de CSS!
Ahora que tiene una comprensión fundamental de lo que es CSS, es hora de sumergirse adecuadamente. Hay una serie de cursos para principiantes en línea que te ayudarán a avanzar; Aquí hay solo una pareja que definitivamente vale la pena echarle un vistazo:
Cuando Dave Shea lanzó CSS Zen Garden en mayo de 2003, se propuso demostrar que un solo documento HTML podría tener un estilo infinito utilizando diferentes hojas de estilo. Fue un concepto brillante y un verdadero momento de bombilla para los diseñadores de todo el mundo..
¿Por qué no hacer algo similar a ti mismo? Tome un simple pedazo de marcado (la navegación de la lista desordenada de Chris Coyier es el candidato perfecto):
Vea cuántos efectos diferentes puede lograr, solo modificando los estilos.
Eche un vistazo a este Webdesigntuts + Community Workshop, donde cerca de 100 lectores enviaron sus hojas de estilo para una lista simple sin ordenar. Como verá en los resultados, un poco de imaginación puede llevar a CSS un largo camino.!
Si la gente sabe CSS, tuitean sobre eso, eso es un hecho científico. Presta atención a lo que hacen las celebridades de CSS y aprenderás mucho. Aquí hay solo un par de twitteros que deberías seguir:
... y ...
¿Por qué no encontrar a tus propios héroes en un sitio de codificación social como GitHub o CodePen? Lo mejor de redes como estas es el consejo que todos nos dan; Si tiene un problema de CSS, alguien lo habrá tenido antes que usted y estará dispuesto a darle una mano..
CodePen Como mencionamos anteriormente, los navegadores no siempre interpretan sus estilos por igual. Esto es particularmente cierto si está buscando versiones anteriores de Internet Explorer, que están muy atrasadas en términos de adopción de CSS. Los navegadores modernos (como Google Chrome, Mozilla Firefox, Apple Safari, Opera e incluso Internet Explorer 10) tienen una administración de actualización más proactiva, por lo que reduce la posibilidad de que las versiones más antiguas floten por mucho tiempo.
Dicho esto, hay diferencias entre cada uno de estos navegadores, independientemente de lo actualizados que estén. Algunos CSS serán bien soportados en un navegador, interpretados de manera diferente en otro, así que por esta razón es un buen consejo prestar atención a los navegadores..
Aquí hay algunos recursos útiles que te ayudarán en tu camino:
Ya sea que los lea de principio a fin, o simplemente los tenga a mano si necesita una referencia rápida, los mejores libros de la industria no tienen paralelo para el aprendizaje.
Se ha escrito sobre CSS muchas veces, pero estas publicaciones son mi crema de la cosecha:
A medida que ganes confianza, tu vocabulario CSS crecerá. Estarás enviando propiedades de CSS a la memoria y también las distintas formas de seleccionar elementos. Ahora es el momento de realmente mejorarlo y aprender seriamente algunos selectores de CSS.
Aprender selectores de CSS significa también familiarizarse con la especificidad..
Icono de Stormtrooper por Jory Raphael ¿Qué selectores anularán a otros? ¿Cuál es la sintaxis mínima que debo usar en mis selectores para ser eficiente en mi codificación? El único lugar al que siempre envío personas para aprender las reglas de especificidad es el CSS de Andy Clarke: Especificidad Wars. Una visualización inspirada de cómo les va a los selectores cuando se enfrentan entre sí (y las fuerzas oscuras).
CSS es una disciplina muy involucrada. Una vez que tenga lo básico en su haber, hay muchas vías para una investigación más a fondo. Por ejemplo:
CSS3 está constantemente en movimiento. Se adoptan nuevas propiedades, otras se eliminan por completo por los navegadores, a veces la sintaxis incluso cambia. Para familiarizarse con los gradientes de CSS, será otro clavo en el ataúd de su uso de Photoshop; ¿Por qué usar imágenes recortadas cuando puedes CSS??!
Consulte CSS3. Por favor, para ver toda la implementación correcta de CSS3, con respaldos recomendados para los navegadores no compatibles. Además, eche un vistazo a CSS3 Essentials en Tuts + Premium para mejorar su conocimiento..
El diseño web responsivo permite que se modifiquen sus diseños web fluidos, dependiendo de cómo se accede a la página. Las consultas de medios CSS3 ayudan a este proceso, entregando diferentes reglas CSS según las circunstancias. Eche un vistazo a Responsive Web Design: una guía visual para comenzar.
Resulta que CSS podría ser mejor. Una vez que hayas empezado a usar CSS para proyectos del mundo real, probablemente llegues a la misma conclusión. ¡Mantener archivos CSS grandes es difícil, la repetición es común, y ¿por qué no puedes usar una variable para almacenar el valor de un color HEX en lugar de escribirlo una y otra vez? Los preprocesadores de CSS como Sass, LESS y Stylus resuelven todos estos problemas y más. Sin siquiera tener que 'volver a aprender' un lenguaje similar (simplemente apéguese al CSS de vainilla si lo desea), puede aprovechar el poder de los preprocesadores.
Echa un vistazo a Get Into LESS, Mastering SASS y Sass vs. LESS vs. Stylus: Preprocessor Shootout si estás interesado en aprender más.
SMACSS (o Arquitectura escalable y modular para CSS) es un concepto desarrollado por Jonathan Snook, cuyo objetivo es combatir la incómoda facilidad de mantenimiento de los archivos CSS. No enseña un nuevo idioma, sino que sugiere formas en las que puedes hacer que tu CSS actual esté más organizado.
Escribir CSS modular le permite tomar fragmentos de código de estilo y colocarlo en otros proyectos, sin arruinar el resto de sus estilos. Gestión de la especificidad en su máxima expresión..
No hay duda de que con habilidades como HTML y CSS en tu haber, serás un diseñador web mucho mejor. Sigue los dos procesos de aprendizaje que hemos descrito y estarás bien encaminado.
Si tienes alguna recomendación de aprendizaje de CSS, grita en los comentarios.!
Accentsconagua