Introducción a CSS3

Así como el HTML establece la
estructura, el CSS es la parte
que maneja la apariencia.

Que es CSS3?
Hojas de Estilo en Cascada (Cascading Style
Sheets), es un mecanismo simple que describe
cómo se va a mostrar un documento en la
pantalla.
Esta forma de descripción de estilos ofrece a
los desarrolladores el control total sobre
estilo y formato de sus documentos.

Para qué sirve?
CSS se utiliza para dar estilo a
documentos HTML y XML, separando el contenido de
la presentación. Los Estilos definen la forma de
mostrar los elementos HTML y XML.

Cualquier cambio en el estilo marcado para
un elemento en la CSS afectará a todas las
páginas vinculadas a esa CSS en las que
aparezca ese elemento.

Como funciona?
CSS funciona a base de reglas, es decir,
declaraciones sobre el estilo de uno o más
elementos.

Las hojas de estilo están compuestas por una o
más de esas reglas aplicadas a un documento
HTML o XML. La regla tiene dos partes: un
selector y la declaración.
A su vez la declaración está compuesta por una
propiedad y el valor que se le asigne.

Para que funcione hay que crear un archivo
con el nombre de style.css y colocarlo en el
archivo HTML que se vaya a modificar.

Componentes de un
estilo CSS básico
•Regla: cada uno de los estilos que
componen una hoja de estilos CSS. Cada
regla está compuesta de una parte
de "selectores", un símbolo de "llave de
apertura" ({), otra parte denominada
"declaración" y por último, un símbolo
de "llave de cierre" (}).
•Selector: indica el elemento o elementos
HTML a los que se aplica la regla CSS.

•Declaración: especifica los estilos que
se aplican a los elementos. Está
compuesta por una o más propiedades
CSS.
•Propiedad: característica que se
modifica en el elemento seleccionado,
como por ejemplo su tamaño de letra, su
color de fondo, etc.
•Valor: establece el nuevo valor de la
característica modificada en el
elemento.

Selectores básicos
•Selector Universal
Se utiliza para seleccionar todos los elementos de la página. El
siguiente ejemplo elimina el margen y el relleno de todos los
elementos HTML.

•Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del
selector. El siguiente ejemplo selecciona todos los párrafos de la página:

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes,
se pueden encadenar los selectores. En el siguiente ejemplo, los
títulos de sección h1, h2 y h3 comparten los mismos estilos:

Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos.
Un elemento es descendiente de otro cuando se encuentra entre las
etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los
elementos de la página que se encuentren dentro de un
elemento :

Si el código HTML de la página es el siguiente:
El selector p span selecciona tanto texto1 como texto2.

Con las reglas CSS anteriores:
•Los elementos que se encuentran dentro de un
elemento se muestran de color rojo.
•Los elementos que se encuentran dentro de un
elemento <h1> se muestran de color azul.
•El resto de elementos de la página, se muestran con el
color por defecto aplicado por el navegador.

Selector de clase
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El
selector universal (*) no se puede utilizar porque selecciona todos
los elementos de la página.
El selector de tipo o etiqueta (p) tampoco se puede utilizar porque
seleccionaría todos los párrafos. Por último, el selector
descendente (body p) tampoco se puede utilizar porque todos los
párrafos se encuentran en el mismo sitio.

A continuación, se crea en el archivo CSS una nueva regla
llamada destacado con todos los estilos que se van a aplicar
al elemento.

Para que el navegador no confunda este selector con los
otros tipos de selectores, se prefija el valor del
atributo class con un punto (.) tal y como muestra el
siguiente ejemplo:

Es posible aplicar los estilos de varias clases CSS sobre un
mismo elemento. La sintaxis es similar, pero los diferentes
valores del atributo class se separan con espacios en
blanco.

Al párrafo anterior se le aplican los estilos definidos en
las reglas .especial, .destacado y .error, por lo que en el
siguiente ejemplo, el texto del párrafo se vería de color
rojo, en negrita y con un tamaño de letra de 15 píxel:

Selectores de ID
La sintaxis de los selectores de ID es muy parecida a la de los selectores de
clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto
(.) como prefijo del nombre de la regla CSS:

Witdh
La propiedad width no admite valores negativos y los valores en porcentaje
se calculan a partir de la anchura de su elemento padre.

Height
Al igual que sucede con width, la propiedad height no admite valores
negativos. Si se indica un porcentaje, se toma como referencia la altura del
elemento padre.
Si el elemento padre no tiene una altura definida explícitamente, se asigna
el valor auto a la altura.

Margin
CSS define cuatro propiedades para controlar cada uno de los
márgenes horizontales y verticales de un elemento.

Padding
Cada una de estas propiedades establece la separación entre
el contenido y los bordes laterales de la caja del elemento:

Background
• La propiedad background-color permite mostrar un color de
fondo sólido en la caja de un elemento. Esta propiedad no
permite crear degradados ni ningún otro efecto avanzado.

• Para crear efectos gráficos avanzados, es necesario utilizar
la propiedad background-image, que permite mostrar una
imagen como fondo de la caja de cualquier elemento:

Textos
• text-indent: Como dejar sangría en un texto.
• text-align: Centrar un texto.
• text-decoration: Definir un texto tachado o subrayado.
• text-transform: Convertir un texto a minúsculas o
mayúsculas.
• letter-spacing: Controlar el espacio entre letras.
• word-spacing: Controlar el espacio entre palabras.
• Color: Colorear el texto a su gusto

Fuentes
• font-family: Definir un tipo de fuente.
• font-size: Definir el tamaño de la fuente.

Paginas Web
• http://www.w3schools.com/

Introducción a CSS3

Más contenido relacionado

Similar a Introducción a CSS3

Introducción a CSS3