Conceptos Básicos de CSS 2.1 - Vol 1
Jorge Alonso Toro Hoyos
29 de Septiembre del 2010
Puede encontrar la versión actualizada en
http://jolthgs.wordpress.com/
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Conceptos Básicos de CSS 2.1 - Vol 1
by Jolth
Copyright © 2010 Jorge Toro
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Índice general
1 Partes de Una Regla CSS
2 Incluir estilos a un documento
3 Medios en CSS
4 Recomendaciones del W3C
5 Comentarios
6 Tipos de Selectores
7 Herencia
8 Patrones especiales para selectores en CSS
9 Selectores Avanzados
10 La Cascada
11 !importante
12 Orden de Cascada
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Conceptos Básico de CSS 2.1
1. Partes de una regla CSS
Una regla css consta de un selector y una declaración. A su vez la declaración esta compuesta por una
propiedad y el valor que se le asigne.
Sintaxis de una regla:
selector {declaración;}
ejemplo:
p {color: blue;}
El selector hace relación a el elemento que va ha ser afectado por esa regla, siendo el enlace entre el
documento html y la hoja de estilo(todo elemento html son posibles selectores). La declaración es la
que establece el efecto que tendrá esa regla(puede tener uno o más propiedades). Dando como resultado
que todos los párrafos para el documento tendrán como color de texto azul. color es lo que se conoce
en css como una propiedad y es una de las 115 propiedades que maneja CSS 2.1. y blue es el valor de
esta propiedad.
2. Incluir estilos a un documento
Existen tres formas para incluir estilos en documentos html. La primera es incluir un hoja de estilo
externa con el elemento <link> en la sección <head>.
<head>
<link rel=”stylesheet” type=”text/css” href=”URL” media=”tipo” />
</head>
donde nuestra URL puede ser a un recurso(hoja de estilo que tiene como extensión .css) en nuestra
sistema o fiera del mismo. Los atributos con que normalmente cuenta la etiqueta <link> son:
rel: indica la relación entre el recurso y el documento html.
type: tipo de recurso enlazado.
href: indica la URL de la hoja de estilo. Esta URL puede ser relativa o absoluta.
media: indica el medio en el que se van a aplicar los estilos, para un página en pantalla se usa screen.
Existe otra forma alternativa de incluir hojas de estilo externas con la etiqueta <style>.
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
<style type=”text/css” media=”screen”>
@import 'URL';
@import “URL”;
@import url('URL');
@import url(“URL”);
</style>
Cualquiera de las formas anteriores son validas, la reglas @import siempre preceden a cualquier otra
regla css con excepción de @charset.
Otro método es incluir nuestras reglas en el mismo documento con el elemento <style>, dentro de la
sección <head>. De esta forma los estilos se cargaran antes que la página sea visualizada.
<head>
<style type=”text/css” media=”screen”>
body {
margin: 0 auto;
background: white;
line-height: 14xp;
font-family: "dejavu sans", verdana, sans-serif;
}
</style>
</head>
por ultimo podemos usar estilos directamente en los elementos que lo permitan con el atributo
style=””. Este método no es muy recomendado porque perdemos la ventaja que nos ofrece la hojas de
estilo al mezclar el contenido con la presentación.
<p style=”color: red;”>Este párrafo cuenta con el argumento style</p>
3. Medios en CSS
Una de las características más importantes de CSS es que permita establecer distintos tipos de estilos a
diferentes dispositivos como: pantalla, móviles, impresoras, etc. Permitiendo además asignarle algunas
propiedades a cada dispositivo como paginación y saltos página a la impresión o volumen y tipo de voz
para los dispositivos de audio.
A continuación se hace una pequeña reseña de cada uno de los medio soportados por CSS.
Pantalla del PC (screen)
Impresión (print)
Reproducción de audio (speech)
Móviles/PDA,etc (handheld)
Dispositivos de presentación como proyectores (projection)
Dispositivos braille (braille)
Impresoras braille (embosed)
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Terminales de text (tty)
TV o dispositivos de resolución baja (tv)
Todos (all)
CSS cuenta con cuatro formas de identificar el dispositivo en que se deben aplicar los estilos.
a. Regla @media
Este tipos de regla especial de css permite especificar el dispositivo o dispositivos en los que se
aplicaran los estilos incluidos en dicha regla.
Sintaxis:
@media [dispositivo | dispositivo1, dispositivo2, … dispositivoN ]{
reglas CSS
}
Por ejemplo, vamos ha hacer que nuestro página tenga el tipo de letra arial cuando se imprima y
cuando vea por pantalla. Además tendrá un tamaño de letra de 12px para su versión en pantalla y 10px
cuando se imprima.
@media screen print {
body {font-family: arial}
@media screen {
body {font-size: 12px}
}
}
}
@media print {
body {font-size: 10px}
b. Reglas @import
Cuando incluimos estilos utilizando la regla @import podemos establecer el dispositivo al que se le
aplicaran las reglas.
Sintaxis:
@import url(“ULR”) dispositivo;
P. eje.
@import url(“/media/style_screen.css”) screen;
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
c. Etiqueta <link>
Es el método más común y es el que ya vimos en la sección incluir estilos a un documentos. P. ej.
<link rel="stylesheet" type="text/css" media="screen" href="pantalla.css" />
<link rel="stylesheet" type="text/css" media="print, handheld" href="esp.css" />
si no se le especifica ningún dispositivo a la etiqueta <link> se entiende que se debe aplicar a todos los
dispositivos (media=”all”).
d. Mezcla de métodos
Por ultimo CSS permite mezclar los distintos métodos en un documento para indicar los estilos a cada
dispositivo.
4. Recomendaciones del W3C
• Propiedades de fuentes
• Propiedades de color y fondo
• Propiedades de texto
• espaciado de palabras
• alineación
• Propiedades de caja
• Margen
• Borde
• Relleno
• Propiedades de clasificación
• visualización
•
listas
Ilustración de propiedades de caja:
Margen (Margin)
Borde (Border)
Relleno (Padding)
Contenido
(Content)
Relleno (Padding)
Borde (Border)
Margen (Margin)
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
Si se define una caja con el atributo width (ancho), se interpreta por el modelo de caja del W3C como la
anchura del contenido. La anchura del relleno y del borde se añaden a la anchura total del elemento.
En el modelo no puede especificarse el margen, el relleno o el borde, en la misma etiqueta, que el
ancho del contenido. El área de relleno usa el mismo fondo que el elemento en sí, mientras que las
margenes son siempre transparentes, de manera que el elemento padre se verá a través de ellos.
5. Comentarios
Los comentarios en CSS son similares al lenguaje de programación C.
Sintaxis:
/* Este es un comentario */
Los comentarios son importantes para documentar nuestras hojas de estilo y se encierran entre /* */. P.
ej.
h1 {color: red} /* selector para h1 */
6. Tipos de Selectores
a. Selector Universal: es usado para seleccionar todos los elementos de la página. El cual es indicado
por un asterisco (*). P. ej.
* {color: #000000}
b. Selector Simple: es un selector que corresponde a un elementos según su tipo y no a su posición en
la estructura del documento. P. ej. h1.
Los selectores simples pueden aparecer individualmente o agrupados separados por comas.
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
que equivale a,
h1, h2, h3 {color: red;}
Es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y
posteriormente definir las propiedades específicas de cada uno de esos elementos.
En esta caso la propiedad cambiada será el color. Las propiedades para un mismos selector se pueden
agrupar separadas por punto y coma:
p {font-family: arial, “Georgia”; text-align: center; color: blue;}
Es importante recordar que el valor de una propiedad, debe estar entre comillas cuando consta de más
de una palabra.
p {font-family: “Time New Roman”, arial, serif, “sans serif”; }
Como podemos notar los selectores simples hacen referencia a todos los elementos cuyas etiquetas
html en el documento coincidan con el valor del selector.
c. Selector Contextual: un selector contextual consiste en varios selectores simples que hace referencia
a un elemento según su posición en la estructura del documento. P. ej. p em, hace referencia al elemento
em que se encuentra dentro de p.
p em { color: red; }
haciendo referencia al elemento <em> que se encuentra dentro de <p>, no solo si <em> es precedido
por <p>.
<html>
<head>
<title>Selector Contextual</title>
<style type="text/css" media="screen">
p em { color: red; }
</style>
</head>
<body>
<p>La <a href="http://www.fsf.org/"><em>Free Software Foundation (FSF)
</em></a> Una Organización sin Ánimo de Lucro Cuyo Objetivo es
promocionar la Libertad de los Usuarios de ordenadores, y defensor de los Derechos de los
Usuarios de software libre.</p>
</body>
</html>
Copyright © 2010 Jorge Toro http://jolthgs.wordpress.com/
por consiguiente los dos elementos <em> dentro de <p> tendrán la letra en color rojo. Sin importar lo
profundo que se encuentren.
Los selectores contextuales siempre están formados por dos o más selectores separados entre sí por
espacios en blanco. El último selector indica el elemento sobre el que se aplicaran los estilos y todos
los selectores anteriores indican el lugar en el que se debe hallar el elemento.
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
En este ejemplo aplicamos los estilos al segundo párrafo <p> ya que estamos
Crear cuenta
Comentarios de: Conceptos Básicos de CSS 2.1 (0)
No hay comentarios