Hojas de estilo (1)

683 views
603 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
683
On SlideShare
0
From Embeds
0
Number of Embeds
196
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hojas de estilo (1)

  1. 1. Guía de estudioCascadingStyle SheetsCSS Edwin Mamani López Profesor de Informática
  2. 2. Contenidos Introducción a las hojas de estilo ◦ Anatomía de una regla. ◦ Anatomía de una declaración ◦ Reglas y Selectores ◦ Enlace de la hoja de estilo al documento Selectores de CSS Edwin Mamani Lopez 2
  3. 3. Introducción: ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de documentos electrónicos definidos con HTML y XHTML. Al crear una página web, se utiliza el lenguaje HTML/XHTML para marcar los contenidos, el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño, separación horizontal, vertical, posición... Edwin Mamani Lopez 3
  4. 4. Anatomía de una regla Una regla consta de dos partes: ◦ Selector.- Es el enlace entre el documento HTML y el estilo. ◦ Declaración.- Especifica qué efecto tendrá (es decir, el estilo). Regla CSS Declaración h1 { color : silver; } Selector Propiedad valor Edwin Mamani Lopez 4
  5. 5. Anatomía de una declaración Una declaración tiene dos partes: ◦ Propiedad.- Cualidad o característica que algún elemento HTML/XHTML posee. ◦ Valor.- Es la especificación de la propiedad. Regla CSS Declaración h1 { color : silver; } Selector Propiedad valor Edwin Mamani Lopez 5
  6. 6. Definición de términos Cada uno de los estilos que• Regla componen una hoja de estilos CSS.• Selector Indica el(los) elemento(s) HTML a los que se aplica la regla CSS.• Declaración Específica los estilos que se aplican a los elementos (HTML).• Propiedad Permite modificar el aspecto de una característica del elemento. Indica el nuevo valor de la• Valor característica modificada en el elemento. Edwin Mamani Lopez 6
  7. 7. Reglas y hojas de estilo Una regla define algún aspecto del estilo de uno o varios elementos h1 { color: navy; } Una hoja de estilo es un conjunto de reglas que se aplican a un documento HTML/XHTML. Edwin Mamani Lopez 7
  8. 8. Agrupando reglas y selectores Una de las metas de CSS era la brevedad ◦ Facilita escribir la hoja de estilo “a mano” ◦ Reduce el tiempo de carga Por ejemplo, sean las siguientes reglas: h1 { font-weight: bold; } h2 { font-weight: bold; } h3 { font-weight: bold; } Como las declaraciones son idénticas, se pueden agrupar: h1, h2, h3 { font-weight: bold; } Edwin Mamani Lopez 8
  9. 9. Agrupando reglas y selectores Un selector puede tener más de una declaración: h1 {font-weight: bold;} h1 {color: green;} Podemos agrupar las declaraciones en una lista separada por puntos y comas: h1 {font-weight: bold; color: green; } Edwin Mamani Lopez 9
  10. 10. Incluir CSS en HTML/XHTML Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. En el mismo documento HTML. Elemento <style> Definir CSS en un archivo externo. Elemento <link> Incluir CSS en los elementos HTML. Atributo style Edwin Mamani Lopez 10
  11. 11. Incluir CSS en el mismo documentoHTML/XHTML Los estilos se definen en la cabecera del documento (sólo dentro de la sección <head>) y se emplea el elemento <style>.<style> type="text/css" p {color:black; font family:Verdana; }</style> Edwin Mamani Lopez 11
  12. 12. Definir CSS en un archivo externo En este caso, todos los estilos se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>. Un archivo CSS no es más que un archivo simple de texto cuya extensión es .css Se puede crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como requiera. Edwin Mamani Lopez 12
  13. 13. El archivo CSS se enlaza mediante laetiqueta <link><html><head><title>Ejemplo de estilos CSS en unarchivo externo</title><link rel="stylesheet" type="text/css"href="/css/estilos.css" media="screen" /></head><body><p>Un párrafo de texto.</p></body></html> Edwin Mamani Lopez 13
  14. 14. Cuatro atributos, cuando se enlaza unarchivo CSS rel: indica el tipo de relación que tiene el recurso enlazado. Para los archivos CSS, siempre se utiliza el valor stylesheet. type: Indica el tipo de recurso enlazado, su valor siempre es: text/css href: Indica la URL del archivo CSS que contiene los estilos (relativa o absoluta). media: Indica el medio en el que se van a aplicar los estilos del archivo CSS. Edwin Mamani Lopez 14
  15. 15. Ventajas de las hojas de estiloexternas Reutilización ◦ Poner toda la información de estilo en un sitio permite que sea referenciada por muchos documentos ◦ Facilita mantener un sitio Web grande consistentemente  Información de estilo corporativa Rendimiento ◦ Una vez que se descarga la hoja de estilo la primera vez, el browser ya la guarda en caché Selección por parte del usuario ◦ Un documento puede enlazar a varias hojas de estilo; idealmente, el usuario podría seleccionar una de ellas Edwin Mamani Lopez 15
  16. 16. Incluir CSS en los elementos HTML Este método se considera como el "peor y el menos utilizado«. Esta forma de incluir CSS directamente en los elementos HTML, solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.<p style="color:black;">Un texto</p> Edwin Mamani Lopez 16
  17. 17. Desventajas del atributo style No se puede reutilizar el estilo aplicado a un elemento (habría que repetirlo en todos los sitios) Si luego se cambia el estilo, hay que buscar todos los atributos style y cambiar su valor Suele ser mejor emplear identificadores (id) Sólo tendría sentido para algo muy concreto y que no queramos cambiar la hoja de estilo sólo para eso Edwin Mamani Lopez 17

×