Documente Academic
Documente Profesional
Documente Cultură
1. Sintaxis CSS
Una hoja de estilo está formada de un conjunto de reglas de estilo que le dice al
navegador como presentar un documento. Cada regla de estilo consta de dos partes:
H1 { color: blue }
Para no repetir reglas que se aplican sobre las mismas etiquetas se pueden agrupar los
selectores. Por ejemplo, todas las cabeceras van a tener el mismo color:
También se pueden añadir comentarios dentro de los ficheros css de la siguiente manera:
1.1. Definición
Hay tres maneras de definir los estilos:
Hojas de estilo:CSS 1
Sistemas Hipermedia: Diseño y Evaluación
Por ejemplo si a un párrafo le queremos dar un tamaño de fuente 10 y un margen
izquierdo de 20 pts.
</P>
<STYLE TYPE="text/css">
<!-
......
......
-->
</STYLE>
Un ejemplo serı́a:
<HTML>
<HEAD>
Hojas de estilo:CSS 2
Sistemas Hipermedia: Diseño y Evaluación
<TITLE>Ejemplo CSS</TITLE>
<STYLE TYPE="text/css">
<!-
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Titulo en azul</H1>
</BODY>
</HTML>
Hojas de estilo:CSS 3
Sistemas Hipermedia: Diseño y Evaluación
<HTML>
<HEAD>
</HEAD>
......
</HTML>
El fichero hoja estilos.css es un simple fichero de texto con extensión .css en el que
se define la hoja de estilo.
/*Fichero hoja_estilos.css*/
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
Hojas de estilo:CSS 4
Sistemas Hipermedia: Diseño y Evaluación
2. Hoja de estilo externa
Por ejemplo, una hoja de estilo externa tiene las siguientes propiedades para el selector
h3:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Y una hoja de estilo externa tiene estas propiedades también para el selector h3:
h3
{
text-align: right;
font-size: 20pt
}
Si la página con la hoja de estilo interna también está enlazada con la hoja de estilo
externa, las propiedades para h3 serı́an:
color: red;
text-align: right;
font-size: 20pt
Hojas de estilo:CSS 5
Sistemas Hipermedia: Diseño y Evaluación
2.1. Propiedades de texto
Son propiedades que afectan a la presentación visual de caracteres, espacios, palabras
y párrafos. Las propiedades que podemos utilizar son las siguientes:
color. Especificamos el color del primer plano del contenido del texto.
Ejemplo:
H1{color:red}
Ejemplo:
H1 {text-transform:uppercase}
vertical-align. Alineación vertical del texto en relación con la lı́nea base del texto.
Ejemplo:
STRONG {vertical-align:sub}
Hojas de estilo:CSS 6
Sistemas Hipermedia: Diseño y Evaluación
Ejemplo:
H1{text-align: center}
XX unidad | %
Ejemplo:
P {text-indent:2em}
normal | XX unidad | %
Ejemplo:
H1 {text-decoration: underline}
normal | XX unidad
Ejemplo:
H1{letter-spacing: 0.5pc}
normal | XX unidad
Ejemplo:
H1 { word-spacing: 0.5pc}
Hojas de estilo:CSS 7
Sistemas Hipermedia: Diseño y Evaluación
2.2. Propiedades de las fuentes
Con estas propiedades controlamos el estilo de una fuente, su tamaño, su familia, su
grosor, etc. Las propiedades que podemos utilizar son las siguientes:
Ejemplo:
BODY{
Ejemplo:
H1,H2,H3{font-style:italic}
Ejemplo:
Hojas de estilo:CSS 8
Sistemas Hipermedia: Diseño y Evaluación
STRONG{font-weight:bolder}
Ejemplo:
H1 {font-size: 150%}
background-color. Especifica el color del fondo del elemento, que puede ser un
color o la palabra reservada transparent.
Ejemplo:
H1{background-color:#0000FF}
background-image. Designa una imagen para rellenar el fondo del elemento por
medio de una URL o la palabra reservada none para indicar que no se utilizara
ninguna imagen. Puede fijarse también un color que se colocará debajo de la imagen,
y que asomará si la imagen no está disponible o, si lo está, detrás de sus zonas
transparentes.
none | url(dirección)
Hojas de estilo:CSS 9
Sistemas Hipermedia: Diseño y Evaluación
Ejemplo:
scroll | fixed
Ejemplo:
body
{
background-image: url(fondo.gif);
background-attachment: scroll
}
Ejemplo:
body
{
background-image: url(fondo.gif);
background-attachment: scroll
}
Hojas de estilo:CSS 10
Sistemas Hipermedia: Diseño y Evaluación
2.4. Propiedades de margenes y padding
Con estas propiedades especificamos los margenes de cualquier elemento y con el pad-
ding controlamos la distancia entre el borde y el contenido. Las propiedades que podemos
utilizar son las siguientes:
Ejemplo:
BODY {margin-top:1cm}
margin.Mediante esta propiedad podemos especificar todos los valores de los mar-
genes de una sola vez. Se pueden poner hasta cuatro valores, para especificar cada
uno de los margenes.
Pero si sólo especificamos ancho1 se refiere a los cuatro lados del margen. Si se
especifican dos valores, ancho1 se refiere a los lados superior e inferior y ancho2 al
izquierdo y derecho. En el caso de poner los tres primeros, ancho1 se refiere al lado
superior, ancho2 al izquierdo y derecho y ancho3 al inferior.
Ejemplo:
XX unidades | %
Hojas de estilo:CSS 11
Sistemas Hipermedia: Diseño y Evaluación
Ejemplo:
padding. Mediante esta propiedad podemos definir en una única propiedad los
cuatro valores anteriores. Funciona de la misma manera que la propiedad margin.
Ejemplo:
H1 {padding:10%}
Ejemplo:
H1 {border-top-width:thin}
Ejemplo:
Hojas de estilo:CSS 12
Sistemas Hipermedia: Diseño y Evaluación
H1 { border-width: thin thick medium}
Ejemplo:
Ejemplo:
Hojas de estilo:CSS 13
Sistemas Hipermedia: Diseño y Evaluación
anchura | estilo | color
Ejemplo:
border. Mediante esta propiedad podemos especificar de forma conjunta todas las
propiedades de un borde: tamaño, estilo y color.
Ejemplo:
url () | none
Ejemplo:
ol
{
list-style-image: url(blueball.gif);
}
Hojas de estilo:CSS 14
Sistemas Hipermedia: Diseño y Evaluación
none | disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha
Ejemplo:
ul
{
list-style-type: disc
}
inside | outside
Ejemplo:
ol
{
list-style-position: inside
}
3. Selectores avanzados:Class e ID
Estos tipos de selectores permiten la asignación de estilos de una manera independiente
de los elementos del documento. Estos selectores pueden ser usados sólos o en conjunción
con etiquetas.
<H3 CLASS="importante">
Hojas de estilo:CSS 15
Sistemas Hipermedia: Diseño y Evaluación
En la hoja de estilo se debe añadir:
.importante {color:red;}
P.importancia{color:red;}
Los selectores ID son diferentees a los selectores class. Mientras que un selector class
puede ser aplicado a diferentes elementos en una página, un serlector id siempre se
aplica a un único elemento. Un atributo ID debe ser único en el documento. Además
su sintaxis es diferente, van precedidos de un #.
#importancia{color:red;}
p#para1
{
text-align: center;
color: red
}
La diferencia entre estos dos tipos de selectores es que Class puede ser usado varias
veces en el mismo documento mientras que el selector ID solamente puede ser aplicado
una y sólo una vez.
Hojas de estilo:CSS 16
Sistemas Hipermedia: Diseño y Evaluación
4. Pseudo-Clases y Pseudo-Elementos
Son clases y elementos especiales que son automáticamente reconocidos por los navega-
dores que soportan CSS. Las pseudo-clases distinguen entre diferentes tipos de elementos
(por ejemplo, enlaces visitados o activos). Los pseudo-elementos se refieren a subpartes
de los elementos como la primera letra de un párrafo. Las reglas con pseudo-clases tienen
la siguiente sintaxis:
Hojas de estilo:CSS 17
Sistemas Hipermedia: Diseño y Evaluación
A:active { color: blue; font-size: 125% }
A:hover {}
P:first-line {
font-variant: small-caps;
font-weight: bold }
Hojas de estilo:CSS 18
Sistemas Hipermedia: Diseño y Evaluación
5. Unidades de longitud
Un valor de longitud se forma por un signo + o - opcional, seguido de un número y
de una abreviación de dos letras que indica la unidad. No hay espacios en un valor de
longitud (1.3em). Una longitud de 0 no necesita las dos letras para identificar la unidad.
5.1. Relativas
Las unidades relativas dan una longitud relativa a otra propiedad longitud. Las si-
guientes unidades relativas están disponibles:
5.2. Absolutas
Las unidades de longitud absolutas son muy dependientes del medio de salida, y son
por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas
están disponibles:
cm (centı́metros; 1 cm = 10 mm)
mm (milı́metros)
pc (picas; 1 pc = 12 pt)
6. CSS Avanzado
6.1. Selector universal
El selector universal se escribe con un asterisco (*) y representa a cualquier elemento
de la página. Por ejemplo, con:
* {color: red}
Todos los elementos de la página tendrán como color de primer plano el rojo
Hojas de estilo:CSS 19
Sistemas Hipermedia: Diseño y Evaluación
6.2. La regla @import
La regla @import permite importar hojas de estilo desde otras hojas de estilo. Se
puede usar de las siguientes formas:
@import "hoja_de_estilo.css";
@import url("hoja_de_estilo.css");
Esta declaración debe ir antes que cualquier otra regla en la hoja de estilo.
Hojas de estilo:CSS 20
Sistemas Hipermedia: Diseño y Evaluación
Ejemplo:
h2
{
cursor: crosshair
}
p
{
cursor : url("first.cur"), url("second.cur"), pointer
}
Ejemplo:
h1
{
position:absolute;
top:150px;
}
auto | % | unidad
Ejemplo:
Hojas de estilo:CSS 21
Sistemas Hipermedia: Diseño y Evaluación
h1
{
position:absolute;
top:150px;
}
auto | % | unidad
Ejemplo:
h1
{
position:absolute;
bottom:150px;
auto | % | unidad
Ejemplo:
h1
{
position:absolute;
top:150px;
left:30px;
}
auto | % | unidad
Hojas de estilo:CSS 22
Sistemas Hipermedia: Diseño y Evaluación
Ejemplo:
h1
{
position:absolute;
top:150px;
right:30px;
}
Ejemplo:
img
{
clip: rect(10px, 5px, 10px, 5px)
}
Ejemplo:
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
Hojas de estilo:CSS 23
Sistemas Hipermedia: Diseño y Evaluación
z-index. Indica el orden de superposición de los elementos en el caso de que coin-
cidan en el mismo espacio. Un elemento con un número más alto siempre se posi-
cionará encima de un elemento con menor número.
auto | entero
Ejemplo:
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
7. Bibliografı́a
HTML dinámico http://html.programacion.net/dinamico/tutorial/indice.htm
Hojas de estilo:CSS 24
Sistemas Hipermedia: Diseño y Evaluación