css

Download Report

Transcript css 

:: M.C. Rafael A. García Rosas ::
CSS
M.C. Rafael A. García Rosas.
[email protected]
:: M.C. Rafael A. García Rosas ::
¿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
:: M.C. Rafael A. García Rosas ::
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
:: M.C. Rafael A. García Rosas ::
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>
<style type="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.
:: M.C. Rafael A. García Rosas ::
Propiedades relacionadas a fuentes.
Propiedad
font-family
Valores frecuentemente soportados
Arial, Arial Black, Arial Narrow, Courier,
New Georgia, Impact, Tahoma, Times New
Roman, Verdana
font-size
10px, 20px, 30px, etc.
font-style
Normal, italic, oblique
font-weight
Normal, bold, bolder, lighter
100, 200, 300, 400, 500, 600, 700, 800, 900
font-variant
small-caps, normal
:: M.C. Rafael A. García Rosas ::
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 em como medida cuando la salida
es el monitor. Si utilizamos pixeles hay navegadores que no
permiten cambiar el tamaño de texto.
:: M.C. Rafael A. García Rosas ::
Propiedades relacionadas a fuentes.
<head>
<title>Problema</title>
<style type="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>
:: M.C. Rafael A. García Rosas ::
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:
<style type="text/css">
h1,h2,h3 {
font-family:verdana;
color:#0000ff;
}
</style>
:: M.C. Rafael A. García Rosas ::
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:
<head>
<title>Problema</title>
<style type="text/css">
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 {
font-size:40px;
}
h2 {
font-size:30px;
}
h3 {
font-size:25px;
}
h4 {
font-size:20px;
}
h5 {
font-size:15px;
}
h6 {
font-size:10px;
}
</style>
</head>
:: M.C. Rafael A. García Rosas ::
Tarea 1
Problema 1:
Definir la misma fuente, color y tamaño de fuente
para las marcas p y 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.
:: M.C. Rafael A. García Rosas ::
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.
:: M.C. Rafael A. García Rosas ::
Propiedades relacionadas al texto.
• Color
– color:#0000ff
– color:rgb(255,0,0);
//hexadecimales
//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 ->
:: M.C. Rafael A. García Rosas ::
Propiedades relacionadas al texto.
<style type="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>
:: M.C. Rafael A. García Rosas ::
Herencia de propiedades de estilo.
• El conjunto de marcas HTML forman en sí un árbol.
<body>
<h1>
<h2>
<h3>
<html>
<head>
<title>Problema</title>
<style type="text/css">
body {
color:#0000ff;
font-family:verdana;
}
</style>
</head>
<h4>
<h5>
<h6>
<body>
<h1>Este es un título de
nivel 1 y con la marca 'em'
la palabra:
<em>Hola</em></h1>
<p>Todo este párrafo debe
ser de color azul ya que lo
hereda de la
marca body.</p>
<p>
<div>
…
<a
href="pagina2.html">Siguie
nte ejemplo</a>
</body>
</html>
:: M.C. Rafael A. García Rosas ::
Herencia de propiedades de estilo.
En muchas situaciones podemos redefinir propiedades para
marcas contenidas.
<style type="text/css">
body {
color:#0000ff;
font-family:verdana;
}
em {
color:#008800;
}
p{
color:#999999;
}
</style>
:: M.C. Rafael A. García Rosas ::
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:
pb
{
div h1 em
color:#0000ff;
}
{
color:#ff0000;
}
Continúa ejemplo ->
:: M.C. Rafael A. García Rosas ::
Definición de un estilo en función del
contexto.
<html>
<head>
<title>Problema</title>
<style type="text/css">
p b{
color:#0000ff;
}
h1 b{
color:#ff0000;
}
</style>
</head>
<body>
<h1>Acá tenemos un título de nivel uno, luego un bloque con
la marca bold debe aparecer <b>así</b></h1>
<p>
Luego si escribimos un párrafo y encerramos un bloque con la marca bold
debe aparecer <b>así</b>
</p>
</body>
</html>
:: M.C. Rafael A. García Rosas ::
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.
Asociación de una hoja de estilo
Archivo de estilo: (estilos.css)
<html>
<head>
<title>Problema</title>
body {
background-color:#eafadd;
}
h1 {
color:#0000cc;
font-family:times new roman;
font-size:25px;
text-align:center;
text-decoration:underline;
}
p{
color:#555555;
font-family:verdana;
text-align:justify;
}
<link rel="StyleSheet"
href="estilos.css" type="text/css">
</head>
<body>
<h1>Definición de hojas de estilo en un
archivo externo.</h1>
<p>X</p>
</body>
</html>
:: M.C. Rafael A. García Rosas ::
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.
:: M.C. Rafael A. García Rosas ::
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.
:: M.C. Rafael A. García Rosas ::
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,
– Definir un título con nivel h1 (subrayar todo el título).
– Luego un párrafo que tenga algunas palabras subrayadas y otras tachadas
(utilizar la marca span para asignar estilos a una palabra).
:: M.C. Rafael A. García Rosas ::
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
:: M.C. Rafael A. García Rosas ::
Definición de estilos por medio de
clases.
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet"
href="estilos.css" type="text/css">
</head>
<body>
<h1 class="resaltado">Titulo de nivel
1</h1>
<p>
Este parrafo muestra el resultado de
aplicar la clase .resaltado en la última
<span
class="resaltado">palabra.</span>
</p>
</body>
</html>
La sintaxis para definir una clase aplicable
a cualquier marca HTML es:
body {
background-color:#eeeeee;
}
.resaltado{
color:#000000;
background-color:#ffff00;
font-style:italic;
}
:: M.C. Rafael A. García Rosas ::
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">
:: M.C. Rafael A. García Rosas ::
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>
:: M.C. Rafael A. García Rosas ::
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 backgroundcolor 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
:: M.C. Rafael A. García Rosas ::
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
outset
Continúa ejemplo ->
:: M.C. Rafael A. García Rosas ::
Propiedades relacionadas al borde de
una marca HTML.
estilos.css
pagina1.html
.pregunta {
background-color:#ffff00;
border-width:1px;
border-style:solid;
border-color:#000000;
}
.respuesta {
border-width:1px;
border-style:dashed;
border-color:#000000;
}
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css"
type="text/css">
</head>
<body>
<p class="pregunta">Quién descubrió
América
y en que año fue?</p>
<p class="respuesta">Colón en 1492</p>
</body>
</html>
:: M.C. Rafael A. García Rosas ::
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.
:: M.C. Rafael A. García Rosas ::
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.
:: M.C. Rafael A. García Rosas ::
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;
}
:: M.C. Rafael A. García Rosas ::
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
:: M.C. Rafael A. García Rosas ::
Pseudoclases
página.html
estilos.css
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css"
type="text/css">
</head>
<body>
<a
href="http://www.google.com">Google<
/a>
<a
href="http://www.yahoo.com">Yahoo</
a>
<a
href="http://www.msn.com">Msn</a>
</body>
</html>
a:link{
background-color:#00ff00;
color:#ff0000;
}
a:visited{
background-color:#000000;
color:#ffffff;
}
a:hover{
background-color:#ff00ff;
color:#fffff;
}
a:active{
background-color:#ff0000;
color:#ffff00;
}
:: M.C. Rafael A. García Rosas ::
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;
}
:: M.C. Rafael A. García Rosas ::
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.
estilos.css
pagina1.html
#cabecera {
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css"
type="text/css">
</head>
<body>
<div id="cabecera">
Blog del Programador
</div>
</body>
</html>
width:100%;
height:100px;
background-color:#ffee00;
color:#0000aa;
text-align:center;
font-family:Times New Roman;
font-size:50px;
font-weight:bold;
}
:: M.C. Rafael A. García Rosas ::
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