Ediciones ENI Editorial | líder en informática
Integrar los estilos CSS
El rol de las CSS
Recordemos que las CSS, Cascading Style Sheets, permiten formatear el contenido de los elementos HTML y también se ocupan de la paginación de los sitios web. Por lo tanto, con las CSS tenemos dos objetivos bien definidos:
-
El formato que afecta a los textos, por ejemplo, con la aplicación de un color, el cambio de mayúsculas/minúsculas de los caracteres, el resaltado de los párrafos de texto con el formato del interlineado o la indentación de primera línea, etc.
-
La estructura de la página, que afecta a la disposición de los bloques de contenido HTML de la página, con una barra de navegación, un encabezado, un pie de página, una zona de visualización de contenidos, etc.
Las CSS permiten modificar dinámicamente la estructura de la página según el medio de difusión. Es decir, la estructura de la página va a ser diferente dependiendo de si consulta el sitio web en la pantalla de un ordenador, de una tableta o de un smartphone.
Recuerde que las CSS3 se dividen en módulos independientes y que se desarrollan a su propio ritmo.
En la actualidad y desde hace ya tiempo, es necesario separar las CSS de la estructura del HTML. Por lo tanto, tenemos que ver en este capítulo dónde situar las reglas CSS que forman una hoja de estilo.
Los estilos integrados en un elemento HTML
La primera posibilidad de integrar los estilos CSS es definir una regla directamente en el elemento HTML afectado. En este caso, esta regla solo se aplica a este elemento y no a otro.
Para esto, debemos utilizar el atributo style en el elemento HTML que queramos e indicar la propiedad y el valor deseados.
En este ejemplo, aplicamos cursiva al primer título <h2>:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
</head>
<body>
<h2 style="font-style: italic">Tristique Cursus Commodo Ligula</h2>
<p>Cras justo odio, dapibus ac facilisis...</p
<h2>Tortor Ullamcorper Etiam Nibh</h2>
<p>Nullam id dolor id nibh ultricies...</p>
</body>
</html> A continuación se muestra la visualización obtenida:
De esta manera, verá que el ámbito de esta regla CSS es muy reducido, porque solo se aplica al elemento HTML en el que se define. No se puede utilizar en otros sitios.
Los estilos definidos en la página
La segunda posibilidad es definir las reglas CSS en una página HTML. En este caso, las reglas solo se pueden aplicar a los elementos HTML contenidos en esta página HTML y en ningún otro sitio ni archivo HTML. Las reglas CSS se definen en el elemento <head>, en un elemento <style>.
A continuación se muestra un ejemplo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
<style>
.titulo-articulo {
font-style: italic;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2 class="titulo-articulo">Tristique Cursus Commodo Ligula</h2>
<p>Cras justo odio, dapibus ac facilisis...</p>
<h2 class="titulo-articulo">Tortor Ullamcorper Etiam Nibh</h2>
<p>Nullam id dolor id nibh ultricies...</p>
</body>
</html> En el elemento <style>, solo tenemos una regla CSS que se llama.titulo-articulo. Esta regla define un texto en cursiva y pasa a mayúsculas todo...
Los estilos definidos en un archivo .css
La tercera posibilidad es declarar las reglas CSS en un archivo separado de las páginas HTML. Este archivo tendrá como extensión .css y solo contendrá las reglas CSS deseadas. A continuación, tenemos que unir este archivo CSS con las páginas HTML que queramos para aplicar las reglas CSS a los elementos HTML deseados.
He aquí un ejemplo muy sencillo de archivo CSS, llamado estilos.css, que solo contiene dos reglas CSS:
.titulo-articulo {
margin-left: 20px;
padding-left: 10px;
border-left: 5px solid #000;
}
.nombre {
font-style: italic;
} A continuación se muestra el archivo HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
<link href="estilos.css" rel="stylesheet">
</head>
<body>
<h2 class="titulo-articulo">Tristique Cursus Commodo Ligula</h2>
<p>Cras justo odio ... id nibh <span class="nombre">Ultricies
vehicula</span> ut id elit...</p>
<h2 class="titulo-articulo">Tortor Ullamcorper Etiam Nibh</h2>
...Los estilos importados
La última posibilidad para integrar una hoja de estilo CSS es utilizar la regla @import. Atención, observe que esta regla se ha implementado en CSS 2. Por lo tanto, no es una regla HTML ni un elemento HTML.
Esta regla permite importar un archivo .css en otro archivo .css. A continuación se muestra su sintaxis, que se sitúa normalmente al inicio de un archivo .css:
@import url("otros-estilos.css") La regla @import utiliza la propiedad url() para indicar la ruta de acceso al archivo .css que se debe importar.
También se puede utilizar la regla @import en un archivo .html, en el elemento <head>. A continuación se muestra la sintaxis que hay que utilizar:
<style>
@import url("otros-estilos.css");
</style> Pero por razones de rendimiento este método se utiliza menos.
