Deprecated: Creation of dynamic property wpdb::$categories is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Creation of dynamic property wpdb::$post2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Creation of dynamic property wpdb::$link2cat is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php on line 760 Deprecated: Using ${var} in strings is deprecated, use {$var} instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/comment-template.php on line 1745 Deprecated: wp_getimagesize(): Implicitly marking parameter $image_info as nullable is deprecated, the explicit nullable type must be used instead in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/media.php on line 5180 Deprecated: Creation of dynamic property POMO_FileReader::$is_overloaded is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 26 Deprecated: Creation of dynamic property POMO_FileReader::$_pos is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 29 Deprecated: Creation of dynamic property POMO_FileReader::$_f is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/streams.php on line 160 Deprecated: Creation of dynamic property MO::$_gettext_select_plural_form is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/pomo/translations.php on line 293 Deprecated: Creation of dynamic property WP_Block_Type::$skip_inner_blocks is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-block-type.php on line 357 Deprecated: Calling get_class() without arguments is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-http.php on line 328 Deprecated: Return type of Requests_Cookie_Jar::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 63 Deprecated: Return type of Requests_Cookie_Jar::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 73 Deprecated: Return type of Requests_Cookie_Jar::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 89 Deprecated: Return type of Requests_Cookie_Jar::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 102 Deprecated: Return type of Requests_Cookie_Jar::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Cookie/Jar.php on line 111 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 40 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 51 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 68 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 82 Deprecated: Return type of Requests_Utility_CaseInsensitiveDictionary::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/Requests/Utility/CaseInsensitiveDictionary.php on line 91 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Deprecated: Creation of dynamic property WP_Term::$object_id is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/class-wp-term.php on line 198 Warning: Cannot modify header information - headers already sent by (output started at /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/wp-db.php:760) in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/feed-rss2.php on line 8 hojas de estilo – Ideas Fugaces https://www.pcpolis.es/blog Algunas buenas ideas que se presentan sin avisar... Thu, 12 Feb 2015 11:36:41 +0000 es hourly 1 https://wordpress.org/?v=5.9.13 Hojas de Estilo Alternativas Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/css/hojas-de-estilo-alternativas/ Mon, 17 May 2010 12:23:41 +0000 Deprecated: Creation of dynamic property WP_Term::$cat_ID is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 378 Deprecated: Creation of dynamic property WP_Term::$category_count is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 379 Deprecated: Creation of dynamic property WP_Term::$category_description is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 380 Deprecated: Creation of dynamic property WP_Term::$cat_name is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 381 Deprecated: Creation of dynamic property WP_Term::$category_nicename is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 382 Deprecated: Creation of dynamic property WP_Term::$category_parent is deprecated in /mnt/web522/e0/75/511171875/htdocs/blog/wp-includes/category.php on line 383 https://www.pcpolis.es/blog/?p=184 Una página web puede disponer de varias hojas de estilo que se adapten a las diferentes necesidades o preferencias del usuario. Desde el punto de vista de la accesibilidad y la funcionalidad esto es una gran ventaja. Para alternar entre varios estilos, primero hay que confeccionar las hojas de estilos que se deseen y luego añadir en la cabecera sus respectivos enlaces (link), especificando en cada uno si se trata de hojas de estilo persistentes, preferentes o alternativas.

Hoja de estilo persistente: se hace el atributo rel igual a «stylesheet» y no se establece el atributo title.
Hoja de estilo preferente: se hace el atributo rel igual a «stylesheet» y se da un nombre a la hoja de estilo mediante el atributo title.
Hoja de estilo alternativa: se hace el atributo rel igual a «alternate stylesheet» y se da un nombre a la hoja de estilo mediante el atributo title.

Luego se necesita un agente de usuario para intercambiarlos. En nuestro ejemplo será JavaScript, pero ya los navegadores como Firefox comienzan a asumir este papel. Sólo hay que ir al Menú / Ver / Estilos de la Página /… y seleccionar algunos de los que se hayan establecido.

Ejemplo 1: Estilos Normal y Extendido

Este ejemplo es una práctica y variación del que he encontrado en uno de los magníficos tutoriales de la Web de Illasaron. Aquí se han definido dos estilos para mostrar la imagen y el texto, de manera compacta al comienzo y extendida al pusar el botón (+). En el modo extendido la imagen ocupará el mayor espacio posible y el texto se colocará debajo, incluyendo también una parte que antes estaba oculta.

Bahía de la Habana y El Morro

La Bahía de la Habana y la fortaleza de
«El Morro»

( … ) Desde el lugar en el que se encontraba, la ciudad de la Habana adquiría en dirección a la bahía una perspectiva helénica de colores redivivos, con tantas columnas dóricas, jónicas y corintias que a cualquier buen observador le hubiera parecido excéntrico.

A todas horas la gente acudía con diferentes fines, pero sobre todo abundaban los que pretendían abandonarse en la contemplación del mar y sus meneos. Merodeaban por allí parejas mixtas en edad y sexo, madres que paseaban a sus hijos, habituales amantes del sedal y algunos silenciosos pregoneros. A escasos metros y formando un círculo en torno a una botella de ron, cinco hombres intentaban parafrasear con sus gaznates aquella máxima que aconseja combatir el fuego con fuego. En general era un ambiente tranquilo, turbado únicamente por algún amago de circulación del que eran responsables: bicicleteros, taxistas, boteros, un camión ruso que pasó dejando una humareda… ocasionales patrulleros.

«La Jinetera», 11/2002

Recuerda que sólo los Estilos Alternativos son excluyentes, de modo que si quieres que se aplique un estilo sin incluir ningún elemento del otro, ambos deben poseer el atributo rel=»altelnate stylesheet.» Puedes obtener más información sobre Hojas de Estilo Externas en los siguientes:

Enlaces Relacionados

W3C | illasaron.com | conclase.net

Mostrar / Ocultar el Código

(+/-)

Script en la Cabecera

( ... )

<link href="normal.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" type="text/css" href="extendido.css" title="alternativo" />
<script type="text/javascript" src="estilo_alternativo.js"></script>
</head>

Documento Javascript

//  estilos_alternativos.js

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

Estilos CSS

/*    compacto.css    */

div.imagen {
width: 40%;
border: thin silver solid;
margin-right: 1em;
padding: 0.5em;
float: left;
}

div.imagen img {
padding:0!important;
margin:0!important;
border:none!important;
}

div.imagen p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}

img.escala {
width: 100%;
}
div.texto {
width: 55%;
text-align:justify;
vertical-align:top;
float: left;
}

#contenedor {
width:100%;
margin-right:auto;
margin-left:auto;
margin-bottom:1em;
overflow:auto;
}

h1 {
margin:0;

}

div.texto p    {
margin:0;
}

.leer_mas    {
display:none;
}

#mostrar_ocultar {
display: none; // Este valor hace referencia a que cuando se carge la pagina se encuentre oculto
}

/*  extendido.css  */

div.imagen {
border:thin solid silver;
padding:0.5em;
width:100%;
}

div.imagen p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}

img.escala {
width: 100%;
}

div.texto {
width: 100%;
padding:0.5em;
text-align:justify;
margin:0;
vertical-align:top;
}

#contenedor {
width:100%;
margin-top:1em;
}

h1 {
margin-bottom:0.5em;
}

div.textop p    {
margin:0;
}
.leer_mas    {
display:block;
}

div.imagen img {
padding:0!important;
margin:0!important;
border:none!important;
}
]]>