En este blog también voy a hablar sobre los comienzos prácticos para conocer los fundamentos principales del CSS. Y si os preguntais que ¿Que és CSS? CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas. ¡Espera unos segundos y ya verás!
Es posible usar HTML, o incluso abusar del mismo, para añadir formato a los sitios web. Sin embargo, CSS ofrece más opciones y es más preciso y sofisticado. CSS está soportado por todos los navegadores hoy día.
¿Qué diferencia hay entre CSS y HTML?
HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado.
¿Qué beneficios me ofrece CSS?
CSS fue toda una revolución en el mundo del diseño web. Entre los beneficios concretos de CSS encontramos:
- control de la presentación de muchos documentos desde una única hoja de estilo;
- control más preciso de la presentación;
- aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);
- numerosas técnicas avanzadas y sofisticadas.
Empezemos por el principio básico sobre el nuevo css:
Antes, hace años de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de
cada elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra
una página HTML con estilos definidos sin utilizar CSS:
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, la tipografía y el tamaño del texto de cada elemento del documento. El principal problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
Utilizando el nuevo CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.
Incluir CSS en el mismo documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>). Ejemplo:
Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.
INFORMACIÓN GLOSARIO BÁSICO
CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla
está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({),
otra parte denominada "declaración" y por último, un símbolo de "llave de cierre"
(}).
está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({),
otra parte denominada "declaración" y por último, un símbolo de "llave de cierre"
(}).
▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
▪ Declaración: especifica los estilos que se aplican a los elementos. Está compuesta
por una o más propiedades CSS.
▪ Propiedad: permite modificar el aspecto de una característica del elemento.
▪ Valor: indica el nuevo valor de la característica modificada en el elemento.
▪ Declaración: especifica los estilos que se aplican a los elementos. Está compuesta
por una o más propiedades CSS.
▪ Propiedad: permite modificar el aspecto de una característica del elemento.
▪ Valor: indica el nuevo valor de la característica modificada en el elemento.
No hay comentarios:
Publicar un comentario