REFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG)

Transcripción

1 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 ()

2 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.

3 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).

4 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.

5 Selectores Se pueden agrupar selectores que compartan propiedades, separándolos por comas: nombreselector1, nombreselector2, nombreselector3 { propiedad-1: valor; propiedad-2: valor;... propiedad-n: valor;

6 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.

7 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

8 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.

9 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 título{ Para declarar un selector en la hoja de estilos que hace referencia a un atributo class se utiliza la sintáxis: font-size: 10px; font-family: verdana, arial, helvetica; color: #000000; background-color: #ffffff; text-align: center;

10 Selector Class o tambien p.título{ font-size: 10px; font-family: verdana, arial, helvetica; color: #000000; background-color: #ffffff; 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.

11 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; font-family: verdana, arial, helvetica; color: #000000; background-color: #ffffff; text-align: center;

12 Selector Contextual Conocidos como selectores descendientes por su herencia de atributos p a{ font-size: 10px; font-family: verdana, arial, helvetica; color: #000000; background-color: #ffffff; text-align: center; Este código se aplicará a enlaces dentro de párrafos

13 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 # > #369 Mediante constantes: 16 disponibles: aqua, black, blue, fucshia, gray, green, lime, maroon, navy, olive, purple, red, silver, Lic. Mauricio teal, white Jaques y Soto yellow

14 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-family: verdana, arial, helvetica; font-weight: bold; :first-line permite asignar estilos a la primer línea contenida en un elemento. p:first-line{ color: red;

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

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

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

18 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 { 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)

19 Fuentes font-stretch: define expansión o compresión, los valores admitidos son: ultracondensed, extra-condensed, condensed, semi-condensed, normal, semiexpanded, 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.

20 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.

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

22 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

23 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).

24 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

25 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

26 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.

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

28 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.

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