Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
Html
Html
Cargando en…3
×

Eche un vistazo a continuación

1 de 15 Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Anuncio

Informática

  1. 1. Informática Nombre: María Fernanda Espinoza Trejo. Docente: Lcdo. Luis Sánchez.
  2. 2. ¿QUE ES CSS? Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla. http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo
  3. 3. ¿PARA QUE SIRVE? CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra...
  4. 4. ¿Cómo FUNCIONA? CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML.
  5. 5. SELECTOR Ejemplo: h2 {color: green;} h2 ---> es el selector {color: green;} ---> es la DECLARACIÓN color ---> es la propiedad o atributo green ---> es el valor 5
  6. 6. Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>. <html> <head> <title>Título</title> <link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloat s.css" /> </head> <body> . . . . </body> </html>
  7. 7. Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. 7
  8. 8. 1.Ejemplo. <style type="text/css"> A:link,A:visited{font- style:bold;color:yellow} </style> En este ejemplo todos los hipervínculos no visitados (A:link) y los visitados (A:visited) aparecerán en negrita (bold) y en amarillo (yellow) 9
  9. 9. 2. Ejemplo. <style type="text/css"> H1 { color: orange; font- style: italic} </style> En este caso H1 es la etiqueta del Titular de mayor tamaño y cada vez que se lo defina aparecerá en color naranja y en cursiva. 10
  10. 10. 3. Ejemplo. <STYLE TYPE="text/css"> UL { background: red; margin: A B C D; padding: E F G H; } LI { color: white; background: blue; margin: a b c d; padding: e f g h; } </STYLE> En este caso el “style” solo afectara a las letras que se 11 especifican dentro de este.
  11. 11. 4. Ejemplo. <head> <style type="text/css"> body {background-color:blue} p {color:white} </style> </head> <body> <p>Fuentes blancas sobre fondo azul</p> </body> En este caso se especifica el estilo que tendrá <p> dentro de 12 <body>
  12. 12. En el siguiente ejemplo se dará a conocer una pagina con la aplicación de estilos dentro de ella, especificando de manera general todos lo ejemplos expuestos con anterioridad. Se especificara un estilo general para algo, sin embargo, dentro de las mismas habrá excepciones especificadas por otros estilos. 13
  13. 13. 14
  14. 14. 15

×