SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
Estilos CSS
                           [diseño de documentos web]




Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
CSS
   • CSS es un lenguaje usado para definir la
     presentación de un documento escrito
     en HTML o XML.
   • El nombre viene del inglés Cascading Style
     Sheets, que significa hojas de estilo en
     cascada .
   • Las hojas de estilo servirán de estándar para
     los que los navegadores interpreten las
     páginas.


Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
3 formas de CSS en una página Web
   • Un estilo en línea (inline) es un método para insertar el
     lenguaje de estilo de página directamente dentro de una
     etiqueta HTML. El incrustar la descripción del formateo dentro
     del código de la página Web, se convierte en una manera larga,
     tediosa y poco elegante de resolver el problema de la
     programación de la página. Es el método recomendado para
     maquetar correos electrónicos en HTML.




Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
3 formas de CSS en una página Web
   • Una hoja de estilo interna,
     incrustada dentro de un documento
     HTML. Tiene la desventaja que las
     indicaciones de estilo solo son
     válidas para ese documento HTML.




Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
3 formas de CSS en una página Web
   • Una hoja de estilo externa,
     almacenada en un archivo
     diferente al archivo del HTML de
     la página Web. Separa
     completamente las reglas de
     formateo para la página HTML de
     la estructura básica de la página.




Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
Ventajas del CSS

   • Control centralizado de la presentación de un sitio web completo
     con lo que se agiliza la actualización del mismo.
   • Los navegadores permiten a los usuarios especificar su propia hoja
     de estilo local, que será aplicada a un sitio web, con lo que
     aumenta considerablemente la accesibilidad. Por ejemplo,
     personas con deficiencias visuales pueden configurar su propia
     hoja de estilo para aumentar el tamaño del texto o remarcar más
     los enlaces.
   • Una página puede disponer de diferentes hojas de estilo según el
     dispositivo que la muestre o, incluso, a elección del usuario. Por
     ejemplo, para ser impresa, mostrada en un dispositivo móvil o ser
     "leída" por un sintetizador de voz.
   • El documento HTML en sí mismo es más claro de entender y se
     consigue reducir considerablemente su tamaño y tiempo de
     descarga (siempre y cuando no se utilice estilo en línea).



Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
Selectores CSS
   • universal: afecta a todos y cada uno de los elementos (etiquetas y divs)
     presentes en el codigo del html. Se indica mediante un asterisco (*).
          ejemplo: * {... }

   • de etiqueta: afecta a todos los elementos de la página cuya etiqueta
     HTML coincide con el valor del selector.
          ejemplo: p {... }

   • de ID: afecta a un elemento de la página a través del valor de su atributo
     id. Se utiliza para seleccionar solo un elemento de la página, ya que el
     atributo id no se puede repetir en dos elementos diferentes de una misma
     página.
           ejemplo: #nombredediv {... }

   • de clase: afecta a los elementos que utilizan el atributo class de HTML
     para indicar la regla CSS que se le debe aplicar. Este selector permiten
     reutilizar los mismos estilos para varios elementos diferentes.
           ejemplo: .nombredeclase {... }



Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
Selectores CSS



   • 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: permite modificar el aspecto de una característica del
     elemento.
   • Valor: indica el nuevo valor de la característica modificada en el
     elemento.



Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
 Tipos de medios en CSS
   Un contenido web puede ser visualizado en diferentes dispositivos.
   Es posible definir distintos estilos para cada medio con la regla @media.

   •   All: Cualquier tipo de medio.
   •   Braille: dispositivos táctiles braile.
   •   Embossed: Para impresoras braile.
   •   Handheld: para dispositivos de bolsillo o de mano que normalmente tienen
       una pantalla pequeña.
   •   Print: para cuando se imprimen documentos en la impresora.
   •   Projection: para las presentaciones que se muestran con proyector.
   •   Screen: para las pantallas de computadores personales.
   •   Speech: medio para sintetizadores de voz.
   •   Tty: tipo de medio que se utiliza en dispositivos que tienen un tamaño fijo
       de carácter, como un teletipo, terminal, consola de comandos etc.
   •   Tv: para cuando se accede a una web desde un dispositivo de televisión.




Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
Hacks en CSS

   • Normalmente cuando nombramos una propiedad de un estilo, este es
     interpretado por todos los navegadores, pero si anteponemos # se aplica a
     todos las versiones de Internet Explorer, además si utilizamos _ el estilo
     se aplicará a Internet Explorer 6, luego tendríamos:

             .mydiv {
               height: 15px; /* Para todos los Browsers */
               #height: 20px; /*Para Internet Explorer */
               _height: 25px; /* Para Internet Explorer 6 */
             }


   • Con lo cual obtenemos un mismo estilo interpretado de forma distinta de
     acuerdo al browser que tengamos.




Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
Comentarios Condicionales para IE
   • La estructura básica es un comentario con una instrucción especial, que
     hace que IE interprete lo que hay adentro como código (html, css o
     javascript) y no un comentario:
             <!--[if IE]>
             [Aquí va nuestro código]
             <![endif]-->
   • Si queremos que una hoja de estilo únicamente se muestre en IE 6,
     nuestra sintáxis sería así:
             <!--[if IE 6]>
             <link rel="stylesheet" type="text/css" href="ie.css" />
             <![endif]-->
   • También podemos especificar navegadores mayores o menores que cierta
     versión. Por ejemplo:
             <!--[if   gt IE 6]>    "gt" = mayor que (versiones posteriores)
             <!--[if   gte IE 6]>   "gte" = mayor que o igual
             <!--[if   lt IE 6]>    "lt" = menor que (versiones anteriores)
             <!--[if   lte IE 6]>   "lte" = menor que o igual



Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
Diplomado Crossmedia | Instituto Arcos | Jorge Cantú

Mais conteúdo relacionado

Mais procurados (20)

Qué es css
Qué es cssQué es css
Qué es css
 
Shirly presentación power point
Shirly presentación power pointShirly presentación power point
Shirly presentación power point
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
HTML5+CSS3 01
HTML5+CSS3 01HTML5+CSS3 01
HTML5+CSS3 01
 
Diseño web moderno desde cero
Diseño web moderno desde ceroDiseño web moderno desde cero
Diseño web moderno desde cero
 
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 básico
Css básicoCss básico
Css básico
 
Introducción a css
Introducción a cssIntroducción a css
Introducción a css
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
HTML5
HTML5HTML5
HTML5
 
Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)Informatica tatiana y sheila (2) (1) (1)
Informatica tatiana y sheila (2) (1) (1)
 
Presentacion
PresentacionPresentacion
Presentacion
 
CSS
CSSCSS
CSS
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
Selectores css
Selectores cssSelectores css
Selectores css
 
Taller de Css
Taller de CssTaller de Css
Taller de Css
 
David html DHLL
David html DHLLDavid html DHLL
David html DHLL
 
Tarea weeb
Tarea weebTarea weeb
Tarea weeb
 
Editor de paginas web
Editor de paginas webEditor de paginas web
Editor de paginas web
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 

Destaque (7)

Imagenes para la web
Imagenes para la webImagenes para la web
Imagenes para la web
 
www
wwwwww
www
 
Interfaces gráficas
Interfaces gráficasInterfaces gráficas
Interfaces gráficas
 
Crossmedia 07: Sistemas Gestores de Comtenido
Crossmedia 07: Sistemas Gestores de ComtenidoCrossmedia 07: Sistemas Gestores de Comtenido
Crossmedia 07: Sistemas Gestores de Comtenido
 
Crossmedia 00: presentación
Crossmedia 00: presentaciónCrossmedia 00: presentación
Crossmedia 00: presentación
 
servidores, navegadores y desarrollo web
servidores, navegadores y desarrollo webservidores, navegadores y desarrollo web
servidores, navegadores y desarrollo web
 
CMS (administradores de contenidos)
CMS (administradores de contenidos)CMS (administradores de contenidos)
CMS (administradores de contenidos)
 

Semelhante a crossmedia 03: css

Semelhante a crossmedia 03: css (20)

Css
CssCss
Css
 
Css
CssCss
Css
 
Manual css
Manual cssManual css
Manual css
 
Samanta
SamantaSamanta
Samanta
 
Hojas de Estilo en Cascada
Hojas de Estilo en CascadaHojas de Estilo en Cascada
Hojas de Estilo en Cascada
 
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotDEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
 
Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
 
Deber2 css 21
Deber2 css 21Deber2 css 21
Deber2 css 21
 
Hojas de estilo en cascada
Hojas de estilo en cascadaHojas de estilo en cascada
Hojas de estilo en cascada
 
Hojas de estilos css
Hojas de estilos cssHojas de estilos css
Hojas de estilos css
 
HTML.ppt
HTML.pptHTML.ppt
HTML.ppt
 
"MENUS CSS"
"MENUS CSS""MENUS CSS"
"MENUS CSS"
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Estándares que utilizamos en nuestra aplicación web
Estándares que utilizamos en nuestra aplicación webEstándares que utilizamos en nuestra aplicación web
Estándares que utilizamos en nuestra aplicación web
 
introduccic3b3n-css.pptx
introduccic3b3n-css.pptxintroduccic3b3n-css.pptx
introduccic3b3n-css.pptx
 
CSS
CSSCSS
CSS
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 

Mais de Jorge Cantú López

Taller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasTaller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasJorge Cantú López
 
Taller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioTaller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioJorge Cantú López
 
Taller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaTaller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaJorge Cantú López
 
Guionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioGuionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioJorge Cantú López
 
Portafolio (proceso de construcción)
Portafolio (proceso de construcción)Portafolio (proceso de construcción)
Portafolio (proceso de construcción)Jorge Cantú López
 
introducción Portafolios Digitales
introducción Portafolios Digitalesintroducción Portafolios Digitales
introducción Portafolios DigitalesJorge Cantú López
 
Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Jorge Cantú López
 
Crossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flashCrossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flashJorge Cantú López
 
crossmedia 03: usuarios y contenidos
crossmedia 03: usuarios y contenidoscrossmedia 03: usuarios y contenidos
crossmedia 03: usuarios y contenidosJorge Cantú López
 
crossmedia 01: conceptos generales
crossmedia 01: conceptos generalescrossmedia 01: conceptos generales
crossmedia 01: conceptos generalesJorge Cantú López
 

Mais de Jorge Cantú López (20)

Digu 05. guías de estilo
Digu 05. guías de estiloDigu 05. guías de estilo
Digu 05. guías de estilo
 
Digu 04. modelos y affordances
Digu 04. modelos y affordancesDigu 04. modelos y affordances
Digu 04. modelos y affordances
 
Digu 03. Estilos de interfaz
Digu 03. Estilos de interfazDigu 03. Estilos de interfaz
Digu 03. Estilos de interfaz
 
DIGU 02. diseño de interfaces
DIGU 02. diseño de interfacesDIGU 02. diseño de interfaces
DIGU 02. diseño de interfaces
 
DIGU 01. interfaces
DIGU 01. interfacesDIGU 01. interfaces
DIGU 01. interfaces
 
Modelos comunicación digital
Modelos comunicación digitalModelos comunicación digital
Modelos comunicación digital
 
Portafolio intro
Portafolio introPortafolio intro
Portafolio intro
 
Taller MM I : Análisis de audiencias
Taller MM I : Análisis de audienciasTaller MM I : Análisis de audiencias
Taller MM I : Análisis de audiencias
 
Taller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuarioTaller MM I : facetas de la experiencia de usuario
Taller MM I : facetas de la experiencia de usuario
 
Taller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimediaTaller MM I : función del diseñador multimedia
Taller MM I : función del diseñador multimedia
 
Guionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuarioGuionmultimedia esperienciadeusuario
Guionmultimedia esperienciadeusuario
 
Portafolio (proceso de construcción)
Portafolio (proceso de construcción)Portafolio (proceso de construcción)
Portafolio (proceso de construcción)
 
introducción Portafolios Digitales
introducción Portafolios Digitalesintroducción Portafolios Digitales
introducción Portafolios Digitales
 
Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012Presentacion Crossmedia Arcos v15 2012
Presentacion Crossmedia Arcos v15 2012
 
Crossmedia 07: botones en flash
Crossmedia 07: botones en flashCrossmedia 07: botones en flash
Crossmedia 07: botones en flash
 
Crossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flashCrossmedia 06: animaciones en flash
Crossmedia 06: animaciones en flash
 
crossmedia 03: usuarios y contenidos
crossmedia 03: usuarios y contenidoscrossmedia 03: usuarios y contenidos
crossmedia 03: usuarios y contenidos
 
crossmedia 01: conceptos generales
crossmedia 01: conceptos generalescrossmedia 01: conceptos generales
crossmedia 01: conceptos generales
 
crossmedia 01: www
crossmedia 01: wwwcrossmedia 01: www
crossmedia 01: www
 
Presentación Portfolio
Presentación PortfolioPresentación Portfolio
Presentación Portfolio
 

crossmedia 03: css

  • 1. Estilos CSS [diseño de documentos web] Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 2. CSS • CSS es un lenguaje usado para definir la presentación de un documento escrito en HTML o XML. • El nombre viene del inglés Cascading Style Sheets, que significa hojas de estilo en cascada . • Las hojas de estilo servirán de estándar para los que los navegadores interpreten las páginas. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 3. 3 formas de CSS en una página Web • Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. El incrustar la descripción del formateo dentro del código de la página Web, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Es el método recomendado para maquetar correos electrónicos en HTML. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 4. 3 formas de CSS en una página Web • Una hoja de estilo interna, incrustada dentro de un documento HTML. Tiene la desventaja que las indicaciones de estilo solo son válidas para ese documento HTML. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 5. 3 formas de CSS en una página Web • Una hoja de estilo externa, almacenada en un archivo diferente al archivo del HTML de la página Web. Separa completamente las reglas de formateo para la página HTML de la estructura básica de la página. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 6. Ventajas del CSS • Control centralizado de la presentación de un sitio web completo con lo que se agiliza la actualización del mismo. • Los navegadores permiten a los usuarios especificar su propia hoja de estilo local, que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces. • Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o, incluso, a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil o ser "leída" por un sintetizador de voz. • El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño y tiempo de descarga (siempre y cuando no se utilice estilo en línea). Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 7. Selectores CSS • universal: afecta a todos y cada uno de los elementos (etiquetas y divs) presentes en el codigo del html. Se indica mediante un asterisco (*). ejemplo: * {... } • de etiqueta: afecta a todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. ejemplo: p {... } • de ID: afecta a un elemento de la página a través del valor de su atributo id. Se utiliza para seleccionar solo un elemento de la página, ya que el atributo id no se puede repetir en dos elementos diferentes de una misma página. ejemplo: #nombredediv {... } • de clase: afecta a los elementos que utilizan el atributo class de HTML para indicar la regla CSS que se le debe aplicar. Este selector permiten reutilizar los mismos estilos para varios elementos diferentes. ejemplo: .nombredeclase {... } Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 8. Selectores CSS • 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: permite modificar el aspecto de una característica del elemento. • Valor: indica el nuevo valor de la característica modificada en el elemento. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 9.  Tipos de medios en CSS Un contenido web puede ser visualizado en diferentes dispositivos. Es posible definir distintos estilos para cada medio con la regla @media. • All: Cualquier tipo de medio. • Braille: dispositivos táctiles braile. • Embossed: Para impresoras braile. • Handheld: para dispositivos de bolsillo o de mano que normalmente tienen una pantalla pequeña. • Print: para cuando se imprimen documentos en la impresora. • Projection: para las presentaciones que se muestran con proyector. • Screen: para las pantallas de computadores personales. • Speech: medio para sintetizadores de voz. • Tty: tipo de medio que se utiliza en dispositivos que tienen un tamaño fijo de carácter, como un teletipo, terminal, consola de comandos etc. • Tv: para cuando se accede a una web desde un dispositivo de televisión. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 10. Hacks en CSS • Normalmente cuando nombramos una propiedad de un estilo, este es interpretado por todos los navegadores, pero si anteponemos # se aplica a todos las versiones de Internet Explorer, además si utilizamos _ el estilo se aplicará a Internet Explorer 6, luego tendríamos: .mydiv { height: 15px; /* Para todos los Browsers */ #height: 20px; /*Para Internet Explorer */ _height: 25px; /* Para Internet Explorer 6 */ } • Con lo cual obtenemos un mismo estilo interpretado de forma distinta de acuerdo al browser que tengamos. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 11. Comentarios Condicionales para IE • La estructura básica es un comentario con una instrucción especial, que hace que IE interprete lo que hay adentro como código (html, css o javascript) y no un comentario: <!--[if IE]> [Aquí va nuestro código] <![endif]--> • Si queremos que una hoja de estilo únicamente se muestre en IE 6, nuestra sintáxis sería así: <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> • También podemos especificar navegadores mayores o menores que cierta versión. Por ejemplo: <!--[if gt IE 6]> "gt" = mayor que (versiones posteriores) <!--[if gte IE 6]> "gte" = mayor que o igual <!--[if lt IE 6]> "lt" = menor que (versiones anteriores) <!--[if lte IE 6]> "lte" = menor que o igual Diplomado Crossmedia | Instituto Arcos | Jorge Cantú
  • 12. Diplomado Crossmedia | Instituto Arcos | Jorge Cantú