Hojas de Estilo de Cascada

Instituto Tecnolgico de Mrida
Ingeniera en sistemas computacionales.

Programacin Web.
Maestro: MINE. Hctor Jess Cetina

Cordero.
Tarea: Hojas de estilos de cascadas(CSS).

Alumno: Sadmi Francisco Figueroa Daz.
Fecha: 11 de julio de 2014
CSS EN HTML
Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la
presentacin de documentos HTML o XML, esto incluye varios lenguajes basados en XML como
son XHTML o SVG. Adems, es usado para modificar la interfaz de usuario de aplicaciones y programas,
este es el caso de los productos basados en XUL como son Firefox, Seamonkey o Thunderbird.
Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para disear un sitio, sino
para la presentacin de datos tabulares. La utilizacin del border=0 y las imgenes transparentes
hicieron posible crear una rejilla que permiti a los diseadores organizar textos e imgenes, establecer
tamaos y ubicar objetos. Pero sto es sencillamente incorrecto. Las tablas no se crearon para maquetar
y no deben utilizarse para eso, porque de esta forma se mezclan presentacin y contenido.
La solucin es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son ms las empresas que
deciden dejar atrs las tediosas tablas y evolucionar desarrollando sus sitios respetando los estndares
establecidos por la W3C (organizacin internacional que desde hace unos 12 aos se dedica al
desarrollo de pautas y estndares web), lo que facilita la accesibilidad y la correcta visualizacin de las
pginas en los navegadores que respeten dichos estndares.
Algunas de las ventajas de la maquetacin con CSS:
Separacin de forma y contenido. Generalmente CSS y HTML se encuentran en archivos

separados, lo que facilita el trabajo en equipo porque diseador y programador pueden trabajar
independientemente. Por otro lado, permite el acceso a distintos navegadores y dispositivos.
Trfico en el servidor. Las pginas pueden reducir su tamao entre un 40% y un 60%, y los
navegadores guardan la hoja de estilos en la cach, sto reduce los costos de envo de informacin.
Tiempos de carga. Por la gran reduccin en el peso de las pginas, mejora la experiencia del
usuario, que valora de un sitio el menor tiempo en la descarga.
Precisin. La utilizacin de CSS permite un control mucho mayor sobre el diseo, especificando
exactamente la ubicacin y tamao de los elementos en la pgina. Tambin se pueden emplear
medidas relativas o variables para que la pantalla o la caja contenedora se acomode a su contenido.
Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario introducir

un cambio porque se modifica un solo archivo, el de la presentacin, sin tener que tocar las pginas
que contienen la estructura con el contenido.
Diseo unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio

con slo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo archivo
permite mantener la misma apariencia en todas las pginas.
Posicionamiento. Las pginas diseadas con CSS tienen un cdigo ms limpio porque no llevan
diseo, slo contenido. Esto es semnticamente ms correcto y la pgina aparecer mejor posicionada
en los buscadores. Google navega obviando el diseo.
SINTAXIS BASICA DE CSS

Digamos que queremos un bonito color rojo como fondo de nuestra pgina web:
Usando HTML podramos haberlo conseguido as:
<body bgcolor="#FF0000">
Con CSS el mismo resultado puede lograrse as:
body {background-color: #FF0000;}
El cdigo usado es ms o menos idntico para HTML y CSS. El ejemplo anterior muestra el modelo CSS
fundamental:
APLICANDO CSS A UN DOCUMENTO HTML

Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos mtodos se
explican a continuacin. Te recomendamos que te centres en el tercero, es decir, el externo.
METODO 1: EN LINEA (atributo style)
Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior
sobre el color de fondo rojo, CSS se puede aplicar as:
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una pgina con fondo rojo</p>
</body>
</html>
METODO 2: INTERNO (la etiqueta style)

Otra forma es incluir el cdigo CSS usando la etiqueta HTML <style>. Por ejemplo, as:
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una pgina con fondo rojo</p>
</body>
</html>
METODO 3: EXTERNO (enlace a una hoja de estilo)
El mtodo recomendado es enlazar con lo que se denomina hoja de estilo externa. A lo largo de este
tutorial usaremos este mtodo en todos nuestros ejemplos.
Una hoja de estilo externa es sencillamente un fichero de texto con la extensin .css. Como cualquier
otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y est localizada en una carpeta que se
llama style. Esta situacin se puede ilustrar de la siguiente manera:
El truco consiste en crear un vnculo desde el documento HTML (por ejemplo, default.htm) con la hoja de
estilo (style.css). Dicho vnculo se puede crear con una sencilla lnea de cdigo HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Fjate cmo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.
La lnea de cdigo debe insertarse en la seccin de encabezado del cdigo HTML, es decir, entre la
etiqueta <head> y </head>. De esta manera:
<html>
<head>
<title>Mi documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Este vnculo indica al navegador que debera usar la presentacin del fichero CSS al mostrar el fichero
HTML. Lo realmente bueno de este mtodo es que se pueden vincular varios documentos HTML con la
misma hoja de estilo. En otras palabras, se puede usar un nico fichero CSS para controlar la
presentacin del muchos documentos HTML.
Esta tcnica puede

ahorrarte mucho trabajo. Si
quisieras cambiar,
por ejemplo, el color de fondo
de un sitio web
compuesto por 100 pginas, un
hoja de estilo
puede ahorrarte el tener que
cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en
unos segundos modificando parte del cdigo de la hoja de estilo principal.
ETIQUETAS Y ATRIBUTOS DE CSS
FUENTES - FONT
color: #009900;
color
valor RGB o nombre de color
color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiqetas de HTML. No
todos los nombres de colores son admitidos en el estandar, es aconsejable
entonces utilizar el valor RGB.
xx-small | x-small | small |
medium | large | x-large | xxfont-size
large
font-size:12pt;
Unidades de CSS
font-size: x-large;
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor
exactitud.
serif | sans-serif | cursive |
font-family
fantasy | monospace
font-family:arial,helvetica;
Todas las fuentes habituales
font-family: fantasy;
Con este atributo indicamos la familia de tipografia del texto. Los primeros valores
son genricos, es decir, los exploradores las comprenden y utilizan las fuentes que
el usuario tenga en su sistema.
Tambin se pueden definir con tipografas normales, como ocurra en html. Si el
nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien.
normal | bold | bolder | lighter
font-weight
| 100 | 200 | 300 | 400 | 500 |
font-weight:bold;
600 | 700 | 800 | 900
font-weight: 200;
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner
negrillas con total libertad.
Normal y 400 son el mismo valor, as como bold y 700.
font-style:normal;
font-style
normal | italic | oblique
font-style: italic;
Es el estilo de la fuente, que puede ser normal, itlica u oblcua. El estilo oblique es
similar al italic.
PRRAFOS - TEXT
line-height
normal y unidades CSS
line-height: 12px;
line-height: normal;
El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas
caractersticas que no se podian mofificar utilizando HTML.
text-decoration
none | [ underline || overline
text-decoration: none;
|| line-through ]
text-decoration: underline;
Para establecer la decoracin de un texto, es decir, si est subrayado, sobrerayado

o tachado.
text-align: right;
text-align
left | right | center | justify
text-align: center;
Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de
estilo permiten el justificado de texto, aunque recuerda que no tiene por que
funcionar en todos los sistemas.
text-indent: 10px;
text-indent
Unidades CSS
text-indent: 2in;
Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y
novedosa.
text-transform
capitalize | uppercase |
text-transform: none;
lowercase | none
text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en

maysculas de todas las palabras, todo en maysculas o minsculas.
FONDO - BACKGROUND
Background- Un color, con su nombre o su
color
background-color: green;
valor RGB
background-color: #000055;
Sirve para indicar el color de fondo de un elemento de la pgina.

background-image: url(mrmol.gif) ;
Background-
El nombre de la imagen con
background-image:
image
su camino relativo o absoluto
url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la

pgina
BOX - CAJA
margin-left: 1cm;
Margin-left
Unidades CSS
margin-left: 0,5in;
Indicamos con este atributo el tamao del margen a la izquierda

margin-right: 5%;
Margin-right
Unidades CSS
margin-right: 1in;
Se utiliza para definir el tamao del margen a la derecha

margin-top: 0px;
Margin-top
Unidades CSS
margin-top: 10px;
Indicamos con este atributo el tamao del margen arriba de la pgina

margin-bottom: 0pt;
Margin-bottom
Unidades CSS
margin-top: 1px;
Con el se indica el tamao del margen en la parte de abajo de la pgina

padding-left: 0.5in;
Padding-left
Unidades CSS
padding-left: 1px;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente

y el contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-right: 0.5cm;
Padding-right
Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del
elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de
las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
padding-top: 10pt;
Padding-top
Unidades CSS
padding-top: 5px;
Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el

contenido de este.
Padding-
padding-right: 0.5cm;
bottom
Unidades CSS
padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elementocontinente y el contenido de este.
border-color: red;
Border-color color RGB y nombre de color
border-color: #ffccff;
Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se
puede poner colores por separado con los atributos border-top-color, border-rightcolor, border-bottom-color, border-left-color.
Border-style
none | dotted | solid | double |
border-style: solid;
groove | ridge | inset | outset
border-style: double;
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no
parece funcionar), solid=solido, double=doble borde, y desde groove hasta outset
son bordes con varios efectos 3D.
border-width: 10px;
border-width
Unidades CSS
border-width: 0.5in;
El tamao del borde del elemento al que lo aplicamos.

float
none | left | right
float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se

agrupe alrededor de dicho elemento. Igual que el atributo align en imagenes en sus
valores right y left.
clear
none | right | left
clear: right;
Si este elemento tiene a su altura imagenes u otros elementos alineados a la

derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar
donde ya no tenga esos elementos al lado que indiquemos.
CONCLUSIN:
Con CSS podemos mejorar la apariencia de todo el sitio web al activar una sola definicin de estilo en
cada pgina, tambin es ms prctico ya que se puede cambiar el aspecto en todo el sitio Web solo
cambiando unos cuantos valores en algunas lneas de cdigos, hace que el cdigos HTML sean ms
fciles de leer ya que los estilos se definen por separado, las pginas se cargan ms rpido ya que hay
menos cantidad de HTML en cada pgina y posicionar los elementos de la pgina de una manera ms
simple y uniforme.
ENLACES:
http://www.desarrolloweb.com/articulos/186.php
http://www.desarrolloweb.com/articulos/por-que-diseniar-css.html
https://developer.mozilla.org/es/docs/Web/CSS/Referencia_CSS

Hojas de Estilo de Cascada

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Hojas de Estilo de Cascada

Enviado por

Direitos autorais:

Formatos disponíveis

Instituto Tecnolgico de Mrida

Ingeniera en sistemas computacionales.

Maestro: MINE. Hctor Jess Cetina

Tarea: Hojas de estilos de cascadas(CSS).

Separacin de forma y contenido. Generalmente CSS y HTML se encuentran en archivos

Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario introducir

Diseo unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio

SINTAXIS BASICA DE CSS

Con CSS el mismo resultado puede lograrse as:

body {background-color: #FF0000;}

APLICANDO CSS A UN DOCUMENTO HTML

METODO 2: INTERNO (la etiqueta style)

METODO 3: EXTERNO (enlace a una hoja de estilo)

Esta tcnica puede

valor RGB o nombre de color

Todas las fuentes habituales

| 100 | 200 | 300 | 400 | 500 |

600 | 700 | 800 | 900

normal | italic | oblique

normal y unidades CSS

none | [ underline || overline

Para establecer la decoracin de un texto, es decir, si est subrayado, sobrerayado

left | right | center | justify

Nos permite transformar el texto, haciendo que tenga la primera letra en

Sirve para indicar el color de fondo de un elemento de la pgina.

El nombre de la imagen con

su camino relativo o absoluto

Colocamos con este atributo una imagen de fondo en cualquier elemento de la

Indicamos con este atributo el tamao del margen a la izquierda

Se utiliza para definir el tamao del margen a la derecha

Indicamos con este atributo el tamao del margen arriba de la pgina

Con el se indica el tamao del margen en la parte de abajo de la pgina

Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente

Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el

none | dotted | solid | double |

groove | ridge | inset | outset

El tamao del borde del elemento al que lo aplicamos.

none | left | right

Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se

none | right | left

Si este elemento tiene a su altura imagenes u otros elementos alineados a la

Você também pode gostar