CSS Compressed

Cascading Style Sheets
(CSS)
Cascading Style Sheets
 Los estilos definen cómo desplegar la información
(elementos HTML/XHTML/XML)
 Fueron agregados a HTML 4.0 para solucionar un

problema
 Los archivos externos de estilo separan

presentación de información y ahorran mucho
trabajo
 Se usan archivos .css
 Permite el cambio de apariencia y presentación con

solo editar un archivo
CSS: Ejemplo
(Probar este ejemplo)
Archivo HTML Archivo CSS
<html> body {background-color: yellow}

<head> h1 {font-size: 36pt}
<link rel="stylesheet" type="text/css" h2 {color: blue}
href="ejemplo1.css" /> p {margin-left: 50px}
</head>
<body>
Archivo CSS
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2> body {background-color: blue}
h1 {font-size: 12pt}
<p>This paragraph has a left margin of h2 {color: yellow}
50 pixels</p> p {margin-left: 5px}
</body>
</html>
CSS: Sintaxis
 Tres partes:
 Un selector
 Una propiedad
 Un valor
 Sintaxis:
 selector {property:value}
CSS: Sintaxis
 Uso:  Uso:
 body {color:black}  p
{
 p {font-family:"sans serif"} text-align:center;
color:black;
font-family:arial
 p {text- }
align:center;color:red}
 h1,h2,h3,h4,h5,h6
{
color:green
}
CSS: El selector class
Se pueden definir diferentes estilos para el mismo
elemento
 Definición:
 p.right {text-align:right}
 p.center {text-align:center}
 Uso:
 <p class="right">This paragraph will be right-
aligned.</p>
 <p class="center">This paragraph will be center-

aligned.</p>
 <p class="center bold">This is a paragraph.</p>

CSS: El selector class
Se puede omitir el elemento para indicar que
se aplicará para cualquier elemento
 Definición:
 .center {text-align:center}
 Uso:
 <h1 class="center">This heading will be center-
aligned</h1>
 <p class="center">This paragraph will also be

center-aligned.</p>
CSS: Otros
 Definición:
 input[type="text"] {background-color:blue}
 Comentarios:
/* Este es un comentario */
p
{
text-align:center;
/* Este es otro comentario */

color:black;
font-family:arial
}
CSS: El selector id
Se puede también definir estilos con el selector id
 Definición:
 #green {color:green}
 p#para1
{
text-align:center;
color:red
}
 Uso:
<p id="para1">
Este párrafo está centrado y en color rojo.
</p>
CSS: Modo de referencia
 Archivos HTML / XHTML
 Referencia externa:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
 Referencia interna:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
 Referencia en línea:
<p style="color:sienna;margin-left:20px">This is a
paragraph.</p>
CSS: Precedencia de valores
 Valores por default del navegador
 Hoja de estilo externa
 Hoja de estilo interna (en la

sección de encabezado)
 Estilo en línea (dentro de un

elemento)
CSS: Background
 Propiedades usadas para el

efecto background
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
CSS: background-color
 body {background-color:#b0c4de}
 h1 {background-color:#6495ed}
 p {background-color:#e0ffff}
 div {background-color:#ffffff}
 Modos de referencia para el color:

 nombre - "red“, “white”, “blue”, etc
 RGB - un valor como "rgb(255,0,0)"
 Hex – un valor como "#ff0000"
CSS: background-image
 body {background-
image:url(‘imagen.gif')}
 body {background-
image:url('imagen.jpg')}
 body
{
background-
image:url(‘img/imagen.png');
}
CSS: background-repeat
 body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
 body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
CSS: background-repeat
background-position
 body
{
background-image:url('img_tree.png');
background-position:top right;
}
 Versión resumida:
body {background:#ffffff url('img_tree.png') no-repeat top
right}
Se requiere un orden:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
CSS: background-attachment
body
{
background-image:url('smiley.gif');
background-attachment:fixed
}
CSS: Propiedades de
background
CSS: Ejercicio
 Crear un archivo de estilo para

el documento XML de la
práctica 10.
 Usar propiedades de
background.
CSS: Texto
 Color del texto

 body {color:blue}
 h1 {color:#00ff00}
 h2 {color:rgb(255,0,0)}
 Alineación
 h1 {text-align:center}
 p.date {text-align:right}
 p.main {text-align:justify}
CSS: Texto
 Decoración
 h1 {text-decoration:overline}
 h2 {text-decoration:line-through}
 h3 {text-decoration:underline}
 h4 {text-decoration:blink}
 a {text-decoration:none}
 Transformación
 p.uppercase {text-transform:uppercase}
 p.lowercase {text-transform:lowercase}
 p.capitalize {text-transform:capitalize}
 Identación
 p {text-indent:50px}
CSS: Propiedades de texto
CSS: Font
 p{font-family:"Times New
Roman",Georgia,Serif}
CSS: Font
 font-style
 p.normal {font-style:normal}
 p.italic {font-style:italic}
 p.oblique {font-style:oblique}
 Tres tipos:
 normal – El texto se muestra de manera normal
 italic – El texto se muestra en itálica
 oblique – El texto está inclinado (similar a itálica,
pero es soportado menos)
CSS: Font
 font-size -> default = (16px=1em)
 h1 {font-size:40px}
 h2 {font-size:30px}
 p {font-size:14px}
 h1 {font-size:2.5em} /* 40px/16=2.5em */
 h2 {font-size:1.875em} /* 30px/16=1.875em */
 p {font-size:0.875em} /* 14px/16=0.875em */
 body {font-size:100%}
 h1 {font-size:2.5em}
 h2 {font-size:1.875em}
 p {font-size:0.875em}
CSS: Propiedades de font
CSS: Ejercicio
 Modificar el archivo CSS del

ejercicio anterior e incluir estilo
para diferentes elementos de
texto.
CSS: El modelo de la caja
width:250px; width:220px;
padding:10px; padding:10px;
border:5px solid gray; border:5px solid gray;
margin:10px; margin:0px;
250px (width)
+ 20px (padding)
+ 10px (border)
+ 20px (margin)
= 300px
CSS: El modelo de la caja en
ciertos navegadores
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
CSS: Border
 p.one  p.one
{ {
border-style:solid; border-style:solid;
border-width:5px; border-color:red;
} }
p.two p.two
{ {
border-style:solid; border-style:solid;
border-width:medium; border-color:#98bf21;
} }
 p  border-style:dotted solid;
{  border-style:dotted solid
border-top-style:dotted; double dashed;
border-right-style:solid;  border-style:dotted solid
border-bottom- double;
style:dotted;
border-left-style:solid;  border-style:dotted solid;
}  border-style:dotted;
CSS: Border (versión corta)
 border:5px solid red;
 Orden de los valores de la

propiedad border
 border-width
 border-style
 border-color
CSS: Outlines
CSS: Márgenes
 margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
 p.ex1 {margin-top:2cm}
 p.bottommargin {margin-bottom:25%
 En corto:
 margin:100px 50px;
CSS: Márgenes
CSS: Padding
 La propiedad padding limpia una área
alrededor del contenido de un elemento
(dentro del borde). Se encuentra afectado
por el color de fondo del elemento.
 padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px
 padding:25px 50px 75px 100px;

 padding:25px 50px 75px;
 padding:25px 50px;
 padding:25px;
CSS: Padding
CSS: Ejercicio
 Crear una página simple en HTML que
contenga elementos de tipo párrafo (<p>).
 Experimentar en la hoja de estilos con el

modelo de caja, usando diferentes
elementos.
 Incluir una imagen (dentro de la hoja de

estilo) que no se desplace, a pesar de que
el usuario si lo haga en la página HTML.
CSS: list-style-type
(listas no ordenadas)
 Listas no ordenadas
 ul.circle {list-style-type:circle}
 ul.square {list-style-type:square}
(listas ordenadas)
 Listas ordenadas
 ol.upper-roman {list-style-type:upper-roman}
 ol.lower-alpha {list-style-type:lower-alpha}
 ul.inside {list-style-position:inside}
ul.outside {list-style-position:outside}
 ul
{
list-style-image:url('arrow.gif');
}
 ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(arrow.gif);
background-position:0px 5px;
padding-left:14px;
}
CSS: Ejercicio
 Pruebe el uso de viñetas.

Predefinidas y con archivos de
imágenes.
 Pruebe al menos tres tipos de

numeración en las listas
ordenadas.
CSS: Tables
<html>
<head>
table.ex1 {table-layout:auto}
table.ex2 {table-layout:fixed}
</style>
</head>
<body>
<table class="ex1" border="1" width="100%">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>
<br />
<table class="ex2" border="1" width="100%">

<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>
</body>
</html>
CSS: Tables
CSS: Div
 DIVs pueden ser una alternativa a
<table>
 DIVs son un contenedor comouna
celda de una tabla
 CSS puede posicionar a los DIV
<div id="article">xxx</div>
#article{
width:250px;
padding:5px;
float:right;}
CSS: Dimensiones
<html>
<head>
img.normal {height:auto}
img.big {height:50%}
img.small {height:10%}
</style>
</head>
<body>
<img class="normal" 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" />
</body>
</html>
CSS: Display
 Hidden
 h1.hidden {visibility:hidden}
 h1.hidden {display:none}
Block vs Inline
 Ejemplos de elementos bloque
 <h1>
 <p>
 <div>
 Ejemplos de elementos Inline
 <span>
 <a>
CSS: Display
(block vs inline)
 li {display:inline}
 span {display:block}
<html>
<head>
p {display: inline}
</style>
</head>
<body>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
</body>
</html>
CSS: Display
(block vs inline) Ver ejemplo…
<head> li {display:inline}
ul
a {
{ float:left;
float:left; width:100%;
width:6em; padding:0;
text-decoration:none; margin:0;
color:white; list-style-type:none;
background-color:purple; }
padding:0.2em 0.6em;
border-right:1px solid white; </style>
} </head>
a:hover {background-
color:#ff3300}
CSS: Display
CSS: Posicionamiento
 Fijo:  Traslape:
p.pos_fixed img
{ {
position:fixed; position:absolute;
top:30px; left:0px;
right:5px; top:0px;
} z-index:-1
}
 Relativo y absoluto:
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
h2
{
position:absolute;
left:100px;
top:150px;
}
CSS: Float
 La propiedad float permite que un elemento “flote” horizontalmente. De
manera que los otros elementos que le siguen se ajusten de acuerdo al
valor del float.
 Ejemplo:
img
{
float:right;
}
 Galería de imágenes:
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
 Desactivar el flotado de los elementos (circundantes):

.text_line
{
clear:both;
}
CSS: Float
CSS: Pseudo-Classes
 Clases predefinidas y se puede establecer efectos
especiales
 a:link {color:#FF0000} /* unvisited link */

 a:visited {color:#00FF00} /* visited link */
 a:hover {color:#FF00FF} /* mouse over link */
 a:active {color:#0000FF} /* selected link */
 a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">CSS
Syntax</a>
CSS: Pseudo-elementos
 :after Agrega contenido después

de un elemento
 :before Agrega contenido antes
de un elemento
 :first-letter Establece el estilo
para el primer carácter de un
texto
 :first-line Establece el estilo para
la primera línea de un texto
(:first-line)
 Ejemplos:
 p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
 Propiedades:
 font properties
 color properties
 background properties
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
(:first-letter)
 Ejemplos:
 p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
 Propiedades:
 font properties
 color properties
 background properties
 margin properties
 padding properties
 border properties
 text-decoration
 vertical-align (only if "float" is "none")
 text-transform
 line-height
 float
 clear
 Ejemplos:
 p.article:first-letter {color:#ff0000}
<p class="article">A paragraph in an article</p>
 p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
 h1:after CSS 2
{
content:url(smiley.gif);
}
W3C CSS 3 recommendation
Transparencia:
 Firefox -- opacity:x [0.0 – 1.0]

 IE -- filter:alpha(opacity=x) [0 – 100]
NOTA: Entre más bajo el valor, más transparente.
 Ejemplos:
<img src=“imagen.jpg" width="150" height="113"
alt=“imagen_texto"
style="opacity:0.4;filter:alpha(opacity=40)" />
<img src=“imagen.jpg"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"
/>
Tipos de dispositivos
Tipos de dispositivos
 <html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px}
}
@media print
{
p.test {font-family:times,serif;font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
</style>
</head>
<body>
....
</body>
</html>
Ejercicios
 Diseñar un estilo css para su

proyecto de libros.

CSS Compressed

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS Compressed

Cargado por

Copyright:

Formatos disponibles

Cascading Style Sheets

 Fueron agregados a HTML 4.0 para solucionar un

 Los archivos externos de estilo separan

 Se usan archivos .css

 Permite el cambio de apariencia y presentación con

<html> body {background-color: yellow}

 <p class="center">This paragraph will be center-

 <p class="center bold">This is a paragraph.</p>

 <p class="center">This paragraph will also be

/* Este es otro comentario */

 Valores por default del navegador

 Hoja de estilo externa

 Hoja de estilo interna (en la

 Estilo en línea (dentro de un

 Propiedades usadas para el

 Modos de referencia para el color:

 Crear un archivo de estilo para

 Color del texto

 Modificar el archivo CSS del

 border:5px solid red;

 Orden de los valores de la

 padding:25px 50px 75px 100px;

 Experimentar en la hoja de estilos con el

 Incluir una imagen (dentro de la hoja de

 Pruebe el uso de viñetas.

 Pruebe al menos tres tipos de

<table class="ex2" border="1" width="100%">

<p>no distance between two elements.</p>

 Desactivar el flotado de los elementos (circundantes):

 a:link {color:#FF0000} /* unvisited link */

 :after Agrega contenido después

 Firefox -- opacity:x [0.0 – 1.0]

NOTA: Entre más bajo el valor, más transparente.

 Diseñar un estilo css para su

También podría gustarte