Clase-Ii CSS

For internal use only
Curso de HTML
Autor: Diego Roldán
Fernando Calabuig
Buenos Aires, Junio 2014
Reglas para el buen desarrollo del curso
 Ser puntuales en el comienzo y finalización del curso
 Respetar la duración de descansos
 Mantener los celulares apagados
 No utilizar notebooks fuera de lo requerido por el curso
 Interrumpir
| Rightshore Delivery Center

Agenda Clase II
 HTML:
 Introducción de estilos

CSS
 CSS (Cascading Style Sheets): es un lenguaje de hojas de estilos
creado para controlar el aspecto o presentación de los documentos
electrónicos definidos con HTML.
 mejora la accesibilidad del documento, reduce la complejidad de su

mantenimiento.
 Permite visualizar el mismo documento en diferentes dispositivos.
 Los estilos se definen en una zona específica del propio documento

HTML. Se emplea la etiqueta <style> de HTML y solamente se
pueden incluir en la cabecera del documento (sólo dentro de la
sección <head>).
Insert "Title, Author, Date"
© 2010 Capgemini - Internal use only. All rights reserved. 4
CSS
 Como funcionan?
• 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.
h1 {color: black;}
h1  es el selector
{color: black;} es la declaración

CSS – Definición de estilos
 Donde se definen?
• Generalmente se definen en la cabecera (head) de los documentos HTML.
• También se pueden definir dentro de cada etiqueta, mediante el uso del atributo
STYLE.
 Definiendo estilos dentro de la cabecera:

• La definición de estilos en la cabecera puede hacerse de dos maneras
diferentes:
– Declarando el estilo dentro de la etiqueta <STYLE> y definiendo la reglas para cada
uno de ellos.
– Importando un archivo de estilos con extensión .css que contenga los estilos
necesarios para el documento HTML.

CSS – Estilos en etiqueta <style>
Definiendo estilos dentro de la etiqueta <style>
<html >
<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>

CSS – Estilos en etiqueta <style>
Estilos definidos dentro de la etiqueta <style>

 Cuando usarlos?
• Cuando hay pocos estilos en la pagina.
• Cuando se quieren incluir estilos que completen los preexistentes incluidos en
la pagina.
 Desventajas:
• Si se desea modificar un estilo definido, se debe modificar en TODAS las
paginas que lo esten utilizando.

CSS – Estilos enlazados
Enlazando estilos desde archivos .css
 Se pueden definir estilos, respetando la regla de declaración de los
mismos, dentro de archivos de texto que tengan la extensión “.css”
 Estos archivos pueden luego ser “importados” desde los
documentos HTML para utilizar los estilos contenidos en los
mismos.
Ejemplo de uso:
1. Crear un archivo de texto añadiendo lo siguiente:
p { color: black; font-family: Verdana; }
2. Guardar el archivo como “estilos.css”
3. En la pagina HTML enlazar el archivo css mediante la etiqueta <link>, en el head:
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />

 Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza
un archivo CSS:
• rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el
archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor
Stylesheet.
• type: indica el tipo de recurso enlazado. Sus valores están estandarizados y

para los archivos CSS su valor siempre es text/css.
• href: indica la URL del archivo CSS que contiene los estilos. La URL indicada
puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio
web.
• media: indica el medio en el que se van a aplicar los estilos del archivo CSS.
(“screen”: paginas - “print”: impresión de documentos - “handheld”: disp. móviles)
Estilos enlazados desde un archivo externo .css

 Cuando usarlos?
• Cuando hay muchas paginas que usan los mismos estilos a la vez.
• Cuando se quieren incluir estilos que completen los preexistentes incluidos en
la pagina.
 Ventajas:
• Al momento de modificar un estilo, solo es necesario modificarlo en el
archivo .css sin necesidad de modificar las paginas que los utilizan.
• Se pueden reutilizar los estilos de un mismo archivo .css en diferentes paginas,
sin tener que volver a definirlos.
• Simplifica el mantenimiento de las paginas.

Ejercicio
1. Crear un archivo de texto añadiendo lo siguiente:

p { color: black; font-family: Verdana; }
2. Guardar el archivo como “estilos.css”

3. En la pagina HTML enlazar el archivo css mediante la etiqueta
<link>, en el head:
<link rel="stylesheet" type="text/css" href="/css/estilos.css"
media="screen" />

CSS
 Componentes de un estilo CSS básico:

CSS
 Selectores
• Selector universal (*): se usa para seleccionar todos los elementos de la
pagina.
*{
margin: 0;
padding: 0;
}
• Selector de tipo o etiqueta: selecciona los elementos de la pagina cuya
etiqueta coincida con el nombre del selector
h2 {
color: blue;
}
p{
color: black;
}
CSS - Selectores
• El selector múltiple: permite aplicar el estilo a varias etiquetas a la vez:
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
(font-family cuenta con tres tipos de fuentes. Esto se hace para que, cuando el navegador no encuentra la primera, intente con la segunda, sino por
defecto la tercera)
Aquí compartimos parte del estilo con varias etiqueta, pero definimos otra parte del
estilo por separado
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

CSS
Selector de clase
 Suponiendo el siguiente código

<body>
<p>Texto 1...</p>
<p>Texto 2...</p>
<p>Texto 3...</p>
</body>
Como se hace para aplicar estilo solo al segundo párrafo?

CSS
 Se declara un estilo
• .destacado { color: red; } con un punto al comienzo.
 Se agrega el atributo class a los elementos de la pagina.

• <p class="destacado">Texto 2...</p>

CSS
 Selector de ID: permite seleccionar un elemento de la pagina
mediante el atributo ID del mismo.
 Solo selecciona un único elemento porque los Ids no se pueden
repetir en los elementos de una misma pagina.
 Su sintaxis es similar a la del selector de clase, excepto que se
utiliza el símbolo numeral “#” en vez del punto “.”
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>

CSS - Selectores
• Selector descendente: Selecciona los elementos que se encuentran dentro de

otros elementos.
p span { color: red; }

h1 span { color: blue; }
– Los elementos span que se encuentren dentro de una etiqueta p serán de color rojo.
– Los elementos span que se encuentren dentro de una etiqueta h1 serán de color azul.
p a span em { text-decoration: underline; }

– Los elementos em que estén dentro de los elementos span que a su vez estén dentro de un
elemento a y que se encuentren dentro de un elemento p estarán subrayados.
No confundir con la combinación de selectores:

p, a, span, em {text-decoration: underline;}
Aquí, el subrayado aplica a todos los p, a, span, y em.

CSS
 Colores
 p { color: #4762B0; } – hexadecimal--
 p { color: rgb(27%, 38%, 69%); } – porcentual --
 p { color: rgb(71, 98, 176); } --decimal—

CSS
Naveguemos un poco por la W3SCHOOL

CSS - Ejercicio
Utilizando la W3SCHOOL como referencia tomar los formularios anteriormente realizar

los siguientes cambios de estilos:
Tamaño de fuente
Color de etiquetas
Color de fondo
Agregar un link y cambiar los colores con Pseudo-classes

CSS - Referencias
Qué propiedades se pueden configurar: http://www.w3schools.com/cssref/default.asp
Qué tipos de selectores puedo usar: http://www.w3schools.com/cssref/css_selectors.asp
Ejemplos de colores en hexa: http://www.w3schools.com/cssref/css_colornames.asp

© 2010 Capgemini - Internal use only. All rights reserved.
www.capgemini.com
The information contained in this presentation is proprietary and confidential. It is for Capgemini internal use only. Copyright ©2010 Capgemini. All rights reserved.

Clase-Ii CSS

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase-Ii CSS

Cargado por

Copyright:

Formatos disponibles

For internal use only

 Ser puntuales en el comienzo y finalización del curso

 Respetar la duración de descansos

 Mantener los celulares apagados

 No utilizar notebooks fuera de lo requerido por el curso

| Rightshore Delivery Center

| Rightshore Delivery Center

 mejora la accesibilidad del documento, reduce la complejidad de su

 Permite visualizar el mismo documento en diferentes dispositivos.

 Los estilos se definen en una zona específica del propio documento

| Rightshore Delivery Center

 Definiendo estilos dentro de la cabecera:

| Rightshore Delivery Center

| Rightshore Delivery Center

Estilos definidos dentro de la etiqueta <style>

| Rightshore Delivery Center

| Rightshore Delivery Center

• type: indica el tipo de recurso enlazado. Sus valores están estandarizados y

Estilos enlazados desde un archivo externo .css

| Rightshore Delivery Center

1. Crear un archivo de texto añadiendo lo siguiente:

2. Guardar el archivo como “estilos.css”

| Rightshore Delivery Center

 Componentes de un estilo CSS básico:

| Rightshore Delivery Center

| Rightshore Delivery Center

 Suponiendo el siguiente código

Como se hace para aplicar estilo solo al segundo párrafo?

| Rightshore Delivery Center

 Se agrega el atributo class a los elementos de la pagina.

| Rightshore Delivery Center

#destacado { color: red; }

| Rightshore Delivery Center

• Selector descendente: Selecciona los elementos que se encuentran dentro de

p span { color: red; }

p a span em { text-decoration: underline; }

No confundir con la combinación de selectores:

| Rightshore Delivery Center

| Rightshore Delivery Center

| Rightshore Delivery Center

Utilizando la W3SCHOOL como referencia tomar los formularios anteriormente realizar

| Rightshore Delivery Center

Qué propiedades se pueden configurar: http://www.w3schools.com/cssref/default.asp

Qué tipos de selectores puedo usar: http://www.w3schools.com/cssref/css_selectors.asp

Ejemplos de colores en hexa: http://www.w3schools.com/cssref/css_colornames.asp

| Rightshore Delivery Center

También podría gustarte