SISTEMAS DIGITALES

Hoja de Estilos
en Cascada.

ING. CARLOS ALBERTO ZENIL PREZ

 SISTEMAS DIGITALES

QU ES CSS?
CSS es un lenguaje de hojas de estilos creado
para controlar el aspecto o presentacin de los
documentos electrnicos definidos con HTML y
XHTML. CSS es la mejor forma de separar los
contenidos y su presentacin y es imprescindible
para crear pginas web complejas.
Una vez creados los contenidos, se utiliza el
lenguaje CSS para definir el aspecto de cada
elemento: color, tamao y tipo de letra del texto,
separacin horizontal y vertical entre elementos,
posicin de cada elemento dentro de la pgina,
etc.
ING. CARLOS ALBERTO ZENIL PREZ
 SISTEMAS DIGITALES

GLOSARIO BSICO
CSS define una serie de trminos que
permiten describir cada una de las partes
que componen los estilos CSS. El siguiente
esquema muestra las partes que forman un
estilo CSS muy bsico:

ING. CARLOS ALBERTO ZENIL PREZ

 SISTEMAS DIGITALES

LOS DIFERENTES TRMINOS SE DEFINEN A CONTINUACIN:

Regla: cada uno de los estilos que componen una hoja de estilos
CSS. Cada regla est compuesta de una parte de "selectores", un
smbolo de "llave de apertura" ({), otra parte denominada
"declaracin" y por ltimo, un smbolo de "llave de cierre" (}).

Selector: indica el elemento o elementos HTML a los que se aplica

la regla CSS.

Declaracin: especifica los estilos que se aplican a los elementos.

Est compuesta por una o ms propiedades CSS.
Propiedad: caracterstica que se modifica en el elemento
seleccionado, como por ejemplo su tamao de letra, su color de
fondo, etc.

Valor: establece el nuevo valor de la caracterstica modificada en

el elemento.
ING. CARLOS ALBERTO ZENIL PREZ
 SISTEMAS DIGITALES

SELECTORES.
Para crear diseos web profesionales, es imprescindible
conocer y dominar los selectores de CSS. Como se vio en el
captulo anterior, una regla de CSS est formada por una parte
llamada "selector" y otra parte llamada "declaracin".

La declaracin indica "qu hay que hacer" y el selector indica "a

quin hay que hacrselo". Por lo tanto, los selectores son
imprescindibles para aplicar de forma correcta los estilos CSS
en una pgina.

A un mismo elemento HTML se le pueden aplicar varias reglas

CSS y cada regla CSS puede aplicarse a un nmero ilimitado de
elementos. En otras palabras, una misma regla puede aplicarse
sobre varios selectores y un mismo selector se puede utilizar en
varias reglas.
ING. CARLOS ALBERTO ZENIL PREZ
 SISTEMAS DIGITALES

SELECTOR UNIVERSAL.
Se utiliza para seleccionar todos los elementos de la
pgina. El siguiente ejemplo elimina el margen y el
relleno de todos los elementos HTML (por ahora no es
importante fijarse en la parte de la declaracin de la
regla CSS):

*{ margin: 0; padding: 0;}

El selector universal se indica mediante un asterisco (*).

A pesar de su sencillez, no se utiliza habitualmente, ya
que es difcil que un mismo estilo se pueda aplicar a
todos los elementos de una pgina.

ING. CARLOS ALBERTO ZENIL PREZ

 SISTEMAS DIGITALES

SELECTOR DE TIPO O ETIQUETA.

Selecciona todos los elementos de la pgina cuya

etiqueta HTML coincide con el valor del selector. El
siguiente ejemplo selecciona todos los prrafos de
la pgina:

p { ...}

Para utilizar este selector, solamente es necesario

indicar el nombre de una etiqueta HTML (sin los
caracteres < y >) correspondiente a los elementos
que se quieren seleccionar.

ING. CARLOS ALBERTO ZENIL PREZ

 FUENTES - FONT

color valor RGB o nombre de color color: #009900;

color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No todos los nombres
de colores son admitidos en el estndar, es aconsejable entonces utilizar el valor RGB.
font-size xx-small | x-small | small | font-size:12pt;
medium | large | x-large | xx- font-size: x-large;
large
Unidades de CSS
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud.
font-family serif | sans-serif | cursive | font-family:arial,helvetica;
fantasy | monospace font-family: fantasy;
Todas las fuentes habituales
Con este atributo indicamos la familia de tipografa del texto. Los primeros valores son genricos, es
decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.
Tambin se pueden definir con tipografas normales, como ocurra en html. Si el nombre de una
fuente tiene espacios se utilizan comillas para que se entienda bien.
font-weight normal | bold | bolder | lighter | font-weight:bold;
100 | 200 | 300 | 400 | 500 | font-weight: 200;
600 | 700 | 800 | 900
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total
libertad.
Normal y 400 son el mismo valor, as como bold y 700.
font-style normal | italic | oblique font-style:normal;
font-style: italic;
Es el estilo de la fuente, que puede ser normal, itlica u oblcua. El estilo oblique es similar al italic.
 PRRAFOS - TEXT

line-height normal y unidades CSS line-height: 12px;

line-height: normal;

El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas caractersticas que no
se podian mofificar utilizando HTML.

text-decoration none | [ underline || overline text-decoration: none;

|| line-through ] text-decoration: underline;

Para establecer la decoracin de un texto, es decir, si est subrayado, sobrerayado o tachado.

text-align left | right | center | justify text-align: right;
text-align: center;

Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de estilo
permiten el justificado de texto, aunque recuerda que no tiene por que funcionar en todos los
sistemas.
text-indent Unidades CSS text-indent: 10px;
text-indent: 2in;

Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y novedosa.
text-transform capitalize | uppercase | text-transform: none;
lowercase | none text-transform: capitalize;

Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas de todas
las palabrs, todo en maysculas o minsculas.
 FONDO - BACKGROUND
Background-color Un color, con su nombre o su background-color: green;
valor RGB background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la pgina.
Background-image El nombre de la imagen con su background-image:
camino relativo o absoluto url(mrmol.gif) ;
background-image:
url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina
BOX - CAJA
Margin-left Unidades CSS margin-left: 1cm;
margin-left: 0,5in;
Indicamos con este atributo el tamao del margen a la izquierda
Margin-right Unidades CSS margin-right: 5%;
margin-right: 1in;
Se utiliza para definir el tamao del margen a la derecha
Margin-top Unidades CSS margin-top: 0px;
margin-top: 10px;
Indicamos con este atributo el tamao del margen arriba de la pgina
Margin-bottom Unidades CSS margin-bottom: 0pt;
margin-top: 1px;
Con el se indica el tamao del margen en la parte de abajo de la pgina
Padding-left Unidades CSS padding-left: 0.5in;
padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de
este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
 Padding-right Unidades CSS padding-right: 0.5cm;
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido
de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
Padding-top Unidades CSS padding-top: 10pt;
padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este.
Padding-bottom Unidades CSS padding-right: 0.5cm;
padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de
este.
Border-color color RGB y nombre de color border-color: red;
border-color: #ffccff;
Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se puede poner colores por
separado con los atributos border-top-color, border-right-color, border-bottom-color, border-left-color.
Border-style none | dotted | solid | double | border-style: solid;
groove | ridge | inset | outset border-style: double;
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar),
solid=solido, double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D.
border-width Unidades CSS border-width: 10px;
border-width: 0.5in;
El tamao del borde del elemento al que lo aplicamos.

float none | left | right float: right;

Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho
elemento. Igual que el atributo align en imagenes en sus valores right y left.
clear none | right | left clear: right;
Si este elemento tiene a su altura imgenes u otros elementos alineados a la derecha o la izquierda, con el
atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos a el lado que
indiquemos.