Este es el tercer artículo de nuestra serie de volver a lo básico, en el que analizamos los conceptos de inicio absoluto del desarrollo web. Si eres un diseñador con poco o ningún conocimiento de la programación web, esta serie es para ti.
En nuestro primer artículo, analizamos qué es HTML y en nuestro segundo artículo describimos la anatomía básica de un documento HTML. Hoy pasaremos a un nuevo tema y responderemos una pregunta muy importante: ¿Qué es CSS?
¿Qué es CSS?
Antes de responder a esta pregunta directamente, recordemos la respuesta a la pregunta de la Parte Uno: ¿Qué es HTML? Como aprendimos, desde un punto de vista conceptual, podría decirse que HTML comprende principalmente contenido y estructura de una página web. Usamos la metáfora de un esqueleto y discutimos cómo el HTML forma los bloques de construcción básicos de la World Wide Web como lo conocemos.
Si hay un párrafo en una página web, es del HTML. Si hay un título y una galería de imágenes, una vez más, estos elementos probablemente se insertaron como fragmentos de código HTML (excepciones obvias para Flash y similares).
Con esto en mente, las hojas de estilos en cascada, más conocidas como CSS, se convierten en la manera de estilo ese contenido Las opciones de color, la repetición de texturas de fondo, las sombras, las esquinas redondeadas e incluso el diseño son todas áreas de CSS. Como diseñador, esta es el área en la que probablemente prosperarás y disfrutarás más.
Para obtener una imagen clara de lo importante que es el CSS para el diseño web, echemos un vistazo a una página web con y sin una hoja de estilo.
Antes y Después de CSS
Teniendo en cuenta que CSS está relegado a simplemente? Estilo? En una página web, puede sentirse tentado a pensar que es simplemente una guinda del pastel proverbial, lo que significa que proporciona puramente pequeños ajustes estéticos. Sin embargo, el impacto que tiene CSS en una página web es enorme.
Para ilustrar esta idea, aquí hay una captura de pantalla de la página de inicio de Design Shack con la hoja de estilo principal desactivada:
Antes de CSS
Esta estructura básica se puede diseñar en un número infinito de variaciones, cada una de las cuales se ve tan radicalmente diferente que, a pesar de tener el mismo HTML exacto, ¡ni siquiera las reconocerías como la misma página!
Con la inclusión de una sola hoja de estilo, la página de inicio de Design Shack se convierte en esto:
Despues de CSS
¿Puedo obtener una 'mierda santa'? Notarás que estos no son simples cambios de color. La influencia que tiene CSS sobre la experiencia del usuario es dramática. El diseño completo se ha reconstruido en un formato de tres columnas, se han aplicado texturas de fondo y la tipografía se ha mejorado drásticamente.
¿Como funciona?
Entonces, ¿cómo realiza CSS toda esa magia? ¿Qué locura de codificación tendrá que aprender a decirle al navegador que haga una transformación tan dramática? La buena noticia es que CSS es mucho más fácil de lo que piensas. Es un nivel bastante bajo en comparación con el tipo de codificación hardcore que tendrás que hacer en lenguajes como PHP. También es increíblemente divertido una vez que lo aprendes.
Se trata de selectores
En la primera parte de esta serie, aprendimos cómo HTML se basa principalmente en etiquetas. Casi todos los fragmentos de HTML se componen de HTML elementos Envuelto con un conjunto de etiquetas que se ajustan aproximadamente a esta sintaxis:
Con CSS, la sintaxis es completamente diferente y, sin embargo, está muy relacionada. Realmente podemos profundizar y apuntar cada pequeño fragmento de nuestro HTML y diseñarlo por sí solo. Logramos esta tarea con Selectores de CSS.
Un selector es exactamente lo que suena: le permite seleccionar algo para la manipulación, en nuestro caso, una parte particular del HTML. Muchos selectores de CSS se corresponden directamente con la etiqueta a la que apuntan. Por ejemplo, si quisiéramos personalizar el contenido entre las etiquetas h1 y de párrafo anteriores, usaríamos lo siguiente.
Como puedes ver, el selector para el? H1? etiqueta es simplemente? h1 ?. Luego, al selector le sigue un conjunto de llaves, que contendrá todo el conjunto de códigos relacionados con ese selector.
El código dentro de las llaves se divide en propiedades, que definen exactamente qué es lo que está cambiando acerca de la parte específica del HTML. Al igual que en Photoshop, cada pieza del diseño tiene varias propiedades que se pueden cambiar. Un pasaje de texto dado tiene una fuente, tamaño de fuente, color, altura de línea, etc. Cada uno de estos debe configurarse manualmente en lugar de simplemente depender de los valores predeterminados, que son inconsistentes entre los navegadores.
Aquí hay un vistazo a esta sintaxis en acción. Tenemos un selector, seguido de llaves, que contienen una propiedad y su valor seguido de un punto y coma (opcional en la última propiedad de una lista).
Este código es altamente legible para los humanos y simplemente establecerá el tamaño de todo el texto h1 en la página en 25 píxeles. La terminología aquí es muy importante, así que aquí hay otro aspecto para ustedes, personas de mentalidad visual.
Usando múltiples propiedades
El ejemplo anterior es bastante simplificado. Como mencioné, cada selector típicamente tiene varias propiedades que están establecidas por el desarrollador. Diferentes codificadores organizan su código de diferentes maneras, pero aquí está cómo un bloque de CSS es típicamente estructurado.
Aquí ponemos la fuente, su tamaño y su color. ¿La familia tipográfica? utiliza fuentes de respaldo en caso de que la fuente principal no esté presente en la máquina del usuario final.
Más que etiquetas
Los ejemplos de selección de arriba apuntan a etiquetas HTML simples, pero CSS viene con selectores mucho más complicados que pueden apuntar a todo tipo de HTML.Incluso se puede combinar o? Cadena? varios selectores juntos.
Por ejemplo, digamos que tenía dos párrafos dentro de dos divs diferentes en su HTML:
Ahora, si simplemente seleccionara la etiqueta de párrafo en mi CSS, estos dos párrafos se verían afectados. Sin embargo, digamos que quiero que se vean diferentes, ¿cómo haría eso?
Aquí hay una forma, ver si puedes averiguar qué está pasando:
Como puede ver, establecemos cada párrafo en un color diferente mediante la combinación de selectores. Nos dirigimos a la? P? en ambos casos, pero en la primera parte apunté a la sección principal? Identificación y en el segundo me dirigí a la sección secundaria? clase. La diferencia es que las clases son reutilizables y se pueden aplicar a varios elementos en el HTML, mientras que las ID son únicas. ¿Así que una vez que estilicemos nuestra? Secundaria? clase, podemos aplicar estos estilos fácilmente a otros divs solo con oprimir esa clase en el HTML.
En CSS, siempre desea ser lo más eficiente posible, así que haga todo lo que pueda con el menor código posible. Las clases son un gran ahorro de tiempo y espacio.
Para más información sobre los selectores de CSS, echa un vistazo a nuestro artículo Los selectores de CSS: Just the Tricky Bits.
En cascada?
Ahora tenemos una comprensión rudimentaria de? Hojas de estilo? ¿Y cómo lo hacen? El HTML, entonces, ¿dónde está el? en cascada? parte entrar?
Esto vuelve una vez más a la noción de eficiencia. Una vez que establece un estilo genérico, ¿cae en cascada? a otros elementos. Este código, por ejemplo, convierte todas las etiquetas de anclaje de la página en rojo:
La especificidad importa mucho, así que si agregamos un poco, todo cambia:
Ahora todos los enlaces en la página son de color rojo, excepto aquellos con la sección? Id, que será azul. El selector más específico anuló el selector general.
Para obtener una breve descripción general de cómo averiguar qué reglas anularán a otras, consulte Introducción a CSS.
¿Cómo funciona el diseño web?
Ahora que hemos analizado qué son HTML y CSS, deberías poder ver cómo funcionan juntos para crear páginas web completas. Veamos un ejemplo rápido de un proceso de diseño por el que alguien podría pasar.
Photoshop Mockup
Primero, alguien abre Photoshop y básicamente diseña el sitio. Cómo se verá, qué colores se utilizarán, dónde se colocarán las imágenes, las distintas columnas de contenido: todo.
Tenga en cuenta que este paso es completamente opcional. Hay una tendencia bastante importante en estos días hacia diseñando en el navegador y omitir las composiciones de Photoshop o Fireworks completamente.
HTML
A continuación, el desarrollador web, que podría o no ser la misma persona, observará la maqueta y seleccionará las partes que pueden incluirse en el HTML, como párrafos, imágenes, etc. Los grupos visuales básicos en el diseño están reflejados en HTML Con divs u otros elementos estructurales.
CSS
El contenido en HTML puro no tendrá ningún tipo de estilo, por lo que a continuación, el desarrollador observa el diseño, las fuentes, los colores, etc., que se utilizaron en la maqueta de Photoshop y traduce estas características a CSS. A medida que el desarrollador codifica, él / ella observa la vista previa en vivo para ver cómo el código afecta el contenido hasta que todo sea correcto.
Conclusión
Después de leer los tres artículos de esta serie, debe tener una idea sólida de qué son HTML y CSS y cómo funcionan juntos para crear páginas web.
Esto no fue en modo alguno una mirada exhaustiva de ninguna de estas sintaxis, ni tampoco fue para realmente ponerlo en marcha con su propio código. En su lugar, llena esa brecha conceptual de conocimiento relacionada con qué diablos son estos idiomas y cómo se usan. Si alguna vez quieres o no ser un desarrollador web, poseer este conocimiento te hará una mejor diseñador web.