CSS Directas
Las CSS directas se usan para poder incluir CSS a una parte del texto concreta. Para ello debemos utilizar la etiqueta “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</X>
“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 incluir estilos 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.
Para mejorar la velocidad de una web es imprescindible minimizar el uso de javascript usando el mínimo posible. No obstante, si nos es necesario cargar varios, la opción más interesante es juntarlos en un único fichero. Como leemos en este artículo de ComenzandoDeCero.com, “es recomendable juntar todos los ficheros css en uno y minificarlos. Minificarlos consiste en eliminar todos los elementos que no se usen de ese css y en eliminar todos los espacios en blanco para reducir contenido todo lo posible.”
Aquí veréis un ejemplo de esta forma de aplicar las 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;
}
CSS indirectas dentro del mismo documento
Este tipo de hojas de estilo se aplican cuando queremos que los estilos de las CSS se apliquen de una forma global a todas las etiquetas de un documento.
Por ejemplo, queremos que todo el cuerpo del documento, el “body», tenga un determinado tipo de letra, que los párrafos tengan un color determinado, que las cabeceras tengan un tamaño igual entre ellas, etc. Para conseguir estos propósitos, las CSS indirectas son ideales.
Para incluir CSS indirecta dentro del mismo documento, utilizaremos la etiqueta <style>. La colocaremos en la cabecera del documento. Entre esta etiqueta y su cierre (</style>) escribiremos todos los estilos que queramos definir en el documento.
El código de la estructura básica de este tipo de CSS sería el siguiente:
<html>
<head>
Aquí van los datos de la cabececera del documento<style type="text/css">
<!--
Aquí escribiríamos los diversos estilos que queramos aplicar
-->
</style></head>
<body>
Aquí va el cuerpo del documento, todo el contenido
</body>
</html>
Observa como a la etiqueta “style» le hemos puesto el atributo type=“text/css». Indicar este atributo no es necesario, pero sí muy recomendable, pues le está indicando al navegador el tipo de sintaxis que usa la hoja de estilo.
Observa como hemos puesto los estilos como si fueran comentarios. Anteriormente los estilos se escribían así para ocultar las hojas de estilo a los navegadores que no las reconocieran. Actualmente, todos los navegadores las reconocen, así que escribirlo de esta manera es innecesario.
Excelente Tutorial, me estoy adentrando en el fascinante mundo de la creacion de páginas web y a mi manera de ver tienes una excelente metodología para hacer totalmente entendible tus explicaciones….. Felicitaciones!!!
Gracias por la información, seguiré leyendo los artículos de esta página, soy estudiante y se que me servirá de mucho.