Hojas de estilo css
Upcoming SlideShare
Loading in...5
×
 

Hojas de estilo css

on

  • 4,057 views

 

Statistics

Views

Total Views
4,057
Views on SlideShare
4,051
Embed Views
6

Actions

Likes
1
Downloads
93
Comments
0

1 Embed 6

http://www.slideshare.net 6

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 css Hojas de estilo css Presentation Transcript

  • HOJAS DE ESTILO CSS
  • Hojas de estilo CSS
    • Son un conjunto de reglas de formato que controlan el aspecto de una página web.
    • Definen la forma de mostrar los elementos y su posición en una página web
    • Permiten separar del contenido de una página de su presentación.
    • Un estilo se puede incluir dentro de:
      • Agrupados en la cabecera (<head>) de una página con la etiqueta <style>…</style>
      • En un fichero externo (fichero .css).
      • En línea en una etiqueta XHTML.
  • Reglas de estilo
    • Una regla de estilo tiene dos partes: un selector (por ejemplo, h1 ) y una o más declaraciones (por ejemplo, color:red ).
    • Cada declaración incluye su propiedad ( color ) y su valor ( red ) separados por dos puntos.
    • Las declaraciones se separan por punto y coma.
    • Ejemplo:
    • h1 {text-align:center; color:red}
    • Después de la definición, cualquier texto del documento que este comprendido entre <h1> y </h1> aparecerá centrado y en color rojo.
  • Reglas de estilo en una sola etiqueta
    • Se puede establecer un estilo individual utilizando el atributo “style” en una etiqueta concreta.
    • Ejemplo:
    • <p style=&quot;background:#0033FF&quot;>
    • Esto es un párrafo con fondo azul
    • </p>
    • En este caso el estilo se aplica a la etiqueta <p> en este párrafo concreto pero no otra etiqueta o párrafo.
  • Reglas de estilo en la cabecera
    • Se utiliza la etiqueta <style>… </style> dentro de la sección “head” de la página web. Ejemplo:
    • <html>
    • <head>
    • <style type=&quot;text/css&quot;>
    • h4 {text-transform: uppercase; color: blue;}
    • p {font-style: italic; color: red;}
    • </style>
    • </head>
    • <body>
    • <h4>hola esto está en h4</h4>
    • <p> y esto es un párrafo de texto en color verde </p>
    • <h4>hola esto está en h4</h4>
    • </body>
    • </html>
  • Reglas de estilo en ficheros externos
    • Se pueden declarar los estilos en un fichero (.css) fuera de la página html. Con ello se consigue separar el contenido de la página de su aspecto.
    • Para aplicar un estilo externo a una página web basta con incluir la etiqueta
    • <link rel=&quot;stylesheet&quot; href=&quot;estilos.css&quot; type=&quot;text/css&quot;>
    • en la cabecera de la página, siendo “estilo.css” el fichero que contiene las reglas de estilo.
    • Por ejemplo si estilos.css es:
    • p{color: green; margin-left: 30px;}
    • b{font-size:14pt; text-align:center; color:red}
    • entonces se aplica el estilo de párrafo (con color rojo y margen izquierdo de 30 pixeles) y el estilo de negrita (con tamaño de la fuente de 14 puntos, texto centrado y color rojo).
  • Las reglas se aplican en cascada
    • En primer lugar se aplican las reglas de estilo definidas en ficheros externos.
    • En segundo lugar se aplican las reglas de estilo definidas en la etiqueta <style> de la cabecera de la página (sobrescribiendo cualquier regla coincidente definida en un fichero externo).
    • Por último se aplican las reglas de estilo definidas en el atributo “style” de cualquier etiqueta (sobrescribiendo cualquier regla coincidente definida en un fichero externo o en la etiqueta <style> ).
  • Ejercicio
    • Utilizando la referencia de las hojas de estilo, realizar las siguientes tareas:
      • Crear el fichero “prueba.css” con la definición de una regla para la etiqueta <td> que asigne el color de fondo rojo.
      • Crear una página web “prueba.htm” que defina la regla para la etiqueta <td> con el color de fondo azul (en la cabecera dentro de la etiqueta <style> ).
      • Incluir la etiqueta <link …> para aplicar la hoja de estilo del fichero externo.
      • Crear una tabla 2x2 en la página web.
      • Comprobar el color de las celdas de la tabla.
      • Aplicar una regla de estilo sobre una de las celdas de la tabla que asigne el color de fondo verde sobre una de las celdas de la tabla.
      • Comprobar su funcionamiento.
  • Definición y utilización de clases
    • Se pueden definir diferentes “clases” de estilos para una sola etiqueta. Ejemplo:
    • h1.borde1 {border: thin solid red;}
    • h1.borde2 {border: thin solid green;}
    • h1.borde1 es una “clase” de estilo para la etiqueta h1 que asigna un borde fino, sólido y de color rojo (crea un cuadrado de borde de una línea fina alrededor de la cabecera h1).
    • h1.borde2 hace lo mismo pero en color verde.
    • Se aplican los diferentes estilos de clase de la siguiente forma:
    • <h1 class=&quot;borde1&quot;>Cabecera 1 roja</h1>
    • <h1 class=&quot;borde2&quot;>Cabecera 1 verde </h1>
    • En ocasiones conviene definir un estilo que se pueda aplicar a diferentes etiquetas. Ejemplo :
    • . mi_estilo {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #0000FF; } (el nombre empieza por “ . ” y no se antepone el nombre de la etiqueta)
    • Se aplica a las etiquetas así:
    • <h1 class=&quot;mi_estilo&quot;>Encabezado 1</h1>
    • <p class=&quot;mi_estilo&quot;>Parrafo<p>
  • Estilos individuales con nombre
    • De la misma forma que se definen clases, se pueden definir estilos individuales con nombre. Cada uno de ellos se identifica con el atributo “id” en la etiqueta html. Ejemplo:
    • .borde { /* Estilo de clase: */
    • color:red;
    • border:thin solid #black; }
    • /*Estilos individuales con identificador: */
    • #bazul { background-color: #3399FF;}
    • #azul {color:blue;}
    • #verde {color:green;}
    • Se aplica con: Resultado 
    • <p class=&quot;borde&quot;>Texto 1 </p>
    • <p class=&quot;borde&quot; id=&quot;bazul&quot;>Texto 2</p>
    • <p class=&quot;borde&quot; id=&quot;verde&quot;>Texto 3</p>
    • <p id=&quot;verde&quot;>Texto 4</p>
  • Etiquetas DIV y SPAN
    • div y span son etiquetas html muy útiles para aplicar estilos.
    • La etiqueta span no hace nada pero permite aplicar estilos. Se recomienda utilizar SPAN para pequeños fragmentos de texto a los que se aplica un estilo determinado.
    • La etiqueta div se comporta igual que <p> (añade un salto de línea al inicio y al final del texto que contiene). Se recomienda el uso de div para agrupar varios párrafos de texto.
    • Ejemplo:
    • .mifuente {
    • font-family: arial, helvetica, sans-serif;
    • color: #FF0000;}
    • #verde {color: green}
    • <div class=&quot;mifuente&quot;>
    • <p>Esto es un párrafo</p>
    • <p>esto es otro párrafo </p>
    • </div>
    • Un <span class=&quot;mifuente&quot; id=&quot;verde&quot;>ejemplo</span> de estilos solid #black; }
  • DIV y bloques o capas
    • Una etiqueta <div> con texto en su interior es conocida como bloque DIV, elemento DIV, capa CSS o simplemente capa (layer).
    • Cuando a <div> aplicamos un estilo podemos controlar su posición y tamaño en la pantalla y el aspecto de su contenido (fuente, color, bordes, alineación, etc.).
    • Algunas de las propiedades que se pueden definir en un bloque o capa son:
      • position: puede ser “relative” (posición respecto la última etiqueta html) o “absolute”(posición absoluta).
      • left: nº de pixeles de distancia desde el borde izquierdo de la ventana.
      • top: nº de pixeles de distancia desde el borde superior de la ventana.
      • width : anchura en pixeles.
      • height: altura en pixeles.
      • visibility: “visible”, “hidden” o “inherit” (heredado)
      • background-color: color de fondo.
      • background-image: imagen de fondo.
  • DIV y bloques o capas
    • Ejemplo:
    • <div style=&quot;position:absolute;left:100;top:50;width:80;
    • background-color: red&quot;>Esto es un ejemplo de una capa</div>
    • <div style=&quot;position:absolute; left:300; top:50; width:200;
    • background-image: url(images/special.jpg)&quot;>
    • Esto es una capa con una imagen de fondo</div>
  • Ejercicio
    • Definir tres capas con el siguiente aspecto:
  • Ejemplo de fichero .css
    • /*Fichero hoja de estilos. */
    • body {
    • font-family:Verdana, Arial, Helvetica, sans-serif;
    • font-size:9pt;
    • text-align: left;
    • }
    • p {
    • font-family:Verdana, Arial, Helvetica, sans-serif;
    • font-size:9pt;
    • }
    • td {
    • font-family:Verdana, Arial, Helvetica, sans-serif;
    • font-size:9pt;
    • }
    • .tituloMan {
    • font-family: Verdana, Arial, Helvetica, sans-serif;
    • font-size:14pt;
    • font-weight: bold;
    • color:#a0a354;
    • }