PDF de programación - Curso de CSS

Curso de CSS - CEF NAC







www.ceformativos.com



1

Curso de CSS - CEF NAC


Índice

Prefacio ................................................................................................................................... 3

Introducción a CSS ................................................................................................................. 4

Capítulos de contenidos del Curso ........................................................................................ 6

1. Primeros pasos en CSS ................................................................................................ 6

2. Sintaxis CSS ................................................................................................................. 8

3. Atributos y valores ...................................................................................................... 9

4. Los selectores CSS ..................................................................................................... 10

5. Agrupación de los selectores CSS ............................................................................. 13

6. Clases, pseudoclases y pseudoelementos ................................................................ 13

7. Bordes ....................................................................................................................... 15

8. Fondos....................................................................................................................... 17

9. El texto ...................................................................................................................... 19

10.Márgenes .................................................................................................................. 23

11.Cursores .................................................................................................................... 24

12.Transparencias y CSS ................................................................................................ 26

13.Las reglas AT ............................................................................................................. 27

14.La regla @import ...................................................................................................... 28

15.Tipos de medio ......................................................................................................... 29

Más documentación sobre CSS ........................................................................................... 31





www.ceformativos.com



2

Curso de CSS - CEF NAC


Prefacio

En este curso te expondremos las características y funcionamiento de las Hojas de Estilo

en Cascada (CSS, Cascading Style Sheets).

Para lograr que comprendas correctamente este lenguaje comenzaremos con una

explicación sobre las CSS, haciendo énfasis en su completo funcionamiento e importancia.

Hemos decidido, como es costumbre en nuestros cursos y guías, separar los contenidos

del curso en capítulos. Además este curso posee un glosario de términos para

proporcionarte el significado de palabras o términos, a consideración nuestra, de difícil

entendimiento.

Aclaramos que para poder entender correctamente este curso deben poseer solo

conocimientos muy básicos sobre los lenguajes de programación y en especial el lenguaje

HTML.

Igualmente para este curso no es necesaria la utilización de un software en particular. Si

desea puede utilizar algún editor de texto como el Bloc de notas de Windows, pero en lo

personal recomendamos el editor de texto Notepad++ pues es mucho más cómodo para

todo lo relacionado con lenguajes de programación. También si desea tener un mejor

control y visualización del código y diseño, recomendamos Dreamweaver. Esta aplicación

Adobe está destinada a la construcción, diseño y edición de sitios y aplicaciones Web.









www.ceformativos.com



3



Curso de CSS - CEF NAC

Introducción a CSS

Comenzaremos tu familiarización con este lenguaje por una breve introducción, para

presentar las CSS y posteriormente analizar y comprender su utilización y ventajas.

¿Qué es CSS?

Las CSS son un conjunto de instrucciones que permiten definir la apariencia de un sitio

web, compuesto por diferentes elementos HTML. CSS posee una forma de representación

de los estilos que permite un control total sobre la apariencia y posición de todos los

elementos en una página web.

Algo historia sobre CSS

CSS ha sido creado en varios niveles y perfiles. Cada nivel de CSS se construye sobre el

anterior, generalmente incorporando funciones al nivel previo.

Los perfiles son, generalmente, parte de uno o varios niveles de CSS definidos para un una

determinada interfaz.

 CSS1

La primera especificación oficial de CSS fue publicada en diciembre 1996 y fue

abandonada en abril de 2008.

 CSS2

La especificación CSS2 fue publicada como recomendación en mayo de 1998, y

abandonada en abril de 2008.



 CSS 2.1

www.ceformativos.com



4

Curso de CSS - CEF NAC


CSS 2.1 fue la primera revisión de CSS2, usualmente conocida como “CSS 2.1”. Esta versión

corrige algunos errores encontrados en CSS2, elimina funcionalidades poco soportadas o

inoperables en los navegadores y añade alguna nueva especificación.

De acuerdo al sistema de estandarización técnica de las especificaciones, CSS2.1 tuvo el

estatus de "candidato" durante varios años, pero la propuesta fue rechazada en junio de

2005.

En junio de 2007 fue propuesta una nueva versión candidata, actualizada en 2009, pero en

diciembre de 2010 fue nuevamente rechazada.

En abril de 2011, CSS 2.1 volvió a ser propuesta como candidata, y después de ser

revisada, fue finalmente publicada como recomendación oficial el 7 de junio de 2011.

 CSS3

En diferencia a CSS2, que fue una gran especificación que definía varias funcionalidades,

CSS3 está dividida en varios documentos separados, llamados "módulos".

Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se

preservan las anteriores para mantener la compatibilidad.

Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de

CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.







www.ceformativos.com



5

Curso de CSS - CEF NAC



Capítulos de contenidos del Curso

Continuamos con tu familiarizarnos con las CSS, de manera sencilla para comprender

correctamente las Hojas de Estilo en Cascada.

1. Primeros pasos en CSS

Primeramente mostraremos como aplicar estilos a elementos HTML, lo cual es algo básico

y muy importante para comenzar a familiarizarse con el funcionamiento de las CSS.

 Aplicar estilo CSS a un elemento HTML

Para aplicar un estilo CSS directamente a un elemento, utilizamos el parámetro style.

Ejemplo de utilización del parámetro style:

 Agrupar estilos entre etiquetas style asignando cada estilo a un elemento.

También podemos agrupar los estilos entre las etiquetas style y asignar cada estilo a un



elemento usando selectores.

Ejemplo de documento HTML con etiquetas style:

www.ceformativos.com



6



Curso de CSS - CEF NAC

style.html

 Otra forma para aplicar estilos a una página HTML.



Otra forma para aplicar estilos a páginas HTML es crear un archivo .css donde

guardaremos todos los estilos del documento para luego cargar o llamar a este fichero en

las páginas HTML que se le quiera aplicar un estilo determinado.

Esta manera de incorporar estilos es la recomendada por nosotros pues así tendríamos

todos los estilos, de nuestra página, en un solo archivo asegurando un estilo uniforme

para nuestra aplicación web.

Ejemplo de un archivo CSS:

style.css



 A continuación veremos como incluir un archivo CSS (style.css) en una página

HTML.

www.ceformativos.com



7



Curso de CSS - CEF NAC

style.html



2. Sintaxis CSS

La sintaxis de un archivo CSS está compuesta por 3 elementos:

 Atributos - Palabras que identifican un estilo (van seguido de dos puntos y el valor

que se le asigna y separados por coma).

 Valores - Definen a los atributos.

 Selectores - Indican los elementos a los que se les va a aplicar el estilo.

 Nota:

Cuando se está trabajando fuera de un objeto, es decir, no se está usando el

parámetro style="", se tiene que indicar sobre que elemento de la página se quiere

aplicar el estilo, esto se realiza a través de selectores.

Los selectores van seguidos de los atributos encerrados en llaves.

Ejemplo de un selector:

www.ceformativos.com





8



Curso de CSS - CEF NAC


En el ejemplo anterior se le está aplicando el estilo a todos los elementos input. Asignando

color negro (#000000) y fondo blanco (#FFFFFF).

 Nota:

Los valores aplicados al atributo, dependerán de este. Estos valores serán abordados

más adelante.

3. Atributos y valores

Atributos



Como observamos en la parte de la sintaxis de CSS, los atributos y valores en son fáciles de

utilizar. Solo indicamos el nombre del atributo seguido de dos puntos y el valor que

tomará el atributo.

Valores

Los valores en CSS pueden ser numéricos, booleanos o cad