CURSO DE CSS
Ejemplos: a/ Utilizar CSS dentro del documento HTML. Se especifica con el elemento < style>, y se sitúa en la cabecera del documento o < head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo. < html> < head> < title>Hoja de Estilo Interna< /title> < style type="text/css"> body { font-family: Arial, Georgia; color: blue; } < /style> < /head> < body> < h1>Aquí se aplica el estilo de letra para el Título< /h1> < p>Aquí va el contenido principal de la web< /p> < /body> < /html>
b/ Utilizando una hoja de estilo externa que estará vinculada a un documento HTML a través del elemento < link>, también situado en la cabecera. Aunque se pueden crear enlaces a varios archivos css siempre prevalece el último en caso de que se definan más de un estilo para el mismo elemento. < html> < head> < title>Título del sitio web< /title> < link rel="stylesheet" type="text/css href="styles.css" /> < /head> < body> … < /body> < /html>
Donde,
rel="stylesheet" indica que la relación es con una hoja de estilo.
type="text/css" viene a decir que el tipo es texto y css.
href="styles.css" es el nombre del documento que contiene el código css. -7-
CURSO DE CSS
2.4.- Test
1. ¿De qué consta una regla CSS?
selector { propiedad: valor;} declaración { propiedad: valor;} regla { selector: declaración;} Ninguna de las anteriores.
2. ¿Cuál es la sintaxis correcta de una regla en CSS? {p=color:red} p{color=red} p{color:red} Ninguna de las anteriores
3. ¿Cuál es la sintaxis correcta en HTML para referirse a una hoja de estilo externa? < style src="estilos.css"> < link rel="stylesheet" type="text/css" href="estilos.css"> < link src="stylesheet" name="text/css" href="estilos.css"> Ninguna de las anteriores
4. ¿Cómo definimos un comentario en CSS? < –Comentario–> //Comentario// /-Comentario-/ /*Comentario*/ -8-
CURSO DE CSS
3.- CASCADA Y HERENCIA
3.1.- Cascada Resulta muy útil tener una hoja de estilo asociada a una o más páginas web. Ya que en algunos casos como sitios web grandes en las que el mantenimiento se realiza por varias personas, tener una sola CSS no cubre la totalidad de las necesidades del diseño. Por eso es preciso crear una jerarquía de hojas de estilo relacionadas. El estilo final es el resultado de la suma de todos los estilos definidos. A este proceso es a lo que se le llama Cascada. Tendremos una CSS con los aspectos básicos y generales del diseño y luego otra serie de CSS más particulares que serán modificadas por otras personas y haciendo que las reglas de todas las CSS actúen conjuntamente. Cada página HTML está compuesta por una serie de elementos (títulos, párrafos, listas, tablas, etc.) organizados en una estructura donde cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro. El que actúa de contenedor es el elemento raíz donde están incluidos el resto de elementos, suele corresponder a < body> o a < html> o a una capa contenedora o < div>.
3.2.- Herencia En el conjunto de todas las etiquetas HTML podemos establecer una jerarquía en las que unas contienen a otras, para darnos una relación de Herencia. En primer lugar, tendríamos la etiqueta < BODY> … < /BODY>, que hace referencia a todo el documento, y podemos considerarla como la etiqueta "padre" de todas las demás etiquetas de formato, puesto que todas ellas se encuentran contenidas en él. Después, tenemos las etiquetas de párrafo (< P>…< /P>, < DIV>…< /DIV>, cabeceras, …) y en tercer lugar tenemos las etiquetas de elementos insertados en línea (< B>…< /B>, < I>…< /I>, < SPAN>…< /SPAN>, …). Las etiquetas de párrafo serán contenedoras de las etiquetas de elementos insertados en línea, estableciéndose así una nueva relación "padre-hijo". La importancia radica en aplicar un estilo al elemento padre, de forma que todos los elementos que contiene hereden esta propiedad, sin necesidad de aplicarlo a cada elemento por separado. Hay algunas salvedades que hay que hacer: – No todas las propiedades se pueden heredar, ejemplo: bordes. – Al asignar una propiedad a un elemento, el valor reemplaza al heredado. – Se heredan los valores computados, por ejemplo, no se aplica 125% sino el resultado del cáculo. – El valor inherit puede aplicarse a cualquier propiedad de los elementos. -9-
CURSO DE CSS
3.3.- Test 1. ¿Que significa el concepto cascada?. Indica cual es Verdadera o Falsa:
CSS que permiten que las informaciones de estilo provenientes de varias fuentes puedan combinarse. Jerarquía de hojas de estilo relacionadas Secuencia ordenada de hojas de estilo en la que las reglas de las últimas hojas tienen una prioridad mayor que las de las primeras. No todos los lenguajes de hojas de estilo soportan la cascada.
2. ¿Que significa el concepto herencia? Indica cual es Verdadera o Falsa: Son los aspectos generales y particulares del diseño que hacen que todos juntos nos muestren el estilo Hace referencia a las etiquetas HTML, que indica a qué parte de todo el código se le va a aplicar el estilo La jerarquía dentro del conjunto de etiquetas HTML establece que unas estén contenidas en otras No todas las propiedades se heredan -10-
| Página siguiente |