Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
CSS
Cascading Style Sheets
2
El nombre hojas de estilo en cascada viene
del inglés Cascading Style Sheets, del que toma sus siglas.
CSS es un lenguaj...
3
• Separa contenido de formato
• Hoja de estilo: Conjunto de instrucciones que
definen los formato de los elementos HTML ...
4
Regla de estilo
• El código que compone la hoja de estilo
formado por una o más reglas de estilo.
• Declaraciones de los...
5
P{
color:blue;
}
Si hay varias propiedades ;
h1 {
font-size: 1.4em;
font-family: Times, "Times New Roman", serif;
font-w...
6
Ejemplo 1: Página HTML con
varios H1, P, A
<html>
<head>
<title>Hola probando CSS</title>
</head>
<body>
Hola probando C...
7
8
Forma local
<html>
<head>
<title>Hola probando CSS</title>
</head>
<body>
Hola probando CSS
<p style={color:green;}>Y ah...
9
10
Forma interna : en la propia página
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
p{
color:blue...
11
ATENCIÓN,
todos los p
se realizan
con el
formato del
selector p
12
Hoja externa: común al sitio web
<html>
<head>
<title>Hola probando CSS</title>
<link rel="stylesheet" type="text/css" ...
13
Prueba1.css
• p{
• color:blue;
• font-weight: bold;
• text-align: center;
• }
• a{
• font-weight: bold;
• text-align: c...
14
Igual que
el anterior
pero en fichero
separado .css
15
Si cojo otro fichero del web
asociado al mismo fichero css
<html>
<head>
<title>Hola probando CSS</title>
<link rel="st...
16
Conserva
El mismo
formato
17
• Páginas web
• http://www.w3.org/style/css
• Editores
– Style Master
– www.westciv.com incluye tutorial en inglés
– To...
18
• CUESTION
• Si p{color:blue;}
• Se aplica a TODOS los p.
• ¿Qué puedo hacer si no desea aplicar a
todos?
• Selectores ...
19
Identificadores
• Los elementos HTML disponen de atributo
ID para identificar cada elemento
unívocamente.
• <p id=“Aper...
20
• CSS permite realizar una selección más
ajustada.
• Los valores son libres y deben comenzar
por una letra, se recomien...
21
Ejemplo
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
p#bienvenida{
font-size:14px;
color: blue...
22
23
Clases
• Finalidad es la posibilidad de agrupar
elementos por clases o grupos para que
así se pueda aplicar un mismo fo...
24
• Se definen en <STYLE>…:
– All.ClaseTextoRojo{color:red;}
• All es por defecto y por tanto también se puede
especifica...
25
• <style type="text/css">
• .fotos{Border-width:1px;}
• .casas{Border-width:3px;}
• p#despedida{font-size:19px;}
• </st...
26
• También es posible que un elemento pueda tener mas
de 1 clase
– <style type="text/css">
– .fotos{Border-width:1px;}
–...
27
• P.uno{text-align:center;}
• P#dos{color=red;}
• P y clase 1
• P e identificador (div) dos
28
Ejercicio
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
.ClaseTextoRojo{color:red;}
.ClaseTexto...
29
30
• Se puede restringir la utilización de una
clase a ciertos elementos:
– H2.ClaseTextoVerde{color:green;}
• De esta for...
31
Ejercicio clases de un Elemento
32
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
H1 {
font-style:italic;
color:blue;
}
H2.ClaseTex...
33
34
comentarios
• /* … */
<style type="text/css">
<!--
H1 B
{
color:red;
font-style:italic;
text-decoration:underline;
}/* ...
35
Selector de contexto
• Puede que nos interese aplicar un estilo concreto a los
textos marcados con negrita dentro de un...
36
Ejemplo
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
<!--
H1 B
{
color:red;
font-style:italic;...
37
38
Pseudo-clases
• Clasifican a los elementos según el estado
del mismo, en función de los eventos.
• Por ejemplo un enlac...
39
• Se quiere que los vínculos una vez visitados
aparezcan de color rojo:
A:visited{color:red;}
• Otros de a
– :link: vín...
40
• A:link{color:red}
• A:visited{color:blue;}
41
Pseudo-elementos
• Partes de elementos de una página a los que html NO
OTORGA IDENTIDAD PROPIA, Y POR TANTO, NO
PUEDEN ...
42
• :first-letter  el primer carácter del
elemento al que pertenece
• :first-line: la primera línea del elemento al
que ...
43
ejemplo
44
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
<!--
/* esto es un comentario*/
/* esto es
otro c...
45
ejercicio
p:first-letter{
color:red;
text-decoration:underline;
font-size:24px;}
Color rojo
Subrayado
Tamaño fuente 24
46
Agrupar selectores
• Si se desea aplicar misma regla a más de
un elemento a la vez:
• Td, p {color=blue;>
• Separados p...
47
Propiedades y valores
• No de memoria, se adquieren con la practica pero si es
necesario conocer las más habituales y s...
48
img{
border:2px dotted #000000;}
Dotted  linea punteada en el borde
Border: 2px  borde de 2 pixeles
Color del borde ...
49
.menu a{
font-family:Georgia, "Times New Roman", Times,
serif;
font-size:14px;
color: #6f6f6f;
text-decoration:none;}
...
50
Fotos borde…
• .album {
• border: 2px solid #660033 5px;}
• /* se puede poner el borde solid, double, dotted, dashed,
g...
51
• Existe lo que se llama short-hand properties  abreviatura del
nombre completo de la propiedad para escribir menos.
p...
52
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
H1 {
font-style:italic;
color:blue;
}
H2.ClaseTex...
53
54
• Algunas propiedades solo aceptan un valor de una lista, otras
números, porcentajes, colores…
• Cuando se asignan valo...
55
Ejercicio
• Hacer hoja de estilo interna que adopte los
estilos:
• Borde de imagen de 2 pixeles, lineas punteadas
y de ...
56
57
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
img{
border:2px dotted #000000;}
p#inicio{
font-f...
58
Ejercicio ¿qué hace?
• Estudiar que hace dicho código
• Prueba14.htm
59
<html><head>
<title>Hola probando CSS</title>
<style type="text/css">
/* esta regla define la fuente de los párrafos p ...
60
/*también modificamos encabezados*/
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:22 px;
color: ...
61
<body>
Hola probando CSS
<table>
<tr id=impar>
<td>Martín</td>
<td>José</td>
<td>Jaime</td>
</tr>
<tr id=par>
<td>Mamen...
62
63
• Falla los links, al pasar no subraya…
• Los links no pertenecientes a la clase
menu
• LA definición .menu a  indica ...
64
Tabla de enlaces
<table border=3 class="menu">
<tr>
<td><a href="http://www.google.es">Ir a google 1 </a><br></td>
</tr...
65
66Ahora si se subraya
67
LISTA
• Probar que si creamos lista quedan como los párrafos
para no perder el mismo estilo que este.
• <ol>
• <li>Mart...
68
69
Guía de referencia rápida
70
71
72
73
74
75
76
Imprimir más pequeño
• Hay ocasiones en las que si decidimos
imprimir una página dicha página no
ocupa una hoja y sale ...
77
<html>
<head>
<title>Hola probando CSS</title>
<link rel="stylesheet" type="text/css" href="prueba1.css"/>
<link rel="s...
78
• Y en la versión imprimible lo que se suele realizar es
bajar el tamaño de la fuente del body. prueba1.css
Body{
Font:...
79
80
Y al probarlo al salir
impreso aparece la
página impresa
ligeramente menor.
PROBADO.
FIN
82
Centrar imagen fondo
• body {
background-attachment: fixed;
background-color: #FFFFFF;
background-image:
url(imagenes/s...
Div y span
• Las etiquetas div y span permiten estructurar
los documentos html.
• Div define un bloque de información (cap...
• El uso de la etiqueta SPAN está
recomendada para aquellos casos en que
se quiera modificar el estilo definido
dentro de ...
head>
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
div.bloque1{margin-left:40px}
span.sub1{color:red...
86
Enlaces
• En el siguiente ejemplo se muestra como
pasar a mayúsculas al pasar el ratón
sobre el enlace
87
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body{color:#FF9933;cursor:hand;}
A:hover{...
89
Al pasar el ratón sobre el
enlace se convierte a
mayúsculas
listas
• También por ejemplo en css podemos
cambiar el valor de la lista (numeración,
viñeta, dibujo, etc.)
• Propiedad li...
• <html>
• <head>
• <style type="text/css">
• ul
• {
• list-style-image:url('sqpurple.gif');
• }
• </style>
• </head>
• <b...
<html><head><title>Listas</title>
<style type="text/css">
OL.lroman{list-style-type:lower-roman}
OL.uroman{list-style-type...
93
Formulario con css
94
<html><head><title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body{
background:rgb(102,153,204);font:12px...
<body>
<form action="" method="post">
<div class="marco">
<p class="texto">DATOS PERSONALES
<div>
<span class="label">Nopm...
<div class="marco">
<p class="texto">DESCRIPCION
<div>
<SPAN CLASS="LABEL">tÍTULO DE LA WEB</SPAN><INPUT TYPE="text"
name=...
98
• Float: permite indicar si la imagen será
flotante o no para poder ajustar texto
alrededor. (none-left y right)
• Height:...
• Probar a modificar los bordes de las cajas
del marco y de las cajas del formulario por
ejemplo cambiando los diversos
es...
Próxima SlideShare
Cargando en…5
×

CSS

561 visualizaciones

Publicado el

Manual básico sencillo de CSS

Publicado en: Educación
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

CSS

  1. 1. CSS Cascading Style Sheets
  2. 2. 2 El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como<H2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <H1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que leía esa página con un navegador perdía totalmente el control sobre la visualización del texto. Cuando se utiliza CSS, la etiqueta <H1> no debería proporcionar información sobre cómo será visualizado, solamente marca la estructura del documento. La información de estilo, separada en una hoja de estilo, especifica cómo se ha de mostrar <H1>: color, fuente, alineación del texto, tamaño y otras características no visuales, como definir el volumen de un sintetizador de voz, por ejemplo. La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".
  3. 3. 3 • Separa contenido de formato • Hoja de estilo: Conjunto de instrucciones que definen los formato de los elementos HTML de la página a los que afecta • 3 opciones de aplicarlo: – Forma local • <p style=“color:green;”>HOLA MARTIN</p> – Interno: • <STYLE type=text/css”>…<style> • Entre las etiquetas head (suele) • Aplica a toda la página donde se encuentre – Externo: fichero con extensión css. • <link rel=“stylesheet” type=“text/css” href=“url.css”/> • En el fichero url.css se hace referencias al fichero css
  4. 4. 4 Regla de estilo • El código que compone la hoja de estilo formado por una o más reglas de estilo. • Declaraciones de los formatos que adoptaran los elementos de la página web. • Formato: • Selector {propiedad:valor;} – Selector: elemento html (<p> – Propiedad: del elemento HTML que va a dar estilo. (color) – Valor: valor que se le da a la propiedad (blue) – P{color:blue;}
  5. 5. 5 P{ color:blue; } Si hay varias propiedades ; h1 { font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; color: #1313eb;}
  6. 6. 6 Ejemplo 1: Página HTML con varios H1, P, A <html> <head> <title>Hola probando CSS</title> </head> <body> Hola probando CSS <p>Y ahora un párrafo nuevo de bienvenida</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4> ya hora cabecera h4</h4> y ahora texto normal <p> Y ahora párrafo para despedirnos</p> </body> </html> Prueba1.htm
  7. 7. 7
  8. 8. 8 Forma local <html> <head> <title>Hola probando CSS</title> </head> <body> Hola probando CSS <p style={color:green;}>Y ahora un párrafo nuevo de bienvenida</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es" style={color=red;}> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4> ya hora cabecera h4</h4> y ahora texto normal <p> Y ahora párrafo para despedirnos</p> </body> </html> Prueba2.htm
  9. 9. 9
  10. 10. 10 Forma interna : en la propia página <html><head> <title>Hola probando CSS</title> <style type="text/css"> p{ color:blue; font-weight: bold; text-align: center; } a{ font-weight: bold; text-align: center; color=red; } </style> </head> <body> Hola probando CSS <p>Y ahora un párrafo nuevo de bienvenida</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4> ya hora cabecera h4</h4> y ahora texto normal <p> Y ahora párrafo para despedirnos</p> </body></html>
  11. 11. 11 ATENCIÓN, todos los p se realizan con el formato del selector p
  12. 12. 12 Hoja externa: común al sitio web <html> <head> <title>Hola probando CSS</title> <link rel="stylesheet" type="text/css" href="prueba1.css"/> </head> <body> Hola probando CSS <p>Y ahora un párrafo nuevo de bienvenida</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4> ya hora cabecera h4</h4> y ahora texto normal <p> Y ahora párrafo para despedirnos</p> </body> </html>
  13. 13. 13 Prueba1.css • p{ • color:blue; • font-weight: bold; • text-align: center; • } • a{ • font-weight: bold; • text-align: center; • color=red; • }
  14. 14. 14 Igual que el anterior pero en fichero separado .css
  15. 15. 15 Si cojo otro fichero del web asociado al mismo fichero css <html> <head> <title>Hola probando CSS</title> <link rel="stylesheet" type="text/css" href="prueba1.css"/> </head> <body> Hola probando CSS 2 <p>Y ahora un párrafo nuevo de bienvenida EN OTRA PÄGINA WEB</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll y ahora texto normal <p> Y ahora párrafo para despedirnos</p> </body> </html> Prueba5.htm
  16. 16. 16 Conserva El mismo formato
  17. 17. 17 • Páginas web • http://www.w3.org/style/css • Editores – Style Master – www.westciv.com incluye tutorial en inglés – TopStyle – CSSED • Validar CSS – http://jigsaw.w3.org/css-validator (comprueba si el código cumple con el estándar oficial) – (URL o carga del archivo a comprobar) – (cuidado  los browser van por detrás  aunque compatible no todos aceptan el 100%) – http://www.w3.org/style/css#browsers
  18. 18. 18 • CUESTION • Si p{color:blue;} • Se aplica a TODOS los p. • ¿Qué puedo hacer si no desea aplicar a todos? • Selectores más complejos que permitan identificar.
  19. 19. 19 Identificadores • Los elementos HTML disponen de atributo ID para identificar cada elemento unívocamente. • <p id=“Apertura”>Bienvenidos a…</p> • <p id=“cuerpo”>Erase una vez…</p> • <p id=“despedida”>Gracias y hasta pronto…</p>
  20. 20. 20 • CSS permite realizar una selección más ajustada. • Los valores son libres y deben comenzar por una letra, se recomienda que sean descriptivos. • Se desea que los elementos p marcados como despedida tamaño de 14 pixeles y en el centro y color azul. • P#despedida{font-size:14 px;} • Los otros párrafos serán normales.
  21. 21. 21 Ejemplo <html><head> <title>Hola probando CSS</title> <style type="text/css"> p#bienvenida{ font-size:14px; color: blue; } p#despedida{ font-size:19px; font-weight: bold; text-align: left; color: red; } </style> </head> <body> Hola probando CSS <p id="Bienvenida">Y ahora un párrafo nuevo de bienvenida p de bienvenida</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4> ya hora cabecera h4</h4> y ahora texto normal <p id="despedida"> Y ahora párrafo para despedirnos p de despedida</p> <p id="bienvenida">y otra vez bienvebidoooooo p de bienvenida</p> </body></html> Prueba6.htm
  22. 22. 22
  23. 23. 23 Clases • Finalidad es la posibilidad de agrupar elementos por clases o grupos para que así se pueda aplicar un mismo formato. • Permite la especificación de características concretas a grupos heterogéneos de elementos.
  24. 24. 24 • Se definen en <STYLE>…: – All.ClaseTextoRojo{color:red;} • All es por defecto y por tanto también se puede especificar: – .ClaseTextoRojo{color:red;} Posteriormente para que algo lo pudiera utilizar en el elemento HTML añadir CLASS: – <P CLASS=ClaseTextoRojo>Este texto en rojo</p> El ALL no funciona en todos los exploradores
  25. 25. 25 • <style type="text/css"> • .fotos{Border-width:1px;} • .casas{Border-width:3px;} • p#despedida{font-size:19px;} • </style> • … • <img src=“chalet.jpg” class=“fotos”> • Dicha imagen se verá con borde de 1px. Se muestra con el formato de la clase FOTOS.
  26. 26. 26 • También es posible que un elemento pueda tener mas de 1 clase – <style type="text/css"> – .fotos{Border-width:1px;} – .casas{Border-width:3px;} – p#despedida{font-size:19px;} – </style> • … • <img src=“chalet.jpg” class=“fotos”> • Dicha imagen se verá con borde de 1px. Se muestra con el formato de la clase FOTOS. • <img src=“casa1.jpg” class=“fotos casas”> • Dicha imagen se verá con borde de 3px. Se muestra con el formato de la clase FOTOS y luego CASAS. Cogería la características de FOTOS y añadiría las de CASAS. Por ejemplo de todas las fotos bordear mas fuerte las que sean CASAS especiales frente a las otras.
  27. 27. 27 • P.uno{text-align:center;} • P#dos{color=red;} • P y clase 1 • P e identificador (div) dos
  28. 28. 28 Ejercicio <html><head> <title>Hola probando CSS</title> <style type="text/css"> .ClaseTextoRojo{color:red;} .ClaseTextoVerde{color:green;} p{ color:blue; font-weight: bold; text-align: center; text-decoration:underline; } </style> </head> <body> Hola probando CSS <p class="ClaseTextoRojo">Y ahora un párrafo nuevo de bienvenida y aparece en rojo por el class clasetextorojo</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4> ya hora cabecera h4</h4> y ahora texto normal <p class=ClaseTextoVerde> Y ahora párrafo para despedirnos y aparece en verde por el class en VERDE</p> </body></html> Se añaden al estilo p pero además clase ClaseTextoRojo Prueba7.htm
  29. 29. 29
  30. 30. 30 • Se puede restringir la utilización de una clase a ciertos elementos: – H2.ClaseTextoVerde{color:green;} • De esta forma sólo se puede aplicar dicha clase sobre el elemento H2 y no sobre el resto. – <h2 class=ClaseTextoVerde>BIEN</h2> – <h1 class=ClaseTextoVerde>MAL</h2>
  31. 31. 31 Ejercicio clases de un Elemento
  32. 32. 32 <html><head> <title>Hola probando CSS</title> <style type="text/css"> H1 { font-style:italic; color:blue; } H2.ClaseTextoRojo{color:red;} .ClaseTextoVerde{color:green;} p{ color:blue; font-weight: bold; text-align: center; text-decoration:underline; } </style> </head> <body> Hola probando CSS <p class="ClaseTextoRojo">Y ahora un párrafo nuevo de bienvenida y aparece en rojo por el class clasetextorojo pero falla SOLO h2</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2 class="ClaseTextoRojo">y ahora cabecera h2 CON CLASE</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4 class="ClaseTextoVerde"> ya hora cabecera h4 con clase texto verde BIEN para TODOS</h4> <h4 class="ClaseTextoRojo"> ya hora cabecera h4 con clase texto Rojo MAL solo H2</h4> y ahora texto normal <h2>y ahora cabecera h2 pero SIN CLASE</h2> <p class=ClaseTextoVerde> Y ahora párrafo para despedirnos y aparece en verde por el class en VERDE</p> </body></html> Prueba8.htm
  33. 33. 33
  34. 34. 34 comentarios • /* … */ <style type="text/css"> <!-- H1 B { color:red; font-style:italic; text-decoration:underline; }/* esto es un comentario*/ /* esto es otro coment de varias líneas*/ --> </style>
  35. 35. 35 Selector de contexto • Puede que nos interese aplicar un estilo concreto a los textos marcados con negrita dentro de un identificador H1 por ejemplo. • Se realiza indicando los identificadores que lo componen comenzando por el más externo. H1 B {color:red;} Las etiquetas B (negrita) dentro de H1 automáticamente de color rojo. <h1>La parte negrita dentro del h1 en color<b>rojo<b></b></h1>
  36. 36. 36 Ejemplo <html><head> <title>Hola probando CSS</title> <style type="text/css"> <!-- H1 B { color:red; font-style:italic; text-decoration:underline; }/* esto es un comentario*/ /* esto es otro coment*/ --> </style> </head> <body> Hola probando CSS <h1>Texto normal con H1</h1> <b> Texto negrita normal con b</b> <h1>La parte negrita dentro del h1 en color<b>rojo<b></b></h1> hola de nuevo<br> <b>no aparece texto en <h1>rojo porque no es INTERNO b h1 /h1 b</h1></b> </body></html>
  37. 37. 37
  38. 38. 38 Pseudo-clases • Clasifican a los elementos según el estado del mismo, en función de los eventos. • Por ejemplo un enlace visitado, ratón encima, etc. • Más utilizado a (enlace) • Otros • idioma (:lang) • Primer elemento (:first-child)  primer elemento después de otro elemento
  39. 39. 39 • Se quiere que los vínculos una vez visitados aparezcan de color rojo: A:visited{color:red;} • Otros de a – :link: vínculos que todavía no se han visitado – :visited: vínculos ya visitados – :hover vínculos sobre los que está el cursor del ratón – Vínculos sobre los que se está haciendo clic – :focus: vínculos que están siendo seleccionados mediante teclado
  40. 40. 40 • A:link{color:red} • A:visited{color:blue;}
  41. 41. 41 Pseudo-elementos • Partes de elementos de una página a los que html NO OTORGA IDENTIDAD PROPIA, Y POR TANTO, NO PUEDEN SER SELECCIONADOS POR DICHO LENGUAJE. Sin embargo si pueden ser identificados por las reglas de estilo y ser formateados de manera distinta a la de los elementos a los que pertenecen. • No existe etiqueta para marcar la primera letra o primera línea de un párrafo (subelementos de elemento párrafo) • Comienzan por : – P:first-letter{color:red;} – La primera letra de un párrafo en color rojo
  42. 42. 42 • :first-letter  el primer carácter del elemento al que pertenece • :first-line: la primera línea del elemento al que pertenece • :before  el elemento anterior • :after  el elemento posterior
  43. 43. 43 ejemplo
  44. 44. 44 <html><head> <title>Hola probando CSS</title> <style type="text/css"> <!-- /* esto es un comentario*/ /* esto es otro coment*/ p:first-letter{color:red;} /*p:first-line{ color:red; text-decoration:underline; }*/ --> </style> </head> <body> Hola probando CSS <p>Hola como estáis? La primera letra en rojo con p:first-letter</p> <p>Hola, y ahora voy a escribir y escribir y escribir y quiero que esté subrayada la primera<br> línea del párrafo y después...<br> y sigo y sigo<br> y sigo...</p> <h1>Texto normal con H1</h1> <b> Texto negrita normal con b</b> <h1>La parte negrita dentro del h1 en color<b>rojo<b></b></h1> hola de nuevo<br> <b>no aparece texto en <h1>rojo porque no es INTERNO b h1 /h1 b</h1></b> </body></html> Prueba10.htm
  45. 45. 45 ejercicio p:first-letter{ color:red; text-decoration:underline; font-size:24px;} Color rojo Subrayado Tamaño fuente 24
  46. 46. 46 Agrupar selectores • Si se desea aplicar misma regla a más de un elemento a la vez: • Td, p {color=blue;> • Separados por comas
  47. 47. 47 Propiedades y valores • No de memoria, se adquieren con la practica pero si es necesario conocer las más habituales y saber sobre que elementos se dan. (texto, etc…) • Text-decoration: underline  subrayado (overline sin subrayado) • Font-size:14px  tamaño fuente • Color:red  color • Text-align:center  alineación (left, right, center, justify) • Font-weight:bold  negrita (italiccursiva) • Background-color:aqua  color de fondo
  48. 48. 48 img{ border:2px dotted #000000;} Dotted  linea punteada en el borde Border: 2px  borde de 2 pixeles Color del borde  negro
  49. 49. 49 .menu a{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; color: #6f6f6f; text-decoration:none;}  Tipo enlace sin subrayado .menu a:hover{ text-decoration:underline;}  Cuando se pasa el ratón se subraya hover  encima ratón  underline  subrayado
  50. 50. 50 Fotos borde… • .album { • border: 2px solid #660033 5px;} • /* se puede poner el borde solid, double, dotted, dashed, groove, ridge, inset, outset • Dotted : punteado rombo - dashed: punteado línea • Double  doble línea • Solid  línea sólida • Groove: como sólido • PROBAR hasta dashed con imágenes diferentes
  51. 51. 51 • Existe lo que se llama short-hand properties  abreviatura del nombre completo de la propiedad para escribir menos. p{ font-style:italic; font-variant:small-caps; color:blue; font-weight: bold; text-align: center; line-height:140%; font-family:"Arial",sans-serif } p{font:italic small-caps center blue bold 1em 140% "Arial",sans-serif;} En el ejemplo anterior, font designa a todas las propiedades elativas a las fuentes. Hay algunas que no se han definido como font-stretch, en ese caso cogen su valor por defecto normal. Si no tuvieran valor por defecto, como font-size o font-family se obtendría error. PROBAR DUDA.
  52. 52. 52 <html><head> <title>Hola probando CSS</title> <style type="text/css"> H1 { font-style:italic; color:blue; } H2.ClaseTextoRojo{color:red;} .ClaseTextoVerde{color:green;} p{ font-style:italic; font-variant:small-caps; color:blue; font-weight: bold; text-align: center; line-height:140%; font-family:"Arial",sans-serif } /*p{font:italic small-caps bold 1em/140% "Arial",sans-serif;}*/ </style> </head> <body> Hola probando CSS <p>Y ahora un párrafo nuevo de bienvenida y aparece en rojo por el class clasetextorojo pero falla SOLO h2</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2 CON CLASE</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h2>y ahora cabecera h2 pero SIN CLASE</h2> <p> Y ahora párrafo para despedirnos y aparece en verde por el class en VERDE</p> </body></html>
  53. 53. 53
  54. 54. 54 • Algunas propiedades solo aceptan un valor de una lista, otras números, porcentajes, colores… • Cuando se asignan valores a propiedades de tipo numérico no se deben dejar espacios entre ellos y la unidad. • Usar preferentemente medida en pixeles o su valor relativo % • Es posible utilizar unidades de medida como pulgadas(in) centimetros (cm) milimetros (mm), picas (pi) o puntos (pt) pero pueden dar resultados inesperados. • Unidades relativas como el espacio m(em) de la letra en cuestión o su altura x (ex) son complejos de utilizar si no se sabe grafía. • Caso de colores: • Nombres (16 básicos) aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, pruple, red, silver, teal, white, yellow) • Valor RGB (red, green, blue) rojo, verde y azul bien mediante anotación hexadecimal #rrggbb. Foras de decir ROJO – Nombre color:red – Haxadecimal compleja color:#f00 – Hexadecimal simple color:#f00 – Funcional numérica color:rgb(255, 0, 0) – Funcional porcentual color:rgb(100%, 0%, 0%)
  55. 55. 55 Ejercicio • Hacer hoja de estilo interna que adopte los estilos: • Borde de imagen de 2 pixeles, lineas punteadas y de color negro • La fuente del párrafo de inicio(identificador inicio) será de la familia Arial, Helvetica, sans- serif con un tamaño de 10 pixeles, cursiva, color negro y espaciado de letras de 2 pixeles. • Ültimo párrafo con identificador fin y fuente courier (“Courier New”, courier, mono) con tamaño de 14 pixeles, color negro y en negrita
  56. 56. 56
  57. 57. 57 <html><head> <title>Hola probando CSS</title> <style type="text/css"> img{ border:2px dotted #000000;} p#inicio{ font-family:Arial, Helvetica, sans-serif; font-size:10px; font-style:italic; color:#000000; letter-spacing:2px;} p#fin{font-family: "Courier New", Courier, mono; font-size: 14px; color: #000000; font-weight:bold;} </style> </head> <body> Hola probando CSS <p id="inicio">Y ahora un párrafo nuevo de bienvenida y aparece en rojo por el class clasetextorojo pero falla SOLO h2</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <img src="image8.jpg" height="50%" width="50%"> <h1>y ahora h1 para que veamos cabecera 1</h1> <p id="fin"> Y ahora párrafo para despedirnos</p> </body></html>
  58. 58. 58 Ejercicio ¿qué hace? • Estudiar que hace dicho código • Prueba14.htm
  59. 59. 59 <html><head> <title>Hola probando CSS</title> <style type="text/css"> /* esta regla define la fuente de los párrafos p y las listas li. Si se hubiese dado formato simplemente a p, li se hubiese quedado con el HTML y daría mala sensación.*/ p, li { font-family:verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; text-align: justify;} /* aqui modificamos los links del menu de la izq, dejándolos sin subrayado y los pondremos en negrita y color morado. Cuando sean visitados en color azul*/ a:visited {color: #00709F;} a { font-weight:bold; color: ##660033; text-decoration:none;} /*aqui modificamos los links del menu dejandolos sin subrayado salvo cuando el ra´ton pase por encima de ellos. para ello, en el documento HTML tendremos que declarar la tabla donde van insertados los links como perteneciente a la clase menu ya que si no, podrian ser trataos como links normales, aplicandoles la regla anterior*/ .menu a{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; color: #6f6f6f; text-decoration:none;} .menu a:hover{ text-decoration:underline;}
  60. 60. 60 /*también modificamos encabezados*/ h1 { font-family:Georgia, "Times New Roman", Times, serif; font-size:22 px; color: #6f6f6f; text-align:right;} h3{ font-family:Georgia, "Times New Roman", Times, serif; font-size:14 px; color: #660033; text-align:left;} /* las fotos tendrán borde en morado. para que no afecte a otras fotos de la web crearemos la clase album y daremos a las fotos que deseamso sean de esta clase*/ .album { border: 2px solid #660033 5px;} /*modificamos la tabla para que aparezca una fila de un color y otro de otro. para ello cada fila de la tabla tr llevará un identificador fila 1 impar fila 2 par fila 3 impar fila 4 par */ tr#par {background-color: #660033;color: #ffffff;} tr#impar{color:#000000; background-color: #6f6f6f;} #nombre{font-weight:bold;} </style> </head>
  61. 61. 61 <body> Hola probando CSS <table> <tr id=impar> <td>Martín</td> <td>José</td> <td>Jaime</td> </tr> <tr id=par> <td>Mamen</td> <td>Reme</td> <td>Loli</td> <tr id=impar> <td>Carmen</td> <td>Teo</td> <td>Patricia</td> </tr> </table> <p>Y ahora un párrafo nuevo de bienvenida</p> <img src="image8.jpg" height="20%" width="20%" class="album"> <img src="image8.jpg" height="20%" width="20%"> <img src="image8.jpg" height="20%" width="20%" class="album"> <h1>y ahora h1 para que veamos cabecera 1 con su estilo asociado</h1> <h2>y ahora h2 para que veamos cabecera 2 sin estilo asociado</h2> <h3>y ahora h3 para que veamos cabecera 3 con su estilo asociado</h3> <p id="nombre"> Y ahora párrafo para despedirnos llamado nombre y por eso en negrita</p> <a href="http://www.google.es" class="menu">Ir a google 1 </a><br> <a href="http://www.google.es">Ir a google 2</a><br> <a href="http://www.google.es" class="menu">Ir a google 3</a><br> <a href="http://www.google.es">Ir a google 4</a><br> </body></html>
  62. 62. 62
  63. 63. 63 • Falla los links, al pasar no subraya… • Los links no pertenecientes a la clase menu • LA definición .menu a  indica que dentro de la clase menu los que sean enlaces. • Crear una tabla con los enlaces. Dicha tabla pertenece a la clase menu. Si no se hace los enlaces serán tratados como normales. • Modificar en HTML lo siguiente…
  64. 64. 64 Tabla de enlaces <table border=3 class="menu"> <tr> <td><a href="http://www.google.es">Ir a google 1 </a><br></td> </tr> <tr> <td><a href="http://www.google.es">Ir a google 2 </a><br></td> </tr> <tr> <td><a href="http://www.google.es">Ir a google 3 </a><br></td> </tr> <tr> <td><a href="http://www.google.es">Ir a google 4 </a><br></td> </tr> </table> Enlaces normales... sin tabla <a href="http://www.google.es">Ir a google 2</a><br> <a href="http://www.google.es" class="menu">Ir a google 3</a><br> <a href="http://www.google.es">Ir a google 4</a><br> Prueba14_2.htm
  65. 65. 65
  66. 66. 66Ahora si se subraya
  67. 67. 67 LISTA • Probar que si creamos lista quedan como los párrafos para no perder el mismo estilo que este. • <ol> • <li>Martín</li> • <li>Mamen</li> • <li>Noa</li> • <li>Lucía</li> • <li>Adrián</li> • <li>Inés</li> • </ol>
  68. 68. 68
  69. 69. 69 Guía de referencia rápida
  70. 70. 70
  71. 71. 71
  72. 72. 72
  73. 73. 73
  74. 74. 74
  75. 75. 75
  76. 76. 76 Imprimir más pequeño • Hay ocasiones en las que si decidimos imprimir una página dicha página no ocupa una hoja y sale de esta. • Para ello se puede realizar una hoja CSS para visualizar en el navegador y otra para la impresión de la página web. • media="print"
  77. 77. 77 <html> <head> <title>Hola probando CSS</title> <link rel="stylesheet" type="text/css" href="prueba1.css"/> <link rel="stylesheet" type="text/css" href="impresion.css" media="print"> </head> <body> Hola probando CSS <p>Y ahora un párrafo nuevo de bienvenida</p> <p>Y ahora párrafo del cuerpo donde cuento la historia de.... y sigo<br> y sigo...<br> y sigo mas y mas...</p> <a href="www.google.es"> Y ahora enlace a la página de google</a> <h1>y ahora h1 para que veamos cabecera 1</h1> y ahora texto normallll <h2>y ahora cabecera h2</h2> y ahora texto normal <h3>y ahora cabecera h3 para que veamos...</h3> y ahora texto normal <h4> ya hora cabecera h4</h4> y ahora texto normal <p> Y ahora párrafo para despedirnos</p> </body> </html>
  78. 78. 78 • Y en la versión imprimible lo que se suele realizar es bajar el tamaño de la fuente del body. prueba1.css Body{ Font:25 pt; Color: black; Margin:0; Padding:0; Min-height:100%} • Y en la versión a imprimir lo único es variar el tamaño de la fuente: impresion.css Body{ Font:10 pt; Color: black; Margin:0; Padding:0; Min-height:100%}
  79. 79. 79
  80. 80. 80 Y al probarlo al salir impreso aparece la página impresa ligeramente menor. PROBADO.
  81. 81. FIN
  82. 82. 82 Centrar imagen fondo • body { background-attachment: fixed; background-color: #FFFFFF; background-image: url(imagenes/seguro/fondo_pagina3.png); background-repeat: no-repeat; background-position: center; }
  83. 83. Div y span • Las etiquetas div y span permiten estructurar los documentos html. • Div define un bloque de información (capas) mientras que SPAN define el contenido de un elemento dentro de un bloque (párrafo o línea). Ambos elementos por si solos no dotan al contenido de ninguna característica especial, pero junto con las definiciones de estilo permiten crear bloques o elementos personalizados. 83
  84. 84. • El uso de la etiqueta SPAN está recomendada para aquellos casos en que se quiera modificar el estilo definido dentro de un bloque DIV. • Al aplicar la etiqeuta DIV se añade un salto de línea tanto al cominezo como al final de la misma. 84
  85. 85. head> <title>Documento sin t&iacute;tulo</title> <style type="text/css"> div.bloque1{margin-left:40px} span.sub1{color:red} </style> </head> <body> <div align="center" class=bloque1> <h3>texto centrado</h3> <p align="left"> Esto estará alineado a la <span class=sub1>izquierda</span> pero separado 40 pixeles del margen izquierdo y tal y tal y tal .....................</div> </p></h3></div> </body> </html> 85
  86. 86. 86
  87. 87. Enlaces • En el siguiente ejemplo se muestra como pasar a mayúsculas al pasar el ratón sobre el enlace 87
  88. 88. <html> <head> <title>Documento sin t&iacute;tulo</title> <style type="text/css"> body{color:#FF9933;cursor:hand;} A:hover{color:blue;text-transform:uppercase;} </style> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor=white> <a href="http://www.yahoo.es" style="color:green">Yahoo</a> <br> <a href="http://www.terra.es" style="color:#FF8C00">Terra</a> <br> <a href="http://www.google.es" style="color:#FFCC00">Google</a> <br> </body> </html> 88 Enlaces_css.html
  89. 89. 89 Al pasar el ratón sobre el enlace se convierte a mayúsculas
  90. 90. listas • También por ejemplo en css podemos cambiar el valor de la lista (numeración, viñeta, dibujo, etc.) • Propiedad list-style-type: • Disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, none… 90
  91. 91. • <html> • <head> • <style type="text/css"> • ul • { • list-style-image:url('sqpurple.gif'); • } • </style> • </head> • <body> • <ul> • <li>Coffee</li> • <li>Tea</li> • <li>Coca Cola</li> • </ul> • </body> • </html> 91
  92. 92. <html><head><title>Listas</title> <style type="text/css"> OL.lroman{list-style-type:lower-roman} OL.uroman{list-style-type:upper-roman} OL.ualpha{list-style-type:upper-alpha} /*OL.dibu{list-style-type:url('mouse.gif');}*/ OL.dibu{list-style-image:url("mouse.gif");} </style> </head><body> <ol class="lroman"> <li>primer elemento <li>segundo elemento </ol> <ol class="uroman"> <li>primer elemento <li>segundo elemento </ol> <ol class="ualpha" start=12> <li>primer elemento <li>segundo elemento </ol> <ol class="dibu" start=1> <li>primer elemento <li>segundo elemento <li>y mas elemento </ol></body></html> 92 Listas_css.html
  93. 93. 93
  94. 94. Formulario con css 94
  95. 95. <html><head><title>Documento sin t&iacute;tulo</title> <style type="text/css"> body{ background:rgb(102,153,204);font:12px arial,sans-serif} div.marco{border:2px groove rgb(153,204,255);width:600px;padding:15px} p.texto{letter-spacing:3px;color:rgb(0,51,102);font-weight:bold} span.label{width:150px;vertical-align:top;color:rgb(0,51,102);float:left} div{margin-top:15px} #inputs,#inputespecial{border:1px inset rgb(153,204,255);width:300px;background:rgb(148,204,252)} #inputespecial{height:80px;overflow:auto} #boton{background:rgb(102,153,204) url(dingo.gif) no-repeat 0% 80%; border:2px outset rgb(153,204,255);width:150px} </style> </head> 95
  96. 96. <body> <form action="" method="post"> <div class="marco"> <p class="texto">DATOS PERSONALES <div> <span class="label">Nopmbre</span><input type="text" name="nombre" id="inputs"><br> <span class="label">e-mail</span><input type="text" name="mail" id="inputs"><br> <span class="label">url</span><input type="text" name="url" id="inputs"><br> </div> </div> 96
  97. 97. <div class="marco"> <p class="texto">DESCRIPCION <div> <SPAN CLASS="LABEL">tÍTULO DE LA WEB</SPAN><INPUT TYPE="text" name="nombreweb" id="inputs"><br></SPAN> <SPAN CLASS="LABEL">Comentarios</SPAN><textarea name="comentario" id="inputespecial" rows=3 cols="20"></textarea><br></SPAN> </div> </div> <div align="center" class="marco"> <input type="submit" value="Enviar a Martín" id="boton"> <input type="reset" value="borrar" id="boton"> </div> </form> </body> </html> 97
  98. 98. 98
  99. 99. • Float: permite indicar si la imagen será flotante o no para poder ajustar texto alrededor. (none-left y right) • Height: altura • Width: ancho • Border: varios valores, valores de estilo: groove, dotted, dashed, solid, double, ridge, inset, outset, none • Display: modo de mostrar la información de un bloque (block, inline, list-item, none) 99
  100. 100. • Probar a modificar los bordes de las cajas del marco y de las cajas del formulario por ejemplo cambiando los diversos estilos:outset, inset, groove… • Width del marco 100

×