Hágase la luz, y se inventó el CSS

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)

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *