FAQ's de CSS

jamesxv7 · #31 (**permalink**) 29/12/2003, 14:53

P: Puedo usar Pseudo-clases con Clases en CSS?
R: Si... ejemplo:

Código:

a.colores:visited {color: #FF0000}

<a class="colores" href="pagina_web.php">Ejemplo combinando Pseudo clases y Clases</a>

epa2 · #32 (**permalink**) 07/01/2004, 06:00

ESTILO DE LISTAS SIN ORDENAR

Créditos: Bravenet

Código:

<style type="text/css">
ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ul.none {list-style-type: none;}
</style>
<ul class="square">
<li>ecommerce</li>
<li>webtools</li>
</ul>
<ul class="disc">
<li>ecommerce</li>
<li>webtools</li>
</ul>
<ul class="none">
<li>ecommerce</li>
<li>webtools</li>
</ul>
<ul class="circle">
<li>ecommerce</li>
<li>webtools</li>
</ul>
<ul class="none">
<li>ecommerce</li>
<li>webtools</li>
	<ul class="square">	
	<li>ecommerce</li>
	<li>webtools</li>
		<ul class="circle">
		<li>ecommerce</li>
		<li>webtools</li>
			<ul class="disc">
			<li>ecommerce</li>
			<li>webtools</li>
			</ul>
		</ul>
	</ul>
</ul>

furoya · #33 (**permalink**) 07/01/2004, 17:18

P : ¿Cómo puedo cambiar el tamaño relativo de las barras de desplazamiento?.
R : Existe un bug en Internet Explorer por el cual considera al scrollbar como parte del documento. Desde la versión 5.5 es posible usar el atributo CSS zoom que, aplicado sobre el BODY, cambia el tamaño del documento y sus barras de desplazamiento.

El truco para que sólo los scrollbar se vean de distinto tamaño está en poner nuestro contenido dentro de un DIV y darle un zoom con un factor inversamente proporcional al que tenga el BODY.

Por ejemplo : si el valor por omisión del zoom es de 100%, y el BODY tiene aplicado uno de 200% ( el doble ), en el DIV habrá que poner uno de 50% ( la mitad ). Ésto compensa el cambio original creando el efecto de "scrollbar agrandado"

Código:

<HTML>
<HEAD>
<STYLE> 
body {zoom:2; margin:0; border:none} 
</STYLE>
</HEAD>
<BODY>
<DIV style="zoom:0.5; margin:2% 1.5%"> 
<h2>DOCUMENTO </h2>

QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 
QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 
QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 
QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 
QWERTY <P> QWERTY <P> QWERTY <P> QWERTY <P> 
</DIV>
</BODY>
</HTML>

En el tema "Propiedades del scroll " hay un script que permite calcular ambos valores de zoom con una vista previa.

furoya

w|six-nine · #34 (**permalink**) 07/03/2004, 19:30

FAQ 36

P: Aplicar dos o más clases a un mismo elemento

R: Supongamos que queremos que un elemento, por ejemplo un párrafo (<p>), tenga las declaraciones de dos clases distintas:

Nuestro archivo estilo.css:

Código:

.aviso {
    font-weight: bold;
    border: 1px solid #c00;
}
.centrado {
    text-align: center;
}

Nuestro archivo XHTML:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es-ES">

<head>

<title>Aplicando varias clases a un elemento</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./estilo.css" />

</head>

<body>

<p class="aviso centrado">
    Este es un p&aacute;rrafo de aviso y con el texto centrado.
</p>

</body>

</html>

Como veis es tan sencillo como escribir las clases que queramos aplicar al elemento en cuestión separadas por un espacio. Esto se puede incrementar si creamos un selector de ID (# en lugar del .) y declaramos mas propiedades.

Esta propiedad se debe a que las declaraciones de estilo soportan la herencia, tanto como si en dos archivos declaramos la misma clase, añadiendo ciertas declaraciones ademas de las que ya tenía, como si hacemos lo que yo os propongo en esa FAQ, que es "sumar" las declaraciones de dos clases en un solo elemento.

Como apreciación, decir que las hojas de estilo aplican (si es que existe otra anterior) la ultima declaración, de ahí su nombre de hojas de estilo en cascada; es decir, que si en la primera clase declaramos una alineación a la derecha, y en la siguiente clase que le aplicamos al elemento, declaramos una alineacion centrada, el elemento va a tomar la última.

derkenuke · #35 (**permalink**) 16/03/2004, 11:43

P: ¿Como poner un borde double con diferente color cada linea?

R: La respuesta la encontre sin querer:

Código PHP:

  <table border="1" style="border:solid 1 blue;" bordercolor="red"> 
    <tr> 
        <td>Contenido bordeado</td> 
    </tr> 
</table>

Se pueden hacer cosas interesantes y esteticas por ejemplo si ponemos al style: "border:double 4 blue;"

Y si luego hacemos tonterias con los atributos de tablas y juntandoles css buenooo..

Código PHP:

  <table border="1" style="border:double 4 blue; border-left-color:black; border-top-style:dotted;" bordercolor="red" bordercolordark="#c0c0c0"> 
    <tr> 
        <td>Contenido bordeado</td> 
    </tr> 
</table>

Bueno y a partir de ahi lo que querais, espero que os sirva

Un saludo a todos

Rebel001 · #36 (**permalink**) 31/05/2004, 17:25

E aquí otro estilo que me gusta mucho

Código:

/* Base , Set up fonts etc.    */
body
{
	font				: 0.8em Trebuchet MS, Arial, Sans Serif;
	background-color	: #888888; 
	margin				: 0px;
	padding				: 10px 0px;
}
h1
{
	font				: bold 1.4em Trebuchet MS, Arial, Sans Serif;
}

a, a:visited
{
	text-decoration		: underline;
	color				: #b9a1e6;
}
a:hover
{
	color				: #e6e6e6;
}


#extraContent a, #extraContent2  a:visited, #extraContent2 a, #extraContent2 a:visited
{
	text-decoration		: underline;
	color				: #ccb1fd;
}
#extraContent  a:hover, #extraContent2  a:hover
{
	color				: #fdfdfd;
}


#pageHeader a, #pageHeader a:visited, #pageFooter a, #pageFooter a:visited
{
	text-decoration		: underline;
	color				: #ccb3ff;
}
#pageHeader a:hover, #pageFooter a:hover
{
	color				: #ffffff;
}


#pageWrapper
{
	width				: 760px;
	margin				: 0px auto;
	border				: solid #9278c7;
	border-width		: 1px;
	background-color	: #080017;
}

#pageHeader 
{
	background			: #270073;
} 
#pageHeader h1
{
	font-size			: 150%;
	margin				: 0px;
	padding				: 2px 20px 2px 5px;
	color				: #ffffff;
}

#mainContent
{
	position			: relative;
	margin 				: 10px 10px 10px 220px;
	background-color	: #080017;
	color				: #d7cfe6;
}


#extraContent, #extraContent2
{
	display				: inline;
	float				: left;
	clear				: left;
	width				: 198px;
	margin				: 10px;
	border				: 1px solid #9278c7;
	background-color	: #10002e;
	color				: #fdfdfd;
}
#extraContent
{
	margin-bottom: 0px;
}
#userLinks
{
	display				: inline;
	float				: left;
	clear				: left;
	width				: 200px;
	margin-left		: 10px;
}


#userLinks h1
{
	font-size			: 100%;
	padding				: 2px 5px;
	background-color	: #1f005c;
	color				: #eee6ff;
	border				: 1px solid #9278c7;
	margin				: 10px 0px 0px;
}

#userLinks ul
{
	display				: block;
	list-style-type		: none;
	margin				: 0px;
	padding				: 4px 10px;
	background-color	: #10002e;
	border				: solid #9278c7;
	border-width		: 0px 1px 1px;
	color				: #fdfdfd;
}

#extraContent a,  #extraContent a:visited, #userLinks ul a, #userLinks ul a:visited
{
	color				: #fdfdfd;
}
#userLinks ul a:hover, #extraContent a:hover
{
	color				: #ccb1fd;
}

#pageFooter
{
	clear				: both;
	border				: solid #9278c7;
	border-width		: 1px 0px 0px;
	padding				: 5px;
	background-color	: #270073;
	color				: #eee6ff}

#pageFooter h6
{
	padding-left		: 10px;
	margin				: 0px;
	font-size			: 90%;
	font-weight			: normal;
}





/* Top Horizontal Navigation */

#siteNavigation
{
	width				: 100%;
	border				: solid #9278c7;
	border-width		: 1px 0px;
	background-color	: #1f005c;
}
#subPageBreaker
{
	display				: none;
}
#listBreaker
{
	clear				: both;
	display				: block;
}

#siteNavigation ul
{
	list-style-type		: none;
	margin				: 0px;
	padding				: 0px;
}


#siteNavigation ul li 
{
	display				: inline;
}

/* Setup Navigation Buttons */

#siteNavigation a, #siteNavigation a:visited
{
	font-size			: 90%;
	font-weight			: bold;
	float				: left;
	padding				: 2px 10px;
	text-decoration		: none;
	background-color	: #1f005c;
	color				: #eee6ff;
}
#siteNavigation a:hover
{
	background-color	: #10002e;
	color				: #ede4fd;
}

/* No title for horizontal navigation */
#siteNavigation h1
{
	display				: none;
}


#bntag
{
	background-color: #080017;
	color				: #d7cfe6;
	padding: 2px 0px; 
	text-align: center;
	width	: 760px;
	margin	: 0px auto;
	font-size: 90%;
}

epa2 · #37 (**permalink**) 08/06/2004, 08:34

Hola amigos, aquí teneís unos buenos consejillos para poner mas "guapa" esas líneas horizontales en la page <hr>

Creo que solo vale para IE. pero bueno,
Creditos: Bravenet.

SIMPLE LÍNEA CON COLOR Y ANCHO

Código:

<hr style="background-color:#f00;height:3px;">

LINEA CON ANCHO, COLOR Y COLOR DE BORDE

Código:

 <hr style="background-color:#f00;height:3px;border-color:#ff00ff">

LINEA CON BORDE Y CON IMAGEN DE FONDO

Código:

<hr style="background-image: url(/imagen.gif); height:6px;">

epa2 · #38 (**permalink**) 28/09/2004, 04:48

FAQ 40
Pregunta: ¿como puedo en mi página web o sitio personalizar el cursor del ratón para los visitantes de mi page?
Observaciones: Esta faq proviene de la número 3 editada por Tunait
Créditos: Bravenet
Respuesta: Primero, con algún programilla tipo editor de cursores, crea tu propio "dibujito". Los archivos de cursores suelen ser los de extensión .cur o .ico o cualquier otra extensión como jpg, gif, png, etc...
Una vez creado/elegido el "dibujito" para el cursor copia en siguiente código en el tag head de tu page....

Código PHP:

  <style type="text/css"> 
body, a  
{cursor: url(http://www.tusitio.com/cursor.cur);} 
</style>

nos vemos por la feria del tocino

salu2

epa2 · #39 (**permalink**) 28/09/2004, 05:08

FAQ 41
Observaciones y consideraciones: Por motivos que no voy a explicar al caso, existen navegantes que odian los iframes en una página web. Una buena opción para "sustituirlos" son las capas o div, por eso, cabe preguntarse....

pregunta: ¿Cómo puedo personalizar un div utilizando CSS?
Respuesta: Mira el código más abajo
Créditos: Bravenet

Código PHP:

  <div style="border: 1px solid #aaa;background-color:#f9efef; height:65px; overflow:auto; color:#135;"> 
 
<p>Escribe aquí o inserta lo que irá de contenido en la capa.</p> 
 
</div>

notas finales: Observa en el ejemplo del código que no se ha establecido el width de la capa, si lo quisieras añadir, tan solo escribe width: 100px despues de la estiqueta <div style= así como....
style="width: 100px; border: 1px solid #aaa...

Observa tambien que la capa imitando al iframe será con el scroll automatico.

Tambien puedes cambiar el color del borde y fondo de la capa cambiando el valor exadecimal despues del caracter #

En fin, nos vemos por la feria del tocino

Makermax · #40 (**permalink**) 11/11/2004, 23:42

Faq 42

Pregunta: ¿Por qué a veces en Mozilla o Netscape, no se ven los estilos como los declaré antes en el CSS?
Respuesta: Netscape o Mozilla reconocen clases que esten escritas sólo con letras.

Por ejemplo:

Código PHP:

  .menu1 {TEXT-DECORATION:underline;color: #FFFF00;}

No lo va a soportar netscape, pues la clase tiene un número ( .menu1)

En cambio...

Código PHP:

  .menua {TEXT-DECORATION:underline;color: #FFFF00;}

Si lo va a soportar y lo va a leer bien, como corresponde.

//Después de mucho, descubrí esto y quizás a alguien más le pueda servir.

Adiós!

KnowDemon · #41 (**permalink**) 26/12/2004, 22:54

Pregunta: ¿Es posible construir un rollover con CSS?

¡Es posible!...

Como será construido:

Utilizaremos un div, un elemento a, y un span para crear nuestro rollover.

Supongamos que nuestro rollover mide 100x50 pixeles.

El HTML quedará más o menos así:

<div id="resaltado">
<a id="sinresaltar" href="pagina.html"><span>Texto</span></a>
</div>

Y el código CSS así:

div#resaltado, a#sinresaltar{
height: 50px;
width: 100px;
}
div#resaltado{
background: url(resaltado.png);
}
a#sinresaltar{
display: block;
background: url(sinresaltar.png);
}
a#sinresaltar:hover{
background: transparent;
}
a#sinresaltar span{
display: none;
}

El div nos servira para precargar la imagen de resalte del rollover pues lo usamos como su fondo... que solo se descubrira cuando pase el ratón sobre a, de los contrario se verá el fondo de a, que es el rollover sin resaltar.

El span lo usamos para aquellos gestores de contenido no gráficos, para que el usuario tenga información sobre el enlace... En navegadores gráficos no se verá...

Voalá!!!!

Durgeoble · #42 (**permalink**) 04/01/2005, 04:51

Pregunta: ¿como aplico un mismo estilo a varias partes del documento sin repetirlo cada vez?
Pregunta: ¿puedo aplicar un estilo a un elemento que este dentro de otro sin definirlo?
Pregunta: ¿que son y como funcionan las clases?¿y los elementos?
Respuesta: Si se puede, lee a continuacion
Elementos
Un elemento es cualquier identificativo html:

table
div
p
span
b
body
ect

todos son elementos a los cuales se les puede aplicar propiedades, cualquier etiqueta html es subcestible de ser un elemento.

La forma correcta de aplicar propiedades a un elemento es la siguiente:

Código:

 elemento { propiedad1: valor; propiedad2: valor; propiedadX: valor;}

Clases

Una clase no es mas que un identificativo que le ponemos a una etiqueta html (no confundir con #id) para situarla dentro de un grupo.

Las clases las definimos nosotros mismos, por ejemplo:

.miclase
.cabecera
.comentario
.wea
.loquesea

y aplicarla a un elento es tan sencillo como incluir class="clasequequeramos" en dicho elemento.
Ejemplo:

Código HTML:

 <b class="miclase">texto</b>
 <b class="otraclase">texto</b>
 <b>texto</b>

esto haria que el primer <b> fuera de la clase miclase, el segundo de otraclase y el tercero no perteneciera a ninguna.Es preferible no usar numeros en las clases ya que pueden ocasionar conflictos en algunos navegadores.

La forma de aplicar las propiedades a una clase es identica a la de aplicarlas a un elemento.

Con una clase se pueden aplicar propiedades a elementos distintos.
Por ejemplo:

Código HTML:

 .colorrojo { color: red; }

haria que esto

Código HTML:

 <table class="colorrojo" >
    <p class="colorrojo">
    <a href="direccion" class="colorrojo">

saliera en todos los casos en color rojo

Mientras que

Código:

 .colorverde { color: green;} 
 b.colorverde { color: red;}

haria que cualquier etiqueta con clase .colorverde tuviera texto verde excepto las <b> que lo tendrian rojo.
Tambien puedes poner elementos anidados

Por ejemplo tienes una tabla con celdas azules y texto rojo y zeldas rojas y texto azul (muy hortera lo se :P)
Las celdas son .roja y .azul (aqui valdria cualquier elemento table, p, span, div, tr.yoquese, ect)

Código HTML:

 .rojo a {color: blue;}
    .azul a {color: red;}

De esta forma cualquier elemento .rojo que contuviera un enlace este seria azul (hasta haverlo visitado, para eso esta a:hover y a:visited) y cualquier elemento .azul contendria enlaces en rojo
Otro ejemplo

Código HTML:

 table div { color: lime;}
 p div {color:black;}

haria que el texto dentro de un div que estuviera en una tabla fuera lima mientras que de estar dentro de un <p>(parrafo) seria negro (en caso de estar dentro de un <p> que estuviera dentro de una tabla seguiria siendo negro puesto que el div estaria subliminado al <p> no al table

Para mas informacion http://html.conclase.net/w3c/css1-es.html

Espero haver ayudado

epa2 · #43 (**permalink**) 07/01/2005, 10:50

FAQ 45
Pregunta: ¿Cómo puedo crear un efecto de sombra utilizando css
Respuesta: Con este sencillito código, la idea es crear dos capas casi iguales que "casi" se solapen..

Código PHP:

  <HTML>
<HEAD>
</HEAD>  
<BODY bgcolor=yellow>  


<DIV style="position: absolute; 
top: 15px; 
width: 370px;
height: 80px; 
font-size: 60pt; 
font-family:Verdana; 
color:808080">EPA2</DIV>
 
<DIV style="position: absolute; 
top: 10px; 
width: 370px;
height: 80px; 
font-size: 60pt; 
font-family:Verdana; 
color:red">EPA2</DIV>

</BODY>
</HTML>

Durgeoble · #44 (**permalink**) 09/01/2005, 12:57

FAQ 46
Pregunta: ¿como puedo meter imagenes en mi pagina y que se ajusten al tamaño que yo quiero sin usar un programa de edicion grafica?
Pregunta: ¿como puedo evitar que una imagen me descoloque el contenido?

Respuesta: con max-width , max-height , min-width

Código:

 
 div.imagen img {
 width: 100% ;
 heigth: 100% ;
 }
 /* Aqui se especifica el tamaño maximo en ancho y alto de la imagen */
 .imagen {
 max-width: 100px;
 max-height: 200px;
 }
 /* Si queremos que se ajuste al espacio disponible sin tener que definirlo
  cada vez */
  .imagen {
  max-width: 100%;
  max-height: 100%;
  }

De esta forma cualquier imagen contenida en un div con class="image" se ajustara automaticamente en tamaño al especificado del div.

Matthew_182 · #45 (**permalink**) 15/01/2005, 11:59

FAQ: 48
Pregunta: ¿Cual es la diferencia de :Link a .Link?
Respuesta: :Link se aplica a todos los link y .Link tienes que seleccionarlo manualmente para que funcione.
-----------------------------------------------------------------
Si hacemos esto (Ponemos : en vez de .) :

Código HTML:

<html>
  <head>
      <style type="text/css">
       :Link {
       text-decoration:none;
       color:000000;
       }
      </style>
  </head>
  <body>
      <a href="#">Mi link </a> 
  </body>
</html>

Todos los links inmediatamente quedan negros sin subrayar
-------------------------------------------------------------
Pero si hacemos esto (le agregamos el . en vez de :) :

Código HTML:

<html>
  <head>
     <style type="text/css">
        .Link {
       text-decoration:none;
       color:000000;
       }
     </style>
  </head>
  <body>
    <a href="#" class="Link">Mi link </a> 
  </body>
</html>

Para que funcione tendriamos que agregarle dentro de <a href="#"> esto class="Link" que seria igual a esto <a href="#" class="Link">.