Segunda Presentacion en el serie sobre diseno de pagina web

1. CSS Cascading Style Sheets Reglas de Estilo

2. Que es el CSS El CSS es el código que pasa la información del formato y diseño a la computadora. El CSS debe estar en una hoja separado del HTML.

3. Dando Estilo a una Pagina Cada browser (como internet explorer o firefox, o chrome) tiene su propia CSS que da las reglas basicas a una pagina web. Es por esto que un <h1> parece mas grande de un <h2> Nosotros podemos cambiar estos estilos y poner cualquier formato que deseamos a cualquier elemento. Para cambiar el formato de un elemento solamente tenemos que Seleccionar el elemento utilizando su simbolo h1, h2, p, ul, li, …

4. Medidas por Diseño Cuando hacemos los disenos vamos a utilizar dos unidades nuevas Pixels – PX – Pixeles es una medida que se utilice con imágenes y tamaños que aparecen en la pantalla. Un pixel es el medido más pequeño. Em – Un emmedida el tamaño de texto con la altura de la letramayúscula M. Los M son relativa y es la unidadquedebesutilizar con texto.

5. Cambiando el Texto El texto tiene varias elementos que podemos ajustar incluyendo: Font (como parece las letras) Font-Size (el tamaño de las letras) Font-Weight (si es Boldo Normal) Font-Style (si es Normal o Italic o Oblique) Font-Variant (Normal o Small Caps) Color TextDecoration (Underline, Strikethrough, Normal)

6. Una Nota Sobre los Colores Cuando estamos diseñando una pagina web es normal a tener el deseo a escoger colores vibrante y emocionante, pero AVISO, No todos los colores son fácil a leer. Intenta a poner el texto en blanco y negro o colores con un contraste. La pagina web no es solamente que necesita aparecer bien, pero también tiene que transferir y compartir la informacion.

7. Background Con el Background o Fondo podemos poner colores o imágenes. Podemos ajustar los siguente aspectos: Background Color – El color del fondo BackgroundImage – La ubicación de la imagen que queremos poner en el fondo BackgroundRepeat – Si la imagen esta repitido BackgroundAttachment – Si la imagen esta fijado o si mueve con el contenido X y YPosicion – La posicion de la imagen del fondo

8. Borders Los bordes tienen tres partes que podemos formatear. Border Style – Como aparece el borde BorderWidth – La anchura del borde Border Color – El color del borde La opción “SameforAll” significa igual para todos. Hay algunos estilos que require que este opción esta escogido.

9. Margin y Padding

10. Width y Height En posición encontramos muchas opciones pero por ahora vamos a fijarnos en Width y Height, o Anchura y Altura. La anchura del diseño debe ser menos de 800 pixeles para caber en las computadoras de resolución baja.

11. FloatsLeft y Right El texto flotado pega al lado izquierdo o derecha y deja que otra texto sube a su lado si hay bastante espacio. Tiene que tener una anchura especificada que es meno del contenedor por las flotas a funcionar.

12. Clear – AdjustandoFloats Aveces no queremos que todas las cosas flotan hasta arriba. Para prevenir esto tenemos que poner un Clear que elimina el efecto de las flotas por el contenido.