Css

CSS (Cascade Style Sheets)
El lenguaje HTML es poco flexible a la hora de controlar la apariencia de una

pgina. Los problemas aparecen en el momento en que HTML empieza a utilizarse
para crear "imagen de marca". Pensemos que la intensa difusin de internet, fue
un punto a favor para que la funcin original de html, representar la estructura
lgica de un documento, pasase a centrarse en la forma. HTML no fue pensado
para trabajar sobre los elementos formales de los documentos web.
Hoy en da los aspectos formales han cobrado mucha importancia. Los diseadores
web hemos tenido que recurrir a trucos y a nuestra propia astucia para intentar
disimular las carencias del lenguaje HTML en lo concerniente a la presentacin
visual.
Si quisiramos hacer cambios globales en un sitio web, lo ms probable es que nos
encontremos con situaciones bastante problemticas. Imaginemos, por ejemplo, lo
que necesitaramos para cambiar el tipo de letra de un sitio web compuesto por
300 pginas.

Una caracterstica esencial de las hojas de estilo en cascada (CSS) es
la posibilidad de separar los elementos formales de los de contenido. De
esta forma, slo con una pequea modificacin de la hoja de estilo es posible
cambiar el aspecto de todas las pginas en las que se aplica esa hoja.

No todas las versiones de los navegadores las soportan. Si consideramos los dos
principales Netscape es capaz de utilizarlas desde la versin 4.0 y Explorer desde
la 3.0

Por qu se llaman hojas de estilo?
Con las hojas de estilo podemos crear clases y pseudoclases. stas nos
permiten modificar e indicarle al navegador la forma en la que tiene que presentar
cualquier elemento HTML.

Por qu se llaman "en cascada"?
Cuando creamos un estilo, las especificaciones que se realicen para un
determinado elemento sern aplicables a todos aquellos elementos que se
encuentren "por debajo" de l atendiendo a un criterio de herencia. Por ejemplo, si
especificamos un tipo de letra para el elemento <body> todos aquellos elementos
que puedan heredar las caractersticas se presentarn con el mismo tipo de
fuente. As, el elemento <p> heredar el tipo de letra salvo que especifiquemos lo
contrario.

Tambin debemos de tener en cuenta que se establece un orden de prioridad para
la aplicacin de las normas en caso de que resulten contradictorias. El orden de
preferencia para aplicar una norma es el siguiente:

- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza nuestra pgina.

Si tenemos en cuenta el orden mencionado, lo ms razonable es crear una hoja de
estilo en un archivo independiente y vincular las pginas a este archivo. Si
queremos realizar alguna modificacin en un elemento concreto podramos recurrir
a uno de los dos primeros procedimientos que deberan resultar preferentes por
ser ms especficos.

Sintaxis

Cmo agregar estilos CSS a una pgina web.
Podemos usar cuatro mtodos diferentes para agregar estilos CSS al cdigo HTML
de la pgina web:

1. Incustrar una hoja de estilo

Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final
(<style> y </style>) de la seccin encabezado de la pgina web:

<head>
<title>Hoja de estilo incustrada (CSS)</title>
<style type="text/css">

</style>
</head>

El atributo type de la etiqueta <style> indica al explorador el tipo de hoja de estilo
que debe esperar.
2. Vinculacin a una hoja de estilo externa

Para crear un vnculo a una hoja de estilo externa, insertamos una etiqueta <link>
como en el ejemplo siguiente:

<head>
<title>Hoja de estilo vinculada</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>

La etiqueta <link> indica al explorador web que use las reglas de formato CSS en
el archivo llamado "estilo.css". El atributo type identifica el archivo como un
archivo de texto con informacin CSS, y el atributo href indica al explorador el
nombre y, si es necesario, la ruta de acceso del archivo con las definiciones de
hojas destilo que el explorador va a abrir. Tambin puede incluir un
atributo media para especificar los medios a los que se aplican las reglas de la hoja
de estilo. Al leer el valor del atributo media (en la etiqueta <link>), el explorador
web puede descargar selectivamente archivos de hojas de estilo aplicables
nicamente a los medios utilizados por el explorador. Por ejemplo, explorador web
puede impedir la descarga de la siguiente hoja de estilo que se aplicar a "tv" (es
decir, televisin) al mostrar documentos HTML en la pantalla de un equipo
estndar:

<link href="webtv.css" rel="stylesheet" type="text/css" media="tv" >
Descriptores de tipos de medios de hojas de estilo en cascada de nivel 2 (CSS
level2)
Descriptor de tipo
de medios
Aplicar reglas de hojas de estilo a
"all" Todos los dispositivos
"aural" Sintetizadores de voz
"Braille" Dispositivos tctiles y de braille
"embossed" Impresoras de pginas de braille
"handheld" Dispositivos de mano (como PDA
"print"
Medios de pginas (como una pgina impresa) o pginas que se
muestran en pantalla (como una "presentacion preliminar").
"Projection"
Proyectores y dispositivos de impresin en diapositivas y
transparencias
"screen" Pantallas en color de computadoras
"tty"
Dispositvos con cuadrculas de caracteres de punto fijo, como
teletipos
"tv"
Dispositivos del estilo de la televisin (baja resolucin, color,
desplazacmiento limitado, dispone de sonido).

3. Importar una hoja de estilo externa

Es similar a la vinculacin. La diferencia es que puede combinar la importacin con
otros mtodos, algo que no ocurre con la vinculacin. El siguiente ejemplo no slo
contiene una instruccin de import, sino tambin reglas CSS incrustadas que dan
estilo a encabezados de nivel dos y modifican el estilo del texto principal de la
pgina web:

<head>
<title>Hoja de estilo en cascada importada(CSS)</title>
<style type="text/css">

</style>
</head>

El archivo estilo.css incluye la siguiente regla:

body {background:#ADD8E6; color:maroon;}

Cul ser la regla que se impondr?
4. Aplicar estilos en lnea de etiquetas HTML

Imaginemos que deseamos aplicar una sangra de cuatro centmetros a un nico
encabezado de nivel dos y mostrar el color del encabezado como texto blanco
sobre un fondo azul. Para especificar una regla de formato CSS que se aplique
solamente a una etiqueta, utilizamos el atributo style para especificar la regla en la
etiqueta como <nombreDeEtiqueta style="Declaraciones de CSS">. As, en este
ejemplo, podriamos insertar la regla CSS en la etiqueta <h2> de la siguiente
manera:

<html>
<head>
<title>Estilos en lnea </title>
<head>
<body>
<h2 style="text-indent:1.5 in; background:blue; color:white;">
Este texto de encabezado es blanco con un fondo azul, sangrado de
4 centmetros. </h2>
</body>
</html>
Descargar referencia css
Gramtica de CSS
Selectores

Podemos redifinir cualquier elemento o etiqueta xhtml, esto afectar a todos los
elementos h1:

h1 { }

Selectores de clase

Los selectores de clase se integran en el documento utilizando el atributo class.
Existen dos tipos de selectores de clase: Generales y especficos.

Selectores generales:

.small

<a class="small">Novedades</a>
<p class="small">Esto es un prrafo de texto</p>

Selectores especficos:

p.small

Podemos escribir clases ms especficas para un elemento:

p.small { font-size: 10px;}
p.medium {font-size: 12 px;}
p.large {font-size: 14 px;}

La ventaja de estos selectores especficos es que evitamos el solapamiento y una
mayor flexibilidad a la hora de aplicar estilos a cualquier elemento.

Selectores ID

Son similares a los selectores de clase. Se diferencia en la semntica y en el
comportamiento.

Sintaxis:

#cabecera

<div id="cabecera">Contenido de cabecera</div>

Esto no sera correcto:

#barra

<div id="barra">Bienvenidos</div>
<div id="barra">Esto es una prueba de diseo web </div>

Selectores contextuales (descendientes)

p em { }

Pseudo clases

a:link
a:visited
a:hover
a:active

Como hemos visto, podemos combinar estos selectores y clases. As tenemos la
posibilidad de crear mltiples estilos, por ejemplo para un enlace:

a.principal:link
a.pie:link

Pseudo elementos

CSS2 ofrece un total de cuatro pseudo-elementos de selector.

:first-line
:first:letter
:before
:after

Grupo de selectores

h1, h2, h3 {font-family: Arial, sans-serfi;}

Pseudo selectores dinmicos

:hover
:active
:focus

Selectores hijo

div>p { }

Reglas, declaraciones, propiedades

body {

font-family: Arial, sans-serif;
color: blue;

}

Una hoja de estilo contiene al menos una regla y puede contener tantas como
necesites.

Propiedades

Disponemos de una serie de abreviaciones para escribir las propiedades:
Propiedades
Abreviacin Propiedades que incluye
background
background-attachment
background-color

background-image
background-position
background-repeat
border
border-color
border-style
border-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
font
font-family
font-size
font-style
font-weight
font-variant
font-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-top
margin-right
margin-bottom
margin- left
padding
padding-top
padding-right
padding-bottom
padding-left
Ejemplo:

p {

font-family: Arial, sans-serif;
font-size: Arial, sans-serif;
font-weight: Arial, sans-serif;
font-style: Arial, sans-serif;
line-height: 12px;
color: black ;

}

Abreviado: p {
font: bold normal 16px/15px Arial, sans-serif;
}

body { margin: .10in .75in .75in .10in;}
Elementos de bloque

h1-h6
p
form
table
ol
ul

Elementos en lnea

a
em
strong
img
input
Ejercicio 1

Documento sin estilo en txt. Dar formato con css.

1. Definimos mrgenes, fuente, colr y color de fondo para el cuerpo del documento
(body)

2. Aadimos estilos a las cabeceras.

Cabecera principal (h1) (margen, relleno, fuente, color, color de fondo y borde
inferior)
Cabecera secundaria (h2) (margen, relleno, fuente y color)
Prrafo (p) (margen, fuente,)

3. Las imgenes sin borde (img)

4. Los enlaces (etiqueta <a>):

El estilo principal (a:link) con su color, color de fondo transparente y sin
subrayado. Cuando pase el cursor sobre un link (a:hover) que cambie de color del
link, el color de fondo y que siga sin subrayar.

5. Las listas desordenadas (ul) (li). Fuete, tamao, espacio entre lneas, tipo de
letra

6. Por ltimo, el estilo para las clases small

Css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Css

Diunggah oleh

Hak Cipta:

Format Tersedia

CSS (Cascade Style Sheets)

El lenguaje HTML es poco flexible a la hora de controlar la apariencia de una

Anda mungkin juga menyukai