tutorial css3

Buscar

Tutorial rápido de CSS

2

Twittear

1

Recomendar

6

Siguiendo con la temática del desarrollo w eb, esta vez os traigo un pequeño tutorial de CSS, en
el que intentaré explicar las bases del lenguaje. Para seguir este tutorial necesitarás conocimientos
básicos de HTML por lo que, si no lo has hecho ya, te recomiendo leer mi Tutorial de HTML /
XHTML
CSS, de Cascading Style Sheets (hojasde estilo en cascada), es un lenguaje que se utiliza para
definir el aspecto que tendrán los documentos HTML o XHTML en pantalla.
CSS 2.1 se encuentra actualmente en estado de Candidate Recommendation (candidato a
recomendación), la segunda fase del proceso para convertirse en recomendación (que son, por
orden, Working Draft, Candidate Recommendation, Proposed Recommendation y
Recommendat ion).CSS 3 es todavía Working Draft, o borrador de trabajo. Algunas de las
características de CSS 2.1 y muchas de CSS 3 no están soportadas aún por los navegadores.
Una hoja de estilo está compuesta por reglas que especifican el aspecto de los elementos del
documento. Cada regla, a su vez, está compuesta por un selector, con el que seleccionar qué
elemento se verá afectado por la regla, y un bloque dedeclaración, con una o más declaraciones
que indican cómo se verá afectado, separadas por un punto y coma (;). Cada declaración, por
último, se compone de una propiedad y un valor, separados por dos puntos (:).

Mundo geek es una web escrita por Raúl
González Duque, dedicada principalmente a
las nuevas tecnologías y la informática.

Mundo geek
Like
6,952 people like Mundo geek.

Supongamos porejemplo que queremos que el texto de nuestra página sea de color rojo.
Podríamos usar la siguiente regla:
view plain copy to clipboard print ?

01.
02.
03.

body {
color:red;
}

body sería en este caso el selector. Es un selector muy simple, llamado de etiqueta, de elemento
o de tipo, que selecciona las etiquetas con el nombre especificado. En este ejemplo sólo
tendríamos una declaración, que ponela propiedad color (el color de la fuente) a red (rojo).

F acebook social plugin

Archivos
Acerca
Contacto
Traducciones
Wiki

Vamos a probar nuestro pequeño ejemplo. Para ello necesitaremos un pequeño documento HTML

converted by Web2PDFConvert.com

Vamos a probar nuestro pequeño ejemplo. Para ello necesitaremos un pequeño documento HTML
de prueba:
view plain copy to clipboard print ?

01.
02.03.
04.
05.
06.
07.
08.
09.
10.

"http://www.w3.org/TR/html4/strict.dtd">

Hola Mundo

Y alguna forma de indicar la hoja de estilo que queremos aplicar. Tenemos 4 formas distintas de
aplicar las reglas deuna hoja de estilo a un documento HTML. Podemos:

Insertar las reglas de estilo en el propio documento, en una etiqueta style
Insertar las declaraciones en el propio documento, en el atributo style del elemento
cuyo aspecto queramos modificar
Desde un archivo externo, usando la directiva @import de CSS dentro de la etiqueta
style

Desde un archivo externo, usando la etiqueta link
Este sería elaspecto del documento de usar la etiqueta style:
view plain copy to clipboard print ?

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.

"http://www.w3.org/TR/html4/strict.dtd">

Hola Mundo

Si utilizáramos el atributo style:
view plain copy to clipboard print ?

01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

"http://www.w3.org/TR/html4/strict.dtd">