PDF de programación - Tutorial de CSS: Cascading Style Sheets

Imágen de pdf Tutorial de CSS: Cascading Style Sheets

Tutorial de CSS: Cascading Style Sheetsgráfica de visualizaciones

Publicado el 14 de Enero del 2017
1.049 visualizaciones desde el 14 de Enero del 2017
141,1 KB
15 paginas
Creado hace 19a (08/10/2004)
Tutorial de CSS: Cascading Style Sheets

Tutorial de CSS: Cascading Style Sheets

(C)opyLeft 2004, Toad

Contenidos

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Presentación
Antes de Empezar
Documentos Estructurados
El estándar CSS y navegadores
Qué NO es CSS
Empecemos
Identificadores y Clases
Empezando con Estilos
Capas
Enlaces

XHTML válido

CSS válido

Presentación

Bienvenido a este tutorial de CSS, el lenguaje de hojas de estilo usado en páginas web. Este
tutorial pretende hacer una introducción a este lenguaje, métodos para separar estilo de
contenido, etc.
Se trata de introducir los conceptos, propiedades y estilos básicos de este lenguaje para que
después cada uno haga sus propios diseños.

Normalmente la mayoría de manuales de creación y diseño de páginas web que hay en
Internet, explican sistemas y métodos de HTML para dar formato tales como las etiquetas
<font>, diseño con tablas, etc.

Con la llegada del CSS no sólo estos "antiguos" métodos están "desfasados", sino que son
bastante más complicados de utilizar y mucho menos accesibles (como para navegadores en
modo texto, reproductores orales, robots...).

Lo ideal sería que en los lenguajes de estructuración como HTML no incluyésemos nada
acerca del estilo de los elementos, sino de su estructura.
Es decir, en el documento HTML en lugar de decir "esto lo quiero a tamaño 24 y en cursiva,
esto en rojo" lo mejor es estructurar el documento: "esto es un encabezado, esto una lista
ordenada, esto un párrafo" sin incluír ningún elemento de diseño y presentación.
Despues, creamos un documento CSS en el que sí "diseñamos" cada parte del documento,
incluyendo colores, posición, bordes y demás adornos.

Las ventajas son evidentes: un navegador o sistema en modo texto o que no soporte CSS, se
quedará con el documento HTML con el contenido estructurado.
Pero los que soporten CSS podrán ver el documento con todo sus estilos, adornos, etc.

1 de 15

Tutorial de CSS: Cascading Style Sheets

También hay más ventajas, como el hecho de poder incluír la misma hoja de estilos en varias
páginas HTML, lo que es muy cómodo y útil.
De esta manera podremos —por ejemplo— cambiar la fuente de los párrafos de dieciocho
páginas con sólo editar un archivo; cosa que sería mucho más compleja si hubiésemos usado
las viejas etiquetas como <font>.

Este manual asume que se tienen conocimientos básicos en cuanto a HTML, estructuración de
contenidos, párrafos, etc.
De todas formas también veremos algunos enlaces interesantes sobre manuales de HTML, y
más.

Antes de Empezar

Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML.

De entre las versiones varias de HTML yo te recomiendo el XHTML ya que es el "futuro" del
HTML y el más claro.
Mira los siguientes enlaces, altamente recomendados.

Tutorial de XHTML, por BenKo
HTML correcto: cómo hacer buenas páginas web, por Daniel Clemente

Documentos Estructurados

Para poder aplicar cómodamente un estilo CSS a un documento HTML, éste —como hemos
visto antes— debe estar bien estructurado; es decir, cabeceras, párrafos y demás.

Como en este manual se parte de la base de que ya se tienen conocimientos de HTML, sólo
veremos un ejemplo:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Mi documento</title>
</head>
<body>
<h1>Encabezado del documento</h1>
<h2>Segundo encabezado</h2>
<div id="contenido">
<p>Esto es un párrafo</p>
<p>Esto otro párrafo</p>
</div>
<div id="final">
<p>Final del documento</p>
</div>
</body>
</html>

Como se puede ver en la parte de color verde, hemos separado encabezados, párrafos y
marcado las secciones "contenido" y "final".
Ésto nos servirá para diferenciarlas a la hora de aplicarle un CSS.

Si quieres puedes ver cómo quedaría. Como vés, el navegador le aplicará a la estructura una
serie de estilos "predeterminados" que por supuesto podremos anular o modificar con CSS.

2 de 15

Tutorial de CSS: Cascading Style Sheets

El estándar CSS y navegadores

CSS es un estándar-recomendación libre del W3C; con unas especificaciones que los
navegadores que soporten CSS deberían de implementar.

Sin embargo algún navegador como Microsoft Internet Explorer se salta "a la torera" algunas
de estas especificaciones y a veces hace lo que "le dá la gana" en vez de lo que debería hacer
según el estándar.

Es por esto por lo que no es nada recomendable diseñar CSS basándose en el resultado que se
obtiene en este navegador, ya que si te fías de él probablemente estés en realidad creando
unos verdaderos churros.

Por supuesto sí es posible hacer CSSs que se vean bien tanto en el IE como en los navegadores
que respetan los estándares, pero a veces hay que recurrir a "trucos" o cosas raras o
no-estándares.

Aparte, el IE es un navegador obsoleto. Por ejemplo no soporta XHTML por lo que por ejemplo
no podrás leer este tutorial desde el IE.

Cualquier navegador decente (Mozilla, Safari, Opera, etc.) te servirá perfectamente, aunque
yo te recomiendo Mozilla Firefox por ser multiplataforma, ligero y soporta muy bien el CSS.

Qué NO es CSS

Si lo que pretendes es cambiar el color de la barra de desplazamiento y otras idioteces, que
sepas que no son para nada estándar ni CSS, aparte de molestar y de dar mala imágen a la
página.

Después de estos capítulos de teoría ya podemos empezar con la "práctica" :-)

Empecemos

Bien, vamos a ver la sintaxis básica de CSS y qué podemos hacer con él.

Antes de nada, decir que un archivo CSS es independiente del archivo HTML, y suele tener
extensión .css.

Para incluír un archivo CSS a una página HTML o XHTML se incluye un código como este en
<head>:
<link rel="stylesheet" title="Nombre del CSS" type="text/css" href="estilo.css">

Si estás usando XHTML recuerda cerrar la etiqueta <link>

Bien, ahora veremos cómo hacer los archivos .css:

Redefinir una etiqueta HTML

Si lo que queremos es dar formato o redefinir una etiqueta HTML, ésta es la sintaxis:

3 de 15

Tutorial de CSS: Cascading Style Sheets

etiqueta {
<estilos CSS>
}

Como ves, los contenidos se agrupan entre llaves o corchetes :-) En "etiqueta" pondríamos el
nombre de la etiqueta (por ejemplo "p", "div"...) pero sin los signos <> .

También podemos redefinir varias etiquetas a la vez, separándolas por comas:
etiquetauno,etiquetados,etiquetatres {
<estilos CSS>
}

Redefinir una etiqueta "hija" de otra etiqueta

Esto nos sirve para definir etiquetas que son "hijas" (es decir, que dependen de y están dentro
de otras etiquetas como el caso de "li" que puede estar dentro de "ol" y "ul").
padre>hija {
<estilos CSS>
}

Claro; en este caso se aplicarían los estilos a las etiquetas "hija" sólo si son "hijas" de "padre".

Redefinir etiquetas "dentro" de otras etiquetas

Este caso muy parecido al anterior, serviría para aplicar estilos CSS a "etiqueta" sólo si está
dentro de "contenedor". (como por ejemplo un span dentro de un p, etc.).
contenedor etiqueta {
<estilos CSS>
}

Identificadores y Clases

En el apartado anterior veíamos como redefinir etiquetas HTML, pero a veces tenemos varias
etiquetas del mismo tipo pero queremos aplicar diferentes estilos según donde estén.

Para esto usamos los identificadores y las clases.

La principal diferencia entre ellos es que los IDs tienen que ser únicos en todo el documento
HTML mientras que las clases pueden repetirse en varias etiquetas.
Los IDs se suelen usar mucho con etiquetas "neutras" como div y span para marcar las
diferentes partes del documento y después aplicar diferentes estilos a cada una.

Incluír IDs y clases en un documento HTML

Se hace con los parámetros id y class respectivamente que se pueden aplicar a cualquier
etiqueta:
<div id="capitulodos">
<p>Párrafo uno</p>
<p class="parrafoverde">Párrafo dos</p>
</div>

En este ejemplo "capitulodos" sería una sección única marcada en el documento en la cual
podemos aplicar un estilo concreto; y el estilo de la clase "parrafoverde" se aplicaría a esa

4 de 15

Tutorial de CSS: Cascading Style Sheets

etiqueta "p" en este caso pero podríamos aplicarlo a más etiquetas si queremos.

Aplicar estilos a estos IDs y clases

Para aplicar estilos CSS a identificadores esta es la sintaxis CSS:
#identificador {
<estilos CSS>
}

Como vemos, el nombre del identificador se precedería por una almohadilla (#) y los estilos
CSS se aplicarían a la sección del documento con ese identificador.

Por supuesto podemos combinar esto con lo que hemos visto en el capítulo anterior :-) . Por
ejemplo, para aplicar un estilo en concreto a las etiquetas "etiqueta" dentro del ID
"identificador":
#identificador etiqueta {
<estilos CSS>
}

Para aplicar estilos a clases es parecido pero con un punto (.) en vez de almohadilla. Por
ejemplo:
.clase {
<estilos CSS>
}

Con eso aplicaríamos los estilos a las etiquetas con clase "clase".

También podemos hacer como antes, combinar lo que hemos visto en el capítulo anterior.
Y además también podemos aplicar los estilos de la clase sólo a una determinada etiqueta:
etiqueta.clase {
<estilos CSS>
}

En este caso sólo se aplicaría el estilo a las etiquetas "etiqueta" con clase "clase". No a otras
etiquetas aunque tengan la misma clase.

Empezando con Estilos

Hasta ahora hemos visto cómo redefinir e incluír estilos, pero nos hemos limitado a poner
<estilos CSS> donde deberían ir las definiciones de los estilos.

Ahora veremos qué estilos podemos definir, empezando por los básicos :-)
Antes de nada, decir que la sintaxis para estos atríbutos es:
atributo: valor;

Los atributos siempre se separan por punto y coma, y despues del nombre se pone dos puntos
(no igual, es un error típico al confundirse con el HTML).

Texto: fuente, familia, color, decoración, estilo...

Bien, empecemos por la fuente.
La forma básica de declarar un tipo de letra es:

5 de 15

Tutorial de CSS: Cascading Style Sheets

font-family: <fuente>;

Bien, ahora ve
  • Links de descarga
http://lwp-l.com/pdf301

Comentarios de: Tutorial de CSS: Cascading Style Sheets (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad