Css
-
Upload
mariela-tapia -
Category
Technology
-
view
219 -
download
1
description
Transcript of Css
![Page 1: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/1.jpg)
CSS – hojas de Estilo
Mariela Tapia
![Page 2: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/2.jpg)
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
![Page 3: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/3.jpg)
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>
![Page 4: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/4.jpg)
Por qué usar CSS• Y si queremos cambiar el diseño del sitio!!!
![Page 5: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/5.jpg)
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
![Page 6: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/6.jpg)
Por qué usar CSS• Y así de fácil podemos pasar de esto
![Page 7: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/7.jpg)
Por qué usar CSS• A esto
![Page 8: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/8.jpg)
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%)
![Page 9: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/9.jpg)
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.
![Page 10: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/10.jpg)
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.
![Page 11: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/11.jpg)
Formas de Incluir CSS• Dentro del mismo Tag
![Page 12: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/12.jpg)
Formas de Incluir CSS• Dentro del mismo HTML
![Page 13: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/13.jpg)
Formas de Incluir CSS• En un archivo CSS externo
![Page 14: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/14.jpg)
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
![Page 15: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/15.jpg)
Selector de tipo o etiquetaafecta a un elemento HTML o tag
• 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
![Page 16: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/16.jpg)
Selector de tipo o etiqueta• Ejemplo 2
![Page 17: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/17.jpg)
Selector de tipo o etiqueta• Ejemplo 2
![Page 18: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/18.jpg)
Selector descendente
Ejemplo3
![Page 19: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/19.jpg)
Selector de claseafecta a un grupo de elementos HTML
Ejemplo4
![Page 20: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/20.jpg)
Selector de clase
Ejemplo4
![Page 21: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/21.jpg)
Selector de clase
![Page 22: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/22.jpg)
Selectores IDafecta a un único elemento HTML
![Page 23: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/23.jpg)
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.
![Page 24: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/24.jpg)
Unidades de medida absolutas
![Page 25: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/25.jpg)
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
![Page 26: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/26.jpg)
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
![Page 27: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/27.jpg)
Modelo de cajas• Las cajas se forman de 6 partes
![Page 28: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/28.jpg)
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
![Page 29: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/29.jpg)
Márgenes
• Margin es el espacio que hay desde el borde de la caja hasta el próximo elemento
• Ejemplo6
![Page 30: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/30.jpg)
Márgenes shorthand
• Valores que puede tener• Margin: 30px; Margin: 30px
10px;
![Page 31: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/31.jpg)
Márgenes shorthand
• Valores que puede tener• Margin: 30px 10px 20px; Margin: 30px 10px 20px 5px;
![Page 32: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/32.jpg)
Relleno• Padding es el espacio desde el contenido de la caja hasta el
borde de la caja.
![Page 33: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/33.jpg)
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
![Page 34: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/34.jpg)
Bordes
![Page 35: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/35.jpg)
Bordes
![Page 36: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/36.jpg)
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
![Page 37: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/37.jpg)
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_0QHPuIDYBA&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=playcss_font-family (Fuentes guardas en la web)
• http://www.w3schools.com/css/css_background.asp
![Page 38: Css](https://reader035.fdocuments.ec/reader035/viewer/2022070318/557b43f5d8b42a014a8b468b/html5/thumbnails/38.jpg)
• 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