View
12
Download
0
Category
Preview:
Citation preview
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).
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.
<p id=”titulo”> texto del título</p>
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.
<p class=”titulo”>texto del título</p>
<p class=”contenido”>contenido</p>
<p class=”titulo”>texto del título dos</p>
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;
font-family: verdana, arial, helvetica;
color: #000000;
background-color: #ffffff;
text-align: center;
}
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.
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;
}
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
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
Lic. Mauricio Jaques Soto
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;
}
Lic. Mauricio Jaques Soto
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;
}
Lic. Mauricio Jaques Soto
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;
}
Lic. Mauricio Jaques Soto
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)
Lic. Mauricio Jaques Soto
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)
Lic. Mauricio Jaques Soto
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.
Lic. Mauricio Jaques Soto
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.
Lic. Mauricio Jaques Soto
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;
Lic. Mauricio Jaques Soto
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
Lic. Mauricio Jaques Soto
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).
Lic. Mauricio Jaques Soto
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
Lic. Mauricio Jaques Soto
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
Lic. Mauricio Jaques Soto
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.
Lic. Mauricio Jaques Soto
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)
Lic. Mauricio Jaques Soto
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.
Lic. Mauricio Jaques Soto
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)
Lic. Mauricio Jaques Soto
Recommended