CSS Cascading Style Sheets<br />Reglas de Estilo<br />
Que es el CSS<br />El CSS es el código que pasa la información del formato y diseño a la computadora.<br />El CSS debe est...
Dando Estilo a una Pagina<br />Cada browser (como internet explorer o firefox, o chrome) tiene su propia CSS que da las re...
Medidas por Diseño<br />Cuando hacemos los disenos vamos a utilizar dos unidades nuevas<br />Pixels – PX – Pixeles es una ...
Cambiando el Texto<br />El texto tiene varias elementos que podemos ajustar incluyendo:<br />Font (como parece las letras)...
Una Nota Sobre los Colores<br />Cuando estamos diseñando una pagina web es normal a tener el deseo a escoger colores vibra...
Background<br />Con el Background o Fondo podemos poner colores o imágenes.<br />Podemos ajustar los siguente aspectos:<br...
Borders<br />Los bordes tienen tres partes que podemos formatear.<br />Border Style – Como aparece el borde<br />BorderWid...
Margin y Padding<br />
Width y Height<br />En posición encontramos muchas opciones pero por ahora vamos a fijarnos en Width y Height, o Anchura y...
FloatsLeft y Right<br />El texto flotado pega al lado izquierdo o derecha y deja que otra texto sube a su lado si hay bast...
Clear – AdjustandoFloats<br />Aveces no queremos que todas las cosas flotan hasta arriba.  Para prevenir esto tenemos que ...
Próxima SlideShare
Cargando en…5
×

Css cascading style sheets

455 visualizaciones

Publicado el

Segunda Presentacion en el serie sobre diseno de pagina web

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
455
En SlideShare
0
De insertados
0
Número de insertados
1
Acciones
Compartido
0
Descargas
9
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Css cascading style sheets

  1. 1. CSS Cascading Style Sheets<br />Reglas de Estilo<br />
  2. 2. Que es el CSS<br />El CSS es el código que pasa la información del formato y diseño a la computadora.<br />El CSS debe estar en una hoja separado del HTML.<br />
  3. 3. Dando Estilo a una Pagina<br />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><br />Nosotros podemos cambiar estos estilos y poner cualquier formato que deseamos a cualquier elemento.<br />Para cambiar el formato de un elemento solamente tenemos que Seleccionar el elemento utilizando su simbolo h1, h2, p, ul, li, …<br />
  4. 4. Medidas por Diseño<br />Cuando hacemos los disenos vamos a utilizar dos unidades nuevas<br />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.<br />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.<br />
  5. 5. Cambiando el Texto<br />El texto tiene varias elementos que podemos ajustar incluyendo:<br />Font (como parece las letras)<br />Font-Size (el tamaño de las letras)<br />Font-Weight (si es Boldo Normal)<br />Font-Style (si es Normal o Italic o Oblique)<br />Font-Variant (Normal o Small Caps)<br />Color<br />TextDecoration (Underline, Strikethrough, Normal)<br />
  6. 6. Una Nota Sobre los Colores<br />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. <br />
  7. 7. Background<br />Con el Background o Fondo podemos poner colores o imágenes.<br />Podemos ajustar los siguente aspectos:<br />Background Color – El color del fondo<br />BackgroundImage – La ubicación de la imagen que queremos poner en el fondo<br />BackgroundRepeat – Si la imagen esta repitido<br />BackgroundAttachment – Si la imagen esta fijado o si mueve con el contenido<br />X y YPosicion – La posicion de la imagen del fondo<br />
  8. 8. Borders<br />Los bordes tienen tres partes que podemos formatear.<br />Border Style – Como aparece el borde<br />BorderWidth – La anchura del borde<br />Border Color – El color del borde<br />La opción “SameforAll” significa igual para todos. Hay algunos estilos que require que este opción esta escogido.<br />
  9. 9. Margin y Padding<br />
  10. 10. Width y Height<br />En posición encontramos muchas opciones pero por ahora vamos a fijarnos en Width y Height, o Anchura y Altura.<br />La anchura del diseño debe ser menos de 800 pixeles para caber en las computadoras de resolución baja.<br />
  11. 11. FloatsLeft y Right<br />El texto flotado pega al lado izquierdo o derecha y deja que otra texto sube a su lado si hay bastante espacio.<br />Tiene que tener una anchura especificada que es meno del contenedor por las flotas a funcionar.<br />
  12. 12. Clear – AdjustandoFloats<br />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.<br />

×