Sie sind auf Seite 1von 15

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Capítulo: ESTILOS CSS


Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que
describe cómo se va a mostrar un documento en la pantalla, o cómo se va a
imprimir, o incluso cómo va a ser pronunciada la información presente en ese
documento a través de un dispositivo de lectura. Esta forma de descripción de
estilos ofrece a los diseñadores y desarrolladores el control total sobre estilo y
formato de sus documentos.

1 Compatibilidad con nuestros navegadores


A pesar de las recomendaciones de W3C, no todos los navegadores
muestran las hojas de estilo de la misma forma. El explorador
Microsoft Internet Explorer 3.0 fue el primero que integró hojas de
estilo y su uso se hizo más común con las versiones 4.0 y superiores
de Internet Explorer y Netscape Navigator.

Navegadores que admiten hojas de estilo:

 Microsoft Internet Explorer 3.0 (parcialmente)


 Microsoft Internet Explorer 4 x
 Microsoft Internet Explorer 5 x
 Microsoft Internet Explorer 6 x
 Netscape Navigator 4.x
 Netscape Navigator 6.x
 Netscape Navigator 7.x
 Mozilla x.x
 Firefox x.x
 Opera 5.x
 Opera 6.x
 Opera 7.x
 Camino 0.8x
 Safari 1.xx

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

2 ¿Cómo definir estilos CSS?


Aunque ya hemos trabajado de manera indirecta, al colocar estilos HTML al inicio, como también a los vínculos, pero
ahora vamos a comprender como realizarlo e inclusive mejorar nuestros diseños.

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo
están compuestas por una o más de esas reglas aplicadas a un documento HTML. La regla tiene dos partes: un
selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

 Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una
parte de “selectores”, un símbolo de “llaves de apertura ( } )”, otra parte denominada “declaración” y por
último, un símbolo de “llaves de cierre ( } )”.
 Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS, dicho selector puede ser de 4
tipos: etiqueta, id, clase, compuesto.
 Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades
CSS.
 Propiedad: permite modificar el aspecto de una característica del elemento.
 Valor: indica el nuevo valor de la característica modificada en el elemento.

Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaración
puede estar formada por un número infinito de pares propiedad/valor.

3 ¿Cómo crear estilos CSS?


Aunque ya hemos trabajado de manera
indirecta, al colocar estilos HTML al inicio,
como también a los vínculos, pero ahora
vamos a comprender como realizarlo e
inclusive mejorar nuestros diseños.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 2


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

3.1 Incluir estilos CSS en el mismo documento HTML

Veamos ahora como colocar un estilo interno, para ello debemos ubicarnos dentro de la cabecera <head></head>,
utilizamos la etiqueta <style></style>.

Veamos que parámetros podemos agregarle a dicha etiqueta <style></style>

3.2 Incluir estilos CSS externos

Denominamos estilos externos a aquellos archivos css que crearemos ya sea con un block de notas o por ejemplo
también utilizando Dreamweaver

Veamos ahora como crear un archivo css con Dreamweaver, presionamos Ctrl+N o nuevo documento

Al hacer clic en crear, se mostrara la siguiente ventana

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 3


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Simplemente lo guardaremos presionando Crtl+S, mostrándose la siguiente ventana

Si no existe la carpeta CSS


debemos crearlo, con el respecto
al nombre no hay necesidad de
colocar la extensión ya que se
colocara por defecto .css

Note ahora que se ha creado nuestro archivo

Pero todavía no se ha enlazado con nuestro archivo HTML


por el contrario están desunidos para ello debemos colocar
el siguiente código para poder “enlazarlos o unirlos”.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 4


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Quedando así

En cualquiera de los dos casos ya podemos escribir nuestro código CSS.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 5


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

3.3 Colocando código CSS

Para colocar código CSS debemos tener presente:

I.- Los tipos de estilos.

II.- Todo código css termina en punto y como (;).

III.- Primero escogemos el selector y después seguimos de dos


llaves ({ }) y entre las llaves colocamos las propiedades con sus
respectivos valores.

IV.- Si olvidamos alguna de las sugerencias anteriores no funcionara.

Los diferentes tipos de estilos que hay:

a) Estilos de etiqueta, dicho estilo solo hay que escribir el nombre de la etiqueta (selector), por ejemplo

Note que para colocar alguna propiedad


solo debemos hacer clic + barra
espaciadora y aparecerá el menú
contextual para sugerir alguna propiedad,
al igual que el valor de la propiedad.

b) Estilos de clase, dicho estilo es un estilo particularizado, es decir, solo se aplicara a un objeto o a varios
objetos en particular con el mismo estilo de clase, dicho estilo siempre empieza con el punto y el nombre de
la clase (.estilo).

c) Estilos Id, dicho estilo solo se aplicara a él o los objetos con un mismo id, el cual es un identificador. Dicho
estilo empieza con michi (#) y el nombre (#capa).

d) Estilos compuestos, este estilo no es otra cosa que la combinación de los estilos anteriores, por ejemplo si
deseamos aplicar un estilo a la etiqueta OL el cual contiene otra etiqueta pero con Id ítem, realizaremos lo
siguiente:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 6


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

e) Estilos de vinculo, dicho estilo es un estilo particular solo para el vinculo (etiqueta <a>) el cual tiene 4
estados, el cual podemos particularizar cada uno de ellos.

Nota
Aunque hay mas formas de escribir los estilos, vamos a puntualizar el objetivo de este material es
buscar iniciar en cada una de las personas que lo lea una manera amigable, e incentivar que el lector
continúe investigando.

3.4 Códigos para utilizar

Nuevamente debemos tener presente la nota anterior, entonces solo daremos unas cuantas propiedades y sus
respectivos valores, veamos el siguiente cuadro:

Lección: Colores y fondos


Propiedad Valor Descripción
color Color hexadecimal, como también Describe el color de primer plano de
puede usar las palabras “red”, “black” un documento.
background-color Color hexadecimal, como también Describe el color de fondo de los
puede usar las palabras “red”, “black” elementos.
background-image Utilizamos el valor url(ruta donde se Se usa para insertar una imagen de
halla la imagen) fondo.
background-repeat repeat-x, repeat-y, repeat, La imagen se repite de acuerdo al
no repeat valor escogido.
background-attachment Scroll( La imagen se desplaza con la La imagen de fondo fija no se moverá
página). con el texto cuando el lector desplace
Fixed( La imagen esta fija) por la página.
background-position Left, top, right, bottom el cual también Permitirá poder cambiar la posición
le podemos asignar cantidad. de la imagen de fondo.
background background: #FFCC66 Es una forma abreviada de los casos
url("butterfly.gif") no-repeat fixed anteriores.
right bottom;

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 7


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Lección: Fuente y textos


Propiedad Valor Descripción
font-size Valor en pixeles, micras, pulgas, etc. Define el tamaño de la fuente. Al
Son valores admisibles xx-small, x- especificar el tamaño de la fuente en
small, small, medium, large, x-large, y valores absolutos, el autor de la página
xx-large . se remite a la tabla de tamaños de
Por ejemplo: font-size:20px; fuentes predeterminados en la base de
datos del ordenador del usuario.
font-family Solo debemos elegir el tipo de fuente. Describe el tipo de fuente que se
Por ejemplo: font-family:”Trebuchet aplicara al texto.
MS”; Serif (Times), sans-serif (Arial,
Helvetica), cursive (Comic Sans),
fantasy (Ransom) y monospace
(Courier).
font-style Solo debemos elegir el tipo de estilo Permite elegir como valor un tipo de
para nuestro texto. fuente normal , italic o oblique
Por ejemplo: font-style:oblique;

font-variant Los posibles valores son: "normal", o Estas últimas son letras mayúsculas de
"small-caps". un tamaño mas pequeño que el
Por ejemplo: font-variant: small- normal. Si el tipo de fuente
caps; seleccionado no tiene versión smalls-
caps, el navegador visualizará el texto
en mayúsculas ordinarias.
font-weight Valores: normal, bold, bolder, lighter, El valor 'font-weight' determina el
100, 200, 300, 400, 500, 600, 700, 800, grosor de la fuente. Los valores 100 a
900. 900 indican una secuencia jerárquica,
Por ejemplo: font-weight: normal; donde cada número indica un grosor
secuencialmente mas oscuro como su
predecesor. El valor "normal" equivale
a 400. 'Bold' equivale a 700.
word-spacing, letter-spacing Los valores que admite la propiedad Las propiedades word-spacing y
word-spacing son "normal" o letter-spacing pueden ser usadas para
unidades de longitud. Los valores añadir espacio extra entre palabras o
pueden ser negativos. letras.

Igualmente, la propiedad letter-


spacing admite valor "normal" y
expresado en unidades. También
pueden ser valores negativos.
text-decoration underline. Subraya el texo asociado. La propiedad text-decoration se
overline. Dibuja un línea sobre el refiere a la decoración de un elemento
texto asociado. Es como un (aunque si el elemento carece de texto,
subrayado, pero sobre la parte la propiedad no surte efecto alguno).
superior del texto.
line-through. Tacha el texto asociado
dibujando una línea sobre el mismo.
blink. Hace que el texto asociado
parpadee.
none. No aplica ningún elemento
decorativo al texto.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 8


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

vertical-align Los posibles valores son: Esta propiedad permite controlar la


top , alinea la parte superior del posición vertical de texto o imágenes
elemento con el elemento parent mas en relación a su elemento parent.
alto en la línea.
bottom alinea la parte inferior del
elemento con el elemento parent
inferior en la línea.
text-top alinea la parte superior del
elemento con la parte superior de las
fuentes (letras) del elemento parent.
text-bottom alinea la parte inferior del
elemento con la parte inferior de la
letra o fuente del elemento parent.
baseline coloca en línea el elemento
con el elemento parent.
middle alinea el punto medio del
elemento con el punto medio del
elemento parent.
sub coloca al elemento en subscript, y
super en superscript.

text-transform Los valores son: Como se observa este estilo


uppercase. Todo el texto se transforma el texto.
transformará a mayúsculas.
lowercase. Todo el texto se
transformará a minúsculas.
capitalize. Convierta a mayúscula la
primera letra de cada palabra.
none. No se realizará ninguna
transformación sobre el texto.

text-align Los valores son alinear con margen La propiedad text-align se aplica a
izquierdo, derecho, justificado o texto dentro de un bloque (por
centrado (left, right, justify, center). Se ejemplo, texto dentro de las etiquetas
recuerda que la alineación es con el P o DIV, que forman un bloque) y
margen, no con el borde de la página determina la alineación del bloque.
text-indent Admite valores negativos. Este párrafo La propiedad text-indent se usa para
tiene este estilo. tabular (indent, sangria de texto) la
primera línea dentro de un bloque. Los
valores admitidos son unidades de
longitud, o porcentaje.
line-height Los valores se asignan mediante un La propiedad line-height (que se podía
número (si indicamos line-height: 2 especificar dentro de la propiedad
decimos al navegador que la distancia font) señala la distancia vertical entre
entre lineas ha de ser el valor font-size líneas, medida entre las bases de cada
multiplicado por 2) linea.
white-space Esta propiedad toma uno de tres La propiedad white-space permite el
valores: control de los espacios dentro del
 normal (contrae múltiples elemento
espacios en uno)
 pre (no contrae múltiples
espacios)
 nowrap (no permite el ajuste
de línea sin una etiqueta <BR>)

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 9


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

display La propiedad display se usa para definir A diferencia de la propiedad


un elemento con uno de cuatro valores: visibility que veremos al tratar
 block (muestra un salto de del posicionamiento, y que también
línea antes y después del permite ocultar elementos html,
elemento) cuando un elemento tiene la
 inline (ningún salto de línea propiedad display con valor none, es
antes o después del elemento) como no existiera, no se reseva el
 list-item (igual que block, salvo espacio que ocupaba.
que se agrega un marcador de
ítems de lista)
 none (sin visualización)

Lección: Posicionamiento de objetos

Propiedad Descripción Valores posibles Se aplica a:

position Permite posicionar el elemento absolute relative static Elementos: todos

left Posición izquierda de elemento length | percentage | auto Elementos posicionados absoluta o
relativamente

top Parte superior del elemento length | percentage | auto Elementos posicionados absoluta o
relativamente

height Altura del elemento length | auto DIV, SPAN y replaced elements

width Anchura del elemento length | percentage | auto DIV, SPAN y replaced elements

visibility Controla la visibilidad visible | hidden | inherit Elementos: todos

z-index Control de capas auto | numero (1,2,3) Elementos posicionados absoluta o


relativamente

clip Define el área visible del forma (rect...) | auto Elementos: todos
elemento

overflow Especifica el comportamiento de visible | hidden | scroll | auto Elementos: todos


superposición

Lección: Atributos de caja

Propiedad Descripción Valores posibles Se aplica a:

margin-left este atributo el tamaño del margen a la margin-left: 1cm; Elementos: todas las cajas
izquierda margin-left: 0,5in;
margin-right Se utiliza para definir el tamaño del margin-right: 5%; Elementos: todas las cajas
margin-right: 1in;

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 10


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

margen a la derecha

margin-top este atributo el tamaño del margen margin-top: 0px; Elementos: todas las cajas
arriba de la página margin-top: 10px;
margin-bottom indica el tamaño del margen en la parte margin-bottom: 0pt; Elementos: todas las cajas
de abajo de la página margin-top: 1px;
margin Podemos colocar todos los atributos margin: 2px 3px 1px 5px; Elementos: todas las cajas
juntos, left, top, right, bottom, en ese
orden
padding-left Indica el espacio insertado, por la padding-left: 0.5in; Elementos: todas las cajas
izquierda, entre el borde del elemento y padding-left: 1px;
el contenido de este. Es parecido a el
atributo cellpadding de las tablas.
padding-right Indica el espacio insertado, en este caso padding-right: 0.5cm; Elementos: todas las cajas
por la derecha, entre el borde del padding-right: 1pt;
elemento y el contenido de este.
padding-top Indica el espacio insertado, en este caso padding-top: 10pt; Elementos: todas las cajas
por arriba, entre el borde del elemento padding-top: 5px;
y el contenido de este.
padding-bottom Indica el espacio insertado, en este caso padding-bottom: 0.5cm; Elementos: todas las cajas
por abajo, entre el borde del elemento- padding-bottom: 12pt;
continente y el contenido de este.

padding Podemos colocar todos los atributos padding: 2px 3px 1px 5px; Elementos: todas las cajas
juntos, left, top, right, bottom, en ese
orden.
border-color Indica el color del borde del elemento color RGB y nombre de color Elementos: todos
del objeto al que se lo aplicamos. Se border-color: red;
puede poner colores por separado con border-color: #ffccff;
los atributos border-top-color, border-
right-color, border-bottom-color,
border-left-color.
border-style El estilo del borde, los valores significan: none | dotted | solid | double | Elementos: todos
none=ningun borde, dotted=punteado groove | ridge | inset | outset
(no parece funcionar), solid=solido, border-style: solid;
double=doble borde, y desde groove border-style: double;
hasta outset son bordes con varios
efectos 3D.
border-width El tamaño del borde del elemento al border-width: 10px; Elementos: todos
que lo aplicamos. border-width: 0.5in;
float Sirve para alinear un elemento a la none | left | right float: right; Elementos: todos
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 Si este elemento tiene a su altura none | right | left clear: right; Elementos: todas las cajas
imagenes u otros elementos alineados

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 11


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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.

3.5 Algunas soluciones a los problemas típicos que te puedes encontrar con CSS.

Vamos a encontrar algunas dificultades al utilizar estilos CSS, cuando vamos a maquetar, es por eso este subcapítulo,
el cual tiene por objetivo absolver algunas dudas, esperemos que sean satisfagan algunas de sus dudas causadas
hasta el momento.

1.- Usa un contenedor global para todas las cajas (cuando las cosas se disparan). De esta forma estas prefijando
globalmente el orden de todas las demás cajas. En referencia a este contenedor ordena el resto de las cosas
interiores. Es como si haces una cerca o valla para que nada se escape. Obviamente estamos hablando de sitios
“fijos” no elásticos.
A veces es bueno usar un contenedor hasta el cuerpo del sitio, luego dejar el pié afuera.

2.- Que flote a la izquierda (cuando las cajas se superponen)


Esta es una muy buena forma de evitar incompatibilidades entre navegadores. El uso de hacks de CSS se debía
en gran parte porque se trabajaba “centrando” las cajas. Si por ejemplo precisas poner tres cajas de 300px en un
contenedor de 900px puedes hacer lo siguiente.

3.- Calcular bien los paddings o rellenos (cuando las cajas se van abajo)
Casi todos los dolores de cabeza sobre el CSS se deben al mal uso o a la mala interpretación que se hace del
padding. Pero es más simple de lo que parece.
¿Para qué sirven los paddings o rellenos? Bueno, lo que hace es generar un “relleno” de determinada medida
para dar por ejemplo como un margen a los elementos, pero lo hace sobre el ancho en píxeles que esté prefijado.
Por ejemplo: si tenemos una caja de 300px y le aplicamos un padding de 10px en la izquierda, ahora tendremos
una caja de 310px. Esto hará desbordar al resto de las cajas y las desplazarán para abajo. Ahí es cuando el
diseñador principiante se vuelve loco. El tema es que si hay una diferencia de hasta un 1px se producirán estos
desbordes, sino fíjate cuando le incluyes bordes a tu caja, se producirán diferencias.
Lo que se debe hacer es simple, calcular bien y recordar cada ajuste que se haga de los rellenos. Ahora
tendremos que hacer una caja de 290px con paddings de 10px a la izquierda.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 12


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

4.- El pié de página con ancho fijo (cuando el pié de página enloquece):
Para entender mejor cómo funciona el uso de cajas en CSS se puede pensar en un grupo de objetos de diferentes
formas que luchan por adaptarse y ocupar el espacio que se ha prefijado. Sucede muchas veces que los pié de
página son los más problemas traen cuando se maqueta un sitio. O se va para arriba, se alinea a la izquierda, o se
desborda, etc. Lo que se debe hacer es de nuevo establecer un valor de ancho fijo. De esta forma el pié se va a
hacer su lugar del resto e irá a parar donde tiene que ir.

5.- La opacidad en los navegadores no es lo mismo, es por eso que necesitamos colocar un código el cual
funcione de manera igual en cualquier navegador, se debe tener presente que para internet explorer es de 0 a
100, pero en otros navegadores es de 0 a 1.

6.- Si buscamos redondear una capa, podemos utilizar el siguiente código

Aunque solo funcionara en mozilla, pero si deseamos que funcione en todos los navegadores podemos utilizar el
siguiente código, el cual lo puede descargar desde http://www.html.it/articoli/niftycube/index.html

En dicho sitio también tiene varios archivos más el cual podrá descargar e usar de manera gratuita. Al final de la
web hay un ‘download’ para bajaros los archivos y los ejemplos.

7.- Si buscamos aplicar degradado a una capa, podemos utilizar el siguiente código

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 13


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Aunque solo esto funcionara en mozilla nada más y similares, pero si buscamos un generador de degradados
podemos abrir la url http://css3generator.com/

8.- Si buscamos aplicar sombras a una capa podemos realizar un siguiente truco.

La idea es tener un recuadro con texto y la sombra del mismo. Para ello, utilicé tres etiquetas DIV.

Como verán, dentro del contenedor tenemos la div del texto y la sombra. La div del texto se encuentra dentro de
la div sombra. Ahora, al darle márgenes negativos al texto, se logra "desfasarlo" y lograr el efecto.

Veamos el código:

Lo aplicamos así:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 14


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

3.6 Sugerencias para el uso debido de estilos CSS

Trucos sencillos, de los que no hace falta explicar mucho pero que son muy prácticos y te harán más fácil el
trabajo y evitarán posibles errores.

- Usa colores diferentes para distinguir las cajas


- Pon una palabra descriptiva en cada caja
- Comenta el código fuente y señala los finales de los contenedores grandes
- No mezquines espacios entre los divs
- No seas un fundamentalista y no quieras escribir tu CSS con dos o tres líneas. Si no quieres errores escribe lo
necesario.
- Cuidado con el tamaño de las imágenes que insertas, estas cambian el ancho de los contenedores.
- Elige bien los nombres de cada div y trata de ser ordenado en el código.
- Si vas a trabajar con varias cajas, trata de agruparlas de a grupo, esto es muy importante. Por ejemplo un
contenedor que agrupe tres o cuatro cajas.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 15

Das könnte Ihnen auch gefallen