Introdu css clase1

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-image: url("butterfly.gif");
}
h1 {
color: #990000;
}

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-repeat: no-repeat;
}
h1 {
color: #990000;
}

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.
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-attachment: fixed;
}
h1 {
color: #990000;
}

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.
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-position: right bottom;
}
h1 {
color: #990000;
}

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-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>
...
...
<h1>Capítulo 2</h1>
...
...
<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>
...
...
<h1 id="c2">Capítulo 2</h1>
...
...
<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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (12)

Similar a Introdu css clase1

Similar a Introdu css clase1 (20)

Más de John Orellana

Más de John Orellana (16)

Introdu css clase1