Title: css
Course: Ciencias de la computación 1º Bachillerato

Q: Escribe la definición del estilo para que en una lista ordenada los elementos se vean subrayados
Usa el editor bluefish para escribir el código y luego cópialo y pégalo aquí
A: li { text-decoration: underline; } / li{text-decoration: underline; } / li {text-decoration: underline; }

Q: Escribe la definición del estilo de una lista ordenada para que se vea de color #ff0000.
Usa el editor bluefish para escribir el código y luego cópialo y pégalo aquí
A: ol { color: #FF0000; } / ol {color: #FF0000; }

En las páginas web usamos dos lenguajes el html para definir los elementos y el css para establecer la forma en que se visualizan (su tamaño, color, etc.)

Las etiquetas html indican la jerarquía del texto y el significado de contenido: si es el título de la página, el encabezado de mayor prioridad, el cuerpo de texto, si es elemento de una lista, etc.
La forma en que se visualizan los distintos elementos etiquetados es lo que se llama estilos. Aunque no definamos ningún estilo, el texto marcado con h1 se verá por defecto con tamaño mayor que el h2 porque existen unos estilos predefinidos en el navegador. No todos los navegadores tienen los mismos estilos predefinidos. Por eso una página no tiene porque visualizarse con los mismos tamaños o tipos de letra con diferentes navegadores

Los estilos se pueden definir dentro de cada etiqueta, lo que resulta muy engorroso, en cada documento html o mediante hojas de estilo. CSS significa cascade style sheet (hojas de estilo en cascada). La ventaja que tiene esto es que permite definir y modificar los estilos de todos los documentos html modificando un solo documento. Esta es la forma que vamos a aprender por ser la más potente.

Q: Definiremos los estilos en un documento de texto llamado estilos.css (el nombre puede ser diferente) e indicaremos en la cabecera de cada página de nuestro sitio que deben buscar los estilos en ese documento. Eso se realiza mediante una etiqueta.

¿Cual es la etiqueta de apertura de la cabecera de una página web?
A: <head>

Q: En la cabecera se debe poner la siguiente etiqueta para definir la página de estilos enlazada:
<link href="ruta/estilos.css" type="text/css" rel="stylesheet">
Donde ruta/estilos.css es la ruta y el nombre del documento de la hoja de estilos. La ruta puede ser absoluta o relativa, pero en este caso es mejor que sea absoluta, pues de esa forma podemos copiar la etiqueta tal cual y pegarla en la cabecera de todas las páginas.

¿Cual es la ruta absoluta de esta página?
A: http://51.254.221.51/html/joom15/

Sube este archivo al servidor para que esté en el mismo nivel que el index. Pon en la cabecera de todas tus páginas la etiqueta que las enlaza a ese documento como hoja de estilos. Se puede hacer con bluefish: diálogos->css-> hoja de estilos enlazada.
Observa todas tus páginas en el navegador ¿Ha cambiado algo?¿Qué? Enlaza el texto "mi página" a tu páginas

Q: Los estilos se definen en la hoja de estilos de la siguiente forma:

selector {
propiedad : valor;
}

Define en tu hoja de estilos.css el estilo de h1 para que sea de la familia arial. Hazlo con el editor bluefish y copia todo el texto del código de la definición del estilo (lo que corresponde a la zona en negrita).
Observa todas tus páginas para ver qué ha cambiado
A: h1*{ *font-family:*arial,*helvetica,*sans-serif;*}

Q: Usa el editor bluefish para añadir una propiedad a h1 que lo muestre en color verde.
Copia el código de propiedad: valor;
A: color: green; / color: #00FF00;

Añade al estilo de body:
color: blue;

Observa que ahora se ve de azul mucho texto, todo excepto el marcado con h1. ¿Por qué h2 se ve azul cuando no hemos definido ninguna característica para ese estilo?

Q: Define el estilo de body para que el texto tengo tamaño de 15px y de h2 para que tenga un tamaño el doble (200%). Hazlo con el editor bluefish y copia el texto completo de la definición del estilo, desde el selector a }
A: h2 { font-size: 200%; }