CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 63
Visitas el mes pasado: 149
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Para que el código CSS surta efecto sobre etiquetas escritas en código HTML, ambos códigos tienen que estar relacionados, de manera que podamos saber a qué código HTML afecta el código CSS. Esto es lo que se llama incluir el código CSS en la página.
Tenemos tres formas de incluir el código CSS en la página de HTML, estas son: En las propias etiquetas, en la propia página, o en un archivo aparte.
Para definir el código en una etiqueta de una página se utiliza el
atributo style
: en el valor de este atributo indicamos en sintaxis CSS
las propiedades y valores que queremos aplicar. Ejemplo:
<p style="color : blue">Este texto está en azul</p>
Este código lo veremos así en el navegador
Este texto está en azul
Como observamos, no tenemos que poner el nombre del selector, ya que el
código se aplica a una sola etiqueta, ni encerrar las propiedades entre
llaves, ya que la declaración viene definida por el valor de la
etiqueta style
.
Podemos también escoger un trozo de texto que no coincida con una etiqueta,
para ello utilizamos la etiqueta <span style="(declaración_CSS)">...</span>
para seleccionar el trozo de texto. Ejemplo:
<p>Este párrafo tiene varias palabras <span style="color: green">en color verde</span> modificadas por la etiqueta span.</p>
Este código lo veremos así en el navegador
Este párrafo tiene varias palabras en color verde modificadas por la etiqueta span.
Este método de incluir CSS sirve para pequeños trozos de texto o párrafos aislados. si queremos aplicar el mismo estilo a más de un párrafo deberemos usar otros métodos, ya que de esta manera se generan los mismos problemas que usando las etiquetas y atributos HTML para estilo (recargar y alargar el código HTML). Solamente se utiliza esta forma de incluir CSS en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto
Podemos hacer que el estilo CSS afecte a varias etiquetas; para ello incluiremos el código en la cabecera de la página.
En este caso incluiremos las reglas CSS dentro de la etiqueta
<style type="text/css"> (reglas CSS) </style>
Esta etiqueta debe incluirse en la cabecera (entre las etiquetas
<head> ... </head>
) para que el texto de CSS no
sea visible en el navegador. Las reglas CSS deben ponerse completas, con
selector, llaves, y declaración, escritas en sintaxis CSS.
Veamos un ejemplo en la siguiente página:
<html>
<head>
<title>Ejemplo de estilos CSS en la cabecera</title>
<style type="text/css">
h1 { color: red ; font-size : 20px ; font-family : Arial; }
p { color: navy; font-family: Verdana; }
</style>
</head>
<body>
<h1> Estilos desde la propia página</h1>
<p>Este es un párrafo de texto modificado mediante
estilo CSS en la cabecera.</p>
<p>Este otro párrafo también tiene el mismo estilo
que el anterior, ya que el archivo CSS está en la cabecera.</p>
</body>
</html>
En el navegador lo veremos así : Ver ejemplo
En este ejemplo el texto del código CSS lo hemos puesto en verde para
distinguirlo. La etiqueta style
tiene que llevar siempre el atributo
type="text/css"
para indicar que lo que hay dentro de ella es
el texto CSS que afectará a la página.
Este método consiste en crear un archivo aparte. Este archivo se crea con el mismo editor de textos que hemos creado el archivo HTML de la página; y en él escribiremos todas las reglas CSS que van a afectar a la página. Al guardar el archivo por primera vez debemos darle la extensión .css
Después en la página html se crea un enlace que hace referencia al archivo CSS que debe afectarle.
Este método es el más usado y tiene varias ventajas. El código CSS queda totalmente aparte del archivo de texto, por lo que separamos lo que es el texto de su estilo, descargando bastante la página HTML. Es más fácil de revisar o modificar, y además podemos enlazar varias páginas a un mismo archivo, con lo que conseguimos que las distintas páginas de una Web tengan un aspecto homogéneo.
Veamos un ejemplo que podemos hacer también como un ejercicio guiado: Abrimos el editor de texto (HTML-Kit) y en un nuevo archivo escribimos el siguiente código :
h1 { color: red ; font-size: 25px ; font-family: Arial; text-align: center; } p { color: navy; font-family: Verdana; text-align: justify; }
Una vez escrito lo guardamos en un archivo aparte que vamos a llamar estilo.css. Al guardarlo debemos escribir "estilo.css" y no solamente "estilo". Debemos, por lo tanto, indicar la extensión .css al final del nombre, ya que si no la indicamos puede que se guarde en otro formato.
Podemos ponerle otro nombre al archivo, pero la extension .css debe ser siempre la misma (.css).
Ahora veamos el archivo HTML al que afecta, en él escribiremos una etiqueta en la cabecera refiriéndonos al archivo CSS:
<html>
<head>
<title>Ejemplo de estilos CSS en archivo aparte</title>
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
</head>
<body>
<h1> Estilos desde un archivo aparte</h1>
<p>Este es un párrafo de texto modificado mediante
estilo CSS creado en un archivo aparte</p>
<p>Este otro párrafo también tiene el mismo estilo
que el anterior, ya que el archivo CSS también le afecta. el archivo CSS
está relacionado con el archivo HTML mediante una etiqueta link que
se pone en la cabecera.</p>
</body>
</html>
Observa la etiqueta que hemos resaltado en azul, ésta se refiere al archivo CSS, y la analizaremos a continuación.
De momento copiamos este código HTML en un nuevo archivo en blanco en el editor de textos, y lo guardamos con el nombre archivo.html. Es importante que guardemos los dos archivos anteriores (HTML y CSS) en la misma carpeta para que puedan estar relacionados.
si abrimos el documento archivo.html con el navegador veremos la siguiente página:
La etiqueta HTML que hemos resaltado en azul es la que enlaza los dos archivos. Debe
ponerse siempre en la cabecera del documento HTML. Esta es la
etiqueta <link/>
, que sirve para enlazar con el archivo CSS externo. Esta etiqueta no tiene etiqueta de cierre,
y normalmente tiene cuatro atributos:
rel
: indica el tipo de relación que tiene el recurso enlazado (en este caso,
el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor
stylesheet
.Este atributo con este valor, es obligatorio para poder enlazar la
hoja de estilos.type
: indica el tipo de recurso enlazado. Sus valores estan estandarizados
y para los archivos CSS su valor siempre es text/css
Este atributo con este valor
también es obligatorio.href
: indica la ruta o dirección del archivo CSS que contiene los estilos.
La ruta cuando ambos archivos (HTML y CSS) están en la misma carpeta es el nombre del
archivo CSS incluida la extensión (ej. estilo.css, que es el nombre que le hemos dado
al archivo). Este atributo también es obligatorio, pues es el que enlaza los dos
archivos.media
: indica el medio en el que se aplicarán los estilos del archivo CSS.
Algunos de sus valores pueden ser: screen
(pantalla) print
(impresora)
all
(todos) ... Este atributo es opcional, y si lo ponemos debemos darle
el valor all
o screen
para que el estilo se vea en la pantalla
de nuestro ordenador. Los otros valores permiten crear diferentes estilos para otros
medios, así por ejemplo el valor print
puede dar un estilo diferente para
imprimir la página. pero eso lo veremos más adelante. Si no ponemos este
atributo se entiende que tiene por defecto el valor all
(todos)Si no estás muy seguro de cómo funciona esta etiqueta lo mejor que puedes hacer
es copiarla y pegarla en la cabecera del documento html, después del título.
Después le cambias el nombre del archivo a enlazar en el valor del atributo href
y seguro que funciona. La etiqueta es la siguiente:
<link rel="stylesheet" type="text/css" href="estilo.css" media="all" />
Recuerda que los dos archivos (css y html) deben estar guardados en la misma carpeta. Más adelante, cuando estudiemos los enlaces, veremos cómo enlazar archivos que están en diferentes carpetas, incluso dentro de otras páginas Web.
En la siguiente página veremos como escribir medidas y colores para los valores de las propiedades CSS.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com