|
CSS Directas
Las CSS directas se usan para poder aplicar un estilo a una parte del texto
concreta. Para ello debemos utilizar el parámetro “style”.
Observa el siguiente código de ejemplo:
| <X style= “atributo1:valor1;atributo2:valor2;”>Aquí
va el texto al que se le aplicará el estilo</style> |
“X” sería la etiqueta html a la que se le ha aplicado el
estilo, mediante el parámetro “style”. “X” puede
ser un párrafo (<p>), una capa con salto de línea (<div>),
una capa sin efecto (<span>), etc.
También apreciamos que el estilo está definido por unos atributos
con un valor (“atributo1:valor1”), separados entre ellos por punto
y coma.
Gracias al siguiente código lo comprenderemos mucho mejor:
El texto que veremos a continuación <span
style="font-size:23px;color:#0000FF">estará
en azul y en un tamaño más grande</span> gracias
a la css directa
que hemos aplicado sobre él. |
Observa a continuación su efecto:
| El texto que veremos a continuación estará
en azul y en un tamaño más grande gracias a la css
directa que hemos aplicado sobre él. |
CSS indirectas fuera del documento
Otra forma de aplicar CSS es a través de unos estilos que se encuentran
fuera del documento, pero al que se aplicarán esos estilos. Esta forma
de aplicar CSS es útil si queremos aplicar los mismos estilos a diferentes
documentos html.
Deberemos crear por tanto un documento de extensión .css donde estarán
determinados los diferentes estilos. Y desde cada hoja en la que queramos aplicarlos,
habrá que indicar que debe buscar los estilos en ese documento. Para
ello, debemos incluir la siguiente etiqueta con los siguientes atributos:
| <link rel="stylesheet" type="text/css"
href="urlhojadeestilos.css"> |
Expliquemos a continuación los diferentes atributos de la etiqueta <link>:
El atributo "rel" debe ir con el valor "stylesheet"
ya que está definiendo que “link” se está usando para
insertar una hoja de estilo. El atributo "type" con
valor "text/css" indica que el tipo de sintaxis que
usa la hoja de estilo es CSS. Por último, el atributo "href"
especificará la ubicación y el nombre de la hoja de estilo.
En este documento html de aquí veréis un ejemplo de esta forma
de aplicar las CSS: Ejemplo
de forma de aplicar CSS.
Para que les puedas echar un vistazo a continuación te dejamos el código
del documento html:
<html>
<head>
<title>Un ejemplo practico de css en un documento externo</title>
<link rel="stylesheet" type="text/css" href="http://css.hazunaweb.com/css/ejemplos/ejemplocss.css">
</head>
<body>
Como en la hoja de estilo hemos dicho que el body fuera con fondo blanco,
con
un texto de tamaño 10 y centrado, ésta será
la apariencia
principal de la página.
<p>Aquí tenemos un párrafo. Como también
le hemos aplicado un estilo,
podemos ver el texto del párrafo de color azul y con un tamaño
ligeramente superior.</p>
<p id="estilo1"> A este párrafo le hemos aplicado
el “estilo1”, por lo que el
texto tiene un fondo negro, un texto en blanco y un tamaño de
15 px.</p>
<div class="clase1">Este texto posee unas características
propias de la
clase 1. No es que sea un estilo muy bonito, pero por lo menos se entiende
bien,
¿¿no?? </div><br>
<h1>Y aquí tenemos un último estilo.</h1>
Pues estos han sido todos los estilos que teníamos preperados
para ti.
Este tiene otra vez el estilo predeterminado para body.
</body>
</html> |
Y también el del documento CSS con las hojas de estilo:
body {
font: 10px;
text-align: center;
background-color: #ffffff;
}
p{
font-size:12ppx;
color:#0000FF;
text-align:left;
}
h1{
color:#FF0000;
text-align:left;
}
.clase1{
font-style:italic;
font-size:20px;
border-bottom:1px #000000 dashed;
text-align:left;
}
#estilo1{
color:#FFFFFF;
font-size:15px;
background-color: #000000;
text-align:left;
} |
Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.
| 