CSS

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
• 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
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
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
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>
<h4> ya hora cabecera h4</h4>
<p> Y ahora párrafo para despedirnos</p>
</body>
</html>
Prueba1.htm

8
Forma local
<html>
<head>
</head>
<body>
Hola probando CSS
<p style={color:green;}>Y ahora un párrafo nuevo de bienvenida</p>
<a href="www.google.es" style={color=red;}> Y ahora enlace a la página de google</a>
</body>
</html>
Prueba2.htm

10
Forma interna : en la propia página
<html><head>
<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
</body></html>

11
ATENCIÓN,
todos los p
se realizan
con el
formato del
selector p

12
Hoja externa: común al sitio web
<html>
<head>
<link rel="stylesheet" type="text/css" href="prueba1.css"/>
</head>
<body>
Hola probando CSS
</body>
</html>

13
Prueba1.css
• p{
• color:blue;
• font-weight: bold;
• text-align: center;
• }
• a{
• font-weight: bold;
• text-align: center;
• color=red;
• }

14
Igual que
el anterior
pero en fichero
separado .css

15
Si cojo otro fichero del web
asociado al mismo fichero css
<html>
<head>
</head>
<body>
Hola probando CSS 2
<p>Y ahora un párrafo nuevo de bienvenida EN OTRA PÄGINA WEB</p>
</body>
</html> Prueba5.htm

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
• 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
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
• 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
Ejemplo
<html><head>
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 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

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
• 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
• <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
• 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
• P.uno{text-align:center;}
• P#dos{color=red;}
• P y clase 1
• P e identificador (div) dos

28
Ejercicio
<html><head>
.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 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

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
Ejercicio clases de un Elemento

32
<html><head>
H1 {
font-style:italic;
color:blue;
}
H2.ClaseTextoRojo{color:red;}
p{
color:blue;
font-weight: bold;
text-align: center;
}
</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>
<h2 class="ClaseTextoRojo">y ahora cabecera h2 CON CLASE</h2>
<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>
<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

34
comentarios
• /* … */

</style>

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
Ejemplo
<html><head>

</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>

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
• 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
• 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 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
• :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

44
<html><head>

</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
ejercicio
p:first-letter{
color:red;
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 por comas

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
img{
border:2px dotted #000000;}
Dotted  linea punteada en el borde
Border: 2px  borde de 2 pixeles
Color del borde  negro

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
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
• 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
<html><head>
H1 {
font-style:italic;
color:blue;
}
H2.ClaseTextoRojo{color:red;}
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>
<h2>y ahora cabecera h2 CON CLASE</h2>
<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>

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
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

57
<html><head>
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>
<img src="image8.jpg" height="50%" width="50%">
<p id="fin"> Y ahora párrafo para despedirnos</p>
</body></html>

58
Ejercicio ¿qué hace?
• Estudiar que hace dicho código
• Prueba14.htm

59
<html><head>
/* 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;
/*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;
.menu a:hover{
text-decoration:underline;}

60
/*también modificamos encabezados*/
h1 {
font-size:22 px;
color: #6f6f6f;
text-align:right;}
h3{
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
<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>
<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>
</body></html>

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
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>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Enlaces normales... sin tabla
<a href="http://www.google.es" class="menu">Ir a google 3</a><br>
Prueba14_2.htm

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>

69
Guía de referencia rápida

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
<html>
<head>
<link rel="stylesheet" type="text/css" href="impresion.css" media="print">
</head>
<body>
Hola probando CSS
</body>
</html>

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%}

80
Y al probarlo al salir
impreso aparece la
página impresa
ligeramente menor.
PROBADO.

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;
}

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

• 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

head>
<title>Documento sin título</title>
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

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ítulo</title>
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
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 list-style-type:
• Disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha, none…
90

• <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

<html><head><title>Listas</title>
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
</ol>
<ol class="ualpha" start=12>
<li>primer elemento
</ol>
<ol class="dibu" start=1>
<li>primer elemento
<li>y mas elemento
</ol></body></html>
92
Listas_css.html

<html><head><title>Documento sin título</title>
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

<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

<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

• 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

• 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

CSS

Más contenido relacionado

Destacado (20)

Similar a CSS (20)

Más de MARTINGVALLE (20)

Último (20)

CSS