![]() |
FAQ's de CSS Faltaban las FAQ's de este foro y este es un buen momento para arrancarlas. ;-) Cita:
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: créditos: Caricatos |
faq2 Que bien :arriba: Hacia mucha falta esto :-D Aquí mi aportación Hoja de estilos CSS Normalmente se usa asi dentro del head: Cita:
en el head: Cita:
Cita:
|
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: |
Faq4 P-/ Justificar un texto R-/ Creando una clase Código PHP: Código PHP: Código PHP: |
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: ... y luego en el tag donde quiero ver la mano poner: onmouseover="mano(this)" créditos: caricatos |
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: 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 |
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 |
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: Código PHP: |
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> |
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: 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. |
FAQ12 - CSSP Como crear un sitio con capas y CSS Código PHP: |
FAQ13 - Colores del sistema con CSS
|
FAQ14 - W3C Palette
|
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%;" |
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; } http://www.iespana.es/radiocore_es/scroll001.gif |
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); |
FAQ18 - Tips para las Hojas (CSS) Tips para CSS /* usa siempre nombres en mayusculas para identificar al elemento */ /*Modulos de Texto
/*Modulos de Hipertexto*/
/* Modulos de Imagenes*/
/* los IDs van siempre con un #, ordenalos por orden alfabetico */ /* Modulos de Tablas
/* Modulos de Formularios
/* Modulos de Edicion
/* Modulos de Listado
|
FAQ 19 Utilizando LIST en CSS
se pueden usar en etiquetas DL {},DD {},DT {},LI {},OL {},UL {} Creditos : Core |
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 |
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: Fijaos en la alineación del texto. Como no hemos utilizado en la definición general el !important prima el de la etiqueta... |
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 :-( |
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 :pensando: 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 :adios: saludos :arriba: |
Faq 25 - Espacio entre líneas line-height: 5px; |
Faq 26.- Cambiar el espaciado de la fuente letter-spacing: +1px (+2px...-1px..-2px etc.) |
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> |
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: Código PHP: Código PHP: 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 :aplauso: :arriba: :adios: Gracias ;-) |
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 |
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: |
Faq-31 P: ¿Como puedo hacer mi sitio web construido en base a CSS? R: Con este código CREDITOS: BRAVENET Código: <html>PD: se me olvidaba, en las páginas de enlace de tu sitio no olvides vincular el css (creo) |
Faq-32 Cita:
http://www.maestrosdelweb.com/editorial/introcss/ http://www.sidar.org/recur/desdi/mcss/manual/indice.php |
| La zona horaria es GMT -6. Ahora son las 19:58. |
Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.