Propiedades CSS3

Vista previa del material en texto

propiedades css3
Documento de lectura
1
Propiedades CSS3
Este documento tiene como finalidad dar a conocer cuál es la sintaxis para la definición de Clases, IDs 
o la asignación de propiedades a selectores de manera directa, por lo antes mencionado se recomienda 
primero leer el documento de lectura Introducción a CSS3.
Selectores en CSS
Para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector CSS se puede definir 
como el código que identifica a uno o varios elementos HTML para aplicarle estilos de color, tamaño, 
separación, etc. Los selectores más comunes son aquellos que se asignan a clases (class), identificadores 
(id) o directamente a elementos HTML como por ejemplo la navegación (nav). Sin embargo, en desarrollos 
complejos necesitamos utilizar otros selectores más avanzados para poder aplicar diferentes estilos en 
elementos anidados o listados complejos, como puede ser una capa dentro de otra con el mismo nombre 
de clase.
El selector más común, identifica directamente a las etiquetas HTML. Los atributos se aplican a todos los 
elementos mencionados. Por ejemplo, cuando definimos que la etiqueta <p> será de color rojo, este 
atributo será aplicado a todos los elementos dentro de esta etiqueta.
 
Se lee: aplicar color rojo a todos los párrafos del o los documentos donde se aplica el selector.
Se lee: aplicar color azul al fondo del cuerpo del documento HTML.
Clases CSS 
Es normal querer definir unos estilos globales en hojas externas que homogenicen el aspecto de nuestras 
páginas, y luego, en una página concreta querer variar el estilo en alguna etiqueta concreta. 
Como ya sabemos, esto podemos hacerlo definiendo el estilo localmente en esa etiqueta, pero no es 
muy recomendable por razones de gestión o actualización (más tardado). 
2
Pero también puede suceder que esta definición de un estilo concreto queramos aplicarla a otra etiqueta.
Una clase es una definición de un estilo que en principio no está asociado a alguna etiqueta HTML, pero 
que podemos asociar a etiquetas concretas. 
Para ello, en primer lugar, definimos la clase:
.nombre_de_nuestra_clase {valor1: valor; valor2:valor, etc..}
Es decir, escribiendo un punto seguido del nombre que le queramos dar a la clase, y definiendo el estilo 
como lo definimos para cualquier otra etiqueta: para propiedad: valor separados por punto y coma y 
encerrados entre llaves. Además, podremos definir cuantas clases necesitemos. 
Para aplicar el estilo de una clase a una etiqueta utilizamos el parámetro CLASS:
<etiqueta CLASS=”nombre_de_nuestra_clase”> ... </etiqueta>
 Importante: Cuando se hace referencia a una clase, se debe colocar el nombre sin el punto 
Mediante la definición de ‘clases’ se establecen estilos que pueden aplicarse a cualquier etiqueta de 
HTML. El estilo no se vincula a una etiqueta concreta sino a una ‘clase’. Esta clase, actúa como atributo 
de cualquier etiqueta, cada vez que se quiera llamar a ese estilo, basta con incluir el nombre de esa clase 
dentro de la etiqueta correspondiente.
3
Identificadores CSS
El atributo “id” es similar a class (Permite llamar desde un elemento a un código CSS) con la diferencia 
de que el atributo id solo puede aplicarse a un elemento, no a tantos como quisiéramos, como se hacía 
con el atributo class.
Es decir, el atributo ID sirve para identificar un elemento, y solo debe usarse para identificar un único 
elemento, si queremos que pertenezcan a varios elementos entonces debemos usar las clases. Se podría 
decir que las clases son para grupos. Con el atributo ID también se puede dirigir al visitante a un punto 
de la página (texto).
Un uso incorrecto de las clases sería definir las clases para un único elemento, porque se puede utilizar 
#ID para este propósito. Por ejemplo, cuando debemos identificar una única cabecera (class=”header”).
Un uso incorrecto de los #ID´s es definir los estilos de cada elemento de forma individual en lugar de 
agrupar todos los estilos que sean comunes y aplicarlos por clases.
Un ejemplo con el atributo id sería este:
 
El código CSS para efectuar el estilo del id sería este:
 
 Importante: Si te fijas, hemos puesto una almohadilla (#elegante) en vez de un punto 
(.elegante) como hacíamos con el atributo class, esta es otra de las diferencias respecto al otro 
atributo.
4
La forma más sencilla es simplemente usar selectores de elementos. Por ejemplo:
 Esta regla haría que todo el texto dentro de la etiqueta body sea de color negro.
Pero a lo mejor queremos que el texto de los párrafos (identificados con el elemento <p>) tenga un 
color un poquito diferente, digamos, gris oscuro. Pues nada, definimos el color gris oscuro para los 
elementos de párrafo
 
Claro que ahora quizá nos interesa destacar alguno de los párrafos de manera especial. Por ejemplo, 
poner un párrafo importante de color naranja o un párrafo que es resumen de todo el contenido en 
color púrpura y letra itálica (para gustos, colores...). ¿Cómo le decimos al navegador esto? En este caso 
podemos hacer uso de clases e Ids para especificar estas propiedades.
Propiedades de las Hojas de Estilo en Cascada - CSS
A continuación, se enlistan una serie de propiedades CSS agrupados según su funcionalidad.
Propiedades de texto
propiedad descripción css
color Establecer el color del texto
1
direction Especifica la dirección del texto / dirección de escritura
2
letter-spacing Aumenta o disminuye el espacio entre caracteres en 
un texto 1
line-height Establece la altura de la línea.
1
5
text-align Especifica la alineación horizontal del texto.
1
text- decoration Especifica la decoración añadida al texto.
1
text-indent Especifica la sangría de la primera línea en un bloque 
de texto 1
text- transform Controla la capitalización del texto.
1
vertical-align Establece la alineación vertical de un elemento.
1
white-space Especifica cómo se maneja el espacio en blanco 
dentro de un elemento 1
word-spacing Aumenta o disminuye el espacio entre palabras en un 
texto 1
hanging- punctuation Especifica si un carácter de puntuación se puede 
colocar fuera del cuadro de línea 3
punctuation- trim Especifica si se debe recortar un carácter de puntuación
3
text-align- last Describe cómo se alinea la última línea de un bloque 
o una línea justo antes de un salto de línea forzado 
cuando la alineación de texto se “justifica”
3
text-justify Especifica el método de justificación utilizado cuando 
text-align es “justify” 3
text-outline Especifica un esquema de texto
3
text-overflow Especifica qué debe suceder cuando el texto desborda 
el elemento contenedor 3
text-shadow Agrega sombra al texto
3
text-wrap Especifica reglas de salto de línea para texto
3
6
word-break Especifica reglas de salto de línea para scripts que no 
son CJK 3
word-wrap Permite que las palabras largas e irrompibles se 
rompan y pasen a la siguiente línea 3
Propiedades de Fondo
propiedad descripción css
background Establece todas las propiedades de fondo en una sola 
declaración. 1
background- attachment Establece si la imagen de fondo es fija o se mueve con 
el resto de la página. 1
background-color Establece el color de un elemento.
1
background- image Establece la imagen de fondo de un elemento.
1
background- Establece la posición de inicio de la imagen de fondo.
1
background- repeat Establece como se debe repetir la imagen de fondo.
1
background-clip Especifica una zona de pintura del fondo.
3
background- origin Especifica el área de posicionamiento de la imagen 
de fondo. 3
background-size Especifica el tamaño de la imagen de fondo.
3
7
Propiedades de Borde y Contorno
propiedad descripción css
border Establece todos los bordes en una sola declaración.
1
border-bottom Establece todos los bordes inferiores en una 
declaración. 1
border-bottom- color Establece el color de los bordes inferiores.
1
border-bottom- style Establece el estilo de los bordes inferiores.
1
border-bottom- width Establece el ancho de los bordes inferiores.1
border-color Establece el color de los cuatro bordes.
1
border-left Establece todas las propiedades de los bordes 
izquierdos en una sola declaración. 1
border-left-color Establece el color del borde izquierdo.
1
border-left-style Establece el estilo del borde izquierdo.
1
border-left-width Establece el ancho del borde izquierdo.
1
border-right Establece todas las propiedades de los bordes 
derechos en una sola declaración. 1
border-right- color Establece el color del borde derecho.
1
border-right- style Establece el estilo del borde derecho.
1
border-right- width Establece el ancho del borde derecho.
1
border-style Establece el estilo de los cuatro bordes.
1
8
border-top Establece todas las propiedades de los bordes 
superiores en una sola declaración. 1
border-top-color Establece el color del borde superior.
1
border-top-style Establece el estilo del borde superior.
1
border-top-width Establece el ancho del borde superior.
1
border-width Establece el ancho de los cuatro bordes.
1
outline Establece todas las propiedades de contorno en una 
sola declaración. 2
outline-color Establece el color de un contorno.
2
outline-style Establece el estilo de un contorno.
2
outline-width Establece el ancho de un contorno.
2
border-bottom- left-
radius
Define la forma del borde de la esquina inferior 
izquierda. 3
border-bottom- right-
radius
Define la forma del borde de la esquina inferior 
derecha. 3
border-image Establece todos los bordes con imagen.
3
border-image- outset Especifica la cantidad por la cual se debe extender el 
ancho del borde para la imagen. 3
border-image- repeat Especifica si el borde de imagen debe repetirse 
redondeado o estirado. 3
border-image- slice Especifica el desplazamiento interno del borde de la 
imagen. 3
border-image- source Especifica que una imagen es utilizada como borde. 3
9
border-image- width Especifica los anchos de los bordes de la imagen.
3
border-radius Abreviatura para establecer los cuatro bordes *-radius 
Property 3
border-top-left- radius Define la forma del borde de la esquina superior 
izquierda. 3
border-top- right-radius Define la forma del borde de la esquina superior 
derecha. 3
box-decoration- break Sin borde.
3
box-shadow Adjunta una o más sombras al recuadro (box)
3
Propiedades de Cuadro (Box)
propiedad descripción css
overflow-x Especifica si se debe cortar el borde derecho/
izquierdo del contenido, si este se expande más que 
el elemento contenedor.
3
overflow-y Especifica si se debe cortar el borde superior/inferior 
del contenido, si este se expande más que el elemento 
contenedor.
3
overflow- style Especifica el método de scroll preferido para elementos 
que se desbordan. 3
rotation Rota un elemento a un punto definido por la 
propiedad rotation-point. 3
rotation- point Define un punto como un desplazamiento de la 
esquina del borde superior izquierdo. 3
10
Propiedades de Color
propiedad descripción css
color-profile Permite la especificación de una fuente de colores 
diferente a la por defecto. 3
opacity Establece el nivel de opacidad del elemento.
3
rendering-intent Permite la especificación del perfil de color en vez del 
por defecto. 3
color-profile Permite la especificación de una fuente de colores 
diferente a la por defecto. 3
opacity Establece el nivel de opacidad del elemento.
3
Propiedades de Dimensión
propiedad descripción css
Height Establece el alto de un elemento.
1
max-height Establece la máxima altura de un elemento.
2
max-width Establece el máximo ancho de un elemento
2
min-height Establece la mínima altura de un elemento
2
min-width Establece el mínimo ancho de un elemento
2
11
Propiedades de Fuente
propiedad descripción css
Font Establece todas las propiedades de fuente en una 
sola declaración. 1
font-family Especifica la familia de fuente del texto.
1
font-size Especifica el tamaño de fuente del texto.
1
font-style Especifica el estilo de fuente del texto.
1
font-variant Especifica si el texto debe mostrarse en minúscula.
1
font-weight Especifica el peso (grosor) de la fuente.
1
@font-face Es una regla que permite descargar fuentes de sitios 
web, diferentes a los estilos de fuente utilizados 
generalmente.
3
font-size-adjust Preserva la legibilidad del texto en caso de errores.
3
font-stretch Selecciona una fuente normas, condensada o 
expandida de una familia de fuentes. 3
Propiedades de hipervínculo
propiedad descripción css
Target Una abreviatura que permite definir donde y como 
se abrirá el contenido del enlace. 3
target-name Especifica dónde abrir el enlace.
3
target-new Especifica si el Nuevo enlace debe abrirse en la misma 
ventana, otra ventana u otra pestaña. 3
12
target-position Especifica dónde debe ubicarse el contenido del 
enlace. 3
target Una abreviatura que permite definir donde y como se 
abrirá el contenido del enlace. 3
Propiedades de Listas
propiedad descripción css
list-style Establece todas las propiedades de lista en una sola 
declaración. 1
list-style-image Especifica una imagen como icono de la lista (viñeta).
1
list-style-position Especifica si la viñeta debe aparecer dentro o fuera 
del contenedor. 1
list-style-type Especifica el tipo de viñeta de la lista.
1
list-style Establece todas las propiedades de lista en una sola 
declaración. 1
Propiedades de Padding
propiedad descripción css
padding Establece todos los espacios Propiedades en una 
declaración. 1
padding-bottom Establece el espaciado inferior de un elemento.
1
padding-left Establece el espacio izquierdo de un elemento.
1
padding-right Establece el espacio derecho de un elemento.
1
padding-top Establece el espaciado superior de un elemento. 1
13
Propiedades de Posicionamiento
propiedad descripción css
bottom Especifica la posición inferior de un elemento 
posicionado. 2
clear Especifica cual lado de un elemento donde no se 
permite otro elemento flotante 1
clip Corta un elemento posicionado en forma absoluta.
2
cursor Especifica el tipo de cursos que debe mostrarse.
2
display Especifica cómo debe mostrarse un cierto elemento 
HTML. 1
float Especifica si una caja debe o no flotar.
1
left Especifica la posición izquierda de un elemento 
posicionado. 2
14
overflow Especifica que sucede si un contenido excede la caja.
2
position Especifica el tipo de método de posicionamiento 
utilizado para un elemento (static, relative, absolute 
or fixed)
2
right Especifica la posición derecha de un elemento 
posicionado. 2
top Especifica la posición superior de un elemento 
posicionado. Especifica la posición superior de un 
elemento posicionado.
2
visibility Especifica si el elemento es visible o no.
2
z-index Establece el orden de apilamiento del elemento 
posicionado. 2
15
Propiedades de Tablas
propiedad descripción css
border-collapse Especifica si los bordes de la table deben o no 
colapsar. 2
border-spacing Especifica la distancia entre los bordes adyacentes de 
las celdas. 2
caption-side Especifica la ubicación del elemento caption de la 
tabla. 2
empty-cells Especifica si los bordes y el fondo debe o no llenar las 
celdas de la tabla. 2
border-collapse Especifica si los bordes de la table deben o no colapsar.
2
16
 
Eguiluz , J. (2011). Introducción a CSS. Obtenido de https://uniwebsidad.com/libros/css
Iglesias, P. (20 de abril de 2015). Clases e IDs en CSS: Cuándo y cómo usarlas . Obtenido de https://www.
campusmvp.es/recursos/post/clases-ids-css-cuando-como-usarlas.aspx