Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 63

Visitas el mes pasado: 149

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com


Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




1 El lenguaje CSS (III)

1.3 Incluir código CSS

html

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.


Incluir CSS en etiquetas

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


Incluir CSS en una página

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.


Incluir CSS en un archivo aparte.

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:

Ver ejemplo


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:

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.

Colores y medidas



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com