SlideShare una empresa de Scribd logo
1 de 17
Guía de estudio
Cascading
Style Sheets
CSS
         Edwin Mamani López
        Profesor de Informática
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
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
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
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
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
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
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
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
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
Incluir CSS en el mismo documento
HTML/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
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
El archivo CSS se enlaza mediante la
etiqueta <link>
<html>
<head>
<title>Ejemplo de estilos CSS en un
archivo 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
Cuatro atributos, cuando se enlaza un
archivo 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
Ventajas de las hojas de estilo
externas
   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
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
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

Más contenido relacionado

La actualidad más candente

Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
Simoney Llamas
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
Krolina Agui
 

La actualidad más candente (20)

CSS EN HTML5
CSS EN HTML5CSS EN HTML5
CSS EN HTML5
 
Curso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSSCurso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSS
 
Css Introducción
Css IntroducciónCss Introducción
Css Introducción
 
02 introduccion-css
02 introduccion-css02 introduccion-css
02 introduccion-css
 
Identificación del lenguaje ccs
Identificación del lenguaje ccsIdentificación del lenguaje ccs
Identificación del lenguaje ccs
 
Introduccion historia css
Introduccion historia cssIntroduccion historia css
Introduccion historia css
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 
Conceptos Básicos CSS
Conceptos Básicos CSSConceptos Básicos CSS
Conceptos Básicos CSS
 
06 Introduccion a CSS
06 Introduccion a CSS06 Introduccion a CSS
06 Introduccion a CSS
 
Que es css
Que es cssQue es css
Que es css
 
Taller de Css
Taller de CssTaller de Css
Taller de Css
 
Hojas de calculo CSS
Hojas de calculo CSSHojas de calculo CSS
Hojas de calculo CSS
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Introduccion a css edgar pedro sanchez
Introduccion a css   edgar pedro sanchezIntroduccion a css   edgar pedro sanchez
Introduccion a css edgar pedro sanchez
 
Css
CssCss
Css
 
Css.html(1)
Css.html(1)Css.html(1)
Css.html(1)
 
Css
CssCss
Css
 

Similar a Hojas de estilo (1)

Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
Diivenii Sykes
 

Similar a Hojas de estilo (1) (20)

Intro css3
Intro css3Intro css3
Intro css3
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
CSS estilos.pptx
CSS estilos.pptxCSS estilos.pptx
CSS estilos.pptx
 
Capítulo 2 css
Capítulo 2 cssCapítulo 2 css
Capítulo 2 css
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS Introducción a HTML - CSS - JS
Introducción a HTML - CSS - JS
 
Introducción a css
Introducción a cssIntroducción a css
Introducción a css
 
Elementos de html5 y css3
Elementos de html5 y css3Elementos de html5 y css3
Elementos de html5 y css3
 
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptxDiseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
 
Qué es css
Qué es cssQué es css
Qué es css
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
TUTORIAL CSS
TUTORIAL  CSSTUTORIAL  CSS
TUTORIAL CSS
 
Tutorial css
Tutorial cssTutorial css
Tutorial css
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
Css: bases y buenas prácticas
Css: bases y buenas prácticasCss: bases y buenas prácticas
Css: bases y buenas prácticas
 

Más de Edwin Mamani López

Más de Edwin Mamani López (20)

Java
JavaJava
Java
 
Rodriguez, m.a. (1991). metodología de la programación a través de pseudocódigo
Rodriguez, m.a. (1991). metodología de la programación a través de pseudocódigoRodriguez, m.a. (1991). metodología de la programación a través de pseudocódigo
Rodriguez, m.a. (1991). metodología de la programación a través de pseudocódigo
 
Landa, n.a. (2010). c# guia total del programador
Landa, n.a. (2010). c# guia total del programadorLanda, n.a. (2010). c# guia total del programador
Landa, n.a. (2010). c# guia total del programador
 
De la cruz, j. (2006). algoritmos y diagramas de flujo aplicados en php
De la cruz, j. (2006). algoritmos y diagramas de flujo aplicados en phpDe la cruz, j. (2006). algoritmos y diagramas de flujo aplicados en php
De la cruz, j. (2006). algoritmos y diagramas de flujo aplicados en php
 
Mantenimiento preventivo y salida laboral
Mantenimiento preventivo y salida laboralMantenimiento preventivo y salida laboral
Mantenimiento preventivo y salida laboral
 
Almacenamiento removible
Almacenamiento removibleAlmacenamiento removible
Almacenamiento removible
 
Periféricos teclados, mouse y parlantes
Periféricos   teclados, mouse y parlantesPeriféricos   teclados, mouse y parlantes
Periféricos teclados, mouse y parlantes
 
Redes wifi
Redes wifiRedes wifi
Redes wifi
 
Fundamentos de redes
Fundamentos de redesFundamentos de redes
Fundamentos de redes
 
Hardware y sstresing
Hardware y sstresingHardware y sstresing
Hardware y sstresing
 
Sistema operativo instalación y configuración
Sistema operativo   instalación y configuraciónSistema operativo   instalación y configuración
Sistema operativo instalación y configuración
 
Sistema operativo resolución de problemas
Sistema operativo   resolución de problemasSistema operativo   resolución de problemas
Sistema operativo resolución de problemas
 
Impresoras inkjet, láser y matriciales
Impresoras inkjet, láser y matricialesImpresoras inkjet, láser y matriciales
Impresoras inkjet, láser y matriciales
 
Tablets y celulares
Tablets y celularesTablets y celulares
Tablets y celulares
 
Notebooks y netbooks
Notebooks y netbooksNotebooks y netbooks
Notebooks y netbooks
 
Equipos all in on (aio)
Equipos all in on (aio)Equipos all in on (aio)
Equipos all in on (aio)
 
Monitores lcd y led
Monitores lcd y ledMonitores lcd y led
Monitores lcd y led
 
Monitores crt
Monitores crtMonitores crt
Monitores crt
 
Discos rígidos y unidades SSD
Discos rígidos y unidades SSDDiscos rígidos y unidades SSD
Discos rígidos y unidades SSD
 
Tarjetas gráficas y de audio
Tarjetas gráficas y de audioTarjetas gráficas y de audio
Tarjetas gráficas y de audio
 

Hojas de estilo (1)

  • 1. Guía de estudio Cascading Style Sheets CSS Edwin Mamani López Profesor de Informática
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Incluir CSS en el mismo documento HTML/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. 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. El archivo CSS se enlaza mediante la etiqueta <link> <html> <head> <title>Ejemplo de estilos CSS en un archivo 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. Cuatro atributos, cuando se enlaza un archivo 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. Ventajas de las hojas de estilo externas  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. 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. 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