"

Diseo de Pginas Web

Apunte 2: CSS



Este apunte incluye los siguientes temas:
. Concepto CSS
. Valores por defecto de las etiquetas HTML
. Modelo de caja-Dimensiones
. Regla CSS
. Tipos de Selectores
. Concepto de herencia
. Propiedades Float y clear
. Posiciones: Fija y Absoluta
. Fuentes tipogrficas
. Favicon
. Imgenes para web
. Jquery
. Navegadores
. Validacin del cdigo HTML y CSS
. Atajos de teclado




































#
CSS (Cascading Style Sheets)
Son hojas de estilo en cascada que se crean en archivos separados del archivo HTML y es el
que termina de brindar la forma/apariencia deseada del diseo preestablecido (Colores,
tamaos, tipografas, columnas, entre otras cosas).

Se escribe por medio de reglas. Estas estn compuesta por parmetros o propiedades, las
cuales llevan valores, encerrados entre claves.

Cada regla posee un selector (Que corresponde a una etiqueta HTML), que es el que
relaciona el CSS con el HTML.

A todo se lo denomina declaracin.


Ejemplo de cmo se escriben las reglas en el archivo .css

Body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #666 }

Body (Selector) {
margin (Parmetro): 0 (Valor del Parmetro);
font-family (Parmetro o Propiedad): Arial, Helvetica, sans-serif (Valor del Parmetro);
font-size (Parmetro o Propiedad): 12px (Valor del Parmetro);
background (Parmetro o Propiedad): #666 (Valor del Parmetro) } *

* Luego de finalizar el ltimo parmetro con su valor correspondiente no es necesario
colocar el punto y como, s en los anteriores, ya que si no estn, no se van a visualizar
en el HTML.


Pasos para realizar una hoja de estilo CSS para el HTML
1- Ir a Archivo / Nuevo
2- Abre ventana / seleccionar tipo de archivo: CSS / Crear-guardar

Aclaracin:
La hoja de estilos creada debe estar dentro de la carpeta del sitio que estn realizando.


Para que los estilos CSS se visualicen en el HTML se debe enlazar el archivo CSS al
archivo HTML.
Existen dos formas de hacerlo:
1. Escribir el cdigo (Si se conoce el mismo) entre las etiquetas head del HTML.
2. Arrastrar archivo CSS entre las etiquetas head

Cmo se escribe el cdigo?
<link rel="stylesheet" type="text/css" href="estilos.css"/>


Descripcin del cdigo:
rel="stylesheet" : Indica que el enlace es una hoja de estilo.
type="text/css" : Indica que el archivo es de tipo texto en sintaxis con CSS.
href="nombre.css" : Indica el nombre del archivo fuente de los estilos.




$
Valores por defecto de las etiquetas HTML


TENER EN CUENTA QUE:
Los valores por defecto (Predefinidos) que vienen en una etiqueta HTML se pueden
dejar, anular o cambiar por medio de los estilos CSS.


Las siguientes etiquetas son las que poseen valores por defecto:

- Body: Posee un margen (margin) en todas las segmentaciones: superior (top), inferior
(bottom), derecha (right) e izquierda (Left) aproximado de 12 px.

- h1, h2, h3, h4, h5, h6: Posee margen (margin) superior (top) e inferior (bottom).

- ul: Posee margen (margin), relleno (Padding) y vietas (Crculos que aparecen al lado de
cada elemento del listado).

- p: Tambin posee margen (margin) superior (top) e inferior (bottom). Pero como la p es la
etiqueta que divide el texto y por lo general deseamos espacio entre ellos, lo dejamos. Si el
diseo lo requiere se quita o pueden recurrir al interlineado (line-height) y darle el valor
deseado.


Modelo de caja - Dimensiones





Este modelo, ejemplo de caja y sus partes/segmentaciones se adapta a los elementos del
HTML.


Ejemplo de regla CSS para las dimensiones, por ejemplo de una div en gral.
Si queremos que el contenido sea de un ancho de 600px, la regla ser la siguiente:

div {
width: 380px
padding: 100px;
%
border: #000 solid 10px;
margin: 100px;
background: #999 }

Es decir, en principio tendramos:
600 px (ancho total de la caja)
-200 px (padding, el relleno de la caja se duplica porque se suma el derecho e izquierdo)
- 20 px (border, el borde de la caja se duplica porque se suma el derecho e izquierdo)
380 px (total de la resta)

El alto no importa porque varia segn el contenido que se incluya dentro del mismo.

Ejemplo de regla CSS para la div id llamada contenido (content):

#contenido {
padding: 100px;
border: 10px;
margin: 40px}

De esta forma se otorga padding (relleno), border (borde) y margin (margen) a todas las partes
(top: superior, right: derecha, bottom: inferior, Left: izquierda) de la div, es decir del id llamado
contenido.

Para colocar diferentes valores a cada parte y no repetir parmetros (ejemplo 1) debemos
ponerlos en el orden de las agujas del reloj empezando por la parte TOP (superior) (ejemplo
2):

Ejemplo 1:

#contenido{
padding-top: 100px;
padding-right: 50px;
padding-bottom: 30px ;
padding-left: 80px;
border-top: 10px;
border-right: 8px;
border-bottom: 4px;
border-left: 2px;
margin-top: 50px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 80px }

Ejemplo 2 (Lo conveniente para no repetir parmetros):

#contenido {
padding: 100px (padding-top) 50px (padding-right) 30px (padding-bottom) 80px (padding-left);
border: 10px (border-top) 8px (border-right) 4px (border-bottom) 2px (border-left);
margin: 50px (border-top) 30px (border-right) 20px (border-bottom) 80px (border-left) }


Tipos de Selectores

Selector de Etiqueta o Tipo
Elementos de la pgina cuya etiqueta HTML coincide con el valor del selector.
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin
los corchetes < y >)


&
Ejemplo:

CSS
h1 {
font-weight:
normal; margin:0 }

Selector Mltiple
Permite agrupar reglas con selector mltiple, es decir, selectores que tienen la misma regla.

Ejemplo:

CSS
h1, h2, h3 {
font-weight:
normal; margin:0 }

Selector de Id
id: Nombre nico e irrepetible.
Se aplica slo a un elemento de la pgina.
Se escribe en css por medio de un numeral (#) seguido del nombre que le dieron en el HTML

Ejemplo:

HTML
<div id="cabecera">
<h1>ADOBE DREAMWEAVER CS 5 - Diseo de Pginas Web</h1>
</div>

CSS
#cabecera {
background: #a2ae40 }

Selector de Class (Clase)
Se utiliza para aplicar estilos a un slo elemento de la pgina. De esta forma se puede aplicar
el mismo selector de clase a varios elementos de una pgina.

Ejemplo:

HTML
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>

CSS
.destacado {
color: #666 }

Selector Descendiente
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de
cierre del otro elemento. Es decir, los elementos que se encuentran dentro de otros elementos
Ejemplo:

HTML
<div id="menu">
<ul>
<li><a href="index.html">inicio</a></li>
<li><a href="estilos.html">inicio</a></li>
'
</ul>
</div>

CSS
#menu a {
display: block;
height: 20px;
width: 120px }


Selector Combinado o Compuesto
CSS permite la combinacin de uno o ms tipos de selectores para restringir el alcance de las
reglas CSS.

Podemos obligar que un estilo slo se aplique sobre un elemento que est dentro de otro.
Ejemplo:

CSS
#contenido {
color: #0000FF;
background: #FFC }

.resaltado {
background: #FFC }

Esto har que tanto el elemento #contenido como los elementos con la clase .resaltado
tengan el mismo color de fondo.
Pero qu ocurre si queremos resaltar algo dentro de #contenido?
Como no se ver tenemos que crear otra clase?
No es necesario, podemos indicar propiedades distintas que afecten a la clase .resaltado slo
cuando se encuentre dentro del elemento #contenido.
Lo hacemos escribiendo lo selectores en orden jerrquico y separados por espacios:

#contenido .resaltado {
background: #06F }

Ahora los textos marcados con la clase .resaltado en los dentro de #contenido se vern con
otro color de fondo.
Al escribir dos selectores seguidos obligamos a que el segundo tenga que estar dentro del
anterior.

Selector Universal
Se indica mediante un asterisco (*) en el CSS.
Elimina el margen y el relleno de todos los elementos HTML.
A pesar de su sencillez, no se utiliza habitualmente, ya que es difcil que un mismo estilo se
pueda aplicar a todos los elementos de una pgina.

Ejemplo:
CSS
* {
margin: 0;
padding: 0 }

Se puede utilizar todas las anidaciones que se desee y mezclar los selectores.






(
Concepto de Herencia en el CSS

Una de las caractersticas principales de CSS es la herencia de los estilos definidos para los
elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus
elementos descendientes heredan de forma automtica el valor de esa propiedad.


Uso del parmetro/propiedad float y clear

Las propiedades ms importante que debemos aprender para poder lograr casi todas las
formas posibles es Float y Clear.
Ambas se trabajan juntas, una sirve para complementar a la otra.

Float
Es una propiedad del CSS que nos permite hacer flotar un elemento a una posicin relativa
rompiendo el esquema normal de la pagina, rompiendo el flujo de HTML.
Esta propiedad tiene 3 valores importantes:
Left: Flota el elemento a la Izquierda.
Right: Flota el elemento a la Derecha
None: Que el elemento no Flota.

Clear
Es la propiedad que sirve para romper el esquema que estaba formando float.

Both (clear: both)
El valor both rompe el esquema de orden para los elementos con cualquier float, ya sea right o
left.


Posicin de los elementos

Por defecto los elementos HTML tienen por valor: Static (Esttico).
De esta manera los elementos se van colocando uno al lado del otro segn el flujo del HTML.

- Posicin Fija:
El estndar CSS considera que el posicionamiento fijo es un caso particular del
posicionamiento absoluto, ya que slo se diferencian en el comportamiento de las cajas
posicionadas.
La principal caracterstica de una caja posicionada de forma fija es que su posicin es
inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no
modifiquen su posicin ni aunque el usuario suba o baje la pgina en la ventana de su
navegador.
El elemento se posiciona en las coordenadas, ejes del body: top, right, bottom y left.
Su posicin es relativa de acuerdo al espacio disponible del navegador para la pgina.

- Posicin Absoluta:
El elemento se posiciona mediante las coordenadas top y left del elemento que los contiene.
Su posicin es relativa al elemento que la contiene.
No forman parte del flujo del HTML.

- Posicin Relativa:
Se posiciona de acuerdo al lugar que ocupan naturalmente.
Forman parte del flujo del HTML.



)
Fuentes Tipogrficas

El Dreamweaver dispone de algunas fuentes tipogrficas, pero si deseen otras fuentes
tipogrficas y que sean visualizadas en todos los navegadores por lo usuarios, se puede
recurrir a las fuentes api.

API (Application Programming Interface)
Interfase de programacin de Aplicacin: Es un conjunto de fuentes tipogrficas, como una
librera, biblioteca, para ser usada por otro software.

Par descargar estas fuentes se debe ir al sitio Google web font:
http://www.google.com/webfonts
All pueden seleccionar la tipogrfica. Les otorgan un cdigo HTML que se coloca entre el head
y la regla CSS para colocar en su archivo CSS.


Favicon

Favicon es el icono que se visualiza en las ventanas de los navegadores.
Significa icono de favoritos o icono de pgina.
Su tamao debe ser de 16 px por 16 px.
Su extensin es .ico
Se puede realizar desde un editor de .ico, el cual se realiza directamente on-line sin necesidad
de bajar alguna aplicacin, el sitio donde lo pueden realizar es el siguiente:
http://www.favicon.cc/ o crear en el Photoshop y luego reemplazar la extensin por la
correspondiente: .ico.

El cdigo que debe escribirse entre el head para que se visualice en todos los navegadores es
el siguiente:

<link rel="icon" type="image/x-icon" href="http://www.nombredelsitio.com.ar/favicon.ico" />


En href se llama a la pgina web y luego continua el camino correspondiente donde tienen
guardada la imagen, su icono con extensin .ico, el cual, cuando lo realizan, deben guardar
con el nombre favicon.ico.



Imgenes optimizadas para el sitio web: Photoshop

Las imgenes deben optimizarse correctamente desde photoshop.
Se utiliza este termino, porque la idea es ahorrar espacio, es decir, que las imgenes pesen
poco, pero se sigan viendo de un modo correcto, agradable (No pixeladas).
Para ello las imgenes deben tener una resolucin de 72 y guardarse con la extensin
adecuada, de acuerdo al tipo de imagen.

Si necesitan cortar una imagen se utiliza la herramienta: slice tool=herramienta de corte.
Seleccionan/cortan la imagen que se necesita (En el caso de que tengan un boceto
prediseado en capas) o sino abren una imagen que tengan y realizan los siguientes
pasos:

1. Un vez cortada la imagen o abierta la imagen
2. Ir a archivo / guardar imagen para web
3. Abre ventana
4. Colocar en modo: 4 previsualizaciones
5. Si es una imagen fotogrfica o con degradados escogemos .JPG al 60% (Para web no
necesitamos ms calidad) .
*
5. Si es una imagen con colores planos escogemos .GIF (Vamos bajando el nmero de
colores, tenemos que usar el menor nmero de colores pero sin estropear la imagen, vemos
cuantos kb ocupa la imagen - si no saben ver esto, no lo realizan - la imagen va a pesar menos
y se ver bien igual) o PNG 8. Se puede usar cualquiera de las extensiones. Ultimamente se
esta utilizando .png

Conclusin:
Hay una regla que funciona casi siempre, degradados = JPG, colores planos = GIF

Ventaja de esta herramienta:
Cuando guardas el archivo queda el sector seleccionado, de esta manera se puede volver a
utilizarla o modificarla, por si surge algn inconveniente durante el trabajo de maqueta en
Dreamweaver.

Nivel profesional: boceto prediseado:
Por lo general se realiza un boceto de cero en Photoshop, del portal y una pgina interna del
sitio web con las imgenes, tipografas, colores, dimensiones y ubicaciones correspondientes.
Entonces para maquetar en Dreamweaver les resulta ms rpido, porque ya tienen las
dimensiones de las imgenes, ancho de la pgina, el tamao de las columnas, los mrgenes,
etc.

Ver tamao de imagen:
Para ver el tamao de una imagen en Photoshop tienen que realizar los pasos siguientes:
1. Ir a Imagen.
2. Imagen de tamao.


Jquery

Es una biblioteca de JavaScript (Lenguaje de programacin), que permite simplificar la manera
de interactuar con los documentos HTML, manejar eventos, desarrollar animaciones y agregar
interaccin con la tcnica AJAX (Tcnica de desarrollo web para crear aplicaciones
interactivas) a pginas web. Fue presentada el 14 de enero de 2006.

Al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que
de otra manera requeriran de mucho ms cdigo, es decir, con las funciones propias de esta
biblioteca se logran grandes resultados en menos tiempo y espacio.


Jquery permite realizar: Galeras de imgenes, menes desplegable, etc. sin necesidad de
escribir el cdigo.



Navegadores : COMPLEMENTOS EXTENSIONES para desarrolladores de sitios Web

Los complementos/extensiones ayudan a los desarrolladores/diseadores web a visualizar y
trabajar el cdigo HTML y CSS en forma on-line de las pginas web que estn realizando.
De esta manera probar como quedan los valores dados, para luego realizarlo en el archivo
original (Los cambios que se realicen desde los complementos, como Firebug, se borran
cuando se recarga la pgina no quedan registrados en el archivo original !).

Navegador Firefox
Links para que descarguen el navegador firefox y sus complementos / extensiones (Para los
que no lo poseen en sus mquinas):

. Navegador firefox (mozilla):
http://www.mozilla.org/es-ES/firefox/fx/
Una vez descargado el firefox y abierto ste, descargar el resto:
"+
. Complemento Web Developer de Firefox:
https://addons.mozilla.org/es-es/firefox/addon/web-developer/

. Complemento Firebug de Firefox:
https://addons.mozilla.org/es-es/firefox/addon/firebug/

+ Otra forma de ver el cdigo HTML y CSS en navegador Firefox es ir a: herramientas /
desarrollo web / inspector / Abre html y estilos y con el inspector sealas cada etiqueta.

Navegador Internet Explorer (IE)
Atajo de teclado: alt + x: Abre men de herramientas / chiquear herramientas de desarrollo.

Navegador Chrome
Ir a icono con forma de herramienta (vrtice superior derecho) / herramientas / herramientas
para desarrolladores (Te abre algo similar al Firebug de Firefox, donde podes observar el
cdigo HTML y el CSS).
Tambin se pueden bajar extensiones (Ver).


Previsualizar el sitio en todos los navegadores posibles


Recuerden que una vez que comiencen con el sitio y a establecer las reglas para dar su
apariencia final deben previsualizar la pgina en todos los navegadores posibles.

Los ms populares: Firefox, Internet Explorer, Chrome, tambin: Safari, Opera, entre
otros.

Todos no estn preparados para el cdigo y algunas cosas no se van a visualizar
correctamente. El ms ptimo es el Firefox.



Validacin de cdigo HTML y CSS en W3C

W3C
World Wide Web Consortium (Consorcio de la Web o Telaraa Mundial).
Organismo que regula los estndares en la www.
Pa leer: http://www.w3c.es/
Para darse cuenta si el cdigo esta escrito correctamente deben validar el cdigo, tanto HTML
como el CSS, por separado, colocando en la pgina w3C:
- para validar HTML, ingresar la direccin de URL (El sitio web ya debe estar colgado
en un servidor): http://validator.w3.org/
- para validar el CSS, cargando archivo CSS: http://jigsaw.w3.org/css-
validator/#validate_by_upload

Luego de realizada la validacin, si est todo correcto, te otorgan un icono, por medio de un
cdigo HTML, para que coloques en el lugar que desees dentro del cdigo HTML de tu sitio,
que avala que tu pgina ha sido validada por w3C, dando prestigio a la misma para los que
conocen esta validacin y cotizndola de una manera diferente.


Atajos de teclado

Generales
Ctrl + n = archivo nuevo
Ctrl + c = copiar
Ctrl + v = pegar
""
Ctrl + z = volver atrs cuantas veces se requiera
Ctrl + y = volver adelante cuantas veces se requiera

Dreamweaver
F12= Previsualizar pgina en navegador. No es necesario estar conectado.


Navegador
Ctrl + u = Ver cdigo fuente de pgina web en navegador.
Shift + Ctrl + S= Quitar estilos de una pgina web.
















































Si existen errores o algo que quieran agregar para enriquecer la informacin o dudas al
respecto me escriben a: bettinadcv@gmail.com