PROGRAMACION AZTECA buscador

Buscar en Programacion Azteca Buscar en google


Programacion Azteca > css > Curso CSS Insertando nuestra hoja de estilos

Curso CSS Insertando nuestra hoja de estilos


En el primer capítulo de este curso os explicamos que había 3 formas de insertar un código CSS en un HTML, como un archivo aparte, como una etiqueta o como un atributo, ahora os las vamos a explicar:

Como un archivo aparte:

Primero creamos un archivo al que podemos llamar Hojadeestilos.css en el que escribimos:

||
|| selector {
|| propiedad: valor;
|| propiedad2: valor2;
|| }
||


Y luego en el archivo html, dentro de head escribimos:

||
|| < link rel="stylesheet" type="text/css" href="hojadeestilos.css" >
||


Como una etiqueta:

||
|| < style="text/css" >
|| selector {
|| propiedad: valor;
|| propiedad2: valor2;
|| } 
|| < /style >
||


Como un argumento:

En este caso, sin embargo iría dentro de la etiqueta que se quiere modificar:

||
|| < Etiqueta
|| style=propiedad:valor;
|| propiedad2:valor2; >
|| < /Etiqueta >
||


Como veis tenéis para elegir, yo os recomiendo la primera, ya que una misma hoja se puede insertar en varias páginas HTML.

Bueno por último vamos a poner 3 ejemplos de páginas HTML con CSS.

Como un archivo aparte:

Archivo ejemplo.css:

||
|| body {
|| background-color:black;
|| color:white;
|| }
||


Archivo ejemplo.html

||
|| < html >
|| < head >
|| < title > Fondo Negro, Texto Blanco < /title>
|| < link rel="stylesheet" type="text/css" href="ejemplo.css" >
|| < /head >
|| < body >
|| < p > Ahora el texto es blanco y el fondo negro < /p >
|| < /body >
|| < /html >
||


Como una etiqueta:

Archivo ejemplo2.html:

||
|| < html >
|| < head >
|| < title > Fondo Negro, Texto Blanco < /title>
|| < style >
|| body {
|| background-color:black;
|| color:white;
|| }
|| < /style >
|| < /head >
|| < body >
|| < p > Ahora el texto es blanco y el fondo negro < /p >
|| < /body >
|| < /html >
||


Como un atributo:

Archivo ejemplo3.html:

||
|| < html >
|| < head >
|| < title > Fondo Negro, Texto Blanco < /title>
|| < /head >
|| < body style=background-color:black; >
|| < p style=color:white; > Ahora el texto es blanco y el fondo negro < /p >
|| < /body >
|| < /html >
||


Podéis probar los ejemplos, pero acordaros de quitar los espacios entre < y la etiqueta, si quereis que os funcione, os recomiendo que los copieis a mano (sin Copy-Paste), así se os quedará.

Un saludo y hasta la próxima.


Tags.- Curso CSS, style,Css,maneras de insertar una hoja de estilos
Autor.- Yoel Cabo | 03 / 09 / 2009 | Categoria.- Programacion

Otros articulos de tu interes.-

Programacion Azteca

Te gusto el artículo? Puedes compartirlo en las siguientes redes sociales.

comentarios 0 Comentarios:


DEJA TU COMENTARIO

Programacion azteca agradece que dejes tu comentario, cualquier duda, aclaracion, y queja es bien aceptada, se le pide que no insulte y que recuerde que este es un comentario para una web y no un SMS.
Gracias!!!

Nombre.-

Escriba el comentario.-



Ingrese el texto de la imagen de arriba.-
(Respete letras mayusculas y minusculas)






Acerca De | Sitemap | Licencia CC | Contactanos | Colabora | PROGRAMACION AZTECA 2010