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

Like this? Share it with your network

Share

Hojas de estilo css

on

  • 4,130 views

 

Statistics

Views

Total Views
4,130
Views on SlideShare
4,124
Embed Views
6

Actions

Likes
1
Downloads
94
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 Presentation Transcript

  • 1. HOJAS DE ESTILO CSS
  • 2. 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.
  • 3. 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.
  • 4. 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.
  • 5. 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>
  • 6. 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).
  • 7. 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> ).
  • 8. 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.
  • 9. 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>
  • 10. 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>
  • 11. 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; }
  • 12. 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.
  • 13. 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>
  • 14. Ejercicio
    • Definir tres capas con el siguiente aspecto:
  • 15. 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;
    • }