Foros del Web » Creando para Internet » CSS »

FAQ's de CSS

Estas en el tema de FAQ's de CSS en el foro de CSS en Foros del Web. Faltaban las FAQ's de este foro y este es un buen momento para arrancarlas. Cita: ! Importante Las FAQ (Preguntas Frecuentes) están abiertas a que ...

  #1 (permalink)  
Antiguo 04/02/2003, 14:56
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
FAQ's de CSS

Faltaban las FAQ's de este foro y este es un buen momento para arrancarlas.
Cita:
! Importante

Las FAQ (Preguntas Frecuentes) están abiertas a que cualquier usuario haga sus aportaciones.
Si embargo os pido que tengais algunas consideraciones especiales a la hora de insertar vuestra aportación:
  • Asegúrate de que la FAQ que vas a aportar pertenece a este foro (CSS). Si tu aportación es referente a HTML, insertala en las FAQ del foro de HTML; si es javascript insertala en las FAQ de javascript. Aquellas aportaciones que NO pertenezcan al lenguaje CSS puro y duro serán eliminadas sin previo aviso.
  • Asegúrate de que tu aportación no ha sido yá insertada. Si ha sido aportada pero ofreces una forma diferente de hacer lo mismo, bienvenida sea. Pero no si vas a proponer una solución que yá esté en las FAQ. Las FAQ duplicadas también serán eliminadas.
  • Indica el número de FAQ y sobre qué trata
  • Si tienes alguna duda sobre alguna FAQ plantéala en un nuevo tema indicando el número de FAQ. Este tema no es para plantear preguntas. cualquier mensaje en este tema que no sea una FAQ será eliminado sin previo aviso.

Vamos allá:


1-/ ¿Cómo evitar que un fondo se desplace ? (que quede inmóvil al darle a la barra de scroll)

R-/


Código PHP:
<style type="text/css">

body {
backgroundurl(imagen.gif);
background-attachmentfixed;
}
</
style
"Con un estilo así lo puedes conseguir, cambiando imagen.gif por la imagen real"

créditos: Caricatos

Última edición por tunait; 23/02/2013 a las 13:40
  #2 (permalink)  
Antiguo 04/02/2003, 15:10
Avatar de rickoe
Colaborador
 
Fecha de Ingreso: abril-2001
Mensajes: 353
Antigüedad: 16 años, 7 meses
Puntos: 2
Mensaje faq2

Que bien

Hacia mucha falta esto

Aquí mi aportación

Hoja de estilos CSS

Normalmente se usa asi dentro del head:

Cita:
<style type="text/css">
.
.
A:link, A:active {
COLOR: #000000;
}
.
.
</style>
Pero eso ocaciona mas bytes de trafico y lo mejor es hacerlo asi:

en el head:

Cita:
<link href="estilo.css" rel="stylesheet" rev="stylesheet" type="text/css">
y en el archivo estilo.css pones:

Cita:
A:link, A:active {
COLOR: #000000;
}
__________________
Mejor Jeep Imposible

Última edición por tunait; 18/03/2003 a las 06:25
  #3 (permalink)  
Antiguo 04/02/2003, 16:20
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mensaje FAQ3

P-/ Cursor del ratón: ¿cómo usar una imagen propia?


R-/ Tienes que crear el cursor del tipo cur, ani, o ico
y poner algo así en el body:

Código PHP:
<body style="cursor:url(mi_cursor.cur)"
Créditos: Caricatos

Última edición por tunait; 18/03/2003 a las 06:25
  #4 (permalink)  
Antiguo 04/02/2003, 16:25
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mensaje Faq4

P-/ Justificar un texto

R-/

Creando una clase

Código PHP:
<style type="text/css">
.
pJustifica{
text-alignjustify;
}
</
style
y después aplicándola donde queramos

Código PHP:
<class="pJustifica"texto </p
La forma de aplicarlo si crear una clase

Código PHP:
para un párrafo: <p style="text-align:justify">
para una celda: <td style="text-align:justify"
Nota: El atributo style está desaprobado a partir de xhtml 1.1

Última edición por tunait; 28/12/2004 a las 11:04
  #5 (permalink)  
Antiguo 04/02/2003, 16:38
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mensaje Faq5

P-/ Cambiar el cursor del mouse sobre un elemento


R-/ Ejemplo para cambiar el cursor al pasar sobre una imagen:

<img src="imagen.jpg" style="cursor:pointer">
Esto cambiará el cursor la manita al pasar sobre la imagen.


Otras opciones para el tipo de cursor son:

cursor: auto (utiliza un cursor dado por el usuario)
cursor: crosshair (el cursor se convierte en una cruz)
cursor: default (el cursor permanece como es siempre)
cursor: e-resize (una flecha que apunta a la derecha)
cursor: hand (la tradicional mano)
cursor: help (el signo de pregunta)
cursor: move (una cruz con flechas en los extremos)
cursor: n-resize (una flecha apuntando hacia arriba o hacia el norte)
cursor: ne-resize (una flecha apuntando hacia el noreste)
cursor: nw-resize (una flecha que apunta hacia el noroeste)
cursor: pointer (nuevamente el puntero)
cursor: s-resize (una flecha que apunta hacia abajo o al sur)
cursor: se-resize (una flecha que apunta hacia el sudeste)
cursor: sw-resize (una flecha que apunta hacia el sudoeste)
cursor: text (se muestra como el fin de un I-beam)
cursor: w-resize (una flecha apuntando hacia el oeste o hacia la izquierda)
cursor: wait (un reloj de arena)

Créditos: bet

------------------------------------------------------------------------------------

NOTA: Versiones de IExplorer anteriores a la 6 necesita el valor "hand" en lugar de "pointer" para cambiar a la manita.
Una forma de solucionarlo puede ser:

Poner entre los tags <head> y </head> el siguiente script:

Código PHP:
<script>
function 
mano(tag) {
document.getElementById(tag).style.cursor = (document.all) ? "hand" "pointer";
</script> 

... y luego en el tag donde quiero ver la mano poner:

onmouseover="mano(this)"

créditos: caricatos

Última edición por tunait; 28/12/2004 a las 11:24
  #6 (permalink)  
Antiguo 04/02/2003, 17:11
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mensaje Faq6

P-/ ¿Cómo puedo sacar el subrayado a los links?


R-/ Puede hacerse principalmente de dos formas:

1- Agregando entre los tags <HEAD> y </HEAD>

Código PHP:
<style type="text/css">
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:hover{text-decoration:none}
a:active{text-decoration:none}
</
style
(esto sacará el subrayado a todos los estados de todos los links)


2- Agregando a los links que no queramos con subrayado:

style="text-decoration:none"

Ej. <a href="pagina.html" style="text-decoration:none"> Página </a>

Nota: el atributo style está desaprobado a partir de xhtml 1.1

Última edición por tunait; 28/12/2004 a las 11:25
  #7 (permalink)  
Antiguo 06/02/2003, 07:57
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mensaje FAQ8 - CSS - Fuentes

P-/ Fuentes NO instaladas

R-/

Actualizado el 09-07-05
NOTA: Estaba la opción @font-face pero ha sido eliminada de los estandares a partir de css2.1 http://www.forosdelweb.com/showpost....11&postcount=6

Alternativas a cómo hacerlo en la web de kemie
http://www.disenorama.com/articulos/...textos_una.htm


http://www.forosdelweb.com/showpost....2&postcount=15

Última edición por tunait; 09/07/2005 a las 02:42 Razón: Actualización
  #8 (permalink)  
Antiguo 13/02/2003, 05:03
Avatar de t0m|ta  
Fecha de Ingreso: julio-2002
Ubicación: Madrid
Mensajes: 369
Antigüedad: 15 años, 4 meses
Puntos: 3
Mensaje FAQ 9

Pregunta: ¿Cómo mostrar una aclaración o la definición de una palabra técnica o extraña?

(Relacionado con la FAQ 11)

Respuesta: Utilizando este código, el cursor cambiará al pasar por encima de la palabra en cuestión y se mostará un "tooltip" con la aclaración

Con HTML

Código PHP:
<html
<
head
<
title>info</title
<
style
.
info 
text-decoration:underline
border-bottom1px dashed #00cc00; 
cursorhelp

</
style

</
head

<
body
<
span class="info" title="¿A que te mola mi nombre?">t0m|ta</span
</
body
</
html
Con xthml:

Código PHP:
<html xmlns:sp
<
head
<
titleCustom tag example </title
<
style type="text/css"
sp:info 
  
text-decoration:underline
  
border-bottom1px dashed #00cc00; 
  
cursorhelp

</
style
</
head
<
body
<
p>1221 es un número<sp:info title="Un número que resulta exactamente igual si lo lees de derecha izquierda o de izquierda a derecha.">capicúa</sp:info>.</p
</
body
</
html
__________________
:ojotes: t0m|ta - IHQ :ojotes:
No tengo palabras
Instrucciones de andar por casa

Última edición por tunait; 18/03/2003 a las 06:27
  #9 (permalink)  
Antiguo 14/02/2003, 15:10
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mensaje FAQ10 - CSS - Aspecto de Links

P-/ ¿Puedo usar dos estilos diferentes para los links de una misma página?

R-/ Puedes crear una o varias clases y llamarlas desde los links a los que se desee dar ese aspecto.


<style type="text/css">
<!--
a:link { font-family: Tahoma, Verdana, Arial; color: #003366; text-decoration: none}
a:visited { font-family: Tahoma, Verdana, Arial; color: #0099CC; text-decoration: none}
a:hover { font-family: Tahoma, Verdana, Arial; color: #996600}
a:active { font-family: Tahoma, Verdana, Arial; color: #996633; text-decoration: none}


a.estilo2:link { font-family: Tahoma, Verdana, Arial; color: #993300; text-decoration: none}
a.estilo2:visited { font-family: Tahoma, Verdana, Arial; color: #CC9933; text-decoration: none}
a.estilo2:hover { font-family: Tahoma, Verdana, Arial; color: #996666}
a.estilo2:active { font-family: Tahoma, Verdana, Arial; color: #993300; text-decoration: none}
-->
</style>

Ahí hemos creado la clase estilo2. Aquellos enlaces que queramos que usen esa clase, se lo pedimos

<a href="pepe.html" class="estilo2"> pepe </a>

Última edición por tunait; 28/12/2004 a las 11:28
  #10 (permalink)  
Antiguo 14/02/2003, 15:16
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Mensaje FAQ11 - CSS - Texto

p-/ Cómo tener un tamaño de texto fijo que no cambie aunque el visitante tenga en le menú Ver la opción de ver texto más grande

R-/ Podemos, mediante css, aplicar un tamaño fijo en pixels para todo el documento agregando entre <head> y </head> lo siguiente:

Código PHP:
<style type="text/css">
<!--
body {  font-size15px}
td {  font-size15px}
-->
</
style
Eso hará que todos los textos tengan un tamaño de 15 pixels en Internet Explorer.

NOTA: No es recomendado el aplicar el tamaño de fuentes fijas. Si alguien pide ver el texto más grande, es porque lo necesita. Si no lo puede leer, esa página no tiene sentido para ese visitante.

Última edición por tunait; 28/12/2004 a las 11:29
  #11 (permalink)  
Antiguo 28/02/2003, 15:58
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ12 - CSSP

Como crear un sitio con capas y CSS


Código PHP:
<head>
<
title>Capas</title>
<
style>
/*estilo Azul*/

.arriba{
    
positionabsolute
    
width:570;
    
height:90px
    
z-index1
    
left0px
    
top0px;
    
overflowvisible;
    
border 1px solid #788DA2;
    
background-color #788DA2;
    
}
    .
izquierda{
    
positionabsolute
    
width:178px;
    
height:452px
    
z-index1
    
left602px
    
top0px;
    
overflowvisible;
    
border 1px solid white;
    
background-color white;
    
color:#FFFFFF; 
    
}
        .
centro{
    
positionabsolute;
    
width:570px;
    
height:362;
    
z-index1;
    
left0px;
    
top90px;
    
overflowauto;
    
border 1px solid #ACBCCC;
    
background-color #ACBCCC;
    
}

    .
derecha{
    
position:absolute
    
left:570px
    
top:0px
    
width:30px
    
height:452
    
z-index:2;
    
border 1px solid #BAC3CC;
    
background-color #BAC3CC;
    
width:120
    
color:#FFFFFF; 
    
}
    </
style></head>
<
body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<
div id="centro" class="centro"></div>
<
div id="derecha" class="derecha"></div>
<
div id="iquierda" class="izquierda"></div>
<
div id="cabeza" class="arriba"
</
div>
</
body>
</
html

Última edición por tunait; 18/03/2003 a las 06:29
  #12 (permalink)  
Antiguo 28/02/2003, 16:04
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ13 - Colores del sistema con CSS

  • Color: ActiveBorder;
  • Color: ActiveCaption;
  • Color: AppWorkspace;
  • Color: Background;
  • Color: ButtonFace;
  • Color: ButtonHighlight;
  • Color: ButtonShadow;
  • Color: ButtonText;
  • Color: CaptionText;
  • Color: GrayText;
  • Color: Highlight;
  • Color: HighlightText;
  • Color: InactiveBorder;
  • Color: InactiveCaption;
  • Color: InactiveCaptionText;
  • Color: InfoBackground;
  • Color: InfoText;
  • Color: Menu;
  • Color: MenuText;
  • Color: Scrollbar;
  • Color: ThreedDarkShadow;
  • Color: ThreedFace;
  • Color: ThreedLightShadow;
  • Color: ThreedShadow;
  • Color: Window;
  • Color: WindowFrame;
  • Color: WindowText;

Última edición por CORE; 12/04/2003 a las 15:57
  #13 (permalink)  
Antiguo 28/02/2003, 16:07
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ14 - W3C Palette

  • Color: Black;
  • Color: Navy;
  • Color: Blue;
  • Color: Maroon;
  • Color: Purple;
  • Color: Green;
  • Color: Red;
  • Color: Teal;
  • Color: Magenta;
  • Color: Olive;
  • Color: Gray;
  • Color: Lime;
  • Color: Aqua;
  • Color: Silver;
  • Color: Yellow;
  • Color: White;

Última edición por CORE; 12/04/2003 a las 15:49
  #14 (permalink)  
Antiguo 28/02/2003, 16:09
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ15 - CSS - Filtros Alpha

Podemos aplicar efectos de trasnparencia usando CSS con el siguiente codigo:

filter:alpha(Opacity=??, FinishOpacity=??, Style=?, StartX=??, StartY=??, FinishX=??, FinishY=??);

Ejemplos;

Estilo1 :
style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=1)"

Estilo2:
style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=2)"

Estilo3:
style="width:120; color:#FFFFFF; filter:alpha(finishopacity=0, style=3)"

Estos estilo funcionan tambien en imagenes

Estilo1:
style="filter:alpha(finishopacity=0, style=1)"

Efecto Mouseover
onMouseOver="this.filters.alpha.opacity='100'" onMouseOut="this.filters.alpha.opacity='50'" style="filter:alpha(opacity=50);-moz-opacity:50%;"

Última edición por tunait; 18/03/2003 a las 06:30
  #15 (permalink)  
Antiguo 28/02/2003, 16:13
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ16 - CSS - coloreando la barra de desplazamiento

El codigo es el siguiente tiene que pegarse entre las etiquetas <head> y </head> de nuestro HTML, y agregar las etiquetas <style> y </style>


body {
scrollbar-3dlight-color : #82BCDA;
scrollbar-darkshadow-color : #82BCDA;
scrollbar-highlight-color : #D7ECF5;
scrollbar-shadow-color : #3985AB;
scrollbar-arrow-color : #0E212A;
scrollbar-face-color : #82BCDA;
scrollbar-track-color : #82BCDA;
}


Última edición por tunait; 18/03/2003 a las 06:30
  #16 (permalink)  
Antiguo 28/02/2003, 16:40
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ17 - varios

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);


Última edición por tunait; 18/03/2003 a las 06:30
  #17 (permalink)  
Antiguo 28/02/2003, 17:05
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ18 - Tips para las Hojas (CSS)

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 {}

Última edición por tunait; 18/03/2003 a las 06:31
  #18 (permalink)  
Antiguo 13/03/2003, 00:46
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
Mensaje FAQ 19

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

Última edición por tunait; 18/03/2003 a las 06:31
  #19 (permalink)  
Antiguo 22/03/2003, 05:58
Avatar de ferny
Il capo della mafia
 
Fecha de Ingreso: febrero-2002
Ubicación: Al final del cable
Mensajes: 10.080
Antigüedad: 15 años, 9 meses
Puntos: 54
Mensaje FAQ 21

¿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
__________________
www.mundodivx.com || www.mundodivx.org

Pon tu mano en un horno caliente durante un minuto y te parecerá una hora.
Siéntate junto a una chica preciosa durante una hora y te parecerá un minuto.
Eso es la relatividad.
  #20 (permalink)  
Antiguo 23/03/2003, 18:22
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60
FAQ 22.- !important

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...
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 23/03/2003 a las 18:25
  #21 (permalink)  
Antiguo 28/03/2003, 07:04
Avatar de Cain  
Fecha de Ingreso: enero-2002
Ubicación: Catalunya
Mensajes: 6.459
Antigüedad: 15 años, 11 meses
Puntos: 17
Faq-23

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
__________________
M a l d i t o F r i k i

Última edición por JavierB; 07/05/2006 a las 03:46
  #22 (permalink)  
Antiguo 31/03/2003, 16:34
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Mensaje Faq 24 - Propiedades de los fondos

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

Última edición por caricatos; 01/04/2003 a las 00:17
  #23 (permalink)  
Antiguo 02/06/2003, 11:56
Avatar de Helbira  
Fecha de Ingreso: octubre-2001
Ubicación: Sevilla, España
Mensajes: 1.228
Antigüedad: 16 años, 1 mes
Puntos: 5
Mensaje Faq 25 - Espacio entre líneas

line-height: 5px;
  #24 (permalink)  
Antiguo 06/06/2003, 08:19
Avatar de amanda75  
Fecha de Ingreso: junio-2003
Ubicación: cerca, pero no mucho
Mensajes: 684
Antigüedad: 14 años, 6 meses
Puntos: 0
Faq 26.- Cambiar el espaciado de la fuente

letter-spacing: +1px (+2px...-1px..-2px etc.)
  #25 (permalink)  
Antiguo 12/06/2003, 15:24
Avatar de alexa10  
Fecha de Ingreso: julio-2002
Ubicación: De este lado...
Mensajes: 293
Antigüedad: 15 años, 4 meses
Puntos: 0
Mensaje Faq 27.- Aplicar transparencia a cuadros y areas de texto

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">
  #26 (permalink)  
Antiguo 14/08/2003, 13:23
Avatar de mebarak  
Fecha de Ingreso: julio-2001
Ubicación: México, Distrito Federal
Mensajes: 133
Antigüedad: 16 años, 5 meses
Puntos: 0
FAQ-28 una css en pantalla y otra para impresion [en un solo documento]

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
__________________
Daniel Nava
Sistem administrator Wintel
Desarrollador web [IIS]
http://mebarak.blogspot.com

Última edición por JavierB; 07/05/2006 a las 03:47
  #27 (permalink)  
Antiguo 30/08/2003, 14:58
Avatar de GG
GG
Usuario no validado
 
Fecha de Ingreso: febrero-2002
Ubicación: Santiago, Chile
Mensajes: 195
Antigüedad: 15 años, 10 meses
Puntos: 0
Faq-29

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

Última edición por JavierB; 07/05/2006 a las 03:48
  #28 (permalink)  
Antiguo 30/09/2003, 06:18
Avatar de Helbira  
Fecha de Ingreso: octubre-2001
Ubicación: Sevilla, España
Mensajes: 1.228
Antigüedad: 16 años, 1 mes
Puntos: 5
FAQ 30.- Tabular sólo la primera línea de un párrafo

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">
{text-indent1cm}
</
style
  #29 (permalink)  
Antiguo 08/10/2003, 07:17
Avatar de epa2  
Fecha de Ingreso: abril-2002
Ubicación: Málaga
Mensajes: 1.473
Antigüedad: 15 años, 7 meses
Puntos: 8
Faq-31

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)
__________________

***Aprendiz de todo y maestro de nada***

Última edición por JavierB; 07/05/2006 a las 03:49
  #30 (permalink)  
Antiguo 29/12/2003, 14:47
Avatar de jamesxv7  
Fecha de Ingreso: julio-2001
Ubicación: Puerto Rico
Mensajes: 109
Antigüedad: 16 años, 4 meses
Puntos: 0
Faq-32

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
__________________
James: Blog - Galería - Ecodig

Última edición por JavierB; 07/05/2006 a las 03:50

Etiquetas: faq
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 35 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 01:55.