Cascading Style Sheets

por Daniel M. Germán (dmg@csg.uwaterloo.ca)

Información de Derecho de Autor

Este documento es (C) 1998, 1999 Daniel M. Germán (dmg@csg.uwaterloo.ca) .

Este documento es distribuido bajo la licencia "GNU General Public Licence", tal como es publicada por la Free Software Foundation, versión 1 o 2 a elección del usuario.

En resumen, esta licencia te da el derecho de modificar este documento, siempre y cuando tú a la vez redistribuyas las modificaciones que hagas al mismo. De ninguna forma puedes remover el encabezado de copyright al tope de este documento ni la licencia de este documento. Las modificaciones que hagas deben liberarse bajo la misma licencia que este documento.

Contenido

Cascading Style Sheets (CSS)

Propiedades de un estilo

Agentes del Usuario

Un estilo simple

Estilos en Conflicto

Conflictos

Prioridad en Estilos

Propiedades

H1 { background : blue;
     color : yellow}

Propiedades sensibles al contexto

BLOCKQUOTE P { font-style: italic}

Propiedades de Fuentes

Ejemplo

 
BODY { font-family: "new century schoolbook", serif}
H1 EM {font-style: normal; font-weight: lighter}
style1.css 
<html> <head>
<link rel="STYLESHEET" type="text/css" HREF="style1.css">
<title>Ejemplo 1</title>
</head>

<body>
<h1>Título 1</h1>

<h1> Título 1 <em>relevante</em></h1>

<h2> Título h2  <em>menos relevante</em></h2>


<p><em>Más texto relevante</em>

</body></html>
ejemplo1.htm

Text Properties

Ejemplo anterior

<ul>
  <li><div style="word-spacing: 0.5em"><tt>word-spacing</tt> espacio entre palabras</div>
  <li><div style="letter-spacing: 0.1em"><tt>letter-spacing</tt> espacio entre letras</div>
  <li><div style="text-decoration: blink"><tt>text-decoration</tt>
      subrayado, sobrerayado, flasheado</div>
  <li><div style="vertical-align: super"><tt>vertical-align</tt>
      <i>baseline, middle, sub, super, text-top,</i> etc.</div>
  <li><div style="text-transform:uppercase"><tt>text-transform</tt>
      Mayúsculas o minúsculas</div>
  <li><div style="text-align:right"><tt>text-align</tt> left, center, right</div>
  <li><div style="text-indent:3cm"><tt>text-indent</tt> indentación de
      la primera línea de texto en
      un párrafo (este texto es tan sólo para que el párrafo expanda a
      más de una línea</div>
  <li><div style="line-height: 3cm"><tt>line-height</tt> distancia entre líneas base</div>
</ul>

Propiedades de Cajas

Propiedades de Cajas (2)

Ejemplos

 
H1 {margin-top:    2em; font-size:3em}
H1 {margin-right: 30%}
H1 {margin-left: 30%}
H1 {border-width: thin;color: blue; background: red}
P  {border-width: thick; color: black}
IMG.icon {width: 100px}
IMG.icon {height: 100px}
style2.css 
<html> <head>
<link rel="STYLESHEET" type="text/css" HREF="style2.css">
</head>
<body>
<h1>Título 1</h1>

<p>Más texto irrelevante</p>

<img src="_kaye.jpg" class="icon">

</body></html>
ejemplo2.htm

Propiedades de Clasificación

Ejemplos

 
P {display: block}
EM {display: inline}
IMG.non {display: none}
OL  {list-style-type: alpha}
UL {list-style-image: url(_kaye.jpg)}
UL UL {list-style-type: circle}
P {margin-top:    2em; font-size:x-large}
P {margin-right: 30%}
P {margin-left: 30%}
P {border-width: thin;color: blue; background: red}
EM {border-width: thin;color: red; background: white}
style3.css 
<html> <head>
<link rel="STYLESHEET" type="text/css" HREF="style3.css">
</head>
<body>
<h1>Título 1</h1>

<p>Más texto irrelevante con algo de <em>texto relevante</em></p>

<ol>
  <li>Lista
  <li>Ordenada
</ol>
<ul>
  <li>Lista
  <li>desordenada
      <ul>
	<li>lista desordenada
	<li>dentro de lista desordenada
      </ul>
</ul>

<img src="_kaye.jpg" class="non">
<hr>
<img src="_kaye.jpg">

</body></html>
ejemplo3.htm

Especificando el estilo

Ejemplo

 
<html> <head>
<link rel="STYLESHEET" type="text/css" HREF="style3.css">
<style TYPE="text/css">
@import "style1.css";
h1 {color: green}
</style>
</head>
<body>
<h1 >Título 1 <em > Em</em></h1>

<h1 style="color:cyan"> Titulo h1 </h1>
<p>Más texto irrelevante con algo de <em>texto relevante</em></p>


</body></html>
ejemplo4.htm

Agrupamiento

Herencia

Ejemplo 5

 
<html> <head>
<style TYPE="text/css">
body {color: red; background: url(_kaye.jpg)}
h1.dif {color: green}
</style>
</head>
<body>
<h1 >Título 1 </h1>

<h1 class="dif"> Titulo h1 </h1>

<p>Más texto irrelevante con algo de <em>texto relevante</em></p>


</body></html>
ejemplo5.htm

Herencia de valores porcentuales

Selectores

Clase

ID

Ejemplo 6

 
<html> <head>
<style TYPE="text/css">
body {color: black; background: white}
h1.dif {color: green}
#faye {color:yellow}
P #cat {color:green}
</style>
</head>
<body>
<h1 >Título 1 </h1>

<h1 class="dif"> Titulo h1 </h1>

<p id=faye>Más texto irrelevante con algo de <em>texto relevante</em></p>
<p id=cat>Más texto irrelevante con algo de <em>texto relevante</em></p>

</body></html>
ejemplo6.htm

Selectores de Contexto

Comentarios

Pseudoelementos y Pseudoclases

Ejemplo: Anclas

Las clases no son equivalentes a las pseudoclases

Uso de Pseuclases

Pseudoclases tipográficas

La Cascada

Important

Algoritmo de Orden de la cascada
  1. Encuentra todas las declaraciones que apliquen al elemento en questión.
  2. Ordenar las declaraciones por su peso (importantes son más valiosas que las normales)
  3. Ordenar por origen:
  4. Ordenar por que tan específico es el selector: specificity. Para encontrar la especificidad:
    1. Cuenta el número de atributos en el selector (a)
    2. Cuenta el número de atributos de clase en el selector (b)
    3. Cuenta el Número de nombres de etiquetas en el selector (c)
    4. Concatena los tres números (a b c) en una base lo suficientemente grande. Este valor es la specificity de la propiedad. 
    BODY {background:white}
LI { color: cyan}
UL LI  {color: blue}
UL UL LI  { color: green}
#x34y  {color:black}
LI.red  {color:red}
UL UL LI.red  {color: magenta}
#x34y  {color:yellow}
    style7.css
  5. Ordenar por orden en que se especifican: la última propiedad gana. Autores tienen ventaja sobre el autor sobre el UA.

Ejemplo

 
BODY {background:white}
LI { color: cyan}
UL LI  {color: blue}
UL UL LI  { color: green}
#x34y  {color:black}
LI.red  {color:red}
UL UL LI.red  {color: magenta}
#x34y  {color:yellow}
style7.css 
<html> <head>
<link rel="STYLESHEET" type="text/css" HREF="style7.css">
</style>
</head>
<body>

<ul>
  <li>Item 1
      <ul>
	<li>Item en cuestion
	<li class=red>¿Será rojo? 
      </ul>
  <li class=red>En que color? 
  <li class=red id=x34y>¿Y este? 
</ul>


</body></html>
ejemplo7.htm

Más información
© Daniel M. Germán (dmg@csg.uwaterloo.ca)