"Lección 1", 2=>"Lección 3"); $ruta=array(1=>"../lec1.html", 2=>"../bases_de_datos_mysql.html"); ?> Estilos para colocar un fondo - Cambiar cursor en una web - Tipos de bordes en html o css

  • En espera
atras

2.1 Estilos de la "a" a la "c"

adelante

Introducción a los estilos css

Después de haber creado nuestra primera web nos toca crear la nuestra propia. Pero seguramente para esa tarea algunas veces necesitaremos colocar otras cosas a la web. Pues en esta lección os voy a poner el repertorio de todos los códigos css que existen por orden alfabético, así si alguna vez necesitais colocar algo de estilo en concreto que no sabeis hacer siempre lo podreis buscar aquí.

Sólo recordaros que los estilos se colocaban en la hoja de estilos entre los corchetes { y }, y que se lo podíamos definir tanto a un estilo creado por nosotros, que lo poníamos con la # (por ejemplo #contenido), o definirlo a algo ya existente, como al "body", a los "a", a los "p", a los "ul", ...

Estilos que empiezan por a, b o c

  1. Background-attachment: valor
    Este código nos permite especificar si la imagen de fondo se moverá según nos movamos por la página o estará fija en la pantalla. Si está fija en la pantalla la imagen siempre se verá en el mismo sitio por mucho que nos movamos por la página.
    Para que esté fija en la pantalla tenemos que poner de valor "fixed", y para que se mueva junto al contenido pondremos de valor "scroll" (es la que viene por defecto si no lo indicamos).
    Un ejemplo del valor fixed es éste.
  2. Background-color: código
    Nos permite establecer el color de fondo. Donde pone "código" debemos poner el código html del color que queramos.
  3. Background-image: url(rutadelaimagen.jpg)
    Nos permite establecer la imagen de fondo. Donde pone "rutadelaimagen.jpg" debemos poner la ruta de la imagen.
  4. Background-position: valor
    Nos permite elegir la posición de la imagen de fondo si le hemos puesto que no se repita. Donde pone "valor" podemos poner left (izquierda), right (derecha), center (centro), bottom (fondo) o top (arriba). Podemos poner si queremos dos valores, por ejemplo "background-position: left bottom".
  5. Background-repeat: valor
    Nos permite indicar cómo se repetirá la imagen de fondo. Sus valores pueden ser "repeat" (para que se repita), "no-repeat" (para que no se repita), "repeat-x" (sólo se repite en el eje x) y "repeat-y" (sólo en el eje y).
  6. Border-width: tamañopx
    Nos permite establecer el grosor de los bordes. Donde pone "tamaño" tenemos que poner el valor.
    Si queremos que afecte sólo a un borde podemos usar "border-bottom-width" para el borde de abajo, "border-top-width" para el borde de arriba, "border-left-width" para el borde de la izquierda o "border-right-width" para el borde de de la derecha.
  7. Border-color: código
    Nos permite establecer cuál será el color de los bordes de lo que estamos definiendo. Donde pone "código" tenemos que poner el código del color.
    Podemos usar "Border-bottom-color", "Border-top-color", "Border-left-color" o "Border-right-color"
  8. Border-style: valor
    Nos permite definir el estilo de los bordes. Donde pone "valor" podemos poner los siguientes valores (el normal es solid):
  9. dashed dotted double groove
    inset outset ridge solid
  10. Clear: valor
    Se usa junto a float, de forma que lo que hace es que no se alinee con elementos que tengan la propiedad float. Donde poner valor podemos poner "right" para que no se alinee con elementos flotantes en la derecha, "left" para la izquierda y "both" para ambos lados.
  11. Color: código
    Nos permite indicar el color de los objetos que tenga en el interior (normalmente el color del texto).
  12. Cursor: valor
    Nos permite cambiar el cursor del ratón cuando lo situemos encima de el elemento al que le asignamos el estilo. Sus valores pueden ser "default" (flecha), crosshair (cruz), e-resize (flecha hacia la derecha), hand (mano), help (signo de interrogación), move (cruz con flechas), n-resize (flecha hacia arriba), ne-resize (flecha hacia el noreste), nw-resize (flecha hacia el noroeste), pointer (mano), s-resize (flecha hacia abajo), se-resize (flecha hacia el sureste), sw-resize (flecha hacia el suroeste), text (I), w-resize (flecha hacia la izquierda) y wait (reloj de arena).

He omitido algunos códigos por no funcionar bien en todos los exploradores y por lo tanto no ser del todo útiles.

Si teneis alguna pregunta recordad que teneis el foro a vuestra disposición.

atras
adelante

Volver a crear webs>>


Creada el 25/05/08 15:55
Copyright © - Todos los derechos reservados - Página creada por Juanma