Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Css power
Similar a Css power (20)
Css power
- 2. Cascading Style Sheets (CSS) son una forma de controlar la apariencia de los documentos HTML de forma organizada y eficiente. Con CSS usted será capaz de: * Agregar un nuevo aspecto a tu viejo HTML * Completamente restyle un sitio web con sólo unos pocos cambios en el código CSS * Utilice el "estilo" de crear en cualquier página web que desee Una hoja de estilo puede, y debe ser, completamente separado de los documentos HTML.
- 3. Antes de la aparición de los estilos, la presentación se manejaba directamente dentro de los elementos HTML por medio de atributos. Por ejemplo: <h2 align="center"> <font color=“blue" size=“3" face="Times New Roman, serif"> <i>Seminario de HTML UCEMA</i> </font> </h2> CSS permite separar el contenido de un documento de su presentación. En el documento HTML: En el documento HTML: En la hoja de estilos se define el formato En la hoja de estilos se define el formato <h2>Seminario de HTML <h2>Seminario de HTML de los de los UCEMA</h2> UCEMA</h2> encabezados h2: encabezados h2: h2 {{ h2 text-align: center; text-align: center; color: blue; color: blue; font: italic large "Times New Roman", font: italic large "Times New Roman", serif; serif; }}
- 4. Estandarizar la presentación de un sitio web completo. Haciendola fácil de mantener. Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades. Ejemplos: Estilos para personas con dificultades visuales, Estilos para dispositivos móviles, Estilos para dispositivos monocromos, Estilos para impresión, Etc. Los documentos HTML se reducen en tamaño y complejidad.
- 5. Propiedades de fuentes Propiedades de color y fondo Margin (Margen) Propiedades de texto Border (Borde) Padding (Relleno) espaciado de palabras Contenido alineación Propiedades de caja Margen Borde Relleno Estilos de listas
- 6. Una hoja de estilos consiste en un conjunto de reglas. Cada regla esta formada por: h2 { El Selector (nombre del estilo) text-align: center; color: blue; La Declaración (define el estilo) font: italic large "Times New Roman", serif; Propiedad } .textoresaltado { Valor font-family: Arial, Helvetica, sans-serif; font-size: 12px; ¿Qué podemos hacer con los estilos? font-style: normal; font-weight: bold; /* Esto es un Redefinir estilos de Etiquetas HTML. comentario */ Crear Estilos Personalizados para color: #000000; } uso genérico (Clases) #logo { Crear Estilos para un elemento background-image: url("/img/logo.gif"); background-position:center; HTML específico (por Id) background-repeat:no-repeat; height: 50px; width: 150px; position: absolute; left: 0px; top: 0px; }
- 7. Inline Styles <h2 style="color: blue; background: green;"> <h2 style="color: blue; background: green;"> Utilizando el atributo “style” se define el Curso HTML UCEMA Curso HTML UCEMA </h2> </h2> estilo de un elemento HTML en forma individual. <head> <head> Embedded Style <style type="text/css"> <style type="text/css"> h2 { { h2 Se define la regla CSS dentro de un font-style: italic; font-style: italic; font-weight: bold; documento HTML. Se puede aplicar a font-weight: bold; color: blue; color: blue; cualquier elemento de ese documento. }} </style> </style> Hojas de Estilos externas </head> </head> <body> <body> Un archivo CSS independiente que se <h2>Curso HTML UCEMA</h2> <h2>Curso HTML UCEMA</h2> encuentra referenciado en cada uno de </body> </body> los documentos HTML que desean <head> <head> <link rel=stylesheet type="text/css“ utilizarlo. <link rel=stylesheet type="text/css“ href=“estilos.css"> href=“estilos.css"> </head> </head>
- 8. Los estilos son normalmente almacenados en hojas de estilo. Una hoja de estilo puede ser aplicada a varias páginas web. Esto centraliza los cambios. Una página web puede utilizar mas de una hoja de estilo.
- 9. p,li,th,td { font-size: 75%; } body { background-color: #ffffff; } h1,h2,h3,hr { color:black; }
- 10. Una hoja de estilo puede ser interna o externa. Las hojas de estilo internas son creadas dentro del documento html y utilizan el tag style y son creadas dentro del head. Una hoja de estilo externa tiene la extensión .css.
- 11. Un ejemplo de hoja de estilo interna. <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
- 12. Un ejemplo de hoja de estilo externa referenciada. <head> <link rel="stylesheet" type="text/css" href=“estilo.css" /> </head> En este caso, la hoja de estilo se llama estilo.css.
- 13. ¿Qué estilo será usado si hay mas de uno especificado para un mismo elemento html? Se podría decir que hay una hoja de estilo “virtual” en la que la prioridad de definiciones es la siguiente: 1. Default del navegador 2. Hoja de estilo externa 3. Hoja de estilo interna 4. Atributo style (más alta prioridad)
- 14. Si la referencia a una hoja de estilo externa es colocada debajo de una hoja de estilo interna, la externa tiene mayor prioridad.
- 15. Tiene tres partes: 1. El selector. Es el tag html que se desea definir. 2. La propiedad. Es el atributo que se desea definir. 3. El valor. Es el valor del atributo.
- 16. selector {propiedad: valor} Si el valor tiene más de una palabra se deben poner entre comillas. p {font-family: "sans serif"} Se pueden agrupar selectores así: h1,h2,h3,h4,h5,h6 { color: green }
- 17. Es una buena práctica definir una propiedad por línea. p{ text-align: center; color: black; font-family: arial }
- 18. Se puede definir distintos estilos por elemento clasificándolos. p.right {text-align: right} p.center {text-align: center} En el html: <p class="right"> Párrafo a la derecha. </p> <p class="center"> Párrafo al centro. </p>
- 19. En general: <[sel] class=“clase1 clase2 …"> Párrafo.</[sel]> También podemos definir clases independientes de un selector para asignarlas indistintamente a cualquier tag. .center {text-align: center}
- 20. Define el espacio entre los elementos html.
- 21. Define el espacio entre el borde del elemento y el contenido del elemento.