Fundamentos de CSS

Compilado por Andrés Felipe Gallego Aguilar  [email protected] Para contenidos educativos gratuitos visita www.afoxcp.com/aprende

¿Qué son las hojas de estilo CSS? Las hojas de estilo CSS (Cascading Style Sheets) hacen referencia a una serie de  ordenes que contienen diferentes instrucciones que facilitan la aplicación de formato a  los elementos HTML.  Los estilos se pueden aplicar para generar formato en: Los estilos se pueden aplicar para generar formato en:  1. Fuentes y Colores.  2. Distancias y Bordes.  3. Diagramación, ubicación de los elementos en la pantalla. Sin formato

Con CSS Página web

Anatomía de una regla CSS Define el elemento o elementos  a  los que se aplicará el formato.  Ej: h1. 

Selector { propiedad: valor; p p ; propiedad: valor; }

Entre las llaves de inicio y final  se encuentran una o varias  declaraciones que se encargan  de dar formato a los  elementos que estén  referenciados por el selector.  En el caso del ejemplo las  propiedades aplicarán a los  elementos que cuenten con la  etiqueta h1. 

En esta zona se publican las propiedades y los valores que se  aplicarán al selector. Ej: font‐family: Arial, Verdana, Helvética;  configuran la  familia de fuentes a utilizar. 

Tipos de declaración de hojas de estilo CSS Tipos de declaración de hojas de estilo CSS Externa Los estilos se encuentran  en un archivo externo y  y se enlazan con la página web que requiere del  formato. Con esta técnica una hoja de estilos  puede ser aplicada a un número indefinido de  páginas web.   p g Página web

Interna Los estilos se declaran al interior de las  l d l l d l etiquetas  y  ; sólo aplican  para la página seleccionada.   CSS

CSS Página web g

Página web

“Inline” Inline   Se declara el estilo usando “Style”  al  interior de una  etiqueta HTML. Ej:  Texto sans‐serif; >Texto 

Ejemplo de estilo declarado de manera interna  <meta http‐equiv="content‐type" content="text/html; charset=utf‐8" />

<style type="text/css"> h1, h2 { font‐family: sans‐serif;  color: #3366CC; }

 Primer título

…

 Segundo título 

…

/

Tercer título

…

‐ Para declarar la hoja de estilos de  manera interna se utiliza la etiqueta  <style type=“text/css”> .  ‐Luego  se crea  un selector; que  contiene diversas propiedades y valores  que  aplicarán formato al HTML.  En el  ejemplo  se aplicará un formato de texto  a las etiquetas h1 y h2.  ‐ Al final se cierra la etiqueta con  .   ‐En caso de realizar un enlace con una  hoja de estilos externa se utiliza el  siguiente código:  / /

Ti Tipos de selectores en una hoja de estilos   d l t h j d til Selector de tipo (Type Selector) Aplica el estilo a un elemento particular o etiqueta de HTML. Se utiliza la mayoría de las veces  para configurar los estilos básicos que se aplicarán a lo largo de la página web. Ej:

Etiquetas a las que se aplicará el estilo (Cuerpo, párrafo, tablas,  divisiones, lista de definiciones, listas  de viñetas y numeradas). 

Propiedades  a aplicar.  li

body, p, td, th, div, dl, ul, ol { font‐family: Tahoma, Verdana, Arial, Helvetica, sans‐serif; font‐size: font size: 1em; 1em; color: #ff0000; }

Clases (Class Selector) Permite asignar estilos individuales que puedan ser aplicados a porciones específicas de una  página web Se caracteriza porque para declarar el estilo se debe poner un punto ( ) antes del página web. Se caracteriza porque para declarar el estilo se debe poner un punto (.) antes del  nombre que lo describe. Se puede aplicar muchas veces. Ej: Declara el selector como clase. El nombre que se aplica es personalizado por lo  l l l l l b l l d l que hay que  tratar de que sea descriptivo y que identifique el tipo de formato  que aplicará. No debe contener espacios ni caracteres extraños. 

.textoVerde { color:#00ff00; }

Cuando se vaya a declarar la clase se debe  hacer al interior  de la etiqueta en la que se  quiera aplicar el estilo.  q p

 El texto que se ponga sobre esta línea  tendrá el color verde

tendrá el color verde 

ID (ID Selector) Este tipo de selectores se utilizan para seleccionar un elemento en particular, en vez de un  grupo de elementos Para que funcione el elemento al que se va a aplicar debe contar con el grupo de elementos. Para que funcione, el elemento al que se va a aplicar debe contar con el  atributo id (Esta ID sólo debe aparecer una vez en una página web).  Para crearla se debe usar  el símbolo # antes del nombre personalizado. Ej: 

A lineadetexto >A este este párrafo en particular se le ha asignado en particular se le ha asignado un  un identificador con el nombre de “lineadetexto”. 

#lineadetexto { color: #FFFFFF; } { color: #FFFFFF; }

Este estilo se aplicará al párrafo que contenga el id lineadetexto.  

Pseudo‐Clases Son unas clases especiales de HTML, que se refieren a algunos estados especiales del  elemento, las pseudoclases, igual que los pseudoelementos, se escriben de la siguiente  manera: objeto:pseudoclase { propiedad: valor; } Las principales pseudoclases son para el objeto A (vínculo), y son las siguientes: link  ‐ Nos dice el estilo de un enlace que no ha sido visitado. link Nos dice el estilo de un enlace que no ha sido visitado visited ‐ Nos dice el estilo de un enlace que ha sido visitado. active ‐ Nos dice el estilo de un enlace que está siendo pulsado hover ‐ Nos dice el estilo de un enlace sobre el que está pasando el ratón. Para que la pseudo clase de la etiqueta  funcione correctamente el orden de las  declaraciones debe ser el siguiente:  a:link {color: #FF0000}  a:visited {color: #00FF00}  a:hover {color: #FF00FF}  a:active {color: #0000FF}

Atributos que pueden aplicarse Atributos que pueden aplicarse Nombre del atributo

Posibles valores

Ejemplos

FUENTES ‐ FONT color 

color: #009900;  color: red; 

valor RGB o nombre de color 

Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los nombres de colores son admitidos en  el estándar, es aconsejable entonces utilizar el valor RGB.  font‐size 

xx‐small | x‐small | small | medium | large | x‐large | xx‐large Unidades de CSS 

font‐size:12pt;  font‐size: x‐large; 

Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.  font‐family font‐family 

serif | sans‐serif | cursive | fantasy | monospace  Todas las fuentes habituales 

font‐family:arial,helvetica;  font‐family: fantasy; 

Con este atributo indicamos la familia de tipografía del texto. Los primeros valores son genéricos, es decir, los exploradores las  comprenden y utilizan las fuentes que el usuario tenga en su sistema. También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se utilizan  comillas para que se entienda bien comillas para que se entienda bien.  font‐weight 

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |  800 | 900 

font‐weight:bold;  font‐weight: 200; 

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.  Normal y 400 son el mismo valor, así como bold y 700 font‐style:normal;  font‐style  normal | italic | oblique  font‐style: italic;  Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar al italic. 

Tabla recuperada de http://www.desarrolloweb.com/articulos/186.php

PÁRRAFOS ‐ TEXT line‐height 

line‐height: 12px;  line‐height: normal; 

normal y unidades CSS 

El alto de una línea,y por tanto, el espaciado entre líneas. Es una de esas características que no se podian mofificar utilizando HTML.  text‐decoration 

none | [ underline || overline || line‐through ] 

text‐decoration: none;  text‐decoration: underline; 

Para establecer la decoración 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 alineación 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 

text‐indent: 10px;  text‐indent: 2in; 

Unidades CSS 

Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.  text‐transform 

text‐transform: none;  text‐transform: capitalize; 

capitalize | uppercase | lowercase | none 

Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabrs, todo en mayúsculas o minúsculas.  FONDO BACKGROUND FONDO ‐ Background‐color 

background‐color: green;  background‐color: #000055; 

Un color, con su nombre o su valor RGB 

Sirve para indicar el color de fondo de un elemento de la página. 

Background‐image 

El nombre de la imagen con su camino relativo o absoluto 

background‐image: url(mármol.gif) ;  background‐image: url(http://www.x.com/fondo.gif) 

Colocamos con este atributo una imagen de fondo en cualquier elemento de la página,. Colocamos con este atributo una imagen de fondo en cualquier elemento de la página,. Tabla recuperada de http://www.desarrolloweb.com/articulos/186.php

Bibliografía MULLER, PETER. Css un juego de niños, crea tu sitio web. PC‐Cuadernos  técnicos. Barcelona.  http://www pc cuadernos com http://www.pc‐cuadernos.com ANDREW, RACHEL. The CSS anthology . Sitepoint Pty Ltda. 2007. 414 p. 

Webgrafía http://www.webtaller.com/construccion/lenguajes/css/lecciones/clases_pseudoclases_y_pseu doelementos_en_css.php http://www.tizag.com/cssT/reference.php