1 / 36

CSS

CSS. M.C. Rafael A. García Rosas. rafaelgr@umad.edu.mx. ¿Qué es CSS?. T ecnología que nos permite controlar la apariencia de una página web . CSS ( Cascade Style Sheet ) describe como los elementos dispuestos en la página son presentados al usuario.

kemal
Download Presentation

CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS M.C. Rafael A. García Rosas. rafaelgr@umad.edu.mx

  2. ¿Qué es CSS? • Tecnología que nos permite controlar la apariencia de una página web. • CSS (Cascade Style Sheet) describe como los elementos dispuestos en la página son presentados al usuario. • El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1 y CSS2 del W3C. • Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: • directamente a la marca, • en el head de la página o • agrupar las reglas de estilo en un archivo independiente con extensión *.css

  3. Definición de estilos a nivel de marca HTML. • La sintaxis para definir un estilo a una marca HTML es: <h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1> • Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma. • El estilo se aplica únicamente a la marca donde inicializamos la propiedad style

  4. Definición de estilos a nivel de página. • Podemos definir estilos que se aplican a las distintas marcas HTML de la página. <head> <title>Problema</title> <styletype="text/css"> h1 {color:#ff0000;background-color:#ffff00} h2 {color:#00ff00} h3 {color:#0000ff} </style> • En todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo. • Podemos definir estilos para muchas marcas en una única sección style.

  5. Propiedades relacionadas a fuentes.

  6. Unidades de medida (px, cm, mm, em etc.) px (pixeles) em (altura de la fuente por defecto) ex (altura de la letra x) in (pulgadas) cm (centímetros) mm (milímetros) pt (puntos, 1 punto es lo mismo que 1/72 pulgadas) pc (picas, 1 pc es lo mismo que 12 puntos) % (porcentaje) La recomendación es utilizar emcomo medida cuando la salida es el monitor. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamaño de texto.

  7. Propiedades relacionadas a fuentes. <head> <title>Problema</title> <styletype="text/css"> h1 { font-family:times new roman; font-size:30px; font-style:italic; font-weight:bold; } h2 { font-family:verdana; font-size:20px; } </style> </head>

  8. Agrupación de varias marcas HTML con una misma regla de estilo. • Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML. • Separamos por coma todas las marcas a las que se aplicará la misma regla de estilo • Supongamos que queremos la misma fuente y color para las marcas h1,h2 y h3: <styletype="text/css"> h1,h2,h3 { font-family:verdana; color:#0000ff; } </style>

  9. Definición de varias reglas para una misma marca HTML. • En algunas circunstancias, es necesario desglosar la inicialización de propiedades en distintas reglas. • Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta:

  10. Tarea 1 Problema 1: Definir la misma fuente, color y tamaño de fuente para las marcas py h6 • Tener en cuenta que cuando vea la página el texto que se encuentra en la marca h6 difiere del texto que se encuentra dentro del párrafo por la propiedad font-weight. • Ya que la marca h6 es de tipo bold y la marca p tiene por defecto normal.

  11. Tarea 1 (2) Problema 2: Confeccione una página que define una regla para la marca body e inicialice las propiedades color, font-family. Luego defina reglas de estilo para las marcas h1,h2 y h3 que redefinan la fuente con los valores: Times New Roman, Courier y Arial. Imprima tres títulos, cada uno con las marcas h1,h2 y h3. Por último imprima un párrafo.

  12. Propiedades relacionadas al texto. • Color • color:#0000ff //hexadecimales • color:rgb(255,0,0); //rojo,verde y azul • Alineación • text-align • Valores: left, right , center, justify • Decorado • text-decoration • Valores: none, underline , overline , line-through Continúa ejemplo ->

  13. Propiedades relacionadas al texto. <styletype="text/css"> h1 { color:#ff0000; text-align:left; text-decoration:underline; } h2 { color:#dd0000; text-align:center; text-decoration:underline; } h3 { color:#aa0000; text-align:right; text-decoration:underline; } </style>

  14. Herencia de propiedades de estilo. • El conjunto de marcas HTML forman en sí un árbol.

  15. Herencia de propiedades de estilo. En muchas situaciones podemos redefinir propiedades para marcas contenidas. <styletype="text/css"> body { color:#0000ff; font-family:verdana; } em { color:#008800; } p { color:#999999; } </style>

  16. Definición de un estilo en función del contexto. • Definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada. • Supongamos que queremos que cuando disponemos un texto encerrado por la marca b (bold) dentro de un párrafo el color de la misma sea verde. Pero si la marca b está contenida por la marca h1 el color debe ser rojo: Continúa ejemplo ->

  17. Definición de un estilo en función del contexto. <html> <head> <title>Problema</title> <styletype="text/css"> p b{ color:#0000ff; } h1 b{ color:#ff0000; } </style> </head> <body> <h1>Acátenemos un título de niveluno, luego un bloque con la marca bold debeaparecer<b>así</b></h1> <p> Luegosiescribimos un párrafo y encerramos un bloque con la marca bold debeaparecer <b>así</b> </p> </body> </html>

  18. Definición de hojas de estilo en un archivo externo. La metodología más empleada es la definición de una hoja de estilo en un archivo separado que deberá tener la extensión css.

  19. Definición de estilos por medio de clases. • En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML. • En esos casos conviene plantear una regla de estilo con un nombre genérico que posteriormente se puede aplicar a varias marcas de HTML. • Para declarar la clase primero inicializamos con el carácter punto y seguidamente le damos un nombre.

  20. Tarea 2 Problema 1: • Crear una página web que contenga una cabecera de nivel 1 (h1), luego una cabecera de nivel 2 (h2) y un párrafo. • Definir reglas de estilo para las tres marcas h1,h2 y p. • Inicializar propiedades vistas en conceptos anteriores. • Intentar el planteo de una página que muestre el contenido de la forma más clara posible.

  21. Tarea 2 (2) Problema 2: • Definir en la hoja de estilo estas dos clases: .subrayado { color:#00aa00; text-decoration:underline; } .tachado { color:#00aa00; text-decoration:line-through; } • Luego, en la página html, • Definirun títulocon nivel h1 (subrayartodo el título). • Luegoun párrafoquetengaalgunaspalabrassubrayadas y otrastachadas (utilizar la marcaspanparaasignarestilos a unapalabra).

  22. Tarea 2 (3) Problema 3: • Definir estas dos reglas en la hoja de estilo externa. .pregunta { font-family:verdana; font-size:14px; font-style:italic; color:#0000aa; } .respuesta { font-family:verdana; font-size:12px; font-style:normal; text-align:justify; color:#555555; } • Luego crear una página HTML que contenga 3 preguntas y 3 respuestas. • A cada pregunta y respuesta disponerla en un párrafo distinto. • Asignar los estilos .pregunta y .respueta

  23. Definición de estilos por medio de clases.

  24. Definición de estilos por medio de Id. • La diferencia fundamental en la definición de un estilo por medio de Id con respecto a la de clase, es que sólo podremos aplicar dicho estilo a una sola marca dentro de la página HTML. • La sintaxis para definir un estilo por medio de Id es: #cabecera { font-family:Times New Roman; font-size:30px; text-align:center; color:#0000ff; background-color:#bbbbbb; } • Luego, sólo una marca HTML dentro de una página puede definir un estilo de este tipo: <div id="cabecera">

  25. Definición de estilos por medio de Id. Ejemplo completo <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <div id="cabecera"> <h1>Título de la cabecera</h1> </div> </body> </html>

  26. Propiedades relacionadas al borde de una marca HTML. • Debemos ahora hacernos la idea que todo elemento que se crea dentro de una página HTML genera una caja. • Imaginemos los controles que hemos creado h1,h2,h3,p,em, etc.; si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectángulo. • Podemos acceder a las propiedades del borde de ese rectángulo mediante las CSS; las propiedades más importantes a las que tenemos acceso son: • border-width • border-style • border-color

  27. Propiedades relacionadas al borde de una marca HTML. Disponemos de los siguientes estilos de borde (border-style): • none • hidden • dotted • dashed • solid • double • groove • ridge • Inset • outsetContinúa ejemplo ->

  28. Propiedades relacionadas al borde de una marca HTML.

  29. El selector universal * • Sirve para inicializar las propiedades de todas las marcas HTML. * { color:#0000aa; margin:0px; padding:0px; } • Esto significa que todas las marcas se imprimen de color verde con cero pixel de margin y padding, salvo que otra regla lo cambie. • Imaginemos si definimos h1 { color:#ff0000} significa que tiene prioridad esta regla.

  30. El selector universal * • En realidad, en forma tácita lo hemos estado utilizando, cuando definimos una clase sin indicar el tipo de marca HTML donde actuará. .pregunta {…} • Equivalente a: *.pregunta {…} • Es decir que podemos asignar esta regla a cualquier marca HTML. p.pregunta{…} //Indica que esta regla sólo se puede utilizar en las marcas de párrafo.

  31. Pseudoclases • Las pseudoclases son unas clases especiales, que se refieren a algunos estados especiales del elemento HTML. • Las que se utilizan fundamentalmente son las que se aplican a la marca <a> (ancla). • La sintaxis : a:pseudoclase { propiedad: valor; }

  32. Pseudoclases • Para la marca HTML <a> tenemos 4 pseudoclases fundamentales: • link - Enlace sin ingresar • visited - Enlace presionado. • hover - Enlace que tiene la flecha del mouse encima,. • active - Es la que tiene foco en ese momento (pruebe de tocar la tecla tab). • Es importante hacer notar que el orden en que definimos las pseudoclases es fundamental para su funcionamiento -> debe respetarse el orden: link-visited-hover-active

  33. Pseudoclases

  34. Eliminar el subrayado a un enlace por medio de las pseudoclases • Otra actividad común en algunos sitios es eliminar el subrayado a los enlaces. • La hoja de estilo es: a:link { text-decoration: none; } a:visited { text-decoration: none; } • Tener en cuenta que podemos agrupar la regla de esta forma: a:link, a:visited{ text-decoration: none; }

  35. Propiedades relacionadas a la dimensión de un objeto en la página. • Disponemos de dos propiedades fundamentales que nos permiten fijar el ancho y el alto de una marca HTML.

  36. Creación de un menú vertical configurando las pseudoclases. • Un recurso muy útil es disponer un menú en una página, si no requerimos uno muy elaborado podemos resolverlo utilizando sólo CSS y HTML • Tarea 3: • Basado en los principios de pseudoclases, implementa: • Un menú vertical • Un menú horizontal

More Related