Hojas de Estilo : CSS
Anuncio
Hojas de Estilo : CSS
Cascading Style Sheets
Dr. José Raúl Pérez Cázares
1
Para que sirven las CSS?
• Para separar la presentación (color, font ..) del contenido
del documento
• Para facilitar la definición y cambios de estilo de un sitio
web.
• Para lograr un estilo consistente en un sitio.
• Para que un usuario modifique a su preferencia la
presentación de una página web.
• Para adaptar el estilo de presentación de un document a los
diferentes medios (pantalla, impresión,…).
Dr. José Raúl Pérez Cázares
2
Versiones
http://www.w3.org/Style/CSS/
• CSS1
– 1996 revisada en 1999 – contiene los aspectos básicos
• CSS 2.1
– Noviembre 2006 'final call working draft'
– IE7 and Firefox 2 cumplen con casi todo
• CSS 3
– En desarrollo
Dr. José Raúl Pérez Cázares
3
¿Donde se ponen las hojas de estilo?
Existen 3 opciones:
• Hojas externas
• Hojas Internas
• Estilos en línea
Dr. José Raúl Pérez Cázares
4
Hojas Externas
mystyle.css
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("back40.gif")}
Es la manera mas
recomendada, la hoja de
estilo se escribe en un
archivo de texto, con
extensión .css
<head>
En la página XHTML
se indica la relación
<link rel="stylesheet" type="text/css" href="mystyle.css" />
con la hoja externa.
</head>
Dr. José Raúl Pérez Cázares
5
Hojas Internas
<html >
<head>
<style type="text/css">
p { color: red;background: yellow;}
</style>
</head>
<body >
<p>Este es un párrafo</p>
<p>Este es otro párrafo</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
Se utilizan cuando el
estilo se aplica solo a un
documento
6
Estilos en línea
<ETIQUETA style="propiedad:valor;....">... </ETIQUETA>
<p style="color: sienna; margin-left: 20px">
Este es un párrafo con estilo </p>
<p> Este es un párrafo normal </p>
Se pierden muchas de las ventajas de las hojas de estilo ya que se mezcla
contenido con presentación. Este método se usa cuando el estilo se aplica a
un solo elemento.
Dr. José Raúl Pérez Cázares
7
Orden de aplicación
1.
Las definidas por el navegador
2.
Las definidas por el usuario
3.
Hoja de estilo externa
4.
Hoja de estilo interna
5.
Directamente sobre la etiqueta HTML
6.
Las definidas por el usuario como importantes
Dr. José Raúl Pérez Cázares
Menor Prioridad
Mayor Prioridad
8
Estructura de una regla
Dr. José Raúl Pérez Cázares
9
Selectores
• Selectores de elementos – (etiquetas HTML)
h1 {color: purple;}
h1, h2, p {color: purple;} (agrupación)
• Contextuales – (etiquetas HTML, pero en
contexto) ejemplo:
li b {color: purple;}
(ocurrencia de b dentro de li)
Dr. José Raúl Pérez Cázares
10
Selectores
• Selectores de clase
h1.aviso {color: red;} (elementos h1 de la clase aviso)
ó
.aviso {color:red;} (cualquier elemento de la clase aviso)
<h class=“aviso”>Peligro!</h1>
<p class=“aviso”>Tenga cuidado…</p>
…….
Dr. José Raúl Pérez Cázares
11
Selectores
• Pseudo-elementos (partes de un elemento)
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff;font-variant:small-caps}
Dr. José Raúl Pérez Cázares
12
Selectores
• Pseudo-Clases (Variantes de un selector)
selector:pseudo-clase { propiedad: valor }
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
/* link no visitado */
/* link visitado */
/* mouse sobre el link */
/* link seleccionado */
p:first-child {color: #FF0000}
/* primer párrafo dentro de otro elemento*/
Dr. José Raúl Pérez Cázares
13
Selectores
Selector por id
#ParteAzul{color: blue;}
#ParteRoja{color: red;}
<body >
<div id=“ParteAzul">La parte azul</div>
<div id=“ParteRoja">La parte roja</div>
</body>
Dr. José Raúl Pérez Cázares
14
Ejemplos de Propiedades
Dr. José Raúl Pérez Cázares
15
Background
•
•
•
•
•
background-color
background-image
background-repeat
background-attachment
background-position
Dr. José Raúl Pérez Cázares
16
Background
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
17
Texto
•
•
•
•
•
•
•
color
direction
line-height
letter-spacing
text-decoration
text-indent
…
Dr. José Raúl Pérez Cázares
18
Texto: color
<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
19
Texto: text-decoration
<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
</body>
</html>
Dr. José Raúl Pérez Cázares
20
Texto: text-align
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
</body>
</html>
Dr. José Raúl Pérez Cázares
21
Fuentes
•
•
•
•
•
•
font-familiy
font-style
font-variant
font-weight
font-size
…
Dr. José Raúl Pérez Cázares
22
Fuentes: font-family
<html>
<head>
<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>
<body>
<h3>This is header 3</h3>
<p>This is a paragraph</p>
<p class="sansserif">This is a paragraph</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
23
Fuentes: font-size
<html>
<head>
<style type="text/css">
h1 {font-size: 150%}
h2 {font-size: 130%}
p {font-size: 100%}
p.grande {font-size: 32pt}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
<p class="grande">
This is a big paragraph</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
24
Bordes
• border-width
• border-style
• border-color
Dr. José Raúl Pérez Cázares
25
Bordes: border-style
<html>
<head>
<style type="text/css">
p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}
</style>
</head>
<body>
<p class="dotted">A dotted border</p>
<p class="dashed">A dashed border</p>
<p class="solid">A solid border</p>
<p class="double">A double border</p>
<p class="groove">A groove border</p>
<p class="ridge">A ridge border</p>
<p class="inset">An inset border</p>
<p class="outset">An outset border</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
26
Bordes: border-style
Dr. José Raúl Pérez Cázares
27
Bordes: border-width
<html>
<head>
<style type="text/css">
p.one {border-style: solid; border-top-width: 15px}
p.two {border-style: solid; border-top-width: thin}
</style>
</head>
<body>
<p class="one"><b>Note:</b> The "border-top-width"
property does not work if it is used alone.
Use the "border-style" property to set the borders first.</p>
<p class="two">Some text. Some more text.</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
28
Bordes: border-width
Dr. José Raúl Pérez Cázares
29
Caja (Box model)
Dr. José Raúl Pérez Cázares
30
Caja
<html>
<head>
<style type="text/css">
p.boxed
{
margin: 20px;
border: solid;
border-width: 10px;
border-color: green;
padding: 10px;
}
</style>
</head>
<body>
<p class="boxed">This is a boxed paragraph.
Please note the border properties, the distance
betwen the content and the border (padding)
and the margin</p>
<p class="sansserif">This is a paragraph</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
31
Caja: ejemplo
Dr. José Raúl Pérez Cázares
32
Listas
• list-style-type
• list-style-position
• list-style-image
Dr. José Raúl Pérez Cázares
33
Listas: list-style-type
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
Dr. José Raúl Pérez Cázares
</html>
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
34
Listas: list-style-type
Dr. José Raúl Pérez Cázares
35
Tablas
•
•
•
•
•
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Dr. José Raúl Pérez Cázares
36
Tablas: border-collapse
<html>
<head>
<style type="text/css">
table.coll
{
border-collapse: collapse
}
table.sep
{
border-collapse: separate
}
</style>
</head>
<body>
<table class="coll" border="1">
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
<br />
<table class="sep" border="1">
<tr><td>Peter</td><td>Griffin</td></tr>
<tr><td>Lois</td><td>Griffin</td></tr>
</table>
</body>
</html>
Dr. José Raúl Pérez Cázares
37
Tablas: border-collapse
Dr. José Raúl Pérez Cázares
38
Posición absoluta
<html>
<head>
<style type="text/css">
h2.pos_abs{
position:absolute;
left:100px;
top:150px}
</style>
</head>
<body>
<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on
a page. The heading below is placed 100px from the left of the page
and 150px from the top of the page.</p>
</body>
</html>
Dr. José Raúl Pérez Cázares
39
Posición absoluta
Dr. José Raúl Pérez Cázares
40
Posición relativa
<html>
<head>
<style type="text/css">
h2.pos_left{
position:relative;
left:-20px}
h2.pos_right{
position:relative;
left:20px}
</style>
</head>
<!--Aquí va el body -->
</html>
<body>
<h2>This is a heading in normal position</h2>
<h2 class="pos_left">This heading is moved
left to its normal position</h2>
<h2 class="pos_right">This heading is moved
right to its normal position</h2>
<p>Relative positioning moves an element
RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels
from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the
element's original left position.</p>
</body>
Dr. José Raúl Pérez Cázares
41
Posición relativa
Dr. José Raúl Pérez Cázares
42
