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: 22-08-2017.

Visitas este mes: 91

Visitas el mes pasado: 141

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.




10. Trucos CSS (I)

10.1 Prioridad de hojas.

css

Estilo del navegador

Aparte de la hoja de estilos que aplica el diseñador de la página, existen otras dos hojas de estilo iniciales. Éstas aparecen de forma implicita al cargarse la página. Es el estilo que se aplica por defecto en caso de que el diseñador no haya aplicado ningún estilo.

En primer lugar está la hoja de estilos del navegador, o dispositivo en el que se muestra la página. Los navegadores aplican por defecto unos estilos básicos al cargar la página (tipo de letra, alineación, márgenes, etc.).

Estos estilos puede que no sean los mismos en todos los navegadores, y a veces son la causa de que una página no se vea igual en todos los navegadores.


Estilo de usuario.

En segundo lugar está el estilo del usuario. Cada usuario puede crear una hoja de estilos para aplicarla a todas las páginas que visite con su navegador. Esta opción suele ser útil para personas discapacitadas, para adaptar los contenidos a su discapacidad (mayor contraste, letras más grandes, etc.).

Insertar una hoja de estilos de usuario suele hacerse de forma diferente según cual sea el navegador.

En Internet Explorer

En Mozilla Firefox

En Opera

En Safari


Prioridad en las hojas de estilo

Las hojas de estilo se aplican en el siguiente orden: Primero la hoja del navegador, Segúndo la hoja del usuario, y tercero la hoja del diseñador.

La última hoja aplicada es la que tiene mayor prioridad en caso de reglas contradictorias, por tanto la hoja del diseñador tiene más prioridad que la del usuario, y ésta más prioridad que la del navegador.


La palabra clave !important

La palabra !important (obsérvese que lleva el signo de admiración delante), colocada detrás de cualquier propiedad CSS, da prioridad a esa regla sobre las demás. Por ejemplo:

p { color: blue !important; }

p { color: red; }

En este ejemplo la primera regla anula a la segunda al llevar la declaración !important a pesar de que la segunda esté escrita después que la primera, lo que debería darle prioridad; por lo tanto los párrafos se verán en azul.

Esto no sólo funciona dentro de una misma hoja, sino que al aplicar diferentes hojas, la declaración !important tiene prioridad sobre las demás hojas.

En caso de que en un mismo estilo tengan la declaración !important la hoja del diseñador y la del usuario, tendrá prioridad la del usuario. Por tanto las hojas de estilo se aplican en el siguiente orden:

Prioridad de estilos

La declaración !important en la hoja del usuario tiene prioridad sobre todas las demás, en segundo lugar tiene prioridad la declaración !important del diseñador, en tercero la hoja del diseñador, en cuarto la hoja de estilos del usuario y en último la hoja del navegador.


Inicializar estilos

La hoja de estilos del navegador establece el estilo inicial por defecto a todos los elementos HTML: tamaños de letra, decoración del texto, márgenes, etc. Esta hoja de estilos siempre se aplica a todas las páginas web, por lo que si una página no incluye ninguna hoja de estilos propia, el aspecto con el que se muestra en el navegador es el de esta hoja de estilos.

El problema de las hojas de estilo de los navegadores es que los valores que aplican por defecto son diferentes en cada navegador, aunque suelen coincidir en algunos valores importantes.

Suelen coincidir por ejemplo en el tipo y color de letra (letra tipo serif, color negro), pero suelen variar en aspectos como valor de los márgenes, títulos de sección (etiquetas h1 ... h6), tabulación en las listas, etc. Esto hace que la misma página pueda verse diferente en distintos navegadores.

Para solucionar este problema debemos crear unos estilos iniciales. es decir, crear nosotros mismos los estilos por defecto, inicializar los estilos.

algunos sitios complejos o extensos utilizan su propia hoja para inicializar estilos, la cual se aplica la primera de todas. En otros basta con poner los estilos que se inicializan al principio de la hoja. Así por ejemplo poner al principio de la página :

* { margin: 0; padding: 0 ; }

nos asegura que todos los márgenes externos e internos se verán iguales en todos los navegadores.

Aparte de los márgenes también podemos definir otros elementos al principio: tipo, color y grosor de letra, etc. Normalmente se suele usar el selector universal ( * ) o el selector body para definir las características comunes a todo el sitio, e igualar las diferencias entre los distintos navegadores. y los selectores de etiqueta para dar un aspecto específico a las diferentes partes del contenido.

En un sitio complejo o extenso se suelen aplicar varias hojas de estilo. Debemos aplicar primero las de caracter más general, y en último lugar las más concretas. Así aplicaremos primero la hoja de incialización, después la general del sitio, después la de la sección, y por último la de la página o páginas similares. Así nos aseguramos de que ningún estilo específico es sobreescrito por un estilo más general.




En la siguiente página veremos cómo igualar las diferentes columnas del diseño de una página.

Columnas iguales.



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