referencia de propiedades para css 2.0 (tomado de...

REFERENCIA DE PROPIEDADES PARA CSS 2.0

(TOMADO DE W3C.ORG)

Esta referencia se distribuye bajo licencia Creative Commons.

Usted es libre de:

Copiar, distribuir y comunicar públicamente

Hacer obras derivadas No Comerciales

Bajo las condiciones siguientes:

Reconocimiento: debe reconocer y dar crédito al autor original (Lic. Mauricio Jaques Soto)

Lic. Mauricio Jaques Soto

Comentarios

• Los comentarios tienen la siguiente sintaxis:

/* esto es un comentario */

/* esto es

Otro comentario*/

• Nota: si se quiere ahorrar espacio y no demorar la carga de la página

habrá que eliminar comentarios innecesarios.

Inclusión de hojas de estilo

• Enlazar estilos externos:

– Mediante el elemento link que debe ubicarse dentro del documento html entre las etiquetas head

<link rel=“stylesheet” href=“archivo.css” type=“text/css” />

Donde:

– rel define relaciones entre un documento html y la hoja de estilos. Puede tomar dos valores: stylesheet para las css preferidas y alternate stylesheet, css alternativas.

– href (Hypertext Reference) url o dirección hacia el documento a importar, es importante saber en donde tendremos nuestras hojas de estilo (al mismo nivel de nuestros html o en otra carpeta).

– type define el tipo de documento, se relaciona con los MIME (extensiones de correo de internet multipropósito), es un estándar que clasifica recursos y provee información a programas acerca de cómo manejarlos. Esto permite a los navegadores abrir correctamente un archivo .txt como un recurso de texto plano y no como un archivo de video o algún otro tipo.

– Existe otro atributo llamado media que especifica el tipo de dispositivo para el cual se aplicará determinada css, el valor por defecto es screen (para una PC).

http://www.htmlquick.com/es/reference/mime-types.html

Selectores

Reglas de visualización o de estilo formada por dos componentes; un selector y

un conjunto de declaraciones contenidas dentro de el primero

Las declaraciones están compuestas por propiedades cada una con un valor

asociado, separadas por punto y coma:

nombreSelector {

propiedad-1: valor;

propiedad-2: valor;

...

propiedad-n: valor;

}

Notas:

No esta permitido implementar valores creados por el programador

Una regla mal escrita será ignorada por completo.

Selectores

Se pueden agrupar selectores que compartan propiedades, separándolos por

comas:

nombreSelector1, nombreSelector2, nombreSelector3 {

propiedad-1: valor;

propiedad-2: valor;

...

propiedad-n: valor;

}

Selectores

Un selector podrá ampliarse o modificarse en relación a su estado original,

es decir:

nombreSelector1, nombreSelector2, nombreSelector3 {

propiedad-1: valor;

propiedad-2: valor;

...

propiedad-n: valor;

}

nombreSelector2 {

propiedad-2: otroValor;

}

La última propiedad definida tiene preponderancia sobre las anteriores.

Selectores de Elementos

Cualquier elemento (tag - etiqueta) disponible en la especificación html

(xhtml) que pueda definirse dentro del elemento <body> incluyéndolo

puede ser vinculado a un estilo

h1{

color: #003d4c;

margin: 5px;

font-size: 100%

}

h2{

color: #f00f00

}

Selector ID El atributo id nos permite liga elementos de un documento html con un

determinado selector en la hoja de estilos. Se utiliza para representar de

manera única (no deberá haber más de un mismo valor id en un documento) a

cada elemento disponible en un archivo html.

 texto del título

para declarar un selector en la hoja de estilos que hace referencia a un

atributo id se usa la sintáxis:

#titulo{

font-size: 10px;

font-family: verdana, arial, helvetica;

color: #000000;

background-color: #ffffff;

text-align: center;

}

Notas:

El nombre del atributo id no debe comenzar con números

Los nombres dados a los atributos tipo id son sensibles a mayúsculas y minúsculas.

Selector Class

El atributo class suele emplearse cuando más de un elemento usa el mismo

selector. A diferencia de id, más de un elemento puede contar con el mismo

valor para class.

texto del título

contenido

texto del título dos

Para declarar un selector en la hoja de estilos que hace referencia a un atributo

class se utiliza la sintáxis:

título{

font-size: 10px;


color: #000000;


text-align: center;

}

Selector Class

o tambien

p.título{

font-size: 10px;


color: #000000;


text-align: center;

}

En la primer opción se aplicará el esilo a cualquier elemento con clase

titulo, en la segunda, sólo a los elementos p que pertenezcan a la clase

título.

Selector Universal

Con el selector universal es posible referenciar todos los elementos del

documento. Se usa el signo asterisco para representar este selector:

*{

font-size: 10px;


color: #000000;


text-align: center;

}

Selector Contextual

Conocidos como selectores descendientes por su “herencia” de atributos

p a{

font-size: 10px;


color: #000000;


text-align: center;

}

Este código se aplicará a enlaces dentro de párrafos

Colores

Podemos definir el color de un elemento mediante:

Valor RGB (Red, Green, Blue) se disponen tres números separados por comas que pueden representar porcentajes:

rgb(100%,100%,100%);

ó valores decimales entre 0 y 255

rgb(255,0,32);

Mediante valores en hexadecimal, por ejemplo: #3333cc que representan; primer par para el rojo, segundo par para el verde y tercer par para el azul.

Una opción es usar sólo tres digitos siempre y cuando los pares que indican rojo, verde y azul, sean iguales: el caso anterior sería #33c

#ffffff --> #fff #336699 --> #369

Mediante constantes: 16 disponibles: aqua, black, blue, fucshia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow


Pseudoelementos

Algunos pseudoelementos de css 2 son:

:first-letter

permite asignar estilo al primer carácter contenido en un elemento:

p:first-letter{

font-size: 10pt;


font-weight: bold;

}

:first-line

permite asignar estilos a la primer línea contenida en un elemento.

p:first-line{

color: red;

}


Pseudoelementos

:link

enlace que no ha sido visitado por el usuario

a:link{

color: yellow;

}

:visited

enlace que ha sido visitado por el usuario

a:visited{

color: red;

}


Pseudoelementos

:hover

enlace que tiene sobre él al puntero del mouse

a:hover{

color: green;

}

:active

enlace seleccionado con el mouse

a:active{

color: blue;

}


Textos Propiedades:

direction: puede tomar dos valores: rtl (right to left, derecha a izquierda) imprime texto sin dejar margen derecho o ltr (left to right, izquierda a derecha) imprime texto sin dejar margen izquierdo. Opción por defecto.

letter-spacing: permite definir espacio entre caracteres. Admite los valores normal o unidades de medida

word-spacing: permite definir espacio entre palabras. Admite los valores normal o unidades de medida

text-align: alinea textos respecto a un contenedor (puede ser body, div o span), los valores disponibles son: right, left, justify y center

text-decoration: podemos asignarle los valores: underline (línea debajo del texto), overline (línea encima del texto), line through (línea enmedio del texto), blink (parpadeo), none (default)

text-indent: tabula la primer línea del texto ubicado en un contenedor, admite cualquier unidad de medida.

text-shadow: especifica color y tamaño de la sombra: text-shadow: color distanciaHorizontalTexto DistanciaVerticalTexto blurODifuminado;

text-transform: admite los valores uppercase (mayúsculas), lowercase (minúsculas), capitalize (mayúscula primer letra de cada palabra), y none (valor por defecto)


Fuentes

font-family: identifica el nombre dela fuente a aplicar, es posible indicar múltiples fuentes si se las separa por comas y se optará por la primera disponible en la máquina cliente, para evitar algún problema, al final de la lista puede anotarse alguna fuente genérica (serif, sans-serif, cursive, fantasy o monospace)

Puede importarse una nueva fuente con @font-face:

@font-face {

font-family: nombreDeLaFuente;

src: url(direccionDeLaFuente);

}

font-size: define el tamaño de la fuente, puede asignársele un valor a una constante que puede ser: xx-small (extra pequeña), x-small (muy pequeña, igual a smaller), small (pequeña), medium (media, valor por defecto), large (grande), x-large (muy grande alias de larger) y xx-large (extra grande)


Fuentes

font-stretch: define expansión o compresión, los valores admitidos son: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded.

font-style: define estilo de la fuente, los valores permitidos son: normal (por defecto), italic (cursiva)

font-variant: admite los valores normal (por defecto), small-caps (versales, mayúsculas pequeñas).

font-weight: grosor de la fuente; normal (por defecto) y bold (negrita), también admite valor numérico: 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800 y 900.


Fondos background-attachment: fixed, imagen de fondo fija, scroll, imagen se desplaza junto con página.

background-color: especifica color de fondo, admite valor transparent.

background-size: especifica tamaño del fondo, admite dos valores; ancho y alto de la imagen separados por un espacio.

background-size: 50% 50%;

background-image: asigna imagen de fondo:

background-image: url(archivoImagen);

background-position: controla alineación de imagen inicial, horizontal (left, center, right) y vertical (top, center, bottom).

background-position: left center;

background-position: 4cm 5cm;

background-position: 35% 60%;

background-repeat: no-repeat que no se repita la imagen, repeat-y se repite verticalmente, repeat-x se repite horizontalmente, repeat se repite en todo el espacio de la página.


Bordes

border-color: color del borde.

border-style: tipo de borde; los valores son: solid (sólido), dashed (lineado), dotted (punteado), double (dos líneas), inset (efecto 3d), groove (efecto 3d), ridge (efecto 3d), outset (efecto 3d), hidden (oculto), none (por defecto, ninguno).

border-width: ancho de borde, thin (delgado), medium (mediano), thick (mayor), o cualquier unidad de medida.

border-radius: define redondeo de bordes, admite pixeles, la cantidad ingresada se aplicará en las cuatro esquinas de una capa o sección. De igual forma pueden aplicarse cuatro valores para esquinas de un contenedor. El orden es el de las manecillas de un reloj:

border-radius: SuperiorIzquierdo SuperiorDerecho InferiorDerecho InferiorIzquierdo;

border-radius: 2px 15px 15px 2px;


Dimensiones

height: representa la altura de un elemento

width: representa el ancho de un elemento

max-height: define altura máxima

max-width: define ancho máximo

min-height: define altura mínima

min-width: define ancho mínimo


Listas

list-style-image: usa imagen como viñeta:

list-style-image: url(archivoImagen);

list-style-type: tipo de viñeta.

Los valores son: disc (por defecto), circle (círculo), square (cuadrado), decimal (número decimal 1,2,3…), decimal-leading-zero (decimal con cero 01,02,03…), lower-roman (romanos minúscula), upper-roman (romanos mayúscula), lower-alpha (alfabético minúscula), upper-alpha (alfabético mayúscula), lower-latin (latino minúscula), upper-latin (latino mayúscula), lower-greek (griego minúscula), upper-greek (griego mayúscula), none (ninguno).


Márgenes

Exteriores

◦ margin-bottom: distancia entre tope inferior del contenedor y parte inferior del elemento al que se le aplica esta propiedad

◦ margin-left: distancia entre margen izquierdo del contenedor y parte izquierda del elemento al que se le aplica esta propiedad

◦ margin-right: distancia entre margen derecho del contenedor y parte derecha del elemento al que se le aplica esta propiedad

◦ margin-top: distancia entre tope superior del contenedor y parte superior del elemento al que se le aplica esta propiedad


Márgenes

Interiores

◦ padding-bottom: define el espacio inferior entre el contenido y el borde del elemento

◦ padding-top: define el espacio superior entre el contenido y el borde del elemento

◦ padding-left: define el espacio izquierdo entre el contenido y el borde del elemento

◦ padding-right: define el espacio derecho entre el contenido y el borde del elemento


Posicionamiento

Las propiedades referidas permiten mantener un control sobre el lugar que cada elemento ocupará dentro de la página, visibilidad, flotabilidad, etc.

bottom: distancia del elemento con respecto al tope inferior de la página o el contenedor

clear: se relaciona con float, los valores posibles: none (permite elementos flotantes a ambos lados), left (no permite flotantes a su izquierda), right (no permite flotantes a su derecha), both (no permite flotantes).

clip: permite definir qué parte del elemento se mostrará. Se emplea el valor rect para calcular esa porción, recibe cuatro argumentos: arriba, derecha, abajo e izquierda.

float: permite posicionar un elemento a la izquierda o a la derecha de otros elementos adyacentes. Admite valores: right left y none Un elemento flotante debe tener definido su ancho (width) para ser considerado como tal.


Posicionamiento

left: se aplica a elementos posicionados absoluta o relativamente y define la distancia con respecto al tope izquierdo de la página o el contenedor

overflow: se puede manipular un contenedor formado con propiedades top, left, height y width; con las propiedades visible se expande, con hidden se ajusta al tamaño de otro contenedor, para colocar barras de desplazamiento en el elemento si su contenido excede del tamaño del rectángulo usaremos auto y colocar barras de desplazamiento en el elemento si su contenido no excede del tamaño del rectángulo usaremos scroll

position: permite posicionar elementos en una página. Sus valores son: static (defecto, los elementos se dibujan uno a continuación de otro), absolute (se ubican dentro de la página de forma independiente, incluso se pueden superponer con otros elementos), relative (se ubican en determinados lugares dependiendo de la posición del elemento anterior), fixed (similar a absolute, solo que los elementos no se mueven cuando el documento es desplazado) e inherit (hereda el valor position de su contenedor)


Posicionamiento

right: representa la distancia del elemento con respecto al tope derecho de la página o el contenedor

top: se aplica a elementos posicionados absoluta o relativamente y define la distancia con respecto al tope superior de la página o el contenedor

z-index: mediante la utilización de la propiedad position existe la posibilidad de que dos elementos o más se superpongan entre sí y formen capas. Con z-index podremos definir el orden de apilamiento de estas capas. Esta propiedad admite valores enteros positivos y los elementos con mayor valor de z-index se ubicarán por encima de los demás.


Visibilidad

display: se refiere a la forma de mostrar o no mostrar un

texto y admite los valores block (muestra un salto de

línea antes y después del elemento), inline (sin saltos),

list-item (igual que block solo que muestra contenido

como una lista), table (muestra como tabla), inline-table

(tablas en línea)

visibility: define si el elemento al cual se le aplica esta

propiedad deberá estar a la vista (visible) u oculto

(hidden)


referencia de propiedades para css 2.0 (tomado de...

Documents