miércoles, 30 de mayo de 2012

25 Elementos CSS

1:FUNCIÓN
[ body { background-color: #FF0000; } ]
(fondo de la pag. color rojo)

2:FUNCIÓN
[ h1 {color: #0000ff;} ]
(cambia el color de solo el primer plano)

3:FUNCIÓN
[ h1 {background-color: #FC9804;} ]
( cambia el color de fondo de HEAD )

4:FUNCIÓN
[ body {background-image: url("nombre de la imagen . formato jpg, gif ");} ]
(se usa para establecer una imagen de fondo en la pag.)

5:FUNCIÓN
[ Background-repeat: repeat-x /repeat-y/repeat/no-repeat/ ]
(La imagen se repite en el eje horizontal, vertical, horizontal y vertical, no se repite) ejemplo [ body {background-image: url("nombre de la imagen . formato jpg, gif ");background-repeat:repeat-y} ]


6:FUNCIÓN
[ h1 {font-size: 30px;}

h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;} ] ( La ‘px‘ y ‘pt‘ establecen el tamaño de la fuente de forma absoluta, mientras que ‘%‘ y ‘em‘ permiten al usuario ajustar el tamaño de la misma según considere oportuno.)

7:FUNCIÓN
[ h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;} ]

(Los encabezados marcados con la etiqueta

se mostrarán usando la fuente “Arial” Si esta fuente no está instalada en el ordenador de usuario, se usará en su lugar la fuente “Verdana” Si ambas fuentes no están disponibles, se usará una fuente de la familia sans-serif para mostrar los encabezados.)

8:FUNCIÓN
[ h1 {text-transform: uppercase;}

li {text-transform: capitalize;} ] (Todos los nombres están marcados con la etiqueta

  • (de “list element”, es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayúscula y los títulos con todos los caracteres en mayúscula.)

    9:FUNCIÓN
    [ a:hover {

    color: orange; font-style: italic;} ]

    (hover se usa cuando el puntero del ratón pasa por encima de un enlace.

    Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos )


    10:FUNCIÓN
    [ body {margin-top: 100px;

    margin-right: 40px; margin-bottom: 10px; margin-left: 70px;} ]

    (Todo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedad marginhace referencia a la distancia desde cada lado respecto al elemento colindante (o respecto a los bordes del documento))



    11:FUNCIÓN
    [ body {margin: 100px 40px 10px 70px;}

    p {margin: 5px 50px 5px 50px; } ]

    (Se puede establecer los márgenes de casi todos los elementos del mismo modo. Por ejemplo, podemos elegir definir márgenes para todos los párrafos de texto marcados con el elemento     )

    12:FUNCIÓN
    [ h1 {background: yellow;padding: 20px 20px 20px 80px;}

    h2 {background: orange;padding-left:120px;} ]

    (Al deninir el padding para los títulos, cambiamos la cantidad de “relleno” que habrá alrededor del texto en cada uno de ellos)

    13:FUNCIÓN
    [ h1 {border-width: thick;

    border-style: dotted; border-color: gold;} h2 {border-width: 20px; border-style: outset; border-color: red;}

    p {border-width: 1px; border-style: dashed; border-color: blue;}

    ul {border-width: thin; border-style: solid; border-color: orange; } ]

    (Las tres propiedades descritas anteriormente se pueden unir para cada elemento y así producir diferentes bordes. Para ilustrar esto, veremos un documento en el que definimos diferentes bordes para los elementos








  • ,

    ,


    • Publicado por en

    No hay comentarios:

    Publicar un comentario

    Suscribirse a: Enviar comentarios (Atom)