Cargando...


Hojas de Estilo en Cascada CSS Parte 2




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"

Hojas de Estilo en Cascada CSS parte2

p
{
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"> 

</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.


“position: relative”: desplaza una caja respecto de su posición original.


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:
  1. 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.)
  2. Relleno (padding): espacio libre opcional existente entre el contenido y el borde. Define el borde del elemento, por defecto es 0, osea sin borde.
  3. Borde (border): línea que encierra completamente el contenido y su relleno.
  4. Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
  5. Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
  6. 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.


</p>
<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>

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>






Haga clic aquí para ver los comentarios 0 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios

Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Directorios Web. Publicar Blogs


En estos sitios puedes promocionar tus sitios web y blog
Directorio de Blogs Blogazos.com Directorio Mexicano Directorio 360dir

Formulario de Contacto

Nombre

Correo electrónico *

Mensaje *