• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hojas de Estilo
 

Hojas de Estilo

on

  • 170 views

Hojas de Estilo

Hojas de Estilo

Statistics

Views

Total Views
170
Views on SlideShare
150
Embed Views
20

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 20

http://floreserwinscz.blogspot.com 13
http://localhost 7

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hojas de Estilo Hojas de Estilo Presentation Transcript

    • Cascading Style Sheets Copyright 2013
    • Definicion de CSS  CSS es un lenguaje de hojas de estilo creado para controlar el aspecto o presentacion de los documentos HTML.  Versiones CSS1 CSS2 CSS3
    • Incluir CSS en un documento HTML  Tres formas de incluir css:  Incluir css en los elementos HTML  Incluir css en el mismo documento HTML  Definir un archivo externo css.
    • Incluir css en los elementos HTML  Esta forma de incluir CSS directamente es utilizado cuando se quiere aplicar un estilo especifico a un determinado elemento.  <p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>
    • Incluir css en el documento HTML  Se emplea con la etiqueta <style> y solo se la incluye dentro la cabecera del documento <head>  Se emplea cuando se quiere incluir estilos especificos en una determinada pagina.  Formato:  <style type="text/css">  p { color: black;  font-family: Verdana;  }  </style>
    • Definir archivo css externo  Los estilos se define en un archivo con extension .css y luego se lo enlaza con la etiqueta <link>  <link rel="stylesheet" type="text/css" href=“estilos.css" media="screen" />  <link>  rel: indica la relacion entre el recurso enlazado y el documento  type: indica el tipo de recurso enlazado.  href: indica la url del archivo css(puede apuntar a un recurso interno o externo al sitio web).  media: indica el medio en el que se van a aplicar los estilos.  Con este metodo el mantenimiento del sitio web se simplifica al maximo ya que con un cambio en el archivo css, se cambia todas la paginas que la llaman.
    • Medios css  Se pueden definir diferentes estilos para diferente medios: pantallas,impresoras,moviles,proyectores,etc.  La regla @media indica el medio al que se aplicaran los estilos.  @media print {  body { font-size: 10pt }  }  @media screen {  body { font-size: 13px }  }  @media screen,print {  body { line-height: 1.2 }  }
    • Selectores  Los selectores indican ‘a quien se va a aplicar el estilo’ Tipo Selector Universal * {margin:0;padding:0;} A todos Etiqueta p {color:blue} <p>Texto1</p> Descendente p span { color: blue } <p> <span>Texto1</span> </p> Clase .miaviso{color : blue} <div class=‘miaviso’>…</div> Id #destacado{color:blue} <div id=‘destacado’>...</div> Hijo(Directo de un elemento) p > span{color:blue} <p><span>Texto1</span></p> <p> <a href="#"> <span>Texto2</span> </a> </p>
    • Selectores Adyacentes h2{ color: green; } h1+h2 { color: red } <body> <h1>Titulo1</h1> <h2>Subtítulo</h2> <h2>Otro subtítulo</h2> </body> Atributo //Color azul independiente de su valor a[class] { color: blue; } //Colo azul dependiendo si su clase se llama externo a[class="externo"] { color: blue; }
    • Unidades de Medida  Se utiliza para definir la altura, anchura y margenes de los elementos.  Tipos de Unidades:  Unidades Absolutas  Su valor no depende de una referencia (in,cm,mm,pt punto 1 pulgada/72=0.35mm,pc picas).  Unidades Relativas  Su valor esta referenciado respecto a otro valor.  px pixeles respecto a la resolucion de la pantalla.  em repecto al tamaño del letra del elemento.  ex respecto a la altura de la letra x minuscula del tipo y tamaño del letra del elemento.
    • Cajas  Todos los elemento se representa mediante cajas.  Elementos de una caja:
    • Cajas  Elementos de una caja:  Contenido.- Codigo HTML con texto,imagenes,etc. que se encuentran dentro la caja  Relleno(padding).-Espacio entre el contenido y el borde.  Borde(border).- Linea que encierra el contenido y el borde.  Imagen de fondo(background-image).- Imagen que se muestra detras del contenido.  Color de fondo(background-color).- Color de fondo que se muestra detras del contenido e imagen de fondo.  Margen(margin).- Espacio entre el borde y otros elementos.
    • Enlaces  Pseudoclases:  link.- Es el estilo del enlace en su estado original.  :visited.- Es el estilo del enlace que ya ha sido visitado.  :hover.- Es el estilo del enlace mientras se posiciona el puntero del ratón sobre el enlace  :active.- Es el estilo del enlace cuando se está pinchando sobre el enlace (el tiempo durante el que se aplica este estilo es muy breve)  Ejplo:  p a:link { color: maroon; text-decoration: none; }  p a:visited { color: orange; text-decoration: none; font-weight: bold; }  p a:hover { color: green; text-decoration: underline; font-style:italic; }  p a:active { color: navy; text-decoration: none; font-variant: small-caps; } 