Hojas De Estilo Css

1,271 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,271
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hojas De Estilo Css

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

×