Hojas de Estilo CSS

ELECTIVA INFORMTICA II
INDUSTRIAL
Hojas de estilo en cascada
(Cascade Style Sheet)
HOJAS DE ESTILO EN CASCADA (CSS)

Las hojas de estilo en cascada (Cascade Style Sheet) son una tecnologa para mejorar la apariencia y dar formato a una
pgina Web.
Son llamadas hojas de estilo porque se pueden crear clases y pseudoclases, las cuales se pueden modificar e indicarle
al navegador la forma en cmo se deben presentar las etiquetas HTML.
Son en cascada porque cuando se crea un estilo de hoja todas las especificaciones que se realicen para una
determinada etiqueta HTML sern aplicables a todos los elementos subsiguientes a l manejando el criterio de herencia.

Reglas CSS

CSS funciona a base de reglas, es decir, se crean declaraciones sobre el estilo de una o ms etiquetas.
Las hojas de estilo estn compuestas por una o varias de esas reglas aplicadas a un documento HTML o XML.
La regla tiene dos partes: un selector y una declaracin. El selector funciona como enlace entre el documento y el estilo,
especificando los elementos que se van a ver afectados por esa declaracin. La declaracin es la parte de la regla que
establece cul ser el efecto. A su vez la declaracin est compuesta por una propiedad: y el valor que se le asigne.

Ejemplo:
p {color:blue;}

Donde p es el selector y {color:blue;} es la declaracin

Los selectores pueden estar individualmente o agrupados. Para agruparlos cada selector se separa con una coma (,).

Ejemplo:
h1,h2,h3 {color:blue;}

Las etiquetas h1, h2, h3 sern de color azul en la pgina Web que contenga el estilo sealado.

Tambin es posible definir varias declaraciones en un selector individual o en selectores agrupados. Estn debern estar
separadas por punto y coma (;).

Ejemplos:
h1,h2,h3 {color:blue; font size:40px; font-family:verdana;}
p {color:blue; font size:40px; font-family:verdana; }
Ambito de una regla de estilo

Las reglas de estilo se pueden aplicar a elementos especficos dentro de etiquetas o a grupos de
etiquetas, para ello se utilizan algunos elementos que permiten definir selectores de estilo, algunos de
estos son:
Selectores contextuales: permiten aplicar estilos a elementos que estn contenidos dentro de
etiquetas.
Selectores de clase: permite definir estilos a grupos de etiquetas.
Selectores id: permite definir estilos a etiquetas definidas por el diseador dentro del documento.

Selectores contextuales

Un selector contextual define y aplica las propiedades CSS a elementos que estn contenidos dentro
de otros elementos HTML. Por ejemplo, s se desea que todas las etiquetas <u> que solo estn
dentro de las etiquetas h2 sean de color amarrillo, el cdigo se definira de la siguiente manera:

Cdigo CSS:

h2 u{color:amarrillo;}

Cdigo HTML:

<body>
<h2> El siguiente texto es <u>amarrillo</u></h2>
</body>

Selectores de clase

Los selectores de clase permiten definir estilos CSS a varias etiquetas que pueden ser de diferente tipo, para ello se utiliza el
atributo class. Existen dos tipos de selectores de clase: generales y especficos.
Los especficos son aquellos que se definen para una sola etiqueta
Los generales pueden aplicarse a varias etiquetas.

En el siguiente ejemplo se definen los selectores especficos representados en las clases pequea, mediana y grande, donde
se puede observar que para cada etiqueta <p> se ha definido una clase diferente para cambiar el tamao de letra.
Adicionalmente se ha definido una etiqueta general llamada libre la cual se aplica a las etiquetas <h1> y <p> al mismo tiempo.

Cdigo CSS:

<!selectores generales se pueden definir de la siguiente forma:-->
h1.estilo{color:red; Font-size:30px;}
<!selectores especficos se pueden definir de la siguiente forma:-->
p.pequea { font-size:10px}
p.mediana { font-size:14px}
p.grande { font-size:20px}
<!selectores para cualquier etiqueta-->
.libre{color:blue;}

Cdigo HTML:

<body>
<h1> Texto con selector general</h1>
<h1 class=libre> Texto con estilo libre</h1>
<p class=libre> Texto.</p>
<p class=pequea> Texto.</p>
<p class=mediana> Texto.</p>
<p class=grande> Texto.</p>
</body>
Pseudoclases

La pseudoclase permite usar ms informacin a disposicin del diseador al momento de
escribir la hoja de estilo, en otras palabras permiten diferenciar varios usos para una
misma etiqueta.

Un ejemplo son los hipervnculos; lo ms deseable es que los sitios Web ya visitados
fueran diferentes de los que no an no han sido visitados; esto se puede lograr mediante
la etiqueta <a>:
a:link: precisa un hipervnculo no visitado.
a: visited: especifica un hipervnculo visitado.
a:hover: se activa cuando se pasa el mouse por encima de l.
a:active: define un hipervnculo activo cuando se d clic sobre l.

Tambin es posible definir la pseudoclase como una clase real:

Cdigo HTML
<head>
<style> A.externo:visited { color: black } </style>
</head>
<body>
<a class="externo" href="http://otro.host/"> Link a otro host </a>
a:link img { border: solid blue; }
</body>
Selectores id

Son similares a los selectores de clase, pero se diferencian en la semntica y en el comportamiento. Su formato
es:

Cdigo CSS:

#contenedor{width:760px;}
#cabecera{height:40px;background:blue;color:white;}

Cdigo HTML:

<body>
<div id="contenedor">
Texto
<div id="cabecera"> Texto blanco con fondo azul</div>
</div>
</body>

Pseudoelementos

Sirven para aplicar estilos a partes ms especficas dentro de una etiqueta. Es decir, se puede indicar el estilo para
una parte restringida de esa etiqueta. Por ejemplo, en la etiqueta prrafo <p> se puede definir el estilo para la
primera letra del prrafo y para la primera lnea.
p:first-letter{font-size:200%;color:red;} : se define un tamao de letra 200% y un color roja para la primera
letra.
p:first-line{text-decoration:underline;color:blue;}: se define la primera lnea subrayada y de color azul.
p.nota:before {content: Nota:;}: se define que al utilizar el prrafo p especfico nota, se colocar el texto
Nota: al inicio del prrafo.
p.nota:after{content: Final:;}: se define que al utilizar el prrafo p especfico nota se colocar el texto
Final: al final del prrafo.
Selectores hijos

Un selector de hijo se define cuando un elemento es el hijo de alguna etiqueta.
Un selector de hijo se compone de dos o ms selectores separados por ">".

En el siguiente ejemplo se crear el selector p que contenga un hijo u directo y un segundo selector p
donde la etiqueta u no sea un hijo directo de p. Para el primer prrafo Texto1 estar subrayado y de color
azul, mientras que el segundo prrafo estar subrayado y de color negro.

Cdigo CSS

p > u { color: blue; }

Cdigo HTML

<body>
<p>
<u>Texto1</u>
</p>
<p>
<big>
<u>Texto2</u>
</big>
</p>
</body>
Caractersticas de las hojas de estilo

Las propiedades de las hojas de estilo corresponden a atributos o caractersticas que facilitan la definicin de un formato a
una etiqueta HTML. Para ello es necesario tener en cuenta las medidas que pueden aplicarse a cada propiedad, la
distribucin, posicin o forma que tiene cada elemento.

Medidas en CSS.

Medidas absolutas: son aquellas que se definen de forma exacta tales como centmetros o pulgadas, estas se utilizan
cuando se conocen de forma concreta los dispositivos de salida, ya que estas dimensiones pueden cambiar de uno a otro.
Algunas de estas medidas utilizadas en CSS son:
in Pulgadas (1 pulgada = 2,54
centmetros)
cm Centmetros
pt Puntos (1 punto = 1/72 pulgadas)
Medidas relativas: se utilizan para definir las dimensiones en relacin a otra propiedad o elemento, estas medidas
pueden mejorar la apariencia de salida entre un dispositivo y otro, por lo cual es aconsejable utilizar este tipo de medidas
en las propiedades de las hojas de estilo para que no se generen efectos de desconfiguracin en la visualizacin de las
pginas. Algunas medidas relativas son:
em Tamao de una m en la fuente actual
aplicada.
px Pxeles, respecto al dispositivo de
presentacin
% Porcentaje
Distribucin o posicin de los elementos: Modelo de caja

La distribucin de los elementos en una pgina Web es importante ya que de esto depende una buena
visualizacin del contenido
Las hojas de estilo CSS tienen como base que todo elemento HTML se encuentra dentro de un
rectngulo o caja, la cual posee unas dimensiones y elementos que de acuerdo a algunas propiedades
pueden mejorar la apariencia de dichos elementos.
El modelo de caja permite ubicar un elemento dentro de la pgina en relacin a otros, este modelo
contiene unas propiedades especficas que hacen referencia al ancho, el alto, el contenido, el relleno,
el borde y el margen de un elemento HTML.

En la siguiente figura se puede observar la relacin de cada una de estas propiedades.
Ancho (widht): ancho de la caja del elemento HTML.
Alto (height): alto de la caja del elemento HTML.
Contenido (content): hace referencia al elemento en s que aparecer dentro de la caja por ejemplo un
texto de un prrafo o una imagen, entre otros.
Relleno (padding): es el espacio entre el contenido y el borde de la caja que contiene al elemento
HTML.
Borde (border): lnea que rodea el contenido y el relleno.
Margen (margin): rea que asla el borde de la caja del elemento y otras adyacentes.
Agregar estilos CSS a una pgina Web

1) Aplicar estilos en lnea en las etiquetas HTML

Crear una pgina Web llamada estiloetiqueta.html que permita mostrar un texto en una etiqueta h3 con una
sangra de 4 centmetros, el color de texto blanco y el fondo azul, adems en una etiqueta p un texto de color
amarrillo, con fondo verde, estilo de fuente helvtica y con una sangra de 2 centmetros. El cdigo HTML es:

<html>
<head>
<title>Estilos en lnea </title>
<head>
<body>
<h3 style="text-indent:4 cm; background:blue; color:white;">
Texto etiqueta h3 con estilo, el encabezado es blanco con fondo azul y una
sangra de 4 centmetros. </h3>
<h3> Texto etiqueta h3 sin Estilo</h3>
<p style="color:yellow;background:green;font-family:helvetica;text-indent:2cm;">
texto etiqueta p de color amarrillo, fondo verde y una sangra de 2
centmetros</p>
</body>
</html>
2) Definir una hoja de estilo dentro de la etiqueta head

Crear una pgina Web llamada estilosetiquetahead.html que permita definir una hoja de estilo para las
etiquetas h3, h4 con texto de color caf, estilo de fuente en negrilla, adems una etiqueta p especfica llamada
primera donde el texto ser de color amarrillo, fondo verde, estilo de fuente helvtica y una sangra de 2
centmetros y otra etiqueta p especfica llamada segunda donde el texto ser de color verde, fondo azul, estilo
de fuente arial y tamao de fuente extra larga. El cdigo HTML sera:
<html>
<head>
<title>Estilos en la etiqueta head</title>
<style type="text/css">
h3,h4 {color:brown;font-style:bold;}
p.primera {color:yellow;background:green;font-family:helvetica;text-indent:2cm;}
p.segunda {color:green;background:azul;font-family:arial;font-size: x-large;}
</style>
<head>
<body>
<h3>
Texto etiqueta h3 con estilo, color cafe y en negrilla </h3>
<h4> Texto etiqueta h4 con estilo, color cafe y en negrilla </h4>
<p class="primera">Texto etiqueta p de color amarrillo, fondo verde y una sangra de 2
centmetros</p>
<p class="segunda">texto etiqueta p especfica llamada segunda</p>
</body>
</html>
3) Vincular una hoja de estilo externa a una pgina Web

Las reglas de estilo se definen externamente, en archivos con extensin css, estos
deben vincularse a la pgina Web utilizando las etiquetas link, la cual indica al
navegador que debe usar las reglas de formato CSS y en que URL debe buscarlas.
Esta etiqueta debe ser definida en la cabecera (head) de la pgina Web y contiene
los siguientes atributos:

href: indica al explorador el nombre y la ruta del archivo con las definiciones de la
hoja de estilo que se va a utilizar. Este archivo debe tener la extensin .css.
type: identifica el archivo como un archivo de texto con informacin CSS.
rel: identifica la hoja de estilo.

Su formato es:

<link href="nombrearchivo.css" rel="stylesheet" type="text/css">

Crear una pgina Web llamada estiloexterno.html que permita definir que todas las etiquetas h1 especificas
llamadas letra, el color del texto sea anaranjado y el estilo de fuente itlico; las etiquetas h5 especificas llamadas
texto el color de texto sea de color azul y el estilo de fuente en negrilla. Por otro lado se definan tres etiquetas p: la
primera una etiqueta p especifica llamada especial que define un color de texto verde y un borde solido de color rojo,
una segunda etiqueta p especifica llamada altura que define un texto de tamao de 20 pixeles y por ltimo una
etiqueta p con tipo de fuente arial y de color amarrillo.

Archivo css (estilos.css)

p.especial {
color : green;
border: solid red;
}
h1.letra {color:orange;font-style:italic;}
h5.texto {color:blue;font-style:bold;}
p{font-family:arial;color:maroon;}
p.altura{font-size:20px;}

Archivo html (etiloexterno.html)

<html>
<head>
<title>Pgina Web con una hoja de estilo externa</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="especial">Este prrafo debera tener texto especial verde.</p>
<h1 class="letra"> Este es el estilo de la etiqueta h1</h1>
<h5 class="texto"> Estilo de texto de la etiqueta h5 </h5>
<p>Prrafo con letra arial y color marrn</p>
<p class="altura">Igual que el prrafo anterior, pero con tamao de 20 pixeles</p>
</body>
</html>
4) Importar una hoja de estilo externa

Crear una pgina Web llamada importarestilo.html que permita definir que todo lo que este dentro del
cuerpo del documento sea de fondo azul y el texto de color rojo. Por otro lado, se debe definir que en las
etiquetas h2, el color del texto sea verde y el estilo de fuente arial

Archivo cuerpo.css

body {background:gray; color:red;}
h1 {color:green;font-family:arial;}

Archivo html

<html>
<head>
<title>Hoja de estilo en cascada importada(CSS)</title>
<style type="text/css">
@import URL("cuerpo.css");
</style>
</head>
<body>
Este texto est dentro del cuerpo del documento
<h1> Texto h1 redefinido</h1>
<p> Texto nuevamente con el estilo definido en el archivo CSS importado</p>
</body>
</html>

Ejemplo men horizontal

Disear una pgina Web llamada menuhorizontal.html que permita mostrar un men horizontal que
contenga las siguientes opciones: Inicio, Clientes, Proveedores, Catalogo, Servicios, Comentarios. Adems
del archivo HTML, se debe crear un archivo para los estilos llamado estilosmh.css.

Archivo estilosmh. css

h1 {
font-size: 60px;
background-color: #ffcc66;
text-align: center;
color: green;
}
#cabecera {
border-style: ridge;
}
#menuh {
margin: 20px,10px,15px,200px;
background-color: brown;
}
body {
background-color: #ffff99;
}
#menuh ul {
margin: 0;
padding:0;
}
#menuh li {
float:left;
}
#menuh a {
text-decoration: none;
color: blue;
background: silver;
padding: 3px 10px;
display: block;
border: 2px solid red;
border-width: 2px 2px 2px 2px;
}
.seleccion {
font-family: "Times New Roman",Times,serif;
font-size: 1.3em;
}
#menuh a:hover {
color: blue;
background-color: #76ff9c;
}
#menuh a:active {
color: brown;
}
Archivo menuhorizontal.html

<html>
<head>
<title>Menu Horizontal</title>
<link href="estilosmh.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="cabecera">
<h1> MEN HORIZONTAL</h1>
</div>
<div id="menuh">
<ul>
<li><a class="seleccion" href=" ">
<span style="text-decoration: underline;">I</span>nicio</a></li>
<span style="text-decoration: underline;">C</span>lientes</a></li>
<span style="text-decoration: underline;">P</span>roveedores</a></li>
<li><a class="seleccion" href=" ">C
<span style="text-decoration: underline;">a</span>talogo</a></li>
<span style="text-decoration: underline;">S</span>ervicios</a></li>
<li><a class="seleccion" href=" ">C
<span style="text-decoration: underline;">o</span>mentarios</a></li>
</ul>
</div>
</body>
</html>

Hojas de Estilo CSS

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Hojas de Estilo CSS

Transféré par

Droits d'auteur :

Formats disponibles

ELECTIVA INFORMTICA II

Vous aimerez peut-être aussi