Actualizado el 21 de Marzo del 2018 (Publicado el 26 de Febrero del 2018)
1.343 visualizaciones desde el 26 de Febrero del 2018
276,3 KB
14 paginas
Creado hace 22a (02/05/2002)
Cursos y Tutoriales / Stratos-ad.com
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García
Índice.
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García.
· Capítulo 1. Introducción.
· Capítulo 2. Sintaxis y unidades de medida.
· Sintaxis.
· Unidades de medida CSS.
· URLs.
· Capítulo 3. Propieda des de hojas de estilo.
· Tabla de propiedades.
· Capítulo 4. Incorporación y vinculación.
· Hojas de estilo incorporadas.
· Hojas de estilo vinculadas e importadas.
· Capítulo 5. Estilos en línea, prioridad y herencia.
· Estilos en línea.
· Combinar reglas de hoja de estilo.
· Herencia en las hojas de estilo.
· Capítulo 6. Empleo de las hojas de estilo.
· Utilizando clases.
· Aplicando las clases a los enlaces
· Aplicar una imagen como fondo de la página.
· Capítulo 7. Empleo de las hojas de estilo (2).
· Márgenes (margin).
· Borde (border).
· Fuentes (font).
· Capítulo 8. Usar un estilo predeterminado según el navegador.
· Como resolverlo.
1
Cursos y Tutoriales / Stratos-ad.com
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García
Capítulo 1.
Introducción.
Si has creado alguna página web, habrás podido comprobar lo limitado del HTML a la hora de
formatear una página. Los trucos con las tablas, los espacios en blanco ( ) y los gifs
transparentes no solucionan todos estos problemas y no impiden que la página se vea de
forma diferente según el navegador.
El Cascading Style Sheets (CSS) es un componente de HTML dinámico, que especifica las
características de formato de la página, así como el color de la fuente, el espaciado entre
letras, los márgenes o la imagen de fondo, que pueden aplicarse a una o a un grupo de
páginas.
Se puede crear hojas de estilos en el mismo código de la página HTML o en un archivo
independiente, y luego enlazarlo desde la página, siendo el método más recomendable este
último, ya que una simple modificación de la hoja de estilos provocaría el cambio en todas
nuestras páginas. De otra forma tendríamos que modificar página a página, lo que supone una
indudable pérdida de tiempo.
Y lo mejor de todo, tanto Internet Explorer como Navigator desarrollan una compatibilidad
bastante alta con la especificación de hoja de estilo.
En estas páginas se ofrecen argumentos y ejemplos para facilitar la comprensión de los
fundamentos de Cascading Style Sheets (CSS). No se pretende estudiar en profundidad todos
los aspectos de esta tema, ya que para esto se necesitaría un libro entero.
2
Cursos y Tutoriales / Stratos-ad.com
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García
Capítulo 2.
Directivas y estructura de un documento HTML.
Sintaxis
Para la correcta utilización de las hojas de estilo es preciso seguir unas sencillas reglas
sintácticas para definirlas.
Para definir un estilo debemos indicar el atributo (color, font-size, text-decoration...) seguido de
dos puntos y el valor que deseemos asignar. Se pueden definir varios atributos separados por
punto y coma.
El estilo de una etiqueta se forma con la etiqueta seguida de la lista de atributos encerrados
entre llaves.
Ejemplo:
BODY {background: #696969; color : silver; font-size: 14px; text-align: left;}
Los distintos valores que se pueden asignar a los atributos de estilo se denominan "Unidades
de medida CSS".
Unidades de medida CSS
Unidades de longitud
Un valor de longitud está formado por un signo "+" o "-" opcional, y a continuación un
número seguido por dos letras que conforman la abreviatura que hace referencia a una
unidad.
Ejemplo: 1.3em (1.3 em no seria válido).
El valor "0" no necesita identificador de unidad.
Relativas:
· em (ems, altura de la fuente actual)
· ex (x-height, altura de la letra "x" de la fuente actual)
· px (pixels, relativo a la resolución de pantalla)
Absolutas:
· in (pulgadas; 1in=2.54cm)
· cm (centímetros; 1cm=10mm)
· mm (milímetros)
· pt (puntos; 1pt=1/72in)
· pc (picas; 1pc=12pt)
Unidades de porcentaje
Un valor de porcentaje está formado por un signo "+" o "-" opcional, y a continuación un
número seguido por el signo "%".
3
Cursos y Tutoriales / Stratos-ad.com
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García
Ejemplo: 20% (20 % no seria válido).
Unidades de porcentaje
Un valor de color está formado por un color (aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, and yellow) o la especificación numérica
RGB del color.
Estas son 4 maneras válidas de indicar el color:
· #rrggbb (ej, #00cc00)
· #rgb (ej., #0c0)
· rgb(x,x,x) dónde x es un entero entre 0 y 255 (ej, rgb(0,204,0))
· rgb(y%,y%,y%) dónde y es un número entre 0.0 y 100.0 (ej, rgb(0%,80%,0%))
Todos los ejemplos expresan el mismo color.
URLs
La URL se usa cuando el valor que queremos referenciar es un archivo. La URL puede ir
opcionalmente entre comillas simples (') o dobles (").
Paréntesis, comas, espacios, comillas simples y dobles, deben ir precedidas de la barra "\"
(backslash). La URL siempre será interpretada de forma relativa al directorio en el que se
encuentre la hoja de estilo, y no al archivo HTML que la referencia.
Ejemplos:
BODY { background: url(fondo.gif) }
BODY { background: url(http://www.stratos -ad.com/fondo.gif) }
BODY { background: url( fondo.gif ) }
BODY { background: url("fondo.gif") }
BODY { background: url(\"fondo\".png) }
4
Cursos y Tutoriales / Stratos-ad.com
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García
Capítulo 3.
Propiedades de hojas de estilo.
Tabla de propiedades
A continuación se muestran las propiedades de hojas de estilo, se dividen fuente, texto, fondo,
clasificación y marco o caja (margin, padding y border):
Fuente <Font>
Atributo
font-family
font-style
font-variant
font-weight
font-size
Texto <Text>
Atributo
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-align
line-height
Valores
: arial | sans-serif | helvetica | verdana...
: normal | italic | oblique
: normal | small-caps
: normal | bold | bolder | lighter | 100..500..900
: xx-small | x-small | small | medium | large | x-large | xx-large
Valores
: normal y unidades de medida CSS
: normal y unidades de medida CSS
: none | [ underline || overline || line-through ]
: baseline | sub | super | top | text-top | middle
: capitalize | uppercase | lowercase | none
:
left | right | center | justify
: normal y unidades de medida CSS
Fondo <Background>
Atributo
color
Valores
: color, nombre o valor RGB
background-color
: color, nombre o valor RGB
background-image
: URL - nombre de la imagen con path relativo o absoluto
background-repeat
:
repeat-x | repeat-y | no-repeat | repeat
background-attachment
: scroll | fixed
background-position
:
top | center | bottom | left | right | unidades de medida CSS
Clasificación
Atributo
display
white-space
list-style-type
list-style-image
list-style-position
Valores
: block | inline | list-item | none
: normal | pre | nowrap
: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha
: URL - nombre de la imagen con path relativo o absoluto
:
inside | outside
.
.
.
.
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
5
Cursos y Tutoriales / Stratos-ad.com
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García
Marco <Box>
Atributo
margin-top
margin-right
margin-bottom
margin-left
margin
padding-top
padding-right
Valores
: unidades de medida CSS
: unidades de medida CSS
: unidades de medida CSS
: unidades de medida CSS
: unidades de medida CSS
: unidades de medida CSS
: unidades de medida CSS
padding-bottom
: unidades de medida CSS
padding-left
padding
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-color
border-style
border-top
border-right
border-bottom
border-left
border
width
height
float
clear
: unidades de medida CSS
: unidades de medida CSS
:
:
:
:
:
thin | medium | thick | unidades de medida CSS
thin | medium | thick | unidades de medida CSS
thin | medium | thick | unidades de medida CSS
thin | medium | thick | unidades de medida CSS
thin | medium | thick | unidades de medida CSS
: color, nombre o valor RGB
: none | dotted | dashed | solid | double | groove | ridge
: none | dotted | dashed | solid | double | groove | ridge
: none | dotted | dashed | solid | double | groove | ridge
: none | dotted | dashed | solid | double | groove | ridge
: none | dotted | dashed | solid | double | groove | ridge
: none | dotted | dashed | solid | double | groove | ridge
: auto | unidades de medida CSS
: auto | unidades de medida CSS
:
:
left | right | none
left | right | none | both
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
Para trabajar de forma eficiente con hojas de estilo es preciso disponer de una tabla con los
distintos valores y atributos.
6
Cursos y Tutoriales / Stratos-ad.com
Curso de Hojas de Estilo (Cascading Style Sheets) de José Carlos García
Capítulo 4.
Incorporación y vinculación.
Hojas de estilo incorporadas
Cuando insertamos nuestra hoja de estilo en el código HTML de la página en cuestión, este
debe ir delimitado por dos etiquetas <ST
Comentarios de: Curso de Hojas de Estilo (Cascading Style Sheets) (0)
No hay comentarios