Beruflich Dokumente
Kultur Dokumente
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.
Veamos ahora como colocar un estilo interno, para ello debemos ubicarnos dentro de la cabecera <head></head>,
utilizamos la etiqueta <style></style>.
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
Quedando así
a) Estilos de etiqueta, dicho estilo solo hay que escribir el nombre de la etiqueta (selector), por ejemplo
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:
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.
Nuevamente debemos tener presente la nota anterior, entonces solo daremos unas cuantas propiedades y sus
respectivos valores, veamos el siguiente cuadro:
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.
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>)
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
clip Define el área visible del forma (rect...) | auto Elementos: todos
elemento
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;
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
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.
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.
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.
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
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í:
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.