SlideShare una empresa de Scribd logo
CSS es el acrónicmo de Cascading Style Sheets (es decir, hojas de
estilo en cascada).
¿Qué puedo hacer con CSS?
CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por
ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura,
anchura, imágenes de fondo, posicionamiento avanzado, etc.
Crea tus propias hojas de estilo usando CSS para dar a tu sitio web un aspecto nuevo y
genial.
HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido
previamente estructurado. CSS permite separar los contenidos de la página y la
información sobre su aspecto. En el ejemplo anterior, dentro de la propia página HTML
se crea una zona especial en la que se incluye toda la información relacionada con los
estilos de la página.
La solución que propone CSS es mucho mejor, como se puede ver en el
siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>
REGLA CSS
Una regla CSS es una "orden" escrita que se le da a un elemento HTML para que se
comporte de una manera determinada. La regla consta de dos partes: selector y
declaración (o un bloque de declaraciones). A su vez la declaración, que va escrita
entre llaves {}, consta de otras dos partes: la propiedad y el valor. Veamos un
ejemplo:
p {color: #777;}
Donde p es el selector, color la propiedad y #777 el valor.
Los diferentes términos se definen a continuación:
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.
Colores y fondos
La propiedad color describe el color de primer plano de un elemento.
Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan
con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El
código siguiente establece el color de los elementos <h1> como rojo.
h1 {
color: #ff0000;
}
La propiedad 'background-color'
La propiedad background-color describe el color de fondo de los elementos.
El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para
cambiar el color de fondo de una página, la propiedad background-color debería
aplicarse al elemento <body>.
También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los
encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los
elementos <body> y <h1>.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Texto
Veremos cómo solucionar el tema de que las fuentes específicas elegidas para un sitio
web sólo se pueden ver si están instaladas en el PC desde el que se accede a dicho sitio
web. Se describirán las siguientes propiedades CSS:
font-family
font-style
font-variant
font-weight
font-size
font
Font-family.-
La propiedad font-family se usa para establecer una lista ordenada de fuentes que se
usarán para mostrar un elemento determinado o una página web. Si la primera fuente
de la lista no está instalada en el ordenador desde el que se accede al sitio, se seguirá
probando con la siguiente fuente hasta encontrar una fuente apropiada.
Al listar fuentes para el sitio web, por supuesto se empieza por la preferida, seguida
ésta de algunas fuentes alternativas. Se recomienda completar la lista con una familia
de fuentes genérica. Así, al menos, la página se mostrará usando una fuente de la
misma familia si ninguna de las especificadas están disponibles.
Un ejemplo de lista de fuentes por orden de prioridad podría tener este aspecto:
h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman",
serif;}
Estilo de la fuente [font-style]
La propiedad font-style define la fuente elegida bien con el valor normal, el
valor italic o el valor oblique. En el ejemplo que sigue, todos los encabezados
marcados con <h2> aparecerán en cursiva.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;
font-style: italic;}
Peso de la fuente [font-weight]
La propiedad font-weight describe qué intensidad o "peso" en negrita debería tener
la fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores
soportan, incluso, el uso de números entre 100 y 900 (de cien en cien) para describir
el peso de dicha fuente.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Tamaño de la fuente [font-size]
El tamaño de la fuente se establece por medio de la propiedad font-size.
A la hora de describir el tamaño de las fuentes, existen muchas unidades diferentes
(por ejemplo, píxeles y porcentajes) entre las que elegir. En este tutorial nos
centraremos en las unidades más comunes y adecuadas. Como ejemplo, podemos
incluir:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Existe una diferencia clave entre las cuatro unidades anteriores.
Las unidades 'px' y 'pt' establecen el tamaño de la fuente de forma absoluta,
mientras que '%' y 'em' permiten al usuario ajustar el tamaño de la misma según
considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de
disminución visual, o disponen de un monitor de mala calidad.
Para que tu sitio web sea accesible para todo el mundo, deberías usar unidades
ajustables como, por ejemplo, '%' o 'em'.
Combinación de propiedades [font]
Si usamos la propiedad abreviada font es posible incluir todas las propiedades
diferentes relativas a fuentes en una única propiedad.
Por ejemplo, imagina estas cuatro líneas de código que usamos para describir
las propiedades de fuente para la etiqueta <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Usando la propiedad abreviada, el código se puede simplificar así:
p {
font: italic bold 30px arial, sans-serif;
}
Texto
Formatear y añadir estilo al texto es un tema clave para cualquier diseñador web. En esta
lección presentaremos las increíbles oportunidades que ofrece CSS a la hora de añadir
presentación al texto. Describiremos las siguientes propiedades:
text-indent
text-align
text-decoration
letter-spacing
text-transform
Sangría del texto [text-indent]
La propiedad text-indent permite añadir un toque de elegancia a los párrafos de texto al
aplicar sangría a la primera línea de dicho párrafo. En el ejemplo siguiente se ha aplicado
una sangría de 30px a todos los párrafos de texto marcados con la etiqueta <p>:
p {
text-indent: 30px;
}
Alineación del texto [text-align]
La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores
de HTML. Los valores posibles de esta propiedad son: left(texto alineado a la izquierda),
right (texto alineado a la derecha) o center (texto con alineación centrada). Además, el
valor justify(alineación justificada) alargará cada línea de forma que los márgenes izquierdo
y derecho estén justificados. Esta tipo de presentación la habrás visto, por ejemplo, en
periódicos y revistas.
En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la
derecha, mientras que los datos de la tabla, <td>, aparecen centrados. Además, los párrafos
de texto normales están justificados:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Decoración del texto [text-decoration]
La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al
texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior.
En el ejemplo siguiente, el elemento <h1>aparecerá subrayado, el elemento <h2>
aparecerá con un subrayado por encima del texto y el elemento <h3> tendrá el texto
tachado.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Espaciado entre caracteres [letter-spacing]
El espaciado entre los caracteres de texto se puede especificar usando la propiedad
letter-spacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado.
Por ejemplo, si queremos un espaciado de 3px entre los caracteres de un párrafo de
texto <p> y 6px entre los caracteres de los encabezados <h1>, usaríamos el siguiente
código:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Transformación del texto [text-transform]
La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir
entre los valores capitalize, uppercase olowercase, sin importar cómo aparece el texto
original en el código HTML.
Un ejemplo podría ser la palabra "título" que se puede presentar al usuario como "TÍTULO"
o "Título". A continuación ofrecemos una explicación de los valores de la propiedad text-
transform mencionados en el párrafo anterior:
capitalize
Pone en mayúscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecerá
como "John Doe".
uppercase
Convierte todas las letras a mayúscula. Por ejemplo, "john doe" aparecerá como "JOHN
DOE".
lowercase
Convierte todas las letras a minúscula. Por ejemplo, "JOHN DOE" aparecerá como "john
doe".
none
No se realiza transformación alguna; el texto se presenta tal como aparece en el cógido
HTML.
Como ejemplo, usaremos una lista de nombres. Todos los nombres están marcados con
la etiqueta <li> (de "list element", es decir, elemento de lista). Supongamos que
queremos que las iniciales de los nombres aparezcan en mayúscula y los títulos con
todos los caracteres en mayúscula.
Échale un vistazo al código fuente del ejemplo y verás que el texto aparece realmente
en minúscula.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
IMÁGENES Y FONDOS
Imágenes de fondo [background-image]
La propiedad CSS background-image se usa para insertar una imagen de fondo.
Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes
descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre
la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.
Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica
sencillamente la propiedad background-image al elemento <body> y especifica la localización
de la imagen.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el
eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background-
repeat controla este comportamiento.
La tabla siguiente resume los cuatro valores diferentes para la propiedad background-
repeat.
Valor Descripción Ejemplo
Background-repeat: repeat-x La imagen se repite en el eje horizontal
background-repeat: repeat-y La imagen se repite en el eje vertical
background-repeat: repeat La imagen se repite en el eje horizontal y vertical
background-repeat: no-repeat La imagen no se repite
Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que
usar sería el siguiente:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Fijar la imagen de fondo [background-attachment]
La propiedad background-attachment especifica si una imagen está fija o se desplaza con el
elemento contenedor.Una imagen de fondo fija no se moverá con el texto cuando el lector se
desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de
la página web.
La tabla siguiente resume los dos valores posibles para la propiedad background-attachment. Haz
clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.
Valor Descripción Ejemplo
Background-attachment: scroll La imagen se desplaza con la página - no está fijaVer
ejemplo
Background-attachment: fixed La imagen está fija Ver ejemplo
Por ejemplo, el siguiente código fijará la imagen de fondo.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Ubicación de la imagen de fondo [background-position]
Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla.
La propiedad background-position te permitirá cambiar este valor por defecto y posicionar la
imagen de fondo en cualquier lugar de la pantalla que quieras.
Hay muchas formas diferentes de establecer los valores de la propiedad background-position.
Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor
'100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles
del margen superior del la ventana del navegador.
Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades
fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior),
"center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cómo
funciona el sistema:
La tabla siguiente proporciona varios ejemplos.
Valor Descripción Ejemplo
background-position: 2cm 2cm La imagen se posiciona a 2 cm del margen izquierdo y a
2 cm del margen superior de la página Ver ejemplo
background-position: 50% 25% La imagen se posiciona en el centro de la página y un 25 % del
margen superior de la misma Ver ejemplo
background-position: top right La imagen se posiciona en la esquina superior derecha
de la página Ver ejemplo
El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Combinación de propiedades [background]
La propiedad background es una forma abreviada de todas las propiedades de fondo
listadas a lo largo de esta lección.
Con la propiedad background se pueden comprimir varias propiedades, y así escribir una
hoja de estilo de forma más abreviada, lo que facilitará su lectura.
Por ejemplo, observa estas cinco líneas de código:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Usando background se puede lograr el mismo resultado con una única línea de código:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
Identificación y agrupación de elementos (class e id)
A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de
elementos. En esta lección examinaremos cómo usar los atributos class e id para especificar
propiedades para los elementos seleccionados.
¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio
web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un
estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos
respuesta en esta lección.
Agrupación de elementos con el atributo class
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino
tinto y el blanco. El código HTML sería el siguiente:
<p>Uvas para el vino blanco:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Uvas para el vino tinto:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces
relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan
siendo azules.
Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una
clase para cada tipo de enlace, usando el atributo class.
Intentemos especificar algunas clases en el ejemplo anterior:
<p>Uvas para el vino blanco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Uvas para el vino tinto:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen
referencia al vino tinto y al vino blanco, respectivamente.
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que
pertenecen a una clase usando .nombredelaclase en la hoja de estilo del documento.
Identificación de un elemento usando el atributo id
Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se
hace con el atributo id.
Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del
mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se
debería usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso
del atributo id:
<h1>Capítulo 1</h1>
...
<h2>Capítulo 1.1</h2>
...
<h2>Capítulo 1.2</h2>
...
<h1>Capítulo 2</h1>
...
<h2>Capítulo 2.1</h2>
...
<h3>Capítulo 2.1.2</h3>
...
El código anterior podría hacer referencia a encabezados de cualquier documento dividido
en capítulos y párrafos. Sería normal asignar un id a cada capítulo de la siguiente manera:
<h1 id="c1">Capítulo 1</h1>
...
<h2 id="c1-1">Capítulo 1.1</h2>
...
<h2 id="c1-2">Capítulo 1.2</h2>
...
<h1 id="c2">Capítulo 2</h1>
...
<h2 id="c2-1">Capítulo 2.1</h2>
...
<h3 id="c2-1-2">Capítulo 2.1.2</h3>
...
Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS
necesario, se podría hacer así:
#c1-2 {
color: red;
}
MAQUETACION EN CSS
Estructura o layout
Diseño a 2 columnas con cabecera y pie de página
El objetivo de este diseño es definir una estructura de página con cabecera y pie, un menú
lateral de navegación y una zona de contenidos. La anchura de la página se fija en 700px, la
anchura del menú es de 150px y la anchura de los contenidos es de 550px:
Esquema del diseño a 2 columnas con cabecera y pie de página
La solución CSS se basa en el uso de la propiedad float para los elementos posicionados como
el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los
solapamientos ocasionados por los elementos posicionados con float.
Propiedades CSS necesarias en el diseño a dos columnas con cabecera y pie de página
El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo
adicional son los siguientes:
#contenedor {
width: 700px;
}
#cabecera {
}
#menu {
float: left;
width: 150px;
}
#contenido {
float: left;
width: 550px;
}
#pie {
clear: both;
}
<body>
<div id="contenedor">
<div id="cabecera">
</div>
<div id="menu">
</div>
<div id="contenido">
</div>
<div id="pie">
</div>
</div>
</body>
En los estilos CSS anteriores se ha optado por desplazar tanto el menú como los contenidos
hacia la izquierda de la página (float: left). Sin embargo, en este caso también se podría
desplazar el menú hacia la izquierda (float:left) y los contenidos hacia la derecha (float:
right).
El diseño anterior es de anchura fija, lo que significa que no se adapta a la anchura de la
ventana del navegador. Para conseguir una página de anchura variable y que se adapte de
forma dinámica a la ventana del navegador, se deben aplicar las siguientes reglas CSS:
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#pie {
clear: both;
}
Si se indican la anchuras de los bloques que forman la página en porcentajes, el diseño
final es dinámico. Para crear diseños de anchura fija, basta con establecer las anchuras
de los bloques en píxel.
Diseño a 3 columnas con cabecera y pie de página
Además del diseño a dos columnas, el diseño más utilizado es el de tres columnas con
cabecera y pie de página. En este caso, los contenidos se dividen en dos zonas
diferenciadas: zona principal de contenidos y zona lateral de contenidos auxiliares:
Esquema del diseño a tres columnas con cabecera y pie de página
La solución CSS emplea la misma estrategia del diseño a dos columnas y se basa en utilizar
las propiedades float y clear:
Propiedades CSS necesarias en el diseño a 3 columnas con cabecera y pie de página
El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo
adicional son los siguientes:
#contenedor {
}
#cabecera {
}
#menu {
float: left;
width: 15%;
}
#contenido {
float: left;
width: 85%;
}
#contenido #principal {
float: left;
width: 80%;
}
#contenido #secundario {
float: left;
width: 20%;
}
#pie {
clear: both;
}
<div id="menu">
</div>
<div id="contenido">
<div id="principal">
</div>
<div id="secundario">
</div>
</div>
<div id="pie">
</div>
</div>
</body>
El código anterior crea una página con anchura variable que se adapta a la ventana del
navegador. Para definir una página con anchura fija, solamente es necesario sustituir las
anchuras en porcentajes por anchuras en píxel.
Al igual que sucedía en el diseño a dos columnas, se puede optar por posicionar todos los
elementos mediante float: left o se puede utilizar float: left para el menú y la zona principal
de contenidos y float: right para el contenedor de los contenidos y la zona secundaria de
contenidos.
Introdu css clase1
Introdu css clase1
Introdu css clase1
Introdu css clase1

Más contenido relacionado

La actualidad más candente

Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
emded
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
emded
 
Clase1
Clase1Clase1
Clase1
danielbf0717
 
Identificación del lenguaje de css
Identificación del lenguaje de cssIdentificación del lenguaje de css
Identificación del lenguaje de css
Liliana Berenice Rosales Amezcua
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
Juan Rodríguez
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
guillermogarcia1099
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
retro2011brandon
 
HTML
HTMLHTML
HTML
DaHs9803
 
Etiquetas y teoria html
Etiquetas y teoria htmlEtiquetas y teoria html
Etiquetas y teoria html
ssxdan
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
iConstruye
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
alinacarrion
 
Comandos de kenyuris camacho
Comandos de kenyuris camachoComandos de kenyuris camacho
Comandos de kenyuris camacho
kenyuriscamacho
 

La actualidad más candente (12)

Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Clase1
Clase1Clase1
Clase1
 
Identificación del lenguaje de css
Identificación del lenguaje de cssIdentificación del lenguaje de css
Identificación del lenguaje de css
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
HTML
HTMLHTML
HTML
 
Etiquetas y teoria html
Etiquetas y teoria htmlEtiquetas y teoria html
Etiquetas y teoria html
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
Comandos de kenyuris camacho
Comandos de kenyuris camachoComandos de kenyuris camacho
Comandos de kenyuris camacho
 

Similar a Introdu css clase1

Css
CssCss
Css
JaneBv
 
programacion
programacionprogramacion
programacion
Gordo Villa
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Juan Carlos Medrano
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Caro Duran
 
CSS
CSSCSS
Ccs.sandromtz_4101
Ccs.sandromtz_4101Ccs.sandromtz_4101
Ccs.sandromtz_4101
sandroMtz
 
Esilo css
Esilo cssEsilo css
Esilo css
lgarcias
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
Juan Alberto Ortega Contreras
 
Manual de Introducción a CSS3
Manual de Introducción a CSS3Manual de Introducción a CSS3
Manual de Introducción a CSS3
Juan Alberto Ortega Contreras
 
Presentacióncss
PresentacióncssPresentacióncss
Presentacióncss
Juan Carlos Nunez Ugalde
 
Organigramas John Jayro
Organigramas John JayroOrganigramas John Jayro
Organigramas John Jayro
John Jayro
 
Resumen
ResumenResumen
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
genesisgray
 
Presentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdfPresentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdf
DrakoSK
 
Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
genesisgray
 
HTML
HTMLHTML
Hojas de estilo cascada
Hojas de estilo cascadaHojas de estilo cascada
Hojas de estilo cascada
laura elizabeth ventura hernandez
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
maryesther20_95
 
Css
CssCss
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
maryesther20_95
 

Similar a Introdu css clase1 (20)

Css
CssCss
Css
 
programacion
programacionprogramacion
programacion
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
CSS
CSSCSS
CSS
 
Ccs.sandromtz_4101
Ccs.sandromtz_4101Ccs.sandromtz_4101
Ccs.sandromtz_4101
 
Esilo css
Esilo cssEsilo css
Esilo css
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 
Manual de Introducción a CSS3
Manual de Introducción a CSS3Manual de Introducción a CSS3
Manual de Introducción a CSS3
 
Presentacióncss
PresentacióncssPresentacióncss
Presentacióncss
 
Organigramas John Jayro
Organigramas John JayroOrganigramas John Jayro
Organigramas John Jayro
 
Resumen
ResumenResumen
Resumen
 
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
 
Presentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdfPresentación-HTML5-okkk.pdf
Presentación-HTML5-okkk.pdf
 
Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
 
HTML
HTMLHTML
HTML
 
Hojas de estilo cascada
Hojas de estilo cascadaHojas de estilo cascada
Hojas de estilo cascada
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
 
Css
CssCss
Css
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
 

Más de John Orellana

Cuadro atributos css
Cuadro atributos cssCuadro atributos css
Cuadro atributos css
John Orellana
 
Jerome bruner2
Jerome bruner2Jerome bruner2
Jerome bruner2
John Orellana
 
materia de educación ambiental - volante105
materia de educación ambiental - volante105materia de educación ambiental - volante105
materia de educación ambiental - volante105
John Orellana
 
Trabajo1 educacion ambiental
Trabajo1 educacion ambientalTrabajo1 educacion ambiental
Trabajo1 educacion ambiental
John Orellana
 
Educación Ambiental
Educación AmbientalEducación Ambiental
Educación Ambiental
John Orellana
 
transmision y neumaticos
transmision y neumaticostransmision y neumaticos
transmision y neumaticos
John Orellana
 
Motor clases
Motor clasesMotor clases
Motor clases
John Orellana
 
Trabajo1 geografia urbana deinitivo
Trabajo1 geografia urbana deinitivoTrabajo1 geografia urbana deinitivo
Trabajo1 geografia urbana deinitivo
John Orellana
 
1. geografía urbana ecotec
1. geografía urbana ecotec1. geografía urbana ecotec
1. geografía urbana ecotec
John Orellana
 
Los grupos humanos en el transito y los
Los grupos humanos en el transito y losLos grupos humanos en el transito y los
Los grupos humanos en el transito y los
John Orellana
 
Presentacion grupo 5
Presentacion grupo 5Presentacion grupo 5
Presentacion grupo 5
John Orellana
 
Grupo 4
Grupo 4Grupo 4
Grupo 4
John Orellana
 
Presentacion grupo 3
Presentacion grupo 3Presentacion grupo 3
Presentacion grupo 3
John Orellana
 
Señales2
 Señales2 Señales2
Señales2
John Orellana
 
Señales de transito
Señales de transitoSeñales de transito
Señales de transito
John Orellana
 
Principales drogas y la seguridad vial
Principales drogas y la seguridad vialPrincipales drogas y la seguridad vial
Principales drogas y la seguridad vial
John Orellana
 

Más de John Orellana (16)

Cuadro atributos css
Cuadro atributos cssCuadro atributos css
Cuadro atributos css
 
Jerome bruner2
Jerome bruner2Jerome bruner2
Jerome bruner2
 
materia de educación ambiental - volante105
materia de educación ambiental - volante105materia de educación ambiental - volante105
materia de educación ambiental - volante105
 
Trabajo1 educacion ambiental
Trabajo1 educacion ambientalTrabajo1 educacion ambiental
Trabajo1 educacion ambiental
 
Educación Ambiental
Educación AmbientalEducación Ambiental
Educación Ambiental
 
transmision y neumaticos
transmision y neumaticostransmision y neumaticos
transmision y neumaticos
 
Motor clases
Motor clasesMotor clases
Motor clases
 
Trabajo1 geografia urbana deinitivo
Trabajo1 geografia urbana deinitivoTrabajo1 geografia urbana deinitivo
Trabajo1 geografia urbana deinitivo
 
1. geografía urbana ecotec
1. geografía urbana ecotec1. geografía urbana ecotec
1. geografía urbana ecotec
 
Los grupos humanos en el transito y los
Los grupos humanos en el transito y losLos grupos humanos en el transito y los
Los grupos humanos en el transito y los
 
Presentacion grupo 5
Presentacion grupo 5Presentacion grupo 5
Presentacion grupo 5
 
Grupo 4
Grupo 4Grupo 4
Grupo 4
 
Presentacion grupo 3
Presentacion grupo 3Presentacion grupo 3
Presentacion grupo 3
 
Señales2
 Señales2 Señales2
Señales2
 
Señales de transito
Señales de transitoSeñales de transito
Señales de transito
 
Principales drogas y la seguridad vial
Principales drogas y la seguridad vialPrincipales drogas y la seguridad vial
Principales drogas y la seguridad vial
 

Introdu css clase1

  • 1. CSS es el acrónicmo de Cascading Style Sheets (es decir, hojas de estilo en cascada). ¿Qué puedo hacer con CSS? CSS es un lenguaje de estilo que define la presentación de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado, etc. Crea tus propias hojas de estilo usando CSS para dar a tu sitio web un aspecto nuevo y genial. HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado. CSS permite separar los contenidos de la página y la información sobre su aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la página.
  • 2. La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <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>
  • 3. REGLA CSS Una regla CSS es una "orden" escrita que se le da a un elemento HTML para que se comporte de una manera determinada. La regla consta de dos partes: selector y declaración (o un bloque de declaraciones). A su vez la declaración, que va escrita entre llaves {}, consta de otras dos partes: la propiedad y el valor. Veamos un ejemplo: p {color: #777;} Donde p es el selector, color la propiedad y #777 el valor.
  • 4. Los diferentes términos se definen a continuación: 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.
  • 5. Colores y fondos La propiedad color describe el color de primer plano de un elemento. Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo. h1 { color: #ff0000; } La propiedad 'background-color' La propiedad background-color describe el color de fondo de los elementos. El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>. También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>.
  • 6. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
  • 7. Texto Veremos cómo solucionar el tema de que las fuentes específicas elegidas para un sitio web sólo se pueden ver si están instaladas en el PC desde el que se accede a dicho sitio web. Se describirán las siguientes propiedades CSS: font-family font-style font-variant font-weight font-size font Font-family.- La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarán para mostrar un elemento determinado o una página web. Si la primera fuente de la lista no está instalada en el ordenador desde el que se accede al sitio, se seguirá probando con la siguiente fuente hasta encontrar una fuente apropiada. Al listar fuentes para el sitio web, por supuesto se empieza por la preferida, seguida ésta de algunas fuentes alternativas. Se recomienda completar la lista con una familia de fuentes genérica. Así, al menos, la página se mostrará usando una fuente de la misma familia si ninguna de las especificadas están disponibles.
  • 8. Un ejemplo de lista de fuentes por orden de prioridad podría tener este aspecto: h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;} Estilo de la fuente [font-style] La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valor oblique. En el ejemplo que sigue, todos los encabezados marcados con <h2> aparecerán en cursiva. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;} Peso de la fuente [font-weight] La propiedad font-weight describe qué intensidad o "peso" en negrita debería tener la fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores soportan, incluso, el uso de números entre 100 y 900 (de cien en cien) para describir el peso de dicha fuente. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}
  • 9. Tamaño de la fuente [font-size] El tamaño de la fuente se establece por medio de la propiedad font-size. A la hora de describir el tamaño de las fuentes, existen muchas unidades diferentes (por ejemplo, píxeles y porcentajes) entre las que elegir. En este tutorial nos centraremos en las unidades más comunes y adecuadas. Como ejemplo, podemos incluir: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;} Existe una diferencia clave entre las cuatro unidades anteriores. Las unidades 'px' y 'pt' establecen el tamaño de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamaño de la misma según considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de disminución visual, o disponen de un monitor de mala calidad. Para que tu sitio web sea accesible para todo el mundo, deberías usar unidades ajustables como, por ejemplo, '%' o 'em'.
  • 10. Combinación de propiedades [font] Si usamos la propiedad abreviada font es posible incluir todas las propiedades diferentes relativas a fuentes en una única propiedad. Por ejemplo, imagina estas cuatro líneas de código que usamos para describir las propiedades de fuente para la etiqueta <p>: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Usando la propiedad abreviada, el código se puede simplificar así: p { font: italic bold 30px arial, sans-serif; }
  • 11. Texto Formatear y añadir estilo al texto es un tema clave para cualquier diseñador web. En esta lección presentaremos las increíbles oportunidades que ofrece CSS a la hora de añadir presentación al texto. Describiremos las siguientes propiedades: text-indent text-align text-decoration letter-spacing text-transform Sangría del texto [text-indent] La propiedad text-indent permite añadir un toque de elegancia a los párrafos de texto al aplicar sangría a la primera línea de dicho párrafo. En el ejemplo siguiente se ha aplicado una sangría de 30px a todos los párrafos de texto marcados con la etiqueta <p>: p { text-indent: 30px; }
  • 12. Alineación del texto [text-align] La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left(texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineación centrada). Además, el valor justify(alineación justificada) alargará cada línea de forma que los márgenes izquierdo y derecho estén justificados. Esta tipo de presentación la habrás visto, por ejemplo, en periódicos y revistas. En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la derecha, mientras que los datos de la tabla, <td>, aparecen centrados. Además, los párrafos de texto normales están justificados: th { text-align: right; } td { text-align: center; } p { text-align: justify; }
  • 13. Decoración del texto [text-decoration] La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el elemento <h1>aparecerá subrayado, el elemento <h2> aparecerá con un subrayado por encima del texto y el elemento <h3> tendrá el texto tachado. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
  • 14. Espaciado entre caracteres [letter-spacing] El espaciado entre los caracteres de texto se puede especificar usando la propiedad letter-spacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de 3px entre los caracteres de un párrafo de texto <p> y 6px entre los caracteres de los encabezados <h1>, usaríamos el siguiente código: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
  • 15. Transformación del texto [text-transform] La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir entre los valores capitalize, uppercase olowercase, sin importar cómo aparece el texto original en el código HTML. Un ejemplo podría ser la palabra "título" que se puede presentar al usuario como "TÍTULO" o "Título". A continuación ofrecemos una explicación de los valores de la propiedad text- transform mencionados en el párrafo anterior: capitalize Pone en mayúscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecerá como "John Doe". uppercase Convierte todas las letras a mayúscula. Por ejemplo, "john doe" aparecerá como "JOHN DOE". lowercase Convierte todas las letras a minúscula. Por ejemplo, "JOHN DOE" aparecerá como "john doe". none No se realiza transformación alguna; el texto se presenta tal como aparece en el cógido HTML.
  • 16. Como ejemplo, usaremos una lista de nombres. Todos los nombres están marcados con la etiqueta <li> (de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayúscula y los títulos con todos los caracteres en mayúscula. Échale un vistazo al código fuente del ejemplo y verás que el texto aparece realmente en minúscula. h1 { text-transform: uppercase; } li { text-transform: capitalize; }
  • 17. IMÁGENES Y FONDOS Imágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo. Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen. Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedad background-image al elemento <body> y especifica la localización de la imagen. body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
  • 18. Repetir la imagen de fondo [background-repeat] En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedad background- repeat controla este comportamiento. La tabla siguiente resume los cuatro valores diferentes para la propiedad background- repeat. Valor Descripción Ejemplo Background-repeat: repeat-x La imagen se repite en el eje horizontal background-repeat: repeat-y La imagen se repite en el eje vertical background-repeat: repeat La imagen se repite en el eje horizontal y vertical background-repeat: no-repeat La imagen no se repite Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
  • 19. Fijar la imagen de fondo [background-attachment] La propiedad background-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web. La tabla siguiente resume los dos valores posibles para la propiedad background-attachment. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza. Valor Descripción Ejemplo Background-attachment: scroll La imagen se desplaza con la página - no está fijaVer ejemplo Background-attachment: fixed La imagen está fija Ver ejemplo Por ejemplo, el siguiente código fijará la imagen de fondo. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
  • 20. Ubicación de la imagen de fondo [background-position] Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras. Hay muchas formas diferentes de establecer los valores de la propiedad background-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador. Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cómo funciona el sistema: La tabla siguiente proporciona varios ejemplos. Valor Descripción Ejemplo background-position: 2cm 2cm La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la página Ver ejemplo background-position: 50% 25% La imagen se posiciona en el centro de la página y un 25 % del margen superior de la misma Ver ejemplo background-position: top right La imagen se posiciona en la esquina superior derecha de la página Ver ejemplo El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:
  • 21. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
  • 22. Combinación de propiedades [background] La propiedad background es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta lección. Con la propiedad background se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma más abreviada, lo que facilitará su lectura. Por ejemplo, observa estas cinco líneas de código: background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; Usando background se puede lograr el mismo resultado con una única línea de código: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
  • 23. Identificación y agrupación de elementos (class e id) A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos class e id para especificar propiedades para los elementos seleccionados. ¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección. Agrupación de elementos con el atributo class Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente: <p>Uvas para el vino blanco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Uvas para el vino tinto:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>
  • 24. Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules. Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class. Intentemos especificar algunas clases en el ejemplo anterior: <p>Uvas para el vino blanco:</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Uvas para el vino tinto:</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>
  • 25. A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente. a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; } Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase usando .nombredelaclase en la hoja de estilo del documento.
  • 26. Identificación de un elemento usando el atributo id Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo id. Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id: <h1>Capítulo 1</h1> ... <h2>Capítulo 1.1</h2> ... <h2>Capítulo 1.2</h2> ... <h1>Capítulo 2</h1> ... <h2>Capítulo 2.1</h2> ... <h3>Capítulo 2.1.2</h3> ... El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un id a cada capítulo de la siguiente manera:
  • 27. <h1 id="c1">Capítulo 1</h1> ... <h2 id="c1-1">Capítulo 1.1</h2> ... <h2 id="c1-2">Capítulo 1.2</h2> ... <h1 id="c2">Capítulo 2</h1> ... <h2 id="c2-1">Capítulo 2.1</h2> ... <h3 id="c2-1-2">Capítulo 2.1.2</h3> ... Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así: #c1-2 { color: red; }
  • 28. MAQUETACION EN CSS Estructura o layout Diseño a 2 columnas con cabecera y pie de página El objetivo de este diseño es definir una estructura de página con cabecera y pie, un menú lateral de navegación y una zona de contenidos. La anchura de la página se fija en 700px, la anchura del menú es de 150px y la anchura de los contenidos es de 550px: Esquema del diseño a 2 columnas con cabecera y pie de página La solución CSS se basa en el uso de la propiedad float para los elementos posicionados como el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los solapamientos ocasionados por los elementos posicionados con float.
  • 29. Propiedades CSS necesarias en el diseño a dos columnas con cabecera y pie de página El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional son los siguientes: #contenedor { width: 700px; } #cabecera { } #menu { float: left; width: 150px; } #contenido { float: left; width: 550px; } #pie { clear: both; }
  • 30. <body> <div id="contenedor"> <div id="cabecera"> </div> <div id="menu"> </div> <div id="contenido"> </div> <div id="pie"> </div> </div> </body> En los estilos CSS anteriores se ha optado por desplazar tanto el menú como los contenidos hacia la izquierda de la página (float: left). Sin embargo, en este caso también se podría desplazar el menú hacia la izquierda (float:left) y los contenidos hacia la derecha (float: right). El diseño anterior es de anchura fija, lo que significa que no se adapta a la anchura de la ventana del navegador. Para conseguir una página de anchura variable y que se adapte de forma dinámica a la ventana del navegador, se deben aplicar las siguientes reglas CSS:
  • 31. #contenedor { } #cabecera { } #menu { float: left; width: 15%; } #contenido { float: left; width: 85%; } #pie { clear: both; } Si se indican la anchuras de los bloques que forman la página en porcentajes, el diseño final es dinámico. Para crear diseños de anchura fija, basta con establecer las anchuras de los bloques en píxel.
  • 32. Diseño a 3 columnas con cabecera y pie de página Además del diseño a dos columnas, el diseño más utilizado es el de tres columnas con cabecera y pie de página. En este caso, los contenidos se dividen en dos zonas diferenciadas: zona principal de contenidos y zona lateral de contenidos auxiliares: Esquema del diseño a tres columnas con cabecera y pie de página La solución CSS emplea la misma estrategia del diseño a dos columnas y se basa en utilizar las propiedades float y clear: Propiedades CSS necesarias en el diseño a 3 columnas con cabecera y pie de página
  • 33. El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional son los siguientes: #contenedor { } #cabecera { } #menu { float: left; width: 15%; } #contenido { float: left; width: 85%; } #contenido #principal { float: left; width: 80%; } #contenido #secundario { float: left; width: 20%; } #pie { clear: both; }
  • 34. <div id="menu"> </div> <div id="contenido"> <div id="principal"> </div> <div id="secundario"> </div> </div> <div id="pie"> </div> </div> </body> El código anterior crea una página con anchura variable que se adapta a la ventana del navegador. Para definir una página con anchura fija, solamente es necesario sustituir las anchuras en porcentajes por anchuras en píxel. Al igual que sucedía en el diseño a dos columnas, se puede optar por posicionar todos los elementos mediante float: left o se puede utilizar float: left para el menú y la zona principal de contenidos y float: right para el contenedor de los contenidos y la zona secundaria de contenidos.