FAQ's de CSS

CORE · #16 (**permalink**) 28/02/2003, 16:40

Etuiqueta Title
Esto funciona como el ALT de las imagenes pero en Tablas ,Botones , Textos, etc.

<table title="Texto para descripcion" width="100%" border="0">

<span title="Texto para descripcion">Hola</span>

<input type="submit" name="Submit" title="Texto para descripcion" value="Enviar">

Imagenes de rastreo
<body tracingsrc="Imagen.jpg" tracingopacity="81">

Importando CSS dentro de otra Hoja

@import url(otra_hoja.css);

CORE · #17 (**permalink**) 28/02/2003, 17:05

Tips para CSS

/* usa siempre nombres en mayusculas para identificar al elemento */

/*Modulos de Texto

ABBR {}
ACRONYM {}
ADDRESS {}
BLOCKQUOTE {}
BR {}
CITE {}
CODE {}
DFN {}
DIV {}
EM {}
H1 {}
H2 {}
H3 {}
H4 {}
H5 {}
H6 {}
KBD {}
P {}
PRE {}
Q {}
SAMP {}
SPAN {}
STRONG {}
VAR {}

/*Modulos de Hipertexto*/

A:link { } /* vínculos no visitados */
A:visited { } /* vínculos visitados */
A:hover { } /* el usuario señala el vínculo */
A:active { } /* vínculos activos */

*/

/* Modulos de Imagenes*/

IMG {}

/* los IDs van siempre con un #, ordenalos por orden alfabetico */

/* Modulos de Tablas

CAPTION {}
COL {}
COLGROUP {}
TABLE {}
TBODY {}
TD {}
TFOOT {}
TH {}
THEAD {}
TR {}

*/

/* Modulos de Formularios

BUTTON {}
FIELDSET {}
FORM {}
INPUT {}
LABEL {}
LEGEND {}
SELECT {}
OPTGROUP {}
OPTION {}
TEXTAREA {}

*/

/* Modulos de Edicion

DEL{}
INS{}

*/

/* Modulos de Listado

DL {}
DD {}
DT {}
LI {}
OL {}
UL {}

CORE · #18 (**permalink**) 13/03/2003, 00:46

Utilizando LIST en CSS

list-style-type : circle; (circulo) •
list-style-type : square; (cuadro) •
list-style-type : decimal; (numeros) 1.
list-style-type : lower-roman; (N. romanos Minuscula) i.
list-style-type : upper-roman; (N. romanos Mayuscula) I.
list-style-type : lower-alpha; (letas minuscula, Incisos) a.
list-style-type : upper-alpha; (letras mayuscula, Incisos) A.
list-style-type : none; Nada
list-style : url(imagenes/estrella.gif); (Utilizando tus propias imagenes)

se pueden usar en etiquetas

DL {},DD {},DT {},LI {},OL {},UL {}

Creditos : Core

ferny · #19 (**permalink**) 22/03/2003, 05:58

¿Qué manuales sobre CSS me recomiendan?

- Para principiantes:
http://www.webestilo.com/css/
http://www.desarrolloweb.com/manuales/2/ (sobre todo este)
- Para expertos:
http://www.sidar.org/recur/desdi/tra...css/cover.html

KarlanKas · #20 (**permalink**) 23/03/2003, 18:22

P.-¿Cómo obligar a utilizar un estilo determinado en toda la página?
R.-Poniendo !important detrás de la definición.

Ejemplo:

Código PHP:

  <html> 
<head> 
 
    <STYLE> 
    H1{    color:red!important; 
        text-decoration:underline!important; 
        font:bold 30px/45px verdana!important; 
        text-align:center;} 
    </STYLE> 
</head> 
 
<body> 
<H1 style="    color:green; 
            text-decoration:none; 
            font:normal 10px/15px 'courier new'; 
            text-align:right;"> 
             
    HOLA FORO HTML 
</H1> 
 
 
</body> 
</html>

Fijaos en la alineación del texto. Como no hemos utilizado en la definición general el !important prima el de la etiqueta...

Cain · #21 (**permalink**) 28/03/2003, 07:04

Dando borde a tablas:

Para dar borde a una tabla podemos hacer 2 cosas:

1. Dar borde externo a la tabla:
table {
border-style: solid;
border-color: #C9CCC5;
border-width: 1;
}

2. Dar borde externo e interno a las tablas
table {
border-style: solid;
border-color: #C9CCC5;
border-top-width: 1;
border-left-width: 1;
}
td {
border-style: solid;
border-color: #C9CCC5;
border-bottom-width: 1;
border-right-width: 1;
}

El truco del punto 2 consiste en dibujar los bordes superior e izquierdo de la tabla para luego ir pintando los bordes inferior y derecho de las celdas. ¿Que logramos con esto? Con esto logramos que los bordes de las celdas colindantes no sean el doble de gruesos que los bordes externos

Nota: Los bordes pueden definirse de forma "abreviada" así: border: 1 solid #FFFFFF; Pero esto sólo lo soporta Internet Explorer

caricatos · #22 (**permalink**) 31/03/2003, 16:34

Propiedades de los fondos (aplicable a todas las etiquetas del body, incluído éste)
Esta FAQ complementa la nº 1

background-color: un color;
background-image: url(una imagen);
background-repeat: repeat|repeat-x|repeat-y|no-repeat;
background-position: [sitio]top|center|bottom [sitio]left|center|right;
background-attachment: scroll|fixed;

Nota: background-position puede desglosarse en explorer en:

background-position-x
y
background-position-y

sitio puede ser en posición o porcentaje (%)
Agradezco la ayuda de JavierB

saludos

Helbira · #23 (**permalink**) 02/06/2003, 10:56

line-height: 5px;

amanda75 · #24 (**permalink**) 06/06/2003, 07:19

letter-spacing: +1px (+2px...-1px..-2px etc.)

alexa10 · #25 (**permalink**) 12/06/2003, 14:24

P.- Puedo hacer que una caja de texto o unaarea de texto tenga el fondo transparente?

R.-

Código:

 <style>
<!--
  .transparente  {
    background-color: transparent;
    border: 1px solid #000000;
}
-->
</style>

<textarea name="textarea" class="transparente"></textarea>
<input type="text" name="textfield" class="transparente">

mebarak · #26 (**permalink**) 14/08/2003, 12:23

Saludos, hace dias hice una pregunta, pero ahora que ya resolvi mi duda les comunico mi descubrimiento, ya que me parece genial, en un documento web podemos tener varias css externas cada una para diferentes fines esto automaticamente, es decir veo un articulo este lo veo en el mmonitor de mi pc y veo menus, barra de navegacion, etc. me gusto el articulo y deseo leerlo con mas calma y lo imprimo ¡ohh sorpresa! no se imprimieron los menus y ni la barra de navegacion solo el texto.

un ejemplo es esta página que sus articulos incluyen varios css uno para visualizarlo en pantalla y otro para impresion, prueben darle vista previa al documento o imprime un articulo y veras como solo imprime el texto con sus imagenes.

http://www.alzado.org/articulo.php?id_art=195

La solucion es el atributo "media" del elemento style en el que se especifica la css y el medio para el que se empleara

un ejemplo es este

Código PHP:

  <html> 
  <head> 
     <title>Título del archivo</title> 
        <link rel=stylesheet media="screen" href="website.css"> 
        <link rel=stylesheet media="print" href="printer.css"> 
        <link rel=stylesheet media="aural" href="speaker.css"> 
   </head> 
<body> 
</body> 
</html>

para la cs printer.css solo es necesario crear una clase para ocultar y lo demas se le dara formato normal mente

Código PHP:

  .nover{  
visibility:hidden  
}  
sigue tu hoja de estilo normal [para el texto e imagenes...

tu documento tendra un tag div para las regiones que deses ocultar a la hora de imprimir

Código PHP:

  <div class="nover"> 
Aqui tu barra de navegacion... 
</div> 
aqui lo demas de tu sitio...

si desian profundizar hacerca de este tema pueden visitar los siguientes vinculos:
http://www.w3.org/TR/1998/REC-CSS2-19980512/
o una de sus traducciones al castellano
http://www.sidar.org/recur/desdi/tra...css/cover.html
http://www.selfhtml.com.ar/selfhtml7/tdba.htm

Gracias

GG · #27 (**permalink**) 30/08/2003, 13:58

Especificaciones para CSS1 y 2 de la W3Cen español
P. ¿Dónde puedo encontrar las especificaciones de ls nojas de estilo, nivel 1 y 2, de la W3C en ESPAÑOL?

R. Les mando estos vinculos donde están las especificaciones de la W3C en ESPAÑOL de hojas de estilos, normas de accesibilidad y HTML4.
Espero que les sirvan.

Hojas de estilo en cascada, nivel 1
http://html.conclase.net/w3c/css1-es.html

Hojas de estilo en cascada, nivel 2
http://www.sidar.org/recur/desdi/tr.../css/cover.html

Helbira · #28 (**permalink**) 30/09/2003, 05:18

P: ¿Cómo puedo tabular sólo la primera línea de un párrafo?
R: CSS1 (IE 4, NS 4)

Código PHP:

  <style type="text/css"> 
p {text-indent: 1cm} 
</style>

epa2 · #29 (**permalink**) 08/10/2003, 06:17

P: ¿Como puedo hacer mi sitio web construido en base a CSS?
R: Con este código
CREDITOS: BRAVENET

Código:

<html>
<head>
<style>
body
{
    color: #000000;
	background-color: white;
    font-size: 10pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#navcell
{
	padding-top : 2px;
	padding-bottom : 2px;
	padding-left : 30px;
	border-top: 0px solid #fc6;
	border-right: 0px solid #fc6;
	border-bottom: 1px solid #fc6;
	border-left: 0px solid #fc6;
	font-family: Arial, Helvetica, sans-serif;

}


#nav{
	position: absolute;
	top : 130px;
	left : 30px;
	width : 160px;
	font-weight: normal;
	line-height: 30px;
	color: #000000;
	}

#nav ul, #nav li {
	list-style-type: none;
}
	
#nav a, #nav li.active li a 
{
	color: #930;
	text-decoration: none;
}

#nav a:hover, #nav li a:hover 
{
	background-color: #fc6;
	color: #930;
	text-decoration: none;
}

#nav li.active a {
	background-color: #fc6;
	color: #930;
	text-decoration: none;
}

a {
	color: #930;

}

a:visited {
	color: #f60;
}
	
#content{
	padding-top : 5px;
	padding-bottom : 30px;
	padding-left : 230px;
	padding-right : 5%;
	background-color: #FFFFF9;
	color: #000000;
}

p,ul,ol {
	font-size: 10pt;
	text-align: justify;
	color: #000000;

}

h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 200%;
	font-weight: bold;
}

h2 {
	font-size: 130%;
	font-weight: bold;
	text-align: right;
	padding-right: 3px;
	border-top: 0px solid #fc6;
	border-right: 0px solid #fc6;
	border-bottom: 1px solid #fc6;
	border-left: 0px solid #fc6;

}

h3 {
    font-size: 100%;
    font-weight: bold;
}

</style>
  </head>
  <body>
  <div style="position: absolute; width: 100%;">
    <div id="navcell">
      <div id="nav">
        <ul>
          <li><a href="index.html">Home Page</a></li>
          <li><a href="about.html">Acerca de mí</a></li>
          <li><a href="links.html">Links</a></li>
          <li><a href="contact.html">Contactos</a></li>
        </ul>
      </div>
      <h1>{EPA2.COM}</h1>
    </div>
    <div id="content">
      <h2>Title</h2>
      <h3>Subtitle </h3>
      <p>Hola amigos, que alegría la mia contribuir con mi pequeñez ignoracia a esta faqs, ¿algún día llegaré a ser un maestro?. Bueno, pienso que a lo mejro dentro de unos 500 o 600 años podré hacer algo en este mundillo, un salu2 a todos mis colegas y también a los que no lo son.</p>
      <h3>Subtitle </h3>
      <p>Hola amigos, que alegría la mia contribuir con mi pequeñez ignoracia a esta faqs, ¿algún día llegaré a ser un maestro?. Bueno, pienso que a lo mejro dentro de unos 500 o 600 años podré hacer algo en este mundillo, un salu2 a todos mis colegas y también a los que no lo son.</.</p>
             
      <h2>Title</h2>
      <h3>Subtitle </h3>
      <p>Hola amigos, que alegría la mia contribuir con mi pequeñez ignoracia a esta faqs, ¿algún día llegaré a ser un maestro?. Bueno, pienso que a lo mejro dentro de unos 500 o 600 años podré hacer algo en este mundillo, un salu2 a todos mis colegas y también a los que no lo son.</.</p>
   
    </div>
  </div>
  </body>
  </html>

PD: se me olvidaba, en las páginas de enlace de tu sitio no olvides vincular el css (creo)

jamesxv7 · #30 (**permalink**) 29/12/2003, 14:47

Cita:

FAQ 21

¿Qué manuales sobre CSS me recomiendan?

W3 Schools

http://www.maestrosdelweb.com/editorial/introcss/

http://www.sidar.org/recur/desdi/mcss/manual/indice.php