Hojas de Estilo CSS Externas
Es más
conveniente cuando una misma hoja de estilos es aplicada a varias páginas. Las
ventajas que tiene esta opción es que realizamos los cambios en un solo
archivo, así podemos cambiar el aspecto de todo el sitio web. Las hojas de estilo deben llevar la extencion .css por ejemplo, un archivo CSS externo
le podemos llamar "estilo1.css"
p
{
font-family:Arial;
font-size:12px;
font-weight:normal;
}
{
font-family:Arial;
font-size:12px;
font-weight:normal;
}
El código anterior muestra un trozo del
archivo “estilo1.css” en este caso comienzan directamente con el
selector.Cada página del sitio debe vincularse con la hoja de estilos usando la
etiqueta <link> ubicada en la cabecera del documento.
<head> – se declara en la
sección de head
<link rel="stylesheet" type="text/css" href="estilo1.css">
<link rel="stylesheet" type="text/css" href="estilo1.css">
</head>
rel="stylesheet"
indica que la relación es una hoja de estilo.
type="text/css" dice
que el tipo es texto y css.
href="fuentes.css" el
nombre del documento que contiene el código css.
También es importante
mencionar que todos los elementos del documento HTML heredarán las reglas de
estilo del archivo externo css, pero que es posible invalidar el estilo de
ciertos elementos individuales usando el atributo style en dichos elementos.
div class="MsoNormal" style="line-height: normal; text-align: justify;">Posicionamiento
El posicionamiento en una hoja de estilo hace
referencia al lugar (coordenadas) que puede ocupar cualquier contenido de una
caja dentro de una página web. Proporcionan al diseñador un dominio total
de la estructura de la página sin necesidad de recurrir al uso de tablas,
obteniendo así una buena organización del código HTML o XHTML.
Para trabajar con posiciones dentro de una página
web se utiliza la propiedad position esta puede tomar los siguientes valores:
“position: static”: es el valor predefinido por defecto de todos
los elementos HTML. Los elementos se van colocando uno a continuación de otro,
cuando se utiliza este valor.
“position: absolute”: permite
colocar la posición de una caja en cualquier punto de la página de manera
completamente independiente de los demás elementos, los cuales pueden además
superponerse por encima o por debajo.
La propiedad desplazamiento de la caja se controla
con las propiedades top, right, bottom y left, cabe destacar que para el valor
static las propiedades anteriores no se utilizan.
Ejemplo:
Codigo de ejemplo:
<html>
<head>
<title>Uso de las etiquetas de
posicionamiento</title>
<link
type="text/css" rel="stylesheet" href="miCSS.css"
/>
<style
type="text/css">
}
.estatico{
position:
static
background-color:yellow;
}
.absoluto{
position:absolute;
left:50px;
top:400px;
background-color:yellow;
}
.relativo{
position: relative;
left:300px;
top:50px;
background-color:yellow;
}
</style>
</head>
<body>
<div
id="head" class="cabecera">
<h1>EJEMPLO DE POSICIONAMIENTO
CON CSS</h1>
</div>
<div id="estatico"
class="estatico">
</div>
<div id="absoluto"
class="absoluto">
</div>
<div id="relativo"
class="relativo">
</div>
</body>
</html>
Declaración de Hojas de Estilos en la Página Web
Para declarar estilos CSS en
una página web en construcción, existen reglas muy conocidas, una de
estas reglas permite que la declaración se haga dentro de la misma sintaxis de
creación de la página web o documento HTML.
“Los etilos CSS sirven para dar
presentación a los documentos HTML y XML por contenidos.”
El
estilo debe ser declarado en
la página web (o documento HTML) en la sección <head> (encabezado
del documento) y después de <title> (titulo del documento
como lo mostrara el navegador).
Ahora utilizamos el elemento <style>, en el interior del
documento lo cual permitirá que el estilo sea reconocido antes de que la página
web se cargue por completo, lo siguiente es un ejemplo de tal sintaxis:
<head>
<title>Aquí va un título</title>
<style type="text/css">
h1, h2, h3 {
font-weight: normal;
color: blue;
}
</style>
</head>
Utilizando el código anterior los encabezados son de tamaño normal que corresponde según su nivel y de color azul.
Fíjense bien que
se han utilizado estilos directamente sobre aquellos elementos que lo permiten
a través del atributo <style>.
Los selectores h1, h2 y h3 le dicen al navegador la
parte del documento que se verá afectada por esa regla; es decir, los
encabezados de nivel uno, dos y tres.
Los selectores pueden
aparecer individualmente o agrupados, separándolos con comas.
Agrupados así:
h1, h2, h3 {
font-weight: normal; color: blue;
}
O lo que es lo mismo separados, así:
h1 { font-weight: normal; color: blue; }
h2 { font-weight: normal; color: blue; }
h3 { font-weight: normal; color: blue; }
Utilizando en el
documento HTML los selectores y escribiendo las reglas por separado obtenemos
este resultado (no muy distinto del primer
ejemplo) los encabezados de tamaño normal como corresponden según su
nivel y el color de letra azul:
Las propiedades, que en este caso serían font-weight y color, especifican
qué aspecto se va a cambiar. En este ejemplo la propiedad cambiada será el
tamaño de la fuente y el color.
Las
propiedades que se desean modificar en una CSS para un mismo selector pueden
agruparse, pero será necesario separar cada una de ellas con un punto y coma.
h1 { font-weight: normal; color: blue;
padding-left: 11px;
font-family: "Times New Roman";
color: red;
background-color: #d8da3d;}
El valor, representado a la derecha de
los dos puntos (:), establece el valor de la propiedad. Es importante recordar
que si el valor está formado por más de una palabra, hay que ponerlo entre
comillas.
h1 { font-family: "Times
New Roman"; }
Cajas CSS
¿Qué es el
modelo de caja CSS?
Antes de CSS, se usaban las tablas para estructurar
un sitio web, ahora tenemos el modelo de caja que es un conjunto de propiedades
que definen como se muestran y se alinean los elementos HTML
(cajas/rectángulos).Las cajas de una página se crean automáticamente. Cada vez
que se inserta una etiqueta HTML, se crea una nueva caja rectangular que
encierra los contenidos de ese elemento.
Las cajas de las páginas no son visibles a simple
vista porque inicialmente no muestran ningún color de fondo ni ningún borde.
Los navegadores crean y colocan las cajas de forma
automática, pero CSS permite modificar todas sus características. Cada una de
las cajas está formada por seis elementos:
Las partes que componen cada caja y su orden
de visualización desde el punto de vista del usuario son:
- Objeto de contenido: se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
- Relleno (padding): espacio libre opcional existente entre el contenido y el borde. Define el borde del elemento, por defecto es 0, osea sin borde.
- Borde (border): línea que encierra completamente el contenido y su relleno.
- Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
- Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
- Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).
Si una caja define tanto un color como una imagen
de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante,
si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen
tiene zonas transparentes, también se visualiza el color de fondo. Combinando
convenientemente cada una de estas partes se obtienen resultados muy
interesantes.
Uso de div y Span
La etiqueta <span>
La etiqueta <span> permite agrupar varios
elementos en línea seguidos dentro de un mismo bloque (por ejemplo, varias
palabras seguidas en un párrafo), para después darles formato con la hoja de
estilo.
Qué es una división <div>
La etiqueta <div> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.
El <span>
funciona sin salto de línea y este puede ser modificado desde un estilo de css
en cambio, el <div> si
aplica un salto de línea y trabajo en bloque y también se puede aplicar un
estilo css y crear mayor realce.
<html><head>
<title>Que es el DIV</title>
<style type="text/css">
div {
background-color: lightblue
margin: 25px;
padding: 2px;
}
span.resaltar{
color: red;
font-size:bold;
font-family: Tahoma;
}
span.fecha{
font-style: oblique;
text-decoration: underline;
}
</style>
</head>
<body>
<p>
La etiqueta <strong>DIV</strong> define una división. Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.
<div>
<p>El comienzo de la eternidad empieza aqui en la tierra, la cuál es una antesala a donde queremos llega y es a Dios.</p>
</div>
<div>
<p>El lenguaje de html es fundamental para el diseño web.</p>
</div>
<br>
<br>
<p>La etiqueta <strong>Span</strong> Cada regla consta de: un selector (P) que identifica (o selecciona) un elemento de la página Web.
</p>
<p>La
<span class="resaltar">Las reglas CSS</span> Las declaraciones, a su vez, tienen dos partes: una
propiedad (background-color,
color) que consiste en alguna de las palabras claves definidas por el lenguaje</span><span class="fecha">Mini guia CSS</span></p>
</body>
</html>
</html>
Estructura de las Reglas CSS
Una regla es un tipo de estamento que (1)
identifica un elemento de la página HTML y (2) le indica al navegador el estilo
que deberá tener ese elemento. El siguiente es un ejemplo de una regla CSS:
P {
background-color: red;
color: #FFFFFF
}
Cada regla consta de: un selector (P) que identifica (o selecciona) un elemento de la
página Web.Al selector le sigue un bloque de declaraciones que comienza con una llave de apertura ({)
y termina con otra llave de cierre (}). Entre las llaves van las declaraciones (background-color: red;
color: #FFFFFF), que son las que le indican al browser el estilo para el
elemento seleccionado.
Las declaraciones, a su vez, tienen dos partes: una
propiedad (background-color,
color) que consiste en alguna de las palabras claves definidas por el lenguaje,
seguida de dos puntos (:) y un valor
(red, #FFFFFF) para esa propiedad. Existen distintos valores y cada propiedad
puede aceptar algunos de esos valores.
El ejemplo anterior provocará que los párrafos
(elementos P) de la página Web tengan de primer plano (color) un color blanco
(#FFFFFF) y un fondo (background-color) de color rojo (red). Cuando hay más de
una declaración, como en este caso, deben ir separadas entre sí por punto y
coma (;).
En un Elemento
Así como podemos crear hojas de estilos individuales,
también se pueden crear estilos individuales con nombre aplicados a un solo
elemento. Los elementos HTML pueden utilizar un clase de estilo y un estilo
individual con nombre. Normalmente estos se utilizan para expresar excepciones
de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL,
podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia
respecto a la clase PRINCIPAL.
También son útiles para definir capas de
contenidos HTML posicionadas de forma precisa.Parar definir estilos con nombre,
en sintaxis CSS, se precede el nombre con el signo #.En JavaScript se utiliza
la propiedad ids.
Para aplicar el estilo a un elemento, se utiliza el
nombre de estilo individual como valor del atributo ID.
En el siguiente código se crea una clase de estilo llamada PRINCIPAL. Esta clase especifica una fuente de 15 puntos, negrita y de color rojo, y una interlínea de 20 puntos. También se define un estilo con nombre llamado AZUL1 cuyo colokr es azul.
Sintaxis CSS
<style type="text/css">
.PRINCIPAL
{
line-height: 20pt;
font-zize: 15pt;
font-weigth: bold;
color: red;
}
#AZUL1 {color: “blue”};
</style>
Sintaxis JavaScript
<style type="text/javascript">
with(classes.PRINCIPAL.all)
{
lineHeight = "20pt";
fontSize = "15pt";
fontWeight = "bold";
color = "red";
}
ids.AZUL1.color = "blue";
</style>
No hay comentarios.:
Publicar un comentario
Gracias por tu comentario