El CSS, conocido por los listos como Cascade Style Sheet, permite separar el diseño del contenido de una página web. Más o menos, ésto queire decir que el CSS es al HTML lo que el motor de gasolina a la carreta tirada por asnos. A ver, no es que el HTML no sirva para nada, ni mucho menos, al revés. Por mucho que se use este nuevo código, el «de siempre» no deja de usarse ni lo más mínimo.
Es decir, en HTML tenemos el diseño y en CSS el contenido. El código CSS mete en la cabecera de la página o en un fichero externo con su extensión .css y es utilísimo porque si thay que modificar una cosa en diez páginas distintas con el mismo diseño, sólo hay que cambiar el archivo .css.
El CSS funciona como una hoja de estilos y funciona más o menos así:
Selector {propiedad:valor } Esto es una declaración de estilos
Parace fácil, ¿no?. Pues no es tan fácil. Hay cuatro maneras de declarar y aplicar estilos. Se declaran en la cabecera, justo debajo de <head> y encima de <body> delimitado por lr el atributo <style>o, como decía, en un fichero externo. Como es lógico, no puede haber dos con el mismo nombre
Clase: su declaración empieza por un punto . y
Ej: .pepe {tipo: bla bla bla}
Se pueden aplicar más de una vez en cada página. Una vez que se han indicado las calses en la cabecera, se aplican sin el punto y con el atributo class
Class es un atributo HTML y vale para cualquier directiva, o sea, todas las directivas aceptan éste (<body>, <head>…
Id: La declaración empieza por #
Sólo se puede aplicar una vez en una página . Funciona igual que las clases
Redefinición de directiva
Cuando quieres que <body> o <title> o la que sea siempre sea igual, se crea un estilo para estas directivas en la declaración.
Ej: body {amrgin=»»; width=»» …}
Hay que tener cuidado. Resulta que que HTML siempre lee la útlima directiva de la página. Así que si se mete en las directivas del principio un atributo y luego un id o un class, se redefines la directiva.
Estilo en línea
Se declara con <span>: es una “directiva comodín”. La puedo meter dentro del HTML para marcar algo <span class=”destacado”> la plabra que destaco </span>. Por tanto, en la declaración tendre un .destacado { propiedad:valor }
Pseudo clases de enlace
En CSS hay varios estados para <a> que no existe en HTML
Por ejemplo, al pasar el ratón por encima
a:link {color=»red», size=»10″…} Antes de visitar el enlace
a:visited {color=»blue», size=»12″…}una vez visto
a:hover {color=»…»…} cuando ya has pasado por el enlace
a:active {color=»red», size=»10″..} cuando pinchas
Pero, lo mejor son las propiedades resumidas: con poner p, ej. Border: varios valores te los pone todos sin poner más propiedeades. Ej .pepe{border: 2px solid #000…}
Los comentarios son /* … */ al igual que los comentarios multilínea en PHP
DVIS: una vez creado el css #pepe, para que me lo pinte la página, me lo pinto así:
<div id=»pepe»> ojo que se quita el # </div>
PARA VINCULAR LA PÁGINA A UNA HOJA DE ESTILOS:
Esta siempre se hace así, es una directiva como otra cualquiera, pero un poco más larga…<link href=»estilos.css» rel=»stylesheet» type=»text/css»>
Sólo hay que crear una hoja .css; copiar todas las declaraciones de estilos y pegarlas en la hoja CSS. No hace falta poner las etiquetas <style> porque estamos ya en extensión CSS y se sobreentiende
Para maquetar CSS hay que mirar el PDF diseño_visual
Tener en cuenta que hay elementos en blqoue (div, p…) y elementos en línea (span, href,,,)
Float: se usa en las cajas para que se ubiquen donde yo les diga y el lado en el que no están queda libre para meter otras cajas u otras cosas
Muy útil crearse una caja llamada container en la que meter todo absolutamente todo y darle un tamaño fijo. Así, da igual el tampaño que tenga la ventana, que las cajas no van a cambiar de tamaño)