En casos muy puntuales y concretos, declararemos el estilo incrustado al elemento o en línea, utilizando el atributo style.
Por ejemplo, en un determinado párrafo al que queremos aumentar un poco
el margen porque queda mejor. Nos será más sencillo recordar que el
estilo está en el elemento, que crear una clase que no nos serviría de
nada si borramos el elemento. De todas formas, aquí no declararemos
todo el estilo, solo los atributos que sean distintos al resto de
elementos del mismo tipo.
Si sólo tenemos una página, podemos definir los estilos dentro del <head>. Para ello, tenemos que incluir en la etiqueta <style type="text/css"> ... </style>. En esta etiqueta, definiremos los estilos con el selector y su bloque de declaración.
Pero los más habitual es tener varias páginas. En este caso resulta
muy útil tener los estilos definidos en una hoja independiente, una hoja de estilos. Una hoja de estilos no es más que un archivo de texto, pero con la extensión .css,
donde aparecen definidos los estilos que utilizarán las páginas. Para
que funcione, debemos de enlazar con la hoja de estilo, para lo que
utilizaremos la siguiente etiqueta en el <head> de nuestras páginas:
<link href="hoja_de_estilo.css" rel="stylesheet" type="text/css" />
href indica la ubicación de la hoja de estilo, tal como lo pondríamos en un enlace.rel se refiere a la relación del archivo con nuestra página. Al poner stylesheet le indicamos que se trata de una hoja de estilo. Por ejemplo, podríamos poner alternate stylesheet lo que indicaría que se trata de una hoja de estilo alternativa.
Algunos navegadores como Firefox, nos permiten elegir entre la hoja
normal o la alternativa a través del menú Ver → Estilo de página.
Puedes practicar algunas de las cosas que hemos visto con el ejercicio paso a paso Aplicar estilos sencillos.
Entonces, si definimos en varios sitios el estilo para un elemento ¿cuál se aplica? Bueno, realmente los estilos se van sumando. Por lo que si no repetimos ninguna propiedad, el estilo final de un elemento será la suma de todos los estilos que afecten al elemento.
Pero ¿qué ocurre si repetimos una propiedad? Como norma general,
prevalecerá el estilo más concreto sobre el más genérico. Por ejemplo,
si en la hoja de estilo establecemos el texto de los párrafos en rojo, y en la cabecera de la página definimos el color de los párrafos en azul, prevalecerá
éste último, ya que es más concreto, se refiere sólo a los párrafos de
esa página. Y si en un párrafo de la página, en el atributo style indicamos el color de texto verde, prevalecerá éste por ser el más concreto de todos.
Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más concreto que p, ya que se refiere sólo a los párrafos con esa clase. Y p#titulo sería aún más concreto, ya que se refiere directamente a un determinado párrafo. Lo mismo ocurre al anidar los selectores, p.inicio span es más concreto que poner sólo span.
En caso de empate, por ejemplo si definimos varias veces la misma
propiedad en una hoja de estilo, se tomará en cuenta la última, que
machacará a las anteriores. Por ejemplo, poner p {margin: 20px; margin-bottom: 5px;} sería como poner p {margin: 20px 20px 5px;}.
En cualquier momento podemos saltarnos el orden de prioridad de los estilos, añadiendo !important al final de una propiedad. Esto hace que tenga preferencia sobre el resto. Por ejemplo, en este ejemplo:
p { color: blue !important;
color: red;
}
El párrafo debería de ser de color rojo, porque el valor rojo "machaca" al azul. Sin embargo, al poner !important, hace que el texto sea rojo.
Hay que tener en cuenta que las propiedades se heredan de los elementos padre. Por ejemplo, si decimos que el texto del body será de color azul, todos los elementos tendrán este color para el texto, a no ser que indiquemos otra cosa.
La mejor forma de entender todo esto, es probando un ejemplo (recuerda que puedes modificarlo):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estilos</title>
<style type="text/css">
body {
font-family:sans-serif;
background-color: lightyellow;
}
h1 {
border-bottom: #FFCC66 5px solid;
text-align: center;
}
p {
color:#660000;
border: #FF9933 10px solid;
border-width: 0 0 2px 2px;
}
p.derecha {
text-align: right;
border-width: 0 2px 2px 0;
}
#Pepe {
color: red;
border-width: 0;
}
.destacado {
color: white;
background-color: red;
}
p.destacado span.destacado {
color: red;
background-color: white;
}
</style>
</head>
<body>
<h1>Estilos</h1>
<p>Los estilos simplifican el diseño de una página.</p>
<p class="derecha">Podemos definirlos en el propio <span class="destacado">elemento</span>.</p>
<p>Definirlos en la <span class="destacado">cabecera</span>.</p>
<p class="derecha">O utilizar una <span class="destacado">hoja de estilo</span>.</p>
<p> </p>
<p id="Pepe">Este es el párrafo Pepe, con su propio estilo.</p>
<p class="destacado">Este es un párafo de la clase <span class="destacado">destacado</span>.</p>
<p class="destacado" style="background-color: orange">Éste, también es destacado,
pero con style="background-color: orange".</p>
</body>
</html>
Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código 
.
 Ejercicio propuesto la Unidad 3 |
 Prueba evaluativa de la Unidad 3 |
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.