Hojas de estilo: CSS

Transcripción

Hojas de estilo: CSS
Con la intención de separar el contenido de la presentación y de ofrecer mayores y más
fáciles posibilidades de presentación el W3 Consortium sugirió la utilización de las Hojas
de Estilo (CSS, Cascade Style Sheet) en la Web. En la actualidad las especificaciones
CSS se encuentran en el nivel 2, aunque las del nivel 1 (CSS1)son las más soportadas.
1.
Sintaxis CSS
Una hoja de estilo está 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:
Selector { propiedad: valor;... }
1. Selector. Representa una etiqueta estándar del HTML.
2. Declaración. Viene definido por un par propiedad:valor separados entre si por
dos puntos. En propiedad indicamos que caracterı́stica (tipo de fuente, color, etc...)
queremos cambiar y en valor el valor que le damos.
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:
H1, H2, H3, H4, H5, H6 { color: blue }
También se pueden añadir comentarios dentro de los ficheros css de la siguiente manera:
/* COMMENTS CANNOT BE NESTED */
1.1.
Definición
Hay tres maneras de definir los estilos:
1. Se pueden declarar directamente sobre la etiqueta HTML:
<ETIQUETA style="propiedad:valor;....">... </ETIQUETA>
Hojas de estilo:CSS
Sistemas Hipermedia: Diseño y Evaluación
1
Por ejemplo si a un párrafo le queremos dar un tamaño de fuente 10 y un margen
izquierdo de 20 pts.
<P STYLE="font-size:10pt; margin-left:20pt;">
Mi Primer párrafo con Estilo
</P>
2. Se pueden definir en su conjunto para toda la página HTML:
<STYLE TYPE="text/css">
<!......
etiqueta {propiedad:valor; .........}
......
-->
</STYLE>
Un ejemplo serı́a:
<HTML>
<HEAD>
Hojas de estilo:CSS
2
<TITLE>Ejemplo CSS</TITLE>
<STYLE TYPE="text/css">
<!BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Titulo en azul</H1>
<P>Párrafo con letra 10</P>
</BODY>
</HTML>
3. Se pude especificar en un fichero externo. Esta manera es la más flexible y recomendada, ya que el estilo asociado a una página HTML se puede cambiar sin modificar
el código de dicha página y además la misma hoja de estilo se puede compartir
con diferentes documentos. Para enlazar la hoja de estilo con una página HTML se
puede utilizar la etiqueta LINK:
Hojas de estilo:CSS
3
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="hoja_estilos.css">
</HEAD>
......
</HTML>
El fichero hoja estilos.css es un simple fichero de texto con extensión .css en el que
se define la hoja de estilo.
/*Fichero hoja_estilos.css*/
BODY {margin-left: 0.5in; margin-right: 0.5in}
H1 {color:blue;}
P {font-size:10pt; marginleft:20pt;}
/*Fin del fichero hoja_estilo.css*/
1.2.
Orden de aplicación
Estos tres modos de definir estilos pueden convivir en la misma página html, pero si
sobre un mismo elemento se han definido diferentes estilos, sólo se aplicará uno de ellos
de acuerdo a las siguientes reglas, ordenadas de menor a mayor prioridad:
1. Las definidas por el navegador
Hojas de estilo:CSS
4
2. Hoja de estilo externa
3. Hoja de estilo interna (dentro de la etiqueta ¡head¿)
4. Directamente sobre la etiqueta HTML
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 también para el selector h3:
h3
{
text-align: right;
font-size: 20pt
}
Si la página con la hoja de estilo interna también está enlazada con la hoja de estilo
externa, las propiedades para h3 serı́an:
color: red;
text-align: right;
font-size: 20pt
El color es heredado desde la hoja de estilo externa, y el text-alignment y el font-size son
reemplazados por las de la hoja de estilo interna.
2.
Propiedades de las hojas de estilo
Las propiedades están divididas en 6 grandes grupos que facilitan su utilización y
documentación.
Hojas de estilo:CSS
5
2.1.
Propiedades de texto
Son propiedades que afectan a la presentación visual de caracteres, espacios, palabras
y párrafos. Las propiedades que podemos utilizar son las siguientes:
color. Especificamos el color del primer plano del contenido del texto.
Nombre Color | Valor HEX | Rgb (R %,G %,B %) | Rgb(R, G,B)
Ejemplo:
H1{color:red}
text-transform. Especifica, por medio de palabras reservadas, si las letras del
texto deben transformarse en mayúsculas, minúsculas, sólo la primera letra de cada
palabra en mayúsculas, o si ha de dejarse como está.
uppercase | lowercase | capitalize | none
Ejemplo:
H1 {text-transform:uppercase}
vertical-align. Alineación vertical del texto en relación con la lı́nea base del texto.
baseline | sub | super | top | text-top | middle | mottom | text-bottom
Ejemplo:
STRONG {vertical-align:sub}
text-align. Fija la alineación del bloque, al margen izquierdo, al derecho, centrado
o a ambos.
left | right | center | justify
Hojas de estilo:CSS
6
Ejemplo:
H1{text-align: center}
text-indent. Fija la sangrı́a o indentación de la primera lı́nea del texto.
XX unidad | %
Ejemplo:
P {text-indent:2em}
line-height. Indica la distancia entre dos lineas adyacentes.
normal | XX unidad | %
text-decoration. Fija una o más caracterı́sticas ”decorativas”del texto, como subrayado, lineas superiores, caracteres tachados o parpadeantes. Si se aplica a un elemento de bloque la heredan sólo los descendientes que sean de texto (o en-linea). Si
se aplica a uno de éstos la heredan todos los descendientes.
underline | overline | line-through | blink | none
Ejemplo:
H1 {text-decoration: underline}
letter-spacing. Especifica el espaciado entre letras. En el caso de especificar una
longitud esta se sumara a la normal.
normal | XX unidad
Ejemplo:
H1{letter-spacing: 0.5pc}
word-spacing. Especifican el espaciado entre palabras. En el caso de especificar
una longitud esta se sumara a la normal.
normal | XX unidad
Ejemplo:
H1 { word-spacing: 0.5pc}
Hojas de estilo:CSS
7
2.2.
Propiedades de las fuentes
Con estas propiedades controlamos el estilo de una fuente, su tamaño, su familia, su
grosor, etc. Las propiedades que podemos utilizar son las siguientes:
font-family.Indicamos la familia de la fuente a utilizar. Sus posibles valores son los
nombres de las fuentes, pudiendo especificar un conjunto de familias. Se selecciona
la primera que se encuentra en el sistema.
Ejemplo:
BODY{
font-family:
Verdana, Arial, Helvetica, sans-serif}
font-style. Especifica el estilo de la fuente, es decir, si los caracteres irán en normal,
en itálica (cursiva) o en oblicua (un poco más inclinada que la itálica).
normal | italic | oblique
Ejemplo:
H1,H2,H3{font-style:italic}
font-weight.Especifica el peso, densidad o grosor (cantidad de espacio ocupado en
relación con el rectángulo en que se inscribe el carácter) de la fuente de caracteres
dentro de una familia de fuentes, con valores entre 100 y 900 siendo cada vez más
densos. El valor 400 equivale a normal, y el 700 a bold.
lighter | normal | bold | bolder | 100 | 200 | 300 | ...... | 900
Ejemplo:
Hojas de estilo:CSS
8
STRONG{font-weight:bolder}
font-size. Especifica el tamaño de la fuente.
XX units | % | larger | smaller | xx-small | x-small | medium | large |
x-large | xx-large
Ejemplo:
H1 {font-size: 150%}
2.3.
Propiedades del fondo
Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento.
Las propiedades que podemos utilizar son las siguientes:
background-color. Especifica el color del fondo del elemento, que puede ser un
color o la palabra reservada transparent.
transparent | Nombre Color | Valor HEX | Rgb (R %,g %,B %) | Rgb(R,
G,B)
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 también un color que se colocará debajo de la imagen,
y que asomará si la imagen no está disponible o, si lo está, detrás de sus zonas
transparentes.
none | url(dirección)
Hojas de estilo:CSS
9
Ejemplo:
H1 {background-image: white url("fondo.gif")}
background-attachment. Establece si una imagen de fondo es fija o se mueve con
el scroll del resto de la página. Sólo funciona con la etiqueta body.
scroll | fixed
Ejemplo:
body
{
background-image: url(fondo.gif);
background-attachment: scroll
}
background-repeat. Establece si una imagen si se repetirá y cómo. En Netscape
no funciona con la etiqueta body.
repeat | repeat-x | repeat-y | no-repeat
Ejemplo:
body
{
background-image: url(fondo.gif);
background-attachment: scroll
}
Hojas de estilo:CSS
10
2.4.
Propiedades de margenes y padding
Con estas propiedades especificamos los margenes de cualquier elemento y con el padding controlamos la distancia entre el borde y el contenido. Las propiedades que podemos
utilizar son las siguientes:
margin-top, margin-bottom, margin-left, margin-right. Fijamos el margen
superior, inferior, izquierdo o derecho. Con la propiedad auto el navegador un valor
adecuado dependiendo del tipo de elemento.
XX unidades | % | auto (el valor por defecto es 0)
Ejemplo:
BODY {margin-top:1cm}
margin.Mediante esta propiedad podemos especificar todos los valores de los margenes de una sola vez. Se pueden poner hasta cuatro valores, para especificar cada
uno de los margenes.
margin: ancho1 ancho2 ancho3 ancho4
Pero si só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:
BODY {margin: 1in 2in}
padding-top, padding-bottom, padding-left, padding-right. Distancia entre
el borde superior, inferior, izquierdo o derecho y el contenido.
XX unidades | %
Hojas de estilo:CSS
11
Ejemplo:
Table {padding-top: 12pt}
padding. Mediante esta propiedad podemos definir en una única propiedad los
cuatro valores anteriores. Funciona de la misma manera que la propiedad margin.
margin: ancho1 ancho2 ancho3 ancho4
Ejemplo:
H1 {padding:10%}
2.5.
Propiedades del borde
Con estas propiedades especificamos el ancho, color y estilo del área de borde. Las
propiedades que podemos utilizar son las siguientes:
border-top-width, border-bottom-width, border-left-width, border-rightwidth. Mediante estas cuatro propiedades especificamos el ancho del área de borde
por encima, debajo, a la izquierda y derecha del elemento.
thin | medium | thick | XX unidad
Ejemplo:
H1 {border-top-width:thin}
border-width. Especificamos en una única propiedad el ancho de todo el área de
borde. Funciona de la misma manera que la propiedad margin.
thin | medium | thick | XX unidad
Ejemplo:
Hojas de estilo:CSS
12
H1 { border-width: thin thick medium}
border-style. Especificamos el estilo de visualización del borde. Los posibles valores
son:
• none: ninguno, anchura cero
• dottet: punteado
• dashed: discontinuo
• solid: liso
• double: doble
• groove: hundido
• ridge: resaltado
• inset: toda la caja hundida
• outset: toda la caja resaltada
none | dottet | dashed | solid | double | groove | ridge | inset | outset
Ejemplo:
Table {border-style: double}
border-color. Especificamos el color del borde.
nombre del color | valor HEX | Rgb (R %, G %, B %) | Rgb (R,G,B)
Ejemplo:
Table {border-color: red}
border-top, border-bottom, border-left, border-right. En cada una de las
cuatro propiedades podemos especificar en conjunto todas las caracterı́sticas de
cada uno de los lados del borde: tamaño, estilo y color.
Hojas de estilo:CSS
13
anchura | estilo | color
Ejemplo:
Table {border-top: thin dashed red}
border. Mediante esta propiedad podemos especificar de forma conjunta todas las
propiedades de un borde: tamaño, estilo y color.
anchura | estilo | color
Ejemplo:
Table {border: thick double red}
2.6.
Propiedades de lista
Son propiedades que afectan a la presentación visual de las marcas de los elementos
de una lista. Las propiedades que podemos utilizar son las siguientes:
list-style-image. Reemplaza el marcador de los elementos de una lista por una
imagen.
url () | none
Ejemplo:
ol
{
list-style-image: url(blueball.gif);
}
list-style-type. Define el tipo de marcador de los elementos de una lista. Algunos
navegadores sólo soportan el valor disc.
Hojas de estilo:CSS
14
none | disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha
Ejemplo:
ul
{
list-style-type: disc
}
list-style-position. Define si el marcador se situa como parte del texto o lo mantiene a la izquierda del texto.
inside | outside
Ejemplo:
ol
{
list-style-position: inside
}
3.
Selectores avanzados:Class e ID
Estos tipos de selectores permiten la asignación de estilos de una manera independiente
de los elementos del documento. Estos selectores pueden ser usados sólos o en conjunción
con etiquetas.
El selector Class necesita una modificación en el documento html donde se va a
aplicar, es decir las etiquetas necesitan el atributo CLASS:
<P CLASS="importante">NOTA: Es necesario incluir el atributo CLASS </P>
<H3 CLASS="importante">
Hojas de estilo:CSS
15
En la hoja de estilo se debe añadir:
.importante {color:red;}
El . indica que es un selector class. Si queremos añadir clases a etiquetas concretas,
serı́a de la siguiente manera:
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 página, un serlector id siempre se
aplica a un único elemento. Un atributo ID debe ser único en el documento. Además
su sintaxis es diferente, van precedidos de un #.
#importancia{color:red;}
p#para1
{
text-align: center;
color: red
}
Para aplicarlos sobre una etiqueta es decesario el atributo ID.
<P ID="importante">NOTA: Es necesario incluir el atributo CLASS </P>
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 sólo una vez.
Hojas de estilo:CSS
16
4.
Pseudo-Clases y Pseudo-Elementos
Son clases y elementos especiales que son automá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 párrafo. Las reglas con pseudo-clases tienen
la siguiente sintaxis:
selector:pseudo-clase { propiedad: valor }
o
selector:pseudo-elemento { propiedad: valor }
Estos selectores no se deberı́an especificar con el atributo CLASS de HTML. Se pueden
usar también con selectores clases:
selector.clase:pseudo-clase { propiedad: valor }
o
selector.clase:pseudo-elemento { propiedad: valor }
4.1.
Pseudo-clases del ancla
En CSS1 sólo hay tres pseudo-clases y son asignadas al elemento A para mostrar de
diferente manera los enlaces no visitados, los activos, los visitados y cuando el ratón pasa
sobre un enlace.
A:link
{ color: red }
Hojas de estilo:CSS
17
A:active
{ color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
A:hover {}
4.2.
Pseudo-elemento primera lı́nea
Permite cambiar el estilo a la primera lı́nea de un elemento de nivel de bloque como
puede ser el párrafo. Un ejemplo podrı́a ser:
P:first-line {
font-variant: small-caps;
font-weight: bold }
4.3.
Pseudo-element primera letra
Este pseudo-elemento es utilizado para cambiar el estilo de la primera letra de un
elemento de nivel de bloque. Por ejemplo:
P:first-letter { font-size: 300%; float: left }
Hojas de estilo:CSS
18
5.
Unidades de longitud
Un valor de longitud se forma por un signo + o - opcional, seguido de un número y
de una abreviació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 siguientes unidades relativas están disponibles:
em (ems, la altura de la fuente de los elementos)
ex (x-height, altura de la letra ”x”)
px (pixels, relativa a la resolución del lienzo)
5.2.
Absolutas
Las unidades de longitud absolutas son muy dependientes del medio de salida, y son
por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas
están disponibles:
in (pulgadas; 1 pulgada=2.54 cm)
cm (centı́metros; 1 cm = 10 mm)
mm (milı́metros)
pt (puntos; 1pt = 1/72 pulgada)
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 página. Por ejemplo, con:
* {color: red}
Todos los elementos de la página tendrán como color de primer plano el rojo
Hojas de estilo:CSS
19
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 declaración debe ir antes que cualquier otra regla en la hoja de estilo.
6.3.
La regla !important
la regla !important, suplantar con sus propias reglas de estilo las especificadas por el
autor del documento.
De este modo, los usuarios con requerimientos especı́ficos pueden modificar las opciones
del creador de las páginas Web con el fin de mejorar su accesibilidad.
Los navegadores tienen opciones que permiten modificar la apariencia de las páginas
visitadas. Estas opciones constituyen de hecho la hoja de estilo del usuario. Explorer,
además de las opciones disponibles en los menúes, permite usar una hoja de estilo externa.
De este modo, el usuario obtiene la máxima flexibilidad para aplicar sus preferencias.
Probar la siguiente hoja de estilo:
*
{ visibility:
hidden
!important;}
visible
!important;
background-color:
black
!important;
background-image:
url(borrando.gif) !important;
background-repeat:
no-repeat
BODY { visibility:
background-position: 200px 120px
!important;
!important;}
Depués, editar las Propiedades de Internet de Explorer y en la opción General-Accesibilidad
indicar la posición de su hoja de estilo.
6.4.
Propiedad del cursor
Especifica el tipo de cursos que será mostrado cuando se señale un elemento.
url() | default | auto | crosshair | default | pointer | move | e-resize | ne-resize
| nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait |
help
Hojas de estilo:CSS
20
Ejemplo:
h2
{
cursor: crosshair
}
p
{
cursor : url("first.cur"), url("second.cur"), pointer
}
6.5.
Propiedades de posicionamiento
Estas propiedades permiten especificar, de manera relativa o absoluta la posición de
un elemento, su forma y especifcar lo que deberı́a pasar si el contenido de un elemento es
más grande que el area especifcada.
position. Sitúa un elemento en su posición normal, en una posición relativa con
respecto al elemento anterior o en cualquier posición fija de la página.
auto | relative | absolute
Ejemplo:
h1
{
position:absolute;
top:150px;
}
top. Especifica la situación del borde superior de un elemento.
auto | % | unidad
Ejemplo:
Hojas de estilo:CSS
21
h1
{
position:absolute;
top:150px;
}
bottom. Especifica la situación del borde inferior de un elemento.
auto | % | unidad
Ejemplo:
h1
{
position:absolute;
bottom:150px;
}
left. Especifica la situación del borde izquierdo de un elemento.
auto | % | unidad
Ejemplo:
h1
{
position:absolute;
top:150px;
left:30px;
}
right. Especifica la situación del borde derecho de un elemento.
auto | % | unidad
Hojas de estilo:CSS
22
Ejemplo:
h1
{
position:absolute;
top:150px;
right:30px;
}
clip. Especifica la forma de un elemento.
rect (top, right, bottom, left) | auto
Ejemplo:
img
{
clip: rect(10px, 5px, 10px, 5px)
}
overflow. Especifica qué sucede cuando el contenido de un elemento es mayor que
el área de visualización.
visible | hidden | scroll | auto
Ejemplo:
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
Hojas de estilo:CSS
23
z-index. Indica el orden de superposición de los elementos en el caso de que coincidan en el mismo espacio. Un elemento con un número más alto siempre se posicionará encima de un elemento con menor número.
auto | entero
Ejemplo:
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
7.
Bibliografı́a
HTML dinámico http://html.programacion.net/dinamico/tutorial/indice.htm
CSS Cascading Style Sheets, level 1 http://www.w3.org/TR/REC-CSS1
CSS Cascading Style Sheets, level 2 http://www.w3.org/TR/REC-CSS2/
Listado de propiedades soportadas por los navegadores http://www.webreview.com/style/
Traducción de la especificación CSS2: http://www.sidar.org/recur/desdi/traduc/es/css/cover.html
Hojas de estilo:CSS
24

Hojas de estilo: CSS

Transcripción

Documentos relacionados

DISE EÑO WE B HTML, , CSS Y Y JAVAS SCRIPT

Lección 9: El modelo de caja

Dossier DESARROLLO DE PÁGINAS WEB

HTML5 Lite

Descripción de puesto

Backend: Lado del servidor - Equipos Sensoriales de México