Con la finalidad de diseñar con excelencia la
presentación de una página web,
estructuraremos un documento CSS en el proceso de creación. Algunos creadores
de proyectos web tienen dificultad al
momento de especificar diseños, debido al desconocimiento de elementos
necesarios. Por lo tanto, según las recomendaciones oficiales de CSS,
implementaremos con excelencia selectores y declaraciones en una hoja de estilo.
Un documento CSS contiene una
serie de reglas para aplicar estilos de forma minuciosa a un documento HTML,
por lo tanto, es indispensable el conocimiento de diferentes términos, los cuales
afectan la visualización del proyecto. En la siguiente ilustración observamos
un ejemplo de instrucción para aplicar el fondo, en inglés background, en color azul a una etiqueta de HTML llamada p.
061-01_0504_ilu01. Instrucción de CSS
Ahora bien, la regla general de
CSS consiste en dos bloques:
- El
selector, es el elemento de HTML utilizado para aplicar los estilos.
- La
declaración, referido a las instrucciones específicas de estilo.
Por ejemplo, al aplicar un estilo
a la etiqueta de párrafo, el navegador web
le aplica el diseño detallado en el bloque de color azul, a todo el contenido
englobado por esa etiqueta. En la siguiente imagen se encuentra conformada la
instrucción.
061-01_0504_ilu02. División de una instrucción de CSS
El selector del ejemplo es el más
básico de CSS, sin embargo, existen diversos tipos de ellos para diferentes
propósitos, como:
- Aplicar
más de una regla a una etiqueta.
- Otorgar un
estilo diferente, a varias etiquetas, al mismo tiempo.
- Definir un
diseño en un lugar específico del documento.
Esta regla es importante dominarla,
pues de ello depende la variedad de combinaciones de estilos para aplicar a un
documento.
061-01_0504_ilu03. Beneficios de selectores
Es posible crear declaraciones
sencillas como en el ejemplo anterior, donde solo se aplica un color de fondo,
sin embargo, normalmente se realiza más de una especificación. Por lo tanto,
pasan a llamarse bloque de declaraciones, el cual debe englobarse entre
corchetes como se muestra en la siguiente imagen.
061-01_0504_ilu04. Bloque de declaración
En la imagen anterior, cada
conjunto de propiedad y valor esta separado de otro por punto y coma, es
necesario hacerlo de esa forma de lo contrario se aplican incorrectamente.
Aunque hay espacios en blanco y saltos de línea como separación, estos son
ignorados por el navegador web y solo
se agregan para tener un mejor orden visualmente.
En cuanto a las propiedades de CSS
en su mayoría son simples, sin embargo, existe una variedad en la cual muchas
están separadas por guiones, a fin de ser más específicas. Con ayuda de los
valores sacamos provecho a la creatividad para realizar declaraciones de estilos
profesionales, logrados mediante colores en letras o números, tamaños, estilos
y hasta imágenes a través enlaces. Tal como se muestra en la imagen siguiente
donde esta especificado más de un estilo a la etiqueta p.
061-01_0504_ilu05. Identificación de propiedad y valor
Keynotes
- Un documento CSS contiene una serie de
reglas para aplicar estilos de forma minuciosa a un documento HTML, por lo
tanto, es indispensable el conocimiento de diferentes términos, los cuales
afectarán la visualización del proyecto.
- la regla general de CSS consiste en dos bloques:
El selector, es el elemento de HTML utilizado para aplicar los estilos. La
declaración, referido a las instrucciones específicas de estilo.
- Es posible crear declaraciones sencillas
como en el ejemplo anterior, donde solo se aplica un color de fondo, sin
embargo, normalmente se realiza más de una especificación. Por lo tanto, pasan
a llamarse bloque de declaraciones, el cual debe englobarse entre corchetes.
- Las propiedades de CSS en su mayoría son simples,
sin embargo, existe una variedad en la cual muchas están separadas por guiones,
a fin de ser más específicas.
- Con ayuda de los valores sacamos provecho a
la creatividad para realizar declaraciones de estilos profesionales, logrados
mediante colores en letras o números, tamaños, estilos y hasta imágenes a
través enlaces.
RetoCrea la estructura de un documento CSS con dos instrucciones de
diseño, según las recomendaciones oficiales de este lenguaje.
¡Comparte el resultado final de tu reto en VKTV e invita a tres compañeros a comentar
una sugerencia de optimización!
Tiempo disponible: entre 15 y 30 minutos.
CierreCon la estructura correcta de un documento CSS es
fácil especificar estilos y obtener páginas web
pulcras. También, diseñamos eficientemente la presentación de proyectos
para la internet, con la finalidad de atraer más usuarios. La organización y
minuciosidad permiten la creación de selectores y declaraciones con eficiencia.
