empezando a trabajar con CSS conceptos básicos

1. Mariela Tapia

2. Hojas de Estilo
• Hojas de Estilo en Cascada (Cascade Stylesheets)
• El organismo W3C (World Wide Web Consortium), encargado
de crear todos los estándares relacionados con la web,
propuso la creación de un lenguaje de hojas de estilos
específico para el lenguaje HTML
• Publicado en 1996
• Amplia el lenguaje HTML separando el diseño en hojas CSS
• Vincula documentos HTML con plantillas de diseño
• CSS3

3. Por qué usar CSS
• El ejemplo anterior utiliza la etiqueta <font> con sus atributos
color, face y size para definir el color, el tipo y el tamaño de
letra de cada elemento <p> de la página.
• Si la página tuviera 50 elementos diferentes, habría que
insertar 50 etiquetas <font>
• Si el sitio web entero se compone de 100 páginas diferentes,
habría que definir 5000 etiquetas <font>

4. Por qué usar CSS
• Y si queremos cambiar el diseño del sitio!!!

5. Por qué usar CSS
• Con las hojas de estilo sólo debemos crear unas cuantas líneas
y cambiaremos de diseño las veces que queramos

6. Por qué usar CSS
• Y así de fácil podemos pasar de esto

7. Por qué usar CSS
• A esto

8. Colores
• Colores por palabras clave
• Colores en hexadecimal
#ffff00 (amarillo)
• RGB define un color indicando la
cantidad de color rojo, verde y
azul que se debe mezclar para
obtener ese color.
rgb(71, 98, 176)
rgb(27%, 38%, 69%)

9. Estructura CSS
@charset "utf-8";
Selector{Propiedad1: valor; Propiedad2: valor;Propiedad3: valor; }
Selector{
Propiedad1: valor;
Propiedad2: valor;
Propiedad3: valor;
}
/* así se escribe los
comentarios */
• EL borrador de CSS3 tiene 239 propiedades.

10. Glosario Básico
• Regla: cada uno de los estilos que componen una hoja de estilos
CSS. Cada regla está compuesta de una parte de "selectores", un
símbolo de "llave de apertura" ({), otra parte denominada
"declaración" y por último, un símbolo de "llave de cierre" (}).
• Selector: indica el elemento o elementos HTML a los que se aplica la
regla CSS.
• Declaración: especifica los estilos que se aplican a los elementos.
Está compuesta por una o más propiedades CSS.
• Propiedad: característica que se modifica en el elemento
seleccionado, como por ejemplo su tamaño de letra, su color de
fondo, etc.
• Valor: establece el nuevo valor de la característica modificada en el
elemento.

11. Formas de Incluir CSS
• Dentro del mismo Tag

12. Formas de Incluir CSS
• Dentro del mismo HTML

13. Formas de Incluir CSS
• En un archivo CSS externo

14. Selectores
• CSS está formada por una parte llamada "selector" y otra
parte llamada "declaración".
• La declaración indica "qué hay que hacer" y el selector indica
"a quién hay que hacerlo".
• Selector Universal

15. Selector de tipo o etiqueta
afectaaunelementoHTMLotag
• Ejemplo 1
• Realice una hoja HTML con
las etiquetas <h1> <h2>
<p>
• Cree una hoja de estilo
para los selectores h1 h2 p
con la propiedad color

16. Selector de tipo o etiqueta
• Ejemplo 2

17. Selector de tipo o etiqueta
• Ejemplo 2

18. Selector descendente
Ejemplo3

19. Selector de clase
afectaaungrupo deelementosHTML
Ejemplo4

20. Selector de clase
Ejemplo4

21. Selector de clase

22. Selectores ID
afectaaunúnicoelementoHTML

23. Unidades de medida
• Las medidas en CSS se emplean para definir el alto, el ancho,
los márgenes, tamaño de letra, etc
• Las medidas son valores numéricos positivos en entero o
decimal seguido de una unidad de medida, no debe haber
espacios en blanco entre el número y la unidad de medida.
Font-size=18pt;
• Css tiene dos tipos e unidades de medida: absolutas que son
un valor real y relativas que dependen de otra medida.
• La ventaja de las unidades absolutas es que su valor es
directamente el valor que se debe utilizar y su desventaja es
que son muy poco flexibles y no se adaptan fácilmente a los
diferentes medios.

24. Unidades de medida absolutas

25. Unidades de Medida Relativas
• La unidad em hace referencia al tamaño en puntos de la letra
que se está utilizando. Si se utiliza una tipografía de 12 puntos,
1em equivale a 12 puntos. El valor de 1ex se puede aproximar
por 0.5 em
• La gran ventaja de las unidades relativas es que siempre
mantienen las proporciones del diseño de la página
• E

26. Modelo de cajas
• El modelo de cajas o box model hace que todos los elementos
de las páginas se representen mediante cajas rectangulares.
• Las cajas se crean automáticamente cada vez que se inserta
una etiqueta HTML

27. Modelo de cajas
• Las cajas se forman de 6 partes

28. Modelo de cajas
• Contenido (content): se trata del contenido HTML del
elemento (las palabras de un párrafo, una imagen, el texto de
una lista de elementos, etc.)
• Relleno (padding): espacio libre opcional existente entre el
contenido y el borde.
• Borde (border): línea que encierra completamente el
contenido y su relleno.
• Imagen de fondo (background image): imagen que se muestra
por detrás del contenido y el espacio de relleno.
• Color de fondo (background color): color que se muestra por
detrás del contenido y el espacio de relleno.
• Margen (margin): separación opcional existente entre la caja y
el resto de cajas adyacentes

29. Márgenes
• Margin es el espacio que hay desde el borde de la
caja hasta el próximo elemento
• Ejemplo6

30. Márgenes shorthand
• Valores que puede tener
• Margin: 30px; Margin: 30px 10px;

31. Márgenes shorthand
• Valores que puede tener
• Margin: 30px 10px 20px; Margin: 30px 10px 20px 5px;

32. Relleno
• Padding es el espacio desde el contenido de la caja hasta el
borde de la caja.

33. Bordes
• Anchura: thin (borde delgado), medium (borde normal) y thick
(borde ancho).
• border-top-width, border-right-width, border-bottom-width,
border-left-width
• Color
• border-top-color, border-right-color, border-bottom-color,
border-left-color
• Estilo
• border-top-style, border-right-style, border-bottom-style,
border-left-style

34. Bordes

35. Bordes

36. Fondos
• El fondo puede ser un color simple o una imagen.
• El fondo solamente se visualiza en el área ocupada por el
contenido y su relleno, ya que el color de los bordes se
controla directamente desde los bordes y las zonas de los
márgenes siempre son transparentes.
• background-color
• background-image: url("imagenes/fondo.png")
• background-repeat: repeat | repeat-x | repeat-y | no-repeat |
inherit
• background-position: permite indicar la distancia que se
desplaza la imagen de fondo respecto de su posición original
situada en la esquina superior izquierda

37. Hojas de estilo en Cascada
• http://|www.docstoc.com/docs/23984045/Hojas-de-Estilo-
(CSS)
• http://aldeasocial.com/2010/03/hagase-la-luz-y-se-invento-el-
css/
• http://books.google.com.ec/books?id=ZgI2WfHjPiEC&printsec
=frontcover&dq=css&hl=es&sa=X&ei=mwmEUcOfKMu_0QHP
uIDYBA&ved=0CD0Q6AEwAg#v=onepage&q=css&f=false
• http://www.tedmontgomery.com/tutorial/grphccol/bkgrdlnk.
html (fondos web)
• http://www.w3schools.com/cssref/playit.asp?filename=playcs
s_font-family (Fuentes guardas en la web)
• http://www.w3schools.com/css/css_background.asp

38. • http://coding.smashingmagazine.com/2009/07/13/css-3-
cheat-sheet-pdf/
• http://librosweb.es/css/
• Generador de texto simulado
• http://www.blindtextgenerator.com/es