Embed Size (px)
Citation preview
CCascading ascading SStyle tyle SSheets heets (CSS)(CSS)
David PintoDavid Pinto
Web StandardsWeb Standards
XHTML 1.0 or higherXHTML 1.0 or higher CSS Level 1 & CSS Level 2CSS Level 1 & CSS Level 2 DOM Level 1 & DOM Level 2DOM Level 1 & DOM Level 2 ECMAScript 262 (current ECMAScript 262 (current
JavaScript)JavaScript)
Web Recommendations Standards
XHTMLXHTML
XHTML 1.0 TransitionalXHTML 1.0 Transitional XHTML 1.0 StrictXHTML 1.0 Strict XHTML 1.1XHTML 1.1 XHTML 2.0 (W3C Working Draft)XHTML 2.0 (W3C Working Draft)
No más desarrollo en HTML!No más desarrollo en HTML!
CCascading ascading SStyle tyle SSheetsheets
Los estilos definen cómo desplegar la información Los estilos definen cómo desplegar la información (elementos HTML/XHTML/XML)(elementos HTML/XHTML/XML)
Fueron agregados a HTML 4.0 para solucionar un Fueron agregados a HTML 4.0 para solucionar un problemaproblema
Los archivos externos de estilo separan Los archivos externos de estilo separan presentación de información y ahorran mucho presentación de información y ahorran mucho trabajotrabajo
Se usan archivos Se usan archivos .css.css
Permite el cambio de apariencia y presentación con Permite el cambio de apariencia y presentación con solo editar un archivosolo editar un archivo
CSS: MotivaciónCSS: Motivación
El concepto de piel (El concepto de piel (skinskin)) Diseño que se coloca por Diseño que se coloca por
encima de la estructura encima de la estructura (esqueleto).(esqueleto).
Ejemplo: TeléfonosEjemplo: Teléfonos Estructura: Estructura:
Modelo del teléfonoModelo del teléfono
Piel: Piel: Placas de coloresPlacas de colores
CSS: MotivaciónCSS: Motivación http://http://www.csszengarden.comwww.csszengarden.com
CSS: MotivaciónCSS: Motivación http://http://www.csszengarden.comwww.csszengarden.com
CSS: MotivaciónCSS: Motivación http://http://www.csszengarden.comwww.csszengarden.com
CSS: MotivaciónCSS: Motivación http://http://www.csszengarden.comwww.csszengarden.com
CSS: MotivaciónCSS: Motivación http://http://www.csszengarden.comwww.csszengarden.com
CSS: Ejemplo CSS: Ejemplo (Probar este ejemplo)(Probar este ejemplo)
Archivo HTMLArchivo HTML
<html> <html> <head> <head> <link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css" href="ejemplo1.css" /> href="ejemplo1.css" /> </head> </head>
<body> <body>
<h1>This header is 36 pt</h1> <h1>This header is 36 pt</h1> <h2>This header is blue</h2> <h2>This header is blue</h2>
<p>This paragraph has a left margin of <p>This paragraph has a left margin of 50 pixels</p> 50 pixels</p>
</body> </body> </html></html>
Archivo CSSArchivo CSS
body {background-color: yellow} body {background-color: yellow} h1 {font-size: 36pt} h1 {font-size: 36pt} h2 {color: blue} h2 {color: blue} p {margin-left: 50px} p {margin-left: 50px}
Archivo CSSArchivo CSS
body {background-color: blue} body {background-color: blue} h1 {font-size: 12pt} h1 {font-size: 12pt} h2 {color: yellow} h2 {color: yellow} p {margin-left: 5px} p {margin-left: 5px}
CSS: SintaxisCSS: Sintaxis
Tres partes:Tres partes: Un selectorUn selector Una propiedadUna propiedad Un valorUn valor
Sintaxis:Sintaxis: selector {property:value}selector {property:value}
CSS: SintaxisCSS: Sintaxis
Uso:Uso: body {color:black} body {color:black}
p {font-family:"sans serif"}p {font-family:"sans serif"}
p {text-p {text-align:center;color:red} align:center;color:red}
Uso:Uso: pp
{{text-align:center;text-align:center;color:black;color:black;font-family:arialfont-family:arial} }
h1,h2,h3,h4,h5,hh1,h2,h3,h4,h5,h66{{color:greencolor:green} }
CSS: El selector CSS: El selector classclass
Se pueden definir diferentes estilos para el mismo Se pueden definir diferentes estilos para el mismo elementoelemento
Definición:Definición: p.right {text-align:right}p.right {text-align:right} p.center {text-align:center} p.center {text-align:center}
Uso:Uso: <p class="<p class="rightright">This paragraph will be right-">This paragraph will be right-
aligned.</p>aligned.</p>
<p class="<p class="centercenter">This paragraph will be center-">This paragraph will be center-aligned.</p>aligned.</p>
<p class="<p class="center boldcenter bold">This is a paragraph.</p> ">This is a paragraph.</p>
CSS: El selector CSS: El selector classclass
Se puede omitir el elemento para indicar que Se puede omitir el elemento para indicar que se aplicará para cualquier elementose aplicará para cualquier elemento
Definición:Definición: .center.center {text-align:center} {text-align:center}
Uso:Uso: <h1 class="<h1 class="centercenter">This heading will be center-">This heading will be center-
aligned</h1>aligned</h1>
<p class="<p class="centercenter">This paragraph will also be ">This paragraph will also be center-aligned.</p> center-aligned.</p>
CSS: OtrosCSS: Otros
Definición:Definición: input[type="text"] {background-color:blue} input[type="text"] {background-color:blue}
Comentarios:Comentarios:
/* Este es un comentario *//* Este es un comentario */pp
{{text-align:center;text-align:center;
/* Este es otro comentario *//* Este es otro comentario */color:black;color:black;font-family:arialfont-family:arial} }
CSS: El selector CSS: El selector idid
Se puede también definir estilos con el selector Se puede también definir estilos con el selector idid
Definición:Definición: #green {color:green} #green {color:green}
p#para1p#para1{{text-align:center;text-align:center;color:redcolor:red} }
Uso:Uso:<p id="para1"><p id="para1">
Este párrafo está centrado y en color rojo.Este párrafo está centrado y en color rojo.</p> </p>
CSS: Modo de referenciaCSS: Modo de referencia
Archivos HTML / XHTMLArchivos HTML / XHTML Referencia externa:Referencia externa:<head><head><link rel="stylesheet" type="text/css" href="mystyle.css" /><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> </head>
Referencia interna:Referencia interna:<head><head><style type="text/css"><style type="text/css">
hr {color:sienna}hr {color:sienna}p {margin-left:20px}p {margin-left:20px}body {background-image:url("images/back40.gif")}body {background-image:url("images/back40.gif")}
</style></style></head> </head>
Referencia en línea:Referencia en línea:<p style="color:sienna;margin-left:20px">This is a <p style="color:sienna;margin-left:20px">This is a
paragraph.</p> paragraph.</p>
CSS: Modo de referenciaCSS: Modo de referencia
Archivos XMLArchivos XML
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/css" href="tutorials.css"?> <?xml-stylesheet type="text/css" href="tutorials.css"?>
<tutorials> <tutorials> <tutorial> <tutorial>
<name>XML Tutorial</name> <name>XML Tutorial</name> <url>http://www.mytutorial.com/xml/tutorial</url> <url>http://www.mytutorial.com/xml/tutorial</url>
</tutorial> </tutorial> <tutorial> <tutorial>
<name>HTML Tutorial</name> <name>HTML Tutorial</name> <url>http://www. mytutorial.com/html/tutorial</url> <url>http://www. mytutorial.com/html/tutorial</url>
</tutorial> </tutorial> </tutorials> </tutorials>
CSS: Precedencia de valoresCSS: Precedencia de valores
Valores por Valores por defaultdefault del navegador del navegador
Hoja de estilo externaHoja de estilo externa
Hoja de estilo interna (en la Hoja de estilo interna (en la sección de encabezado)sección de encabezado)
Estilo en línea (dentro de un Estilo en línea (dentro de un elemento)elemento)
CSS: BackgroundCSS: Background
Propiedades usadas para el Propiedades usadas para el efecto backgroundefecto background
background-color background-color background-image background-image background-repeat background-repeat background-attachment background-attachment background-position background-position
CSS: background-colorCSS: background-color
body {background-color:#b0c4de}body {background-color:#b0c4de} h1 {background-color:#6495ed}h1 {background-color:#6495ed} p {background-color:#e0ffff}p {background-color:#e0ffff} div {background-color:#ffffff} div {background-color:#ffffff}
Modos de referencia para el color:Modos de referencia para el color: nombre - "red“, “white”, “blue”, etc nombre - "red“, “white”, “blue”, etc RGB - un valor como "rgb(255,0,0)" RGB - un valor como "rgb(255,0,0)" Hex – un valor como "#ff0000" Hex – un valor como "#ff0000"
CSS: background-imageCSS: background-image
body {background-body {background-image:url(‘imagen.gif')} image:url(‘imagen.gif')}
body {background-body {background-image:url('imagen.jpg')}image:url('imagen.jpg')}
bodybody{{background-image:url(‘img/background-image:url(‘img/imagen.png');imagen.png');} }
CSS: background-repeatCSS: background-repeat
bodybody{{background-image:url('gradient2.png');background-image:url('gradient2.png');background-repeat:repeat-x;background-repeat:repeat-x;} }
bodybody{{background-image:url('img_tree.png');background-image:url('img_tree.png');background-repeat:no-repeat;background-repeat:no-repeat;} }
CSS: background-repeat CSS: background-repeat background-positionbackground-position bodybody
{{background-image:url('img_tree.png');background-image:url('img_tree.png');background-repeat:no-repeat;background-repeat:no-repeat;background-position:top right;background-position:top right;} }
Versión resumida:Versión resumida:body {background:#ffffff url('img_tree.png') no-repeat top body {background:#ffffff url('img_tree.png') no-repeat top
right} right}
Se requiere un orden:Se requiere un orden: background-color background-color background-image background-image background-repeat background-repeat background-attachment background-attachment background-position background-position
CSS: background-attachmentCSS: background-attachment
body body
{{
background-image:url('smiley.gif');background-image:url('smiley.gif');
background-repeat:no-repeat;background-repeat:no-repeat;
background-attachment:fixedbackground-attachment:fixed
}}
CSS: Propiedades de CSS: Propiedades de backgroundbackground
CSS: EjercicioCSS: Ejercicio
Crear un archivo de estilo para Crear un archivo de estilo para el documento XML de la el documento XML de la práctica 10.práctica 10.
Usar propiedades de Usar propiedades de background.background.
CSS: TextoCSS: Texto
Color del textoColor del texto body {color:blue}body {color:blue} h1 {color:#00ff00}h1 {color:#00ff00} h2 {color:rgb(255,0,0)} h2 {color:rgb(255,0,0)}
AlineaciónAlineación h1 {text-align:center}h1 {text-align:center} p.date {text-align:right}p.date {text-align:right} p.main {text-align:justify} p.main {text-align:justify}
CSS: TextoCSS: Texto
DecoraciónDecoración h1 {text-decoration:overline}h1 {text-decoration:overline} h2 {text-decoration:line-through}h2 {text-decoration:line-through} h3 {text-decoration:underline}h3 {text-decoration:underline} h4 {text-decoration:blink} h4 {text-decoration:blink} a {text-decoration:none} a {text-decoration:none}
TransformaciónTransformación p.uppercase {text-transform:uppercase}p.uppercase {text-transform:uppercase} p.lowercase {text-transform:lowercase}p.lowercase {text-transform:lowercase} p.capitalize {text-transform:capitalize} p.capitalize {text-transform:capitalize}
IdentaciónIdentación p {text-indent:50px} p {text-indent:50px}
CSS: Propiedades de textoCSS: Propiedades de texto
CSS: FontCSS: Font
p{font-family:"Times New p{font-family:"Times New Roman",Georgia,Serif} Roman",Georgia,Serif}
CSS: FontCSS: Font
font-stylefont-style p.normal {font-style:normal}p.normal {font-style:normal} p.italic {font-style:italic}p.italic {font-style:italic} p.oblique {font-style:oblique} p.oblique {font-style:oblique}
Tres tipos:Tres tipos: normal – El texto se muestra de manera normalnormal – El texto se muestra de manera normal italic – El texto se muestra en itálica italic – El texto se muestra en itálica oblique – El texto está inclinado (similar a itálica, oblique – El texto está inclinado (similar a itálica,
pero es soportado menos) pero es soportado menos)
CSS: FontCSS: Font
font-size -> default = (16px=1em)font-size -> default = (16px=1em) h1 {font-size:40px}h1 {font-size:40px} h2 {font-size:30px}h2 {font-size:30px} p {font-size:14px} p {font-size:14px}
h1 {font-size:2.5em} /* 40px/16=2.5em */h1 {font-size:2.5em} /* 40px/16=2.5em */ h2 {font-size:1.875em} /* 30px/16=1.875em */h2 {font-size:1.875em} /* 30px/16=1.875em */ p {font-size:0.875em} /* 14px/16=0.875em */ p {font-size:0.875em} /* 14px/16=0.875em */
body {font-size:100%}body {font-size:100%} h1 {font-size:2.5em}h1 {font-size:2.5em} h2 {font-size:1.875em}h2 {font-size:1.875em} p {font-size:0.875em} p {font-size:0.875em}
CSS: Propiedades de fontCSS: Propiedades de font
CSS: EjercicioCSS: Ejercicio
Modificar el archivo CSS del Modificar el archivo CSS del ejercicio anterior e incluir estilo ejercicio anterior e incluir estilo para diferentes elementos de para diferentes elementos de texto.texto.
CSS: El modelo de la cajaCSS: El modelo de la caja
width:250px;width:250px;padding:10px;padding:10px;border:5px solid gray;border:5px solid gray;margin:10px; margin:10px;
250px (width)250px (width)+ 20px (padding)+ 20px (padding)+ 10px (border)+ 10px (border)+ 20px (margin)+ 20px (margin)
= 300px= 300px
width:220px;width:220px;padding:10px;padding:10px;border:5px solid gray;border:5px solid gray;
margin:0px;margin:0px;
CSS: El modelo de la caja en CSS: El modelo de la caja en ciertos navegadoresciertos navegadores<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><html><head><head><style type="text/css"><style type="text/css">div.exdiv.ex{{width:220px;width:220px;padding:10px;padding:10px;border:5px solid gray;border:5px solid gray;margin:0px;margin:0px;}}</style></style></head> </head>
CSS: BorderCSS: Border
p.onep.one{{border-style:solid;border-style:solid;border-width:5px;border-width:5px;}}p.twop.two{{border-style:solid;border-style:solid;border-width:medium;border-width:medium;} }
pp{{border-top-style:dotted;border-top-style:dotted;border-right-style:solid;border-right-style:solid;border-bottom-border-bottom-style:dotted;style:dotted;border-left-style:solid;border-left-style:solid;} }
p.onep.one{{border-style:solid;border-style:solid;border-color:red;border-color:red;}}p.twop.two{{border-style:solid;border-style:solid;border-color:#98bf21;border-color:#98bf21;} }
border-style:dotted solid; border-style:dotted solid; border-style:dotted solid border-style:dotted solid
double dashed; double dashed; border-style:dotted solid border-style:dotted solid
double; double; border-style:dotted solid; border-style:dotted solid; border-style:dotted; border-style:dotted;
CSS: Border (versión corta)CSS: Border (versión corta)
border:5px solid red; border:5px solid red;
Orden de los valores de la Orden de los valores de la propiedad borderpropiedad border border-width border-width border-style border-style border-color border-color
CSS: OutlinesCSS: Outlines
CSS: MárgenesCSS: Márgenes
margin-top:100px;margin-top:100px;margin-bottom:100px;margin-bottom:100px;margin-right:50px;margin-right:50px;margin-left:50px; margin-left:50px;
p.ex1 {margin-top:2cm}p.ex1 {margin-top:2cm}
p.bottommargin {margin-bottom:25%p.bottommargin {margin-bottom:25%
En corto:En corto: margin:100px 50px; margin:100px 50px;
CSS: MárgenesCSS: Márgenes
CSS: PaddingCSS: Padding
La propiedad La propiedad paddingpadding limpia una área limpia una área alrededor del contenido de un elemento alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado (dentro del borde). Se encuentra afectado por el color de fondo del elemento. por el color de fondo del elemento.
padding-top:25px;padding-top:25px;padding-bottom:25px;padding-bottom:25px;padding-right:50px;padding-right:50px;padding-left:50px padding-left:50px
padding:25px 50px 75px 100px; padding:25px 50px 75px 100px; padding:25px 50px 75px;padding:25px 50px 75px; padding:25px 50px;padding:25px 50px; padding:25px; padding:25px;
CSS: PaddingCSS: Padding
CSS: EjercicioCSS: Ejercicio
Crear una página simple en HTML que Crear una página simple en HTML que contenga elementos de tipo párrafo (<p>).contenga elementos de tipo párrafo (<p>).
Experimentar en la hoja de estilos con el Experimentar en la hoja de estilos con el modelo de caja, usando diferentes modelo de caja, usando diferentes elementos.elementos.
Incluir una imagen (dentro de la hoja de Incluir una imagen (dentro de la hoja de estilo) que no se desplace, a pesar de que estilo) que no se desplace, a pesar de que el usuario si lo haga en la página HTML.el usuario si lo haga en la página HTML.
CSS: list-style-type CSS: list-style-type (listas no ordenadas)(listas no ordenadas)
Listas no ordenadas Listas no ordenadas
ul.circle {list-style-type:circle}ul.circle {list-style-type:circle} ul.square {list-style-type:square}ul.square {list-style-type:square}
CSS: list-style-type CSS: list-style-type (listas ordenadas)(listas ordenadas)
Listas ordenadasListas ordenadas
ol.upper-roman {list-style-type:upper-roman}ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha} ol.lower-alpha {list-style-type:lower-alpha}
CSS: list-style-type CSS: list-style-type
ul.inside {list-style-position:inside}ul.inside {list-style-position:inside}ul.outside {list-style-position:outside} ul.outside {list-style-position:outside}
ulul{{list-style-image:url('arrow.gif');list-style-image:url('arrow.gif');} }
ulul{{list-style-type:none;list-style-type:none;padding:0px;padding:0px;margin:0px;margin:0px;}}
lili{{background-image:url(arrow.gif);background-image:url(arrow.gif);background-repeat:no-repeat;background-repeat:no-repeat;background-position:0px 5px; background-position:0px 5px; padding-left:14px; padding-left:14px; } }
CSS: list-style-type CSS: list-style-type
CSS: EjercicioCSS: Ejercicio
Pruebe el uso de viñetas. Pruebe el uso de viñetas. Predefinidas y con archivos de Predefinidas y con archivos de imágenes.imágenes.
Pruebe al menos tres tipos de Pruebe al menos tres tipos de numeración en las listas numeración en las listas ordenadas.ordenadas.
CSS: TablesCSS: Tables
<html><html><head><head><style type="text/css"><style type="text/css">table.ex1 {table-layout:auto}table.ex1 {table-layout:auto}table.ex2 {table-layout:fixed}table.ex2 {table-layout:fixed}</style></style></head></head>
<body><body><table class="ex1" border="1" width="100%"><table class="ex1" border="1" width="100%"><tr><tr><td width="5%">1000000000000000000000000000</td><td width="5%">1000000000000000000000000000</td><td width="95%">10000000</td><td width="95%">10000000</td></tr></tr></table></table><br /><br />
<table class="ex2" border="1" width="100%"><table class="ex2" border="1" width="100%"><tr><tr><td width="5%">1000000000000000000000000000</td><td width="5%">1000000000000000000000000000</td><td width="95%">10000000</td><td width="95%">10000000</td></tr></tr></table></table>
</body></body></html></html>
CSS: TablesCSS: Tables
CSS: DivCSS: Div
DIVs pueden ser una alternativa a DIVs pueden ser una alternativa a <table><table>
DIVs son un contenedor comouna DIVs son un contenedor comouna celda de una tablacelda de una tabla
CSS puede posicionar a los DIVCSS puede posicionar a los DIV
<div id="article">xxx</div><div id="article">xxx</div>
#article{#article{width:250px;width:250px;padding:5px;padding:5px;float:right;} float:right;}
CSS: DimensionesCSS: Dimensiones
<html><html><head><head><style type="text/css"><style type="text/css">img.normal {height:auto}img.normal {height:auto}img.big {height:50%}img.big {height:50%}img.small {height:10%}img.small {height:10%}</style></style></head></head>
<body><body><img class="normal" src="logocss.gif" width="95" height="84" /><br /><img class="normal" src="logocss.gif" width="95" height="84" /><br /><img class="big" src="logocss.gif" width="95" height="84" /><br /><img class="big" src="logocss.gif" width="95" height="84" /><br /><img class="small" src="logocss.gif" width="95" height="84" /><img class="small" src="logocss.gif" width="95" height="84" /></body></body></html></html>
CSS: DisplayCSS: Display
HiddenHidden h1.hidden {visibility:hidden} h1.hidden {visibility:hidden} h1.hidden {display:none} h1.hidden {display:none}
Block vs InlineBlock vs Inline Ejemplos de elementos bloqueEjemplos de elementos bloque
<h1> <h1> <p> <p> <div> <div>
Ejemplos de elementos InlineEjemplos de elementos Inline <span> <span> <a> <a>
CSS: Display CSS: Display (block vs inline)(block vs inline)
li {display:inline}li {display:inline}
span {display:block} span {display:block}
<html><html><head><head><style type="text/css"><style type="text/css">p {display: inline}p {display: inline}</style></style></head></head>
<body><body><p>A display property with a value of "inline" results in</p><p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p><p>no distance between two elements.</p>
</body></body></html></html>
CSS: Display CSS: Display (block vs inline) Ver ejemplo…(block vs inline) Ver ejemplo…
<head><head><style type="text/css"><style type="text/css">
aa{{float:left;float:left;width:6em;width:6em;text-decoration:none;text-decoration:none;color:white;color:white;background-color:purple;background-color:purple;padding:0.2em 0.6em;padding:0.2em 0.6em;border-right:1px solid white;border-right:1px solid white;}}
a:hover {background-a:hover {background-color:#ff3300}color:#ff3300}
li {display:inline}li {display:inline}
ulul{{float:left;float:left;width:100%;width:100%;padding:0;padding:0;margin:0;margin:0;list-style-type:none;list-style-type:none;}}
</style></style></head></head>
CSS: Display CSS: Display
CSS: PosicionamientoCSS: Posicionamiento
Fijo:Fijo:p.pos_fixedp.pos_fixed
{{position:fixed;position:fixed;top:30px;top:30px;right:5px;right:5px;} }
Relativo y absoluto:Relativo y absoluto:h2.pos_lefth2.pos_left
{{position:relative;position:relative;left:-20px;left:-20px;}}h2.pos_righth2.pos_right{{position:relative;position:relative;left:20px;left:20px;}}
h2h2{{position:absolute;position:absolute;left:100px;left:100px;top:150px;top:150px;}}
Traslape:Traslape:imgimg
{{position:absolute;position:absolute;left:0px;left:0px;top:0px;top:0px;z-index:-1z-index:-1} }
CSS: FloatCSS: Float
La propiedad float permite que un elemento “flote” horizontalmente. De La propiedad float permite que un elemento “flote” horizontalmente. De manera que los otros elementos que le siguen se ajusten de acuerdo al manera que los otros elementos que le siguen se ajusten de acuerdo al valor del float.valor del float.
Ejemplo:Ejemplo:imgimg
{{float:right;float:right;} }
Galería de imágenes:Galería de imágenes:.thumbnail .thumbnail
{{float:left;float:left;width:110px;width:110px;height:90px;height:90px;margin:5px;margin:5px;} }
Desactivar el flotado de los elementos (circundantes):Desactivar el flotado de los elementos (circundantes):.text_line.text_line
{{clear:both;clear:both;} }
CSS: FloatCSS: Float
CSS: Pseudo-ClassesCSS: Pseudo-Classes
Clases predefinidas y se puede establecer efectos Clases predefinidas y se puede establecer efectos especialesespeciales
a:link {color:#FF0000} /* unvisited link */a:link {color:#FF0000} /* unvisited link */ a:visited {color:#00FF00} /* visited link */a:visited {color:#00FF00} /* visited link */ a:hover {color:#FF00FF} /* mouse over link */a:hover {color:#FF00FF} /* mouse over link */ a:active {color:#0000FF} /* selected link */ a:active {color:#0000FF} /* selected link */
a.red:visited {color:#FF0000}a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">CSS <a class="red" href="css_syntax.asp">CSS Syntax</a> Syntax</a>
CSS: Pseudo-elementosCSS: Pseudo-elementos
::afterafter Agrega contenido después Agrega contenido después de un elementode un elemento
::beforebefore Agrega contenido antes Agrega contenido antes de un elemento de un elemento
::firstfirst--letterletter Establece el estilo Establece el estilo para el primer carácter de un para el primer carácter de un textotexto
::firstfirst--lineline Establece el estilo para Establece el estilo para la primera línea de un textola primera línea de un texto
CSS: Pseudo-elementosCSS: Pseudo-elementos(:first-line)(:first-line)
Ejemplos:Ejemplos: p:first-line p:first-line
{{color:#ff0000;color:#ff0000;font-variant:small-caps;font-variant:small-caps;} }
Propiedades:Propiedades: font properties font properties color properties color properties background properties background properties word-spacing word-spacing letter-spacing letter-spacing text-decoration text-decoration vertical-align vertical-align text-transform text-transform line-height line-height clear clear
CSS: Pseudo-elementosCSS: Pseudo-elementos(:first-letter)(:first-letter)
Ejemplos:Ejemplos: p:first-letter p:first-letter
{{color:#ff0000;color:#ff0000;font-size:xx-large;font-size:xx-large;} }
Propiedades:Propiedades: font properties font properties color properties color properties background properties background properties margin properties margin properties padding properties padding properties border properties border properties text-decoration text-decoration vertical-align (only if "float" is "none") vertical-align (only if "float" is "none") text-transform text-transform line-height line-height float float clearclear
CSS: Pseudo-elementosCSS: Pseudo-elementos
Ejemplos:Ejemplos: p.article:first-letter {color:#ff0000}p.article:first-letter {color:#ff0000}
<p class="article">A paragraph in an article</p> <p class="article">A paragraph in an article</p>
p:first-letterp:first-letter{{color:#ff0000;color:#ff0000;font-size:xx-large;font-size:xx-large;}}p:first-line p:first-line {{color:#0000ff;color:#0000ff;font-variant:small-caps;font-variant:small-caps;} }
h1:afterh1:after{{content:url(smiley.gif);content:url(smiley.gif);} }
CSS 2
W3C CSS 3 recommendation W3C CSS 3 recommendation
Transparencia:Transparencia:
Firefox -- Firefox -- opacity:x opacity:x [0.0 – 1.0] [0.0 – 1.0] IE -- IE -- filter:alpha(opacity=x)filter:alpha(opacity=x) [0 – 100] [0 – 100]
NOTA:NOTA: Entre más bajo el valor, más transparente. Entre más bajo el valor, más transparente.
Ejemplos:Ejemplos:<img src=“imagen.jpg" width="150" height="113" <img src=“imagen.jpg" width="150" height="113" alt=“imagen_texto"alt=“imagen_texto"style="opacity:0.4;filter:alpha(opacity=40)" /> style="opacity:0.4;filter:alpha(opacity=40)" />
<img src=“imagen.jpg" <img src=“imagen.jpg" style="opacity:0.4;filter:alpha(opacity=40)"style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /> />
Tipos de dispositivosTipos de dispositivos
Tipos de dispositivosTipos de dispositivos
<html><html><head><head><style><style>@media screen@media screen { { p.test {font-family:verdana,sans-serif;font-size:14px} p.test {font-family:verdana,sans-serif;font-size:14px} } }@media print@media print { { p.test {font-family:times,serif;font-size:10px} p.test {font-family:times,serif;font-size:10px} } }@media screen,print@media screen,print { { p.test {font-weight:bold} p.test {font-weight:bold} } }</style></style></head></head>
<body><body>........</body></body></html> </html>
EjerciciosEjercicios
Diseñar un estilo css para su Diseñar un estilo css para su proyecto de libros.proyecto de libros.
