CSS1

CSS
<!DOCTYPEhtml
! h l PUBLIC"//W3C//DTDXHTML1.0Transitional//EN"
" // // l// "
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
p // g/ /
<head>
<metahttpequiv="ContentType" content="text/html;charset=iso8859
1"" />
/
<title>EjemplodeestilosCSSenelpropiodocumento</title> <style
type="text/css">
yp / p{color:black;fontfamily:Verdana;}</style>
p { ; y ;} / y
</head>
<body>
Unprrafodetexto.
</body>
</html>
Definir CSS en un archivo externo
DefinirCSSenunarchivoexterno
1) Se crea un archivo de texto y se le aade solamente el
siguiente contenido:
p { color: black; font-family: Verdana; }
2) Se
S guarda
d ell archivo
hi dde ttexto
t con ell
nombre estilos.css Se debe poner especial atencin a que el
archivo tenga extensin .css y no .txt
3) En la pgina HTML se enlaza el archivo CSS externo
mediante la etiqueta <link>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
//
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
p // g/ / / /
transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-
equiv="Content-Type" content="text/html; charset=iso-8859-1"
/> <title>Ejemplo de estilos CSS en un archi
archivo
o
externo</title> <link rel="stylesheet" type="text/css"
href="/css/estilos.css" media="screen" /> </head> <body>
p
Un prrafo de texto.
p p </body>
y </html>
SELECTORES
Selectoruniversal
Se utiliza para seleccionar todos los elementos
Seutilizaparaseleccionartodosloselementos
delapgina.
*{
*{
margin:0;
g ;
padding:0;
}
SELECTORES ETIQUETA
SELECTORESETIQUETA
h1{
h {
color:red;
}
h2{
color:blue;
}
p{
color:black;
l bl k
}
Encadenados
h1,h2,h3{
{
h1{
h1 {
color:#8A8E27; color:#8A8E27;
fontweight:normal; fontweight:normal;
fontfamily:Arial,Helvetica, fontfamily:Arial,
sansserif; Helvetica,sansserif;
} }
h2{
color: #8A8E27;
color:#8A8E27;
fontweight:normal;
fontfamily:Arial,Helvetica,
sansserif;
}
h3{
color:#8A8E27;
fontweight:normal;
g
fontfamily:Arial,Helvetica,
sansserif;
}
Agrupamos comunes
Agrupamoscomunes
h1,h2,h3{
h h h {
color:#8A8E27;
fontweight:normal;
font family: Arial Helvetica sans serif;
fontfamily:Arial,Helvetica,sansserif;
}
h1{fontsize:2em;}
h2 { fontsize:
h2{font size:1.5em;}
1 5em; }
h3{fontsize:1.2em;}
Selector descendente
Selectordescendente
pspan
p span {color:red;}
{ color: red; }
h1span {color:blue;}
Con las reglas CSS anteriores:
Los elementos que se encuentran dentro de
un elemento se muestran de color
rojo.
j
Los elementos que se encuentran dentro de
un elemento <h1>
un elemento <h1> se muestran de
se muestran de
color azul.
El resto de elementos
El resto de elementos 
 de la pgina, se
de la pgina, se
muestran con el color por defecto aplicado
por el navegador.
Combinacin de selectores
Combinacindeselectores
/*Elestiloseaplicaatodosloselementos
/* El estilo se aplica a todos los elementos "p"
p ,"a"
a ,"span"
span y
y "em"
em */
*/
p,a,span,em {textdecoration:underline;}
/*Elestiloseaplicasoloaloselementos"em"quese
encuentran dentro de "p
encuentrandentrode paspan
a span"*//
paspanem {textdecoration:underline;}
muestralosdosenlacesdecolorrojo:
muestra los dos enlaces de color rojo:
pa{color:red;}
<ahref="#">Enlace</a>
<ahref="#">Enlace</a>
p p / /p /p
Sinembargo,enelsiguienteejemplosolamenteelsegundoenlacesemuestrade
colorrojo:
p*a{color:red;}
<ahref="#">Enlace</a>
<ahref="#">Enlace</a>
Selector CLASE
SelectorCLASE
aplicar estilos a un solo elemento de la pgina
l l l l d l
<body>
Lorem
<pclass= destacado >Lorem ipsum dolor sit amet...
amet 
Nuncsed lacus etestadipiscing accumsan...
Class aptent taciti sociosqu adlitora...
</body>
/b d
A continuacin, se crea en el archivo CSS una
nueva regla llamada
l ll d destacado:
d d
.destacado{color:red;}
Interpretacin:cualquierelementodelapgina
Interpretacin: cualquier elemento de la pgina
cuyoatributoclass seaigualadestacado",
Selector ID
SelectorID
El selector de ID permite seleccionar un elemento de la pgina a travs del valor de su atributo
id. Este tipo de selectores slo seleccionan un elemento de la pgina porque el valor del atributo
id no se puede repetir en dos elementos diferentes de una misma pgina.
#destacado { color: red; }
p
Primer prrafo
p /p
Segundo prrafo
Tercer prrafo
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo prrafo (cuyo
atributo id es igual a destacado).
La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y
no con CSS. Como se sabe, en una misma pgina, el valor del atributo id debe ser nico, de forma
que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo
class no es obligatorio que sea nico, de forma que muchos elementos HTML diferentes pueden
compartir el mismo valor para su atributo class.
class
De esta forma, la recomendacin general es la de utilizar el selector de ID cuando se quiere
aplicar un estilo a un solo elemento especfico de la pgina y utilizar el selector
Al igual que los selectores de clase, en este caso tambin se puede restringir el alcance del
g
selector mediante la combinacin con otros selectores. El siguiente ejemplo
j p aplica
p la regla
g CSS
solamente al elemento de tipo que tenga un atributo id igual al indicado:
p#aviso { color: blue; }

CSS1

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS1

Încărcat de

Drepturi de autor:

Formate disponibile

CSS

S-ar putea să vă placă și