Académique Documents
Professionnel Documents
Culture Documents
A
Prembulo
El aprendizaje de la publicacin en la Web se haca tradicionalmente distinguiendo el Html de las hojas de estilo CSS. Con la desaparicin, en Html5,
de todos los atributos de presentacin, se hace difcil, casi imposible, ilustrar
el cdigo y las etiquetas Html. De forma lgica parece necesario introducir
algunos elementos de las hojas de estilo para responder a las limitaciones de
la presentacin y poder as ilustrar las explicaciones y los ejemplos.
Este captulo presenta los elementos bsicos de las hojas de estilo que se
usarn en la parte dedicada a Html5.
Lo importante, en este punto de nuestro estudio, es simplemente comprender las funciones respectivas de Html dedicadas a la estructuracin del
contenido y de las hojas de estilo asociadas a la presentacin del mismo.
B
Propiedades de estilo
Las hojas de estilo abarcan todo aquello relacionado con la presentacin del
documento Html como el color, la alineacin, el tamao, los bordes, los
fondos o el interlineado.
La declaracin de un estilo se hace mediante el binomio propiedad:
valor;.
Ejemplo
text-align: center;
45
Captulo 2
Detallemos esta notacin:
- propiedad indica el elemento de presentacin que se ve implicado;
por ejemplo color para el color, text-align para la alineacin,
border para los bordes, font-size para el tamao de la fuente.
- la propiedad est separada por su valor mediante dos puntos.
- valor especifica una palabra clave, un porcentaje o un tamao en
funcin de la propiedad a la que est asignado.
- el punto y coma final indica que se ha terminado la declaracin de estilo,
y es obligatorio.
- se permite el uso de espacios. As, ciertos autores tienen la costumbre de
incluir un espacio entre los dos puntos y el valor para mejorar la
legibilidad del cdigo.
C
Selectores
A continuacin hay que determinar los elementos del cdigo Html que se
vern afectados por el efecto de presentacin. Estos elementos se llaman
selectores.
Selectores bsicos
El primer selector que nos viene a la mente es la etiqueta Html. De este
modo podemos por ejemplo "enganchar" la declaracin de estilo anterior
(alinear el texto de forma centrada) a la etiqueta <h1>.
La sintaxis es: selector { propiedad: valor;}
Ejemplo
h1 { text-align: center;}
46
47
Captulo 2
Selector de identificador
Su concepto es muy cercano a los selectores de clase pero, aqu, no se
desea aplicar el efecto del estilo ms que a un nico elemento de la pgina.
Este elemento, siendo nico, podr tratarse como un objeto que se podr
manipular por JavaScript.
Este elemento nico se identifica mediante el atributo id="nombre_
identificador" siendo, por ejemplo, <h2 id="titulo2"> ...
</h2>.
La sintaxis en este caso es:
valor;}
#identificador
propiedad:
Ejemplo
#titulo2 { text-align: center;}
D
Incorporacin del estilo
Existen mltiples formas de incorporar las declaraciones de estilo en una
pgina Html. En este punto del estudio de CSS, vamos a explicar las elementales.
Estilo en lnea
La declaracin de estilo se agrega directamente a una etiqueta concreta del
cdigo Html mediante el atributo style.
48
Esta forma bsica no respeta la regla de separacin de contenido y presentacin. Su uso ser, por tanto, excepcional.
Estilo interno
Las declaraciones de estilo se agrupan en el encabezado del documento
entre las etiquetas <head> ... </head>. La sintaxis es la siguiente:
<style type=""text/css">
Declaraciones de estilo
</style>
Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<title>Html5</title>
<meta charset="iso-8859-1">
<style type=""text/css">
h1 { color: red;}
.efecto1 { padding-left: 20px;
font-style: italic;}
</style>
<body>
<h1>Titulo 1 en rojo</h1>
<h2 class="efecto1">Subttulo en cursiva</h2>
<h1>Ttulo 2 en rojo</h1>
</body>
</html>
49
Captulo 2
50