Una hoja de estilo consiste en una o más
definiciones de estilo. En sintaxis CSS, los nombres de las propiedades y los
valores se encierran entre llaves {}.
El criterio de selección determina a que elementos
se aplica, o es aplicable, el estilo. Si el criterio de selección es un
elemento HTML, el estilo es aplicado a todos las instancias de dicho elemento.
El criterio de selección también puede ser una clase, un ID o contextual. Cada
una de estos criterios de selección se verán a continuación.
En una definicion de estilo cada propiedad es
seguida por dos puntos y el valor de dicha propiedad. Cada par propiedad/valor
está separado del siguiente por un punto y coma (;).
Por ejemplo, la siguente hoja de estilo en cascada
contiene dos definiciones de estilos. El primero especifica que todos los
párrafos, <p>, se veran en negrita
y en color blanco. El segundo hará que todas las cabeceras, <h1>, aparezcan centradas.
<style
type="text/css">
<!--
p {font-weight: bold; color: white;}
h1 {text-align: center;}
-->
</style>
La definición de estilos se puede encerrar entre
commentarios (<!-- ... -->), de esta forma los navegadores que no
reconozcan la etiqueta <style> la ignorarán.
Es importante no incluir dobles comillas en la
especificacion de valores de atributos en sintaxis CSS.
CSS exige un estricto cumplimiento de sus normas de
sintaxis. Asegurese de no omitir ningun punto y coma entre los pares
nombre/valor. Si lo hace se ignorara por completo la definición de estilo. De
igual forma, si accidentalmente se añade un simbolo extraño la definición será
ignorada.
VINCULAR UNA HOJA DE ESTILO
Para poder
incluir las propiedades de una hoja de estilo en un documento, hay que
vincularla a él. Un documento puede tener varias hojas de estilo vinculadas.
Para
vincular una hoja de estilo a un documento es necesario insertar la etiqueta <link> en
el documento, entre las etiquetas <head> y </head>.
Esta etiqueta no necesita etiqueta de cierre.
A través del
atributo href se especifica la hoja de estilo que se va a
vincular al documento.
A través del
atributo rel se tiene que especificar que se está vinculando
una hoja de estilo, por lo que su valor ha de ser stylesheet.
A través del
atributo type se tiene que especificar que el archivo es de
texto, con sintaxis CSS, por lo que su valor ha de ser text/css.
Por ejemplo,
podríamos vincular una hoja de estilo escribiendo el siguiente código.
<link href="misestilos.txt" rel="stylesheet" type="text/css" >
SINTAXIS DE LA HOJA DE ESTILO
Como recordarás, para especificar las propiedades de
una capa no se utilizan etiquetas normales de HTML. Todas las propiedades se
especifican a través del atributo style, y aparecen entre comillas
dobles, con un punto y coma detrás de cada una. Para asignar los valores a las
propiedades no se utiliza el símbolo = (igual), sino que se
utiliza el símbolo : (dos puntos).
Esto es debido a que se está especificando un
estilo, pero sin vincular ninguna hoja de estilo a la página.
Para especificar las propiedades dentro de una hoja
de estilo, la sintaxis es muy similar.
En primer lugar se pone el nombre del estilo, y
entre llaves se especifica la lista de propiedades (en minúsculas) que se
corresponden con dicho estilo. Cada una de estas propiedades tiene que tener un
punto y coma detrás, y los valores se asignan con el símbolo : (dos
puntos).
El nombre del estilo puede ser un nombre inventado
por nosotros, o el nombre de una etiqueta HTML. Para poder utilizar un nombre
inventado, tiene que estar precedido por un punto, o por el nombre de una
etiqueta seguida de un punto.
Por ejemplo, en una hoja de estilo podríamos tener
lo siguiente:
body {background-color: #006699; font-family: Arial,Helvetica;}
.mitexto {font-family: Arial,Helvetica; font-size:18px;}
.mitexto {font-family: Arial,Helvetica; font-size:18px;}
Si vinculáramos esta hoja de estilo a un documento,
se aplicarían directamente las propiedades especificadas para la etiqueta <body>.
En cambio, no existe ninguna etiqueta <mitexto>,
por lo que para aplicar este estilo a algún elemento de la página habría que
indicarlo de algún modo.
Para aplicar este estilo a un elemento, habría que
insertar el atributo class en su etiqueta.
Por ejemplo, para aplicar ese estilo al siguiente
párrafo del documento:
<p>texto con estilo</p>
Habría que escribir:
<p class="mitexto">texto con estilo</p>
Pero para aplicar el estilo únicamente a una parte
del contenido de la etiqueta, como podría ser en este caso una palabra del
párrafo, sería necesario incluir la etiqueta <span> (que
agrupa bloques, sin producir un cambio de línea). Por ejemplo, para aplicar el
estilo únicamente a la palabra estilo, habría que escribir:
<p>texto con <span class="mitexto">estilo</span></p>
LAS PROPIEDADES
Fuentes y Textos
- Propiedad color
- Color de Fondo
- Imagen de Fondo
- Margen
- Márgenes Interiores
- Ancho
- Propiedades del Borde
Excelente tutorial, la verdad un poco basico, sin embargo muy bueno para aprender algunos conceptos simples y globales :D saludos y visiten la página Paginas web cancun
ResponderEliminarexcelente artículo sobre el diseñodepaginasweb
ResponderEliminarGracias por el cumplido. la verdad fue un trabajo para el instituto.
ResponderEliminarhola... sigues con el blog? espero un nuevo aporte
ResponderEliminar