Alumno: Fernando Sparvoli.
Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple pero muy potente: Aplicar estilos (colores, formas, márgenes, etc...) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma masiva.
Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un patrón denominado herencia que trataremos más adelante) y en el caso de existir ambigüedad, se siguen una serie de normas para resolverla.
La idea de CSS es la de utilizar el concepto de separación de presentación y contenido, intentando que los documentos HTML incluyan sólo información y datos, relativos al significado de la información a transmitir (el contenido), y todos los aspectos relacionados con el estilo (diseño, colores, formas, etc...) se encuentren en un documento CSS independiente (la presentación).
Si necesitamos hacer modificaciones visuales lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML en cuestión por separado.
Se reduce la duplicación de estilos en diferentes lugares, por lo que es más fácil de organizar y hacer cambios. Además, al final la información a transmitir es considerablemente menor (las páginas se descargan más rápido).
Es más fácil crear versiones diferentes de presentación para otros tipos de dispositivos: tablets, smartphones o dispositivos móviles, etc...
CSS externo
En la cabecera del HTML, el bloque <head></head>, incluimos una relación al archivo CSS en cuestión:<link rel="stylesheet" type="text/css" href="index.css" />
De esta forma, los navegadores sabrán que deben aplicar los estilos de este archivo (index.css) al documento HTML actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa sensación de página no cargada por completo.
Esta es la manera recomendada de utilizar un archivo CSS en nuestros documento y la que utilizaremos principalmente.
También es posible incluir archivos CSS mediante la regla @import (las cuales deberían ir al principio del documento), pero esta regla sólo es recomendable en ciertas situaciones puesto que su utilización afecta al rendimiento de carga de la página, así que nos centraremos sólo en la anterior.
CSS interno
Otra de las formas que existen para incluir estilos en un documento HTML es la de añadirlos directamente en la cabecera HTML del documento:<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<style type="text/css">
div {
background:#FFFFFF;
}
</style>
</head>
...
Este sistema puede servir en algunos casos, pero hay que tener en cuenta que utilizándolo, arruinamos la ventaja de tener los estilos en un documento independiente, por lo que siempre es preferible guardarlo en un archivo externo CSS.
CSS embebido
Por último, la tercera forma de aplicar estilos en un documento HTML es hacerlo directamente en las propias etiquetas, a través del atributo style:<p>¡Hola <span style="color:#FF0000">amigo lector</span>!</p>
Al igual que en el método anterior, se recomienda no utilizarse salvo casos muy específicos, ya que se pierde la independencia de la presentación y contenido. Sin embargo, es una opción que puede venir bien en algunos casos.
Los documentos CSS son archivos de texto donde se escribe una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML asociados.
Estructura CSS
La estructura CSS se basa en reglas que tienen el siguiente formato:Sintaxis simple
Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto. Por ejemplo, el elemento p. Realmente, esto es mucho más complejo, pero ya dedicaremos una serie de capítulos exclusivamente a este tema.
Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS e iremos aprendiendo.
Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.
Con todo esto le iremos indicamos al navegador que, para cada etiqueta (selector especificado) debe aplicar las reglas (propiedad y valor) indicadas.
Vamos a verlo con un ejemplo para afianzar conceptos. Supongamos que este es el código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Título de página</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="first">
<p>Párrafo</p>
</div>
<div id="second">
<span>Capa</span>
</div>
</body>
</html>
Y además, por otro lado, este sería el código CSS del archivo index.css:
p {
color:red; /* Color de texto rojo */
}
De esta forma, a todas las etiquetas <p> se le aplicará el estilo especificado: el color rojo.
Truco: Se pueden incluir comentarios entre los caracteres /* y */, los cuales serán ignorados por el navegador y pueden ser utilizados por legibilidad y para documentar nuestros documentos CSS.
Sin embargo, esto es sólo un ejemplo muy sencillo. Se pueden aplicar muchas más reglas (no sólo el color del ejemplo), consiguiendo así un conjunto de estilos para la etiqueta indicada en el selector. Cada una de estas reglas se terminará con el carácter punto y coma (;).
En el siguiente esquema se puede ver las diferentes partes del código CSS con sus respectivos nombres:
Pagina principal HTML5 - CSS - Servidores -PHP - MySQL
No hay comentarios:
Publicar un comentario