CODIFICACIÓN DE CSS Bryan Caraballo
ESTE CONTENIDO DE CSS ATRIBUTOS
Formas de insertar código de CSS en HTML--en línea, etiqueta
style, archivo externo
PROPIEDADES DE FONDOS DE LA PÁGINA
background
Propiedad establece una o más imágenes de fondo de un elemento
Background-color
es un propiedad de CSS que define el color de fondo de un
elemento
background-imagen
La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento.
propiedad establece si una imagen se desplaza fondo con el resto de la página, o es fijo.
background-repeat.
La propiedad de CSS background-repeat define como se repiten
los fondos del documento.
background-position
define la posición inicial de la imagen de fondo
especificada.
background-attachment
determina si la posición de la imagen de fondo será fija
dentro de la pantalla o se desplazará con su bloque contenedor.
color
PROPIEDAD COLOR
rgb
VALOR PARA ROJO VERDE AZUL
hex
VALOR EN HEXADECIMAL
hsl
BRILLO Y SATURACION
rgba
RGB CON DOMINIO DE TRANSPARENCIA
hsla
HSL CON DOMINIO DE TRANSPARENCIA
DOMINIO DE BORDES
border
establece el estilo de línea para
los cuatro lados del borde de un elemento.
border-bottom
La propiedad border-bottom
permite de definir de una vez todas las propiedades
border-bottom-color
define el color del borde inferior de un elemento
border-bottom-style
define el
estilo de línea del borde inferior de una caja
border-bottom-width
define el ancho
del borde inferior de una caja.
border-color
es un atajo
para definir el color de los cuatro bordes de un elemento.
border-left
borde izquierdo
de un elemento
border-left-color
pone el color del borde izquierdo de un elemento,
border-left-style
es una propiedad rápida para poner el estilo
border-left-width
es una propiedad rápida para poner el ancho
border-radius
establece el redondeo de la esquina superior
border-right
borde derecho de un elemento
border-right-color
pone el color del borde derecho de un elemento,
border-right-style
es una propiedad rápida para poner el estilo
border-right-width
es una propiedad rápida para poner el ancho
border-style
es una propiedad rápida para poner el estilo
border-top
border-top-color
establece el color superior de un elemento border .
border-top-style
permite establecer el estilo del borde superior de un
elemento.
border-top-width
permite establecer la anchura del borde superior de un elemento de diferentes formas.
border-width
establecer de forma abreviada el valor de una o más propiedades individuales.
LOS MARGENES Y PADDING
margin
La propiedad CSS margin establece el margen para los cuatro
lados
margin-left
La propiedad CSS margin-left establece el área de margen en el lado izquierdo de un elemento
margin-top
establece el margen superior de un elemento especificando una
longitud o un porcentaje
margin-right
establece el margen derecho de un elemento especificando una
longitud o un porcentaje.
margin-bottom
es la propiedad de un elemento que establece el espacio requerido
en la parte inferior de un elemento
padding
establece el espacio de relleno requerido por todos los lados de
un elemento.
padding-bottom
crea espacio extra dentro de un elemento
padding-left
propiedad establece el relleno izquierdo (espacio)
de un elemento
padding-right
propiedad establece el relleno derecho (espacio) de un elemento
padding-top
establecer el ancho del área de relleno en la
parte superior de un elemento.
ALTURA Y ANCHO DE LAS PAGINAS WEB
height
define especifica la altura del contenido de los
cuadros y acepta cualquiera de los valores de longitud
max-height
define la altura máxima de un elemento.
max-width
propiedad define el ancho máximo de un elemento.
min-height
propiedad define la altura mínima de un elemento.
min-width
propiedad define el ancho mínimo de un elemento.
width
propiedad establece el ancho de un elemento.
MODELOS DE CAJAS DE CSS
outline
propiedad especifica el estilo del contorno
outline-width
Un contorno es una línea que se dibuja alrededor de los elementos
outline-color
Un contorno es una línea que se dibuja alrededor de los elementos
outline-offset
propiedad agrega espacio entre el contorno y el borde o borde de un elemento.
outline-style
propiedad especifica el estilo de un esquema
outline-width
es una línea que se dibuja alrededor de los elementos
direction
propiedad especifica la dirección del texto/dirección de escritura dentro de un elemento a nivel de bloque.
letter-spacing
propiedad aumenta o disminuye el espacio entre caracteres en un texto
line-height
propiedad especifica la altura de una línea.
MANEJO DE TEXTO Y ESTILO A TRAVES DE CSS
text-align
propiedad especifica la alineación horizontal del texto en un elemento.
text-decoration
propiedad especifica la decoración añadida al texto
text-indent
propiedad especifica la sangría de la primera línea en un bloque de texto.
text-shadow
propiedad agrega sombra al texto.
text-transform
propiedad controla las mayúsculas del texto
text-overflow
propiedad especifica cómo se debe señalar al usuario el contenido desbordado que no se muestra.
unicode-bidi
propiedad se usa junto con la propiedad de dirección para establecer o devolver si el texto
vertical-align
propiedad establece la alineación vertical de un elemento
white-space
propiedad especifica cómo se maneja el espacio en blanco dentro de un elemento.
word-spacing
propiedad aumenta o disminuye el espacio en blanco entre palabras.
font-family
propiedad para especificar la fuente de un texto.
font-size
propiedad establece el tamaño del texto
font-style
propiedad se utiliza principalmente para especificar texto en cursiva.
font-variant
propiedad especifica si un texto debe mostrarse o no en letra minúscula
font-weight
propiedad establece qué tan gruesos o delgados deben mostrarse los caracteres en el texto
COMO AGREGAR ICONOS
DIMENSIONES O TAMAÑOS DE LOS ICONOS
LOS LINK EN CSS
a:link
etiqueta HTML define un hipervínculo.
a:visited
selector se utiliza para seleccionar enlaces visitados.
a:hover
selector se usa para seleccionar elementos cuando pasa el mouse sobre ellos.
a:active
se utiliza para seleccionar y diseñar el enlace activo.
LAS LISTAS
list-style-type
tipo de marcador de elemento de lista en una lista.
list-style-position
propiedad especifica la posición de los marcadores de elementos de lista (viñetas).
list-style-image
propiedad reemplaza el marcador de elemento de lista con una imagen.
LAS TABLAS EN CSS
border-collapse
propiedad establece si los bordes de la tabla deben contraerse en un solo borde o separarse como en HTML estándar.
border-spacing
propiedad establece la distancia entre los bordes de las celdas adyacentes.
caption-side
propiedad especifica la ubicación de un título de tabla.
empty-cells
propiedad establece si mostrar o no los bordes en las celdas vacías de una tabla.
table-layout
propiedad define el algoritmo utilizado para diseñar celdas, filas y columnas de la tabla.
nth-child(even)
El selector coincide con cada elemento que es el enésimo hijo
nth-child(ODD)
El selector coincide con cada elemento que es el enésimo hijo
OPCIONES DE FORMATO EN CSS INTERMEDIAS
DISPLAY
propiedad especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento.
position
propiedad especifica el tipo de método de posicionamiento utilizado para un elemento
position:static
El posicionamiento estático es el predeterminado.
position:relative
coloca un elemento en relación con la posición de su padre y cambia el diseño a su alrededor.
bottom
propiedad afecta la posición vertical de un elemento posicionado
left
propiedad afecta la posición horizontal de un elemento posicionado
right
propiedad afecta la posición horizontal de un elemento posicionado.
top
propiedad afecta la posición vertical de un elemento posicionado.
z-index
propiedad especifica el orden de pila de un elemento.
overflow
propiedad especifica lo que debería suceder si el contenido desborda el cuadro de un elemento.
overflow-x
para determinar el recorte en los bordes superior e inferior.
overflow-y
determinar el recorte en los bordes izquierdo y derecho.
box-sizing
permite incluir el relleno y el borde en el ancho y alto total de un elemento
clear
propiedad controla el flujo junto a los elementos flotantes.
float
FLOAT:LEFT
El elemento flota a la izquierda de su contenedor.
FLOAT:RIGHT
FLOAT: NONE
FLOAT: INHERIT
PROPIEDAD FOCUS
selector se utiliza para seleccionar el elemento que tiene el foco.
Comentarios
Publicar un comentario