Deseño Web 06: Poñendo todo bonito. Estilos CSS.

Vendo que este curso os meus alumnos e alumnas están a ir a unha velocidade de vértixe, de premio van levar unha lección extra. Sei que saberán agradecer a ración de sabiduría, invitación da casa :-)

Até o de agora aprendíchedes a facer páxinas con títulos, parágrafos, ligazóns e imaxes, todo elo nun nada espectacular estilo, con formatos de letra estándar e en estricto branco e negro. Imos logo ver como darlle un pouco de vida a todo isto.

Existen moitas maneiras de cambiar as cores, formatos de letra, fondos e demais, pero nós só imos traballar o xeito máis "pro" de facelo, isto é, empregando follas de estilo en cascada ou CSS (Cascade Style Sheets). As CSS son un documento que eu gardo xunto ás miñas páxinas, e que almacenará os estilos de todos os elementos, é dicir, que determinará como van ser os títulos de nivel 1, como serán os parágrafos, as ligazóns, etc. Deste xeito, se teño unha web formada por varias páxinas, podo alterar os formatos de todas elas editando a folla de CSS. Imos ver como vai isto.

Creando a folla CSS:

O primeiro que teremos que facer será crear unha folla CSS, para iso, abriremos o bloc de notas unha vez máis, pegaremos o contido do cadro dentro e gardaremos como "estilos.css", no mesmo cartafol que as páxinas que queremos que lles dea formato (emprega calquera exemplo que teñas feito nos capítulos anteriores e que teña un par de páxinas html con títulos e parágrafos).

body

{

background-color:green;

}

{

color:orange;

text-align:center;

}

{

font-family:"Times New Roman";

font-size:20px;

}

A sintaxe do documento CSS está baseada en selectores e declaracións, que á súa vez presentan propiedades e valores:

Un Selector é o que indica que elemento da páxina imos modificar, na imaxe é un título de nivel 1, pero podería ser o body, os parágrafos, ou calquera outro.

A Declaración indica que Propiedade imos querer controlar desde o documento, e que Valor lle imos dar.

Na imaxe, estou dicindo que quero que todos os títulos de nivel 1 (Selector) teñan color de texto (Propiedade) laranxa (Valor) e tamaño de fonte 20.

Referenciando a folla CSS:

Unha vez temos a folla CSS creada, debemos decirlle ás nosas páxinas que queremos que se fixen nela para saber como deben amosar os seus elementos. Isto facémolo mediante un par de liñas de código HTML, que pegamos inmediatamente despois da etiqueta <html> en cada páxina que queremos que sexa controlada por ese CSS:

<html>

<head>

</head>

<body>

...

</body>

</html>

Explicamos este código:

<head> ... </head> : esta é unha etiqueta nova, dentro dela vai todo o código que non está destinado a que o usuario vexa, senón para que a páxina funcione como queremos. Dentro desta etiqueta poñemos cousas como as referencias a estilos CSS, as tags que queremos que usen os navegadores para atopar a nosa páxina, as referencias a programas que incluamos na páxina...

Exercicios:

Colle as páxinas html coas que estabas a traballar e o documento CSS que acabas de facer e:

- Tenta cambiar as cores, podes mirar aquí as diferentes cores que podes poñer como valor.

- Tenta facer que os títulos h1 sexan tamén en Times New Roman

- Tenta facer que o parágrafo teña unha cor de fondo "crema de menta".

- Tenta que os parágrafos estexan aliñados no centro.

- Tenta facer que os links aparezan en laranxa (isto é para nota)

Máis CSS:

O que acabas de aprender non é máis que a punta do iceberg, o CSS ten moitísimas aplicacións, e podemos regular con el a apariencia dunha páxina até os seus mínimos detalles, ademais de facer animacións e combinala con outras linguaxes para conseguir resultados impresionantes. Se queres experimentar un pouco máis, así como ver unha lista de atributos e valores que modificar, recoméndoche a páxina da W3C ou, en inglés, a da W3schools.

<<Anterior

Preguntas>>