Informática

202 views

Published on

  • Be the first to comment

  • Be the first to like this

Informática

  1. 1. InformáticaNombre: María FernandaEspinoza Trejo.Docente: Lcdo. Luis Sánchez.
  2. 2. ¿QUE ES CSS?Hojas de Estilo en Cascada(Cascading Style Sheets), esun mecanismo simple quedescribe cómo se va a mostrarun documento en la pantalla.http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo
  3. 3. ¿PARA QUE SIRVE?CSS se utiliza para dar estilo adocumentos HTML y XML, separando elcontenido de la presentación.Los Estilos definen la forma de mostrar loselementos HTML y XML. CSS permite a losdesarrolladores Web controlar el estilo y elformato de múltiples páginas Web al mismotiempo. incluyendo elementos tales comolos colores, fondos, márgenes, bordes,tipos de letra...
  4. 4. ¿Cómo FUNCIONA?CSS funciona a base de reglas, esdecir, declaraciones sobre el estilode uno o más elementos. Las hojasde estilo están compuestas por unao más de esas reglas aplicadas aun 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 valor5
  6. 6. Utilizando una hoja de estilo externa que estará vinculada aun documento a través del elemento <link>, el cual debe irsituado 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 alque se le quiere dar estilo, y que generalmente se situaría en lasecció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 se11 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 de12 <body>
  12. 12. En el siguiente ejemplo se dará a conocer unapagina con la aplicación de estilos dentro deella, especificando de manera general todos loejemplos expuestos con anterioridad.Se especificara un estilo general para algo, sinembargo, dentro de las mismas habráexcepciones especificadas por otros estilos.13
  13. 13. 14
  14. 14. 15

×