Codigo css
Background
La propiedad background es un atajo para definir los valores individuales del fondo en una única regla CSS.
Background-color
La background-color propiedad especifica el color de fondo de un elemento.
Propiedad establece una o mas imagenes de fondo de un elemento
Sirve para indicar el color de fondo de un elemento de la página.
Background-image
La background-imagepropiedad establece una o más imágenes de fondo para un elemento.
Por defecto, una imagen de fondo se coloca en la esquina superior izquierda de un elemento, y se repite tanto vertical como horizontalmente.
Background-img
La propiedad de imagen de fondo en CSS aplica un gráfico (por ejemplo, PNG, SVG, JPG, GIF, WEBP) o degradado al fondo de un elemento.
img{
display:block;
margin:auto;
Background-foto
Propiedad establece si una imagen se desplanza fondo con el resto de la pagina.
La background-imagepropiedad especifica una imagen para usar como el fondo de un elemento.
Por defecto, la imagen se repite de manera que cubra todo el elemento.
Background-image
La background-imagepropiedad establece una o más imágenes de fondo de un elemento.
Por defecto, una imagen de fondo se coloca en la esquina superior izquierda de un elemento, y se repite tanto vertical como horizontalmente.
Background-repeat
Los background-repeatconjuntos de propiedades si / cómo se repetirá una imagen de fondo.
Por defecto, una imagen de fondo se repite tanto vertical como horizontalmente.
Background-position
La background-positionpropiedad establece la posición de partida una imagen de fondo.
Background-attachment
La background-positionpropiedad establece la posición de partida una imagen de fondo.
Color-----Propiedad color
La propiedad color establece el color con el que se muestra el texto contenido en un elemento. El color de la letra no puede ser transparente
rgb-----Valor para rojo verde azul
En CSS, un color se puede especificar como un valor RGB, utilizando esta fórmula:
RGB ( rojo, verde , azul )
Cada parámetro (rojo, verde, y azul) define la intensidad del color entre 0 y 255.
Por ejemplo, RGB (255, 0, 0) se muestra como rojo, porque el rojo está ajustado a su valor más alto (255) y los otros se establece en 0.
Para mostrar el color negro, todos los parámetros de color se deben establecer en 0, de esta manera: rgb (0, 0, 0).
Para mostrar el color blanco, todos los parámetros de color se deben establecer en 255, así: rgb (255, 255, 255).
hex-----Valor en Hexadecimal
En CSS, un color se puede especificar utilizando un valor hexadecimal en la forma:
# rrggbb
Donde rr (rojo), gg (verde) y BB (azul) son valores hexadecimales entre 00 y ss (igual que en decimal 0-255).
Por ejemplo, # FF0000 se muestra como rojo, porque el rojo se establece en su valor más alto (FF) y los otros se establece en el valor más bajo (00).
hsl-----Brillo y saturacion
La saturación puede ser descrito como la intensidad de un color.
100% es color puro, sin tonos de gris
50% es el 50% de gris, pero todavía se puede ver el color.
0% es completamente gris, ya no se puede ver el color.
rgba-----RGB con dominio de tranpariencia
valores de color RGBA son una extensión de valores de color RGB con un canal alfa - que especifica la opacidad de un color.
Un valor de color RGBA se especifica con:
RGBA ( rojo, verde , azul, alfa )
El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (no transparente en absoluto)
hsla-----HSL con dominio de tranpariencia
valores de color HSLA son una extensión de los valores de color HSL con un canal alfa - que especifica la opacidad de un color.
Un valor de color HSLA se especifica con:
HSLA ( tonalidad, saturación , luminosidad, alfa )
El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (no transparente en absoluto)
Dominio de bordes
Border
Los CSS borderpropiedades le permiten especificar el estilo, el ancho y el color del borde de un elemento.
Border-bottom
La border-bottompropiedad es una propiedad abreviada para (en el siguiente orden):
border-bottom-ancho
-Inferior-estilo de borde
border-bottom-color de
Si se omite border-bottom-color, el color aplicado será el color del texto.
Border-bottom-color
La border-bottom-colorpropiedad establece el color del borde inferior de un elemento.
Nota: declarar siempre el border-style o el -fondo-estilo de borde propiedad antes de la border-bottom-color propiedad. Un elemento debe tener un borde para poder cambiar el color.
Border-bottom-style
La border-bottom-stylepropiedad establece el estilo del borde inferior de un elemento.
Border-bottom-width
a border-bottom-widthpropiedad establece la anchura del borde inferior de un elemento.
Nota: declarar siempre el border-style o el -fondo-estilo de borde propiedad antes de la border-bottom-width propiedad. Un elemento debe tener fronteras antes de poder cambiar el ancho.
Border-color
La border-colorpropiedad establece el color de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Border-left
La border-leftpropiedad es una propiedad abreviada para (en el siguiente orden):
border-left-ancho
border-left-estilo (requerido)
border-left-color de
Si se omite border-left-color, el color aplicado será el color del texto.
Border-left-color
La border-left-colorpropiedad establece el color del borde izquierdo de un elemento.
Nota: declarar siempre el border-style o el estilo border-left propiedad antes de la border-left-colorpropiedad. Un elemento debe tener un borde para poder cambiar el color.
Border-left-style
La border-left-stylepropiedad establece el estilo del borde izquierdo de un elemento.
Border-left-width
La border-left-widthpropiedad establece la anchura del borde izquierdo de un elemento.
Nota: declarar siempre el border-style o el estilo border-left propiedad antes de la border-left-width propiedad. Un elemento debe tener fronteras antes de poder cambiar el ancho.
Border-radius
La border-radiuspropiedad define el radio de las esquinas del elemento.
Consejo: Esta propiedad le permite añadir esquinas redondeadas de los elementos!
Border-right
La border-rightpropiedad es una propiedad abreviada para (en el siguiente orden):
border-right-ancho
-derecha-estilo de borde (requerido)
border-right-color de
Si se omite border-right-color, el color aplicado será el color del texto.
Border-right-color
La border-right-colorpropiedad establece el color del borde derecho de un elemento.
Nota: declarar siempre el border-style o la derecha border-style propiedad antes de la border-right-colorpropiedad. Un elemento debe tener un borde para poder cambiar el color.
Border-right-style
La border-right-stylepropiedad establece el estilo del borde derecho de un elemento.
Border-right-width
La border-right-widthpropiedad establece la anchura del borde derecho de un elemento.
Nota: declarar siempre el border-style o la derecha border-style propiedad antes de la border-right-width propiedad. Un elemento debe tener fronteras antes de poder cambiar el ancho.
Border-style
La border-stylepropiedad establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Border-top
Los border-topAbreviación de las propiedades conjuntos de todas las propiedades del borde superior en una declaración.
Las propiedades que se pueden establecer debe estar en el orden siguiente:
border-top-ancho
-estilo borde superior (requerido)
border-top-colores
Border-top-color
La border-top-colorpropiedad establece el color del borde superior de un elemento.
Nota: declarar siempre el border-style o el -estilo borde superior propiedad antes de la border-top-color propiedad. Un elemento debe tener un borde para poder cambiar el color.
Border-top-style
La border-top-stylepropiedad establece el estilo del borde superior de un elemento.
Border-top-wdth
La border-top-widthpropiedad establece la anchura del borde superior de un elemento.
Nota: declarar siempre el border-style o el -estilo borde superior propiedad antes de la border-top-width propiedad. Un elemento debe tener fronteras antes de poder cambiar el ancho.
Border-width
La border-widthpropiedad establece la anchura de cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Los margenes y Padding
Margin
La marginpropiedad establece los márgenes de un elemento, y es una propiedad abreviada para las siguientes propiedades:
margin-top
margin-right
margin-bottom
margin-left
Margin-left
La margin-leftpropiedad establece el margen izquierdo de un elemento.
Nota: Los valores negativos son permitidos.
Margin-top
La margin-toppropiedad establece el margen superior de un elemento.
Nota: Los valores negativos son permitidos.
Margin-right
La margin-rightpropiedad establece el margen derecho de un elemento.
Nota: Los valores negativos son permitidos.
Margin-bottom
La margin-bottompropiedad establece el margen inferior de un elemento.
Nota: Los valores negativos son permitidos.
Padding
La paddingpropiedad es una propiedad abreviada para:
acolchado superior
padding-right
fondo acolchado
padding-left
Nota: El relleno crea espacio adicional dentro de un elemento, mientras que el margen crea un espacio adicional alrededor de un elemento.
Esta propiedad puede tener de uno a cuatro valores.
Padding-bottom
La padding-bottompropiedad establece el relleno inferior (espacio) de un elemento.
Nota: Negativo valores no están permitidos.
Padding-left
La padding-leftpropiedad establece el relleno a la izquierda (espacio) de un elemento.
Nota: Negativo valores no están permitidos.
Padding-right
La padding-rightpropiedad establece el relleno derecho (espacio) de un elemento.
Padding-top
La padding-toppropiedad establece el relleno superior (espacio) de un elemento.
Nota: Negativo valores no están permitidos.
Altura y ancho de la paginas web
Height
El heighty widthpropiedades se utilizan para ajustar la altura y la anchura de un elemento.
Las propiedades altura y anchura no incluyen relleno, bordes, o los márgenes. Se define la altura / anchura de la zona dentro de la relleno, borde, y el margen del elemento.
Max-height
La max-heightpropiedad define la altura máxima de un elemento.
Si el contenido es mayor que la altura máxima, se desborde. Como el contenedor manejará el contenido desborde está definido por el desbordamiento de la propiedad.
Si el contenido es menor que la altura máxima, la max-heightpropiedad no tiene efecto.
Max-width
La max-widthpropiedad define la anchura máxima de un elemento.
Si el contenido es mayor que la anchura máxima, que va a cambiar automáticamente la altura del elemento.
Si el contenido es menor que la anchura máxima, la max-widthpropiedad no tiene efecto.
Min-height
La min-heightpropiedad define la altura mínima de un elemento.
Si el contenido es menor que la altura mínima, se aplicará la altura mínima.
Si el contenido es mayor que la altura mínima, la min-heightpropiedad no tiene efecto.
Min-width
La min-widthpropiedad define la anchura mínima de un elemento.
Si el contenido es menor que el ancho mínimo, se aplicará la anchura mínima.
Si el contenido es mayor que el ancho mínimo, la min-widthpropiedad no tiene efecto.
Width
La widthpropiedad establece el ancho de un elemento.
El ancho de un elemento no incluye el relleno, bordes o márgenes!
Modelos de cajas de CSS
Outline
La outlinepropiedad es una propiedad abreviada para:
contorno de ancho
esbozo de estilo (requerido)
contorno color
Outline-width
El outline-widthespecifica la anchura de un esquema.
Nota: declarar siempre el estilo de contorno propiedad antes de la outline-widthpropiedad. Un elemento debe tener un esquema antes de cambiar el ancho de la misma.
Outline-color
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
The outline-color property specifies the color of an outline.
Outline-color
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
The outline-color property specifies the color of an outline.
Outline-offset
El outline-offsetestablecimiento tiene espacio entre un esquema y el borde o borde de un elemento.
El espacio entre un elemento y su contorno es transparente.
Outline-style
Un esquema es una línea que se dibuja alrededor de los elementos (fuera de las fronteras) para hacer que el elemento de "sobresalir".
La outline-stylepropiedad especifica el estilo de un esquema.
Direction
La directionpropiedad especifica la dirección del texto / dirección de escritura dentro de un elemento en bloque.
Letter-spacing
Las letter-spacingpropiedad aumenta o disminuye el espacio entre caracteres en un texto.
Line-height
La line-heightpropiedad especifica la altura de una línea.
Nota: Negativo valores no están permitidos.
Manejo de texto y estilo a traves de CSS
text-align
La text-alignpropiedad especifica la alineación horizontal del texto en un elemento.
text-decoration
La text-decorationpropiedad especifica la decoración añadida al texto, y es una propiedad abreviada para:
text-decoration-line (requerido)
text-decoration color
-Decoración de estilo de texto
text-indent
La text-indentpropiedad especifica la sangría de la primera línea en un bloque de texto.
text-shadow
El text-shadowestablecimiento tiene sombra al texto.
Esta propiedad acepta una lista separada por comas de sombras que se aplicará al texto.
text-transform
La text-transformpropiedad controla la capitalización de texto.
text-overflow
Las text-overflowespecifica cómo el contenido de propiedad desbordado que no se muestra deben señalizarse al usuario. Se puede sujetar, muestra unos puntos suspensivos (...), o mostrar una cadena personalizada.
unicode-bidi
La unicode-bidipropiedad se utiliza junto con la dirección de la propiedad para establecer o devolver si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento.
vertical-align
La vertical-alignpropiedad establece la alineación vertical de un elemento.
white-space
La white-spacepropiedad especifica cómo se maneja un espacio en blanco dentro de un elemento.
word-spacing
Los word-spacingpropiedad aumenta o disminuye el espacio en blanco entre las palabras.
Nota: Los valores negativos son permitidos.
font
The font property is a shorthand property for:
font-style
font-variant
font-weight
font-size/line-height
font-family
font-family
La font-familypropiedad especifica el tipo de letra de un elemento.
La font-familypropiedad puede contener varios nombres de fuentes como un sistema de "retroceso". Si el navegador no es compatible con la primera fuente, se trata la próxima fuente.
font-size
La font-sizepropiedad establece el tamaño de la fuente.
font-style
La font-stylepropiedad especifica el estilo de fuente para un texto.
font-variant
Los font-variantespecifica de propiedad si o no un texto debe ser representada en un pequeño-casquillos de fuente.
font-weight
La font-weightpropiedad establece cómo se deben mostrar caracteres gruesas o delgadas en el texto.
*Como agregar iconos dimenciones tamaños de los iconos
Haz clic con el botón derecho en el escritorio (o mantenlo presionado), elige Ver y selecciona Iconos grandes, Iconos medianos o Iconos pequeños.
Los link en CSS
a:link -
a normal, unvisited linK
a:visited
- a link the user has visited
a:hover -
a link when the user mouses over it
a:active -
a link the moment it is clicked
Las listas
list-style-type
La list-style-typepropiedad especifica el tipo de marcador lista de elementos.
list-style-position
Es para indicar en que parte estara la viñeta usada para hacer lista, si dentro o fuera.
list-style-image
Es para establecer una imagen que hará la función de viñeta en el elemento especificado.
Las tablas en CSS
border-collapse
Este se encarga de establecer un modelo de bordes cerrados por dos tablas, osea señalando los ítemes en tablas.
border-spacing
Este define el relleno que tendrá entre los cuadros de los itemes y el borde.
caption-side
Se utiliza para indicar donde se colocara el titulo de esas tablas, si es arriba o abajo
empty-cells
Su propósito se encarga de mostrar o no un cuadro en una tabla que esta vacía
table-layout
Este se encarga de adaptar o definir el tamaño de elementos especificos con un algoritmo para diseñar las celdas, filas y columnas
nth-child(even)
Define el color de fondo de cada p, odd y even son keywords se usan para que coincida con un elemento cuyo indice sea par o impar
nth-child(ODD)
OPCIONES DE FORMATO EN CSS INTERMEDIAS
DISPLAY
Este es el encargado de manifestar como estará el elemento designado, Existen muchos estilos de mostrar la letra
POSITION
Es el encargado de especificar la lejanía de la parte superior osea posicionar un elemento dentro del documento
POSITION:STATIC
Este es para declarar que un elemento propio se encontrara en un lugar estándar.
POSITION:RELATIVE
Este es para precisar en que posición se encontrara, usando left, right, top y bottom
POSITION: FIXED
El elemento es removido en el flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la pagina.
POSITION:ABSOLUTE
Un elemento con posición: absoluto; se postura en relación con el antepasado posicionado más cercano.
POSITION:STICKY
Simboliza a un elemento (Como una entrada de un formulario) que ha recibido el foco. Se activa cuando el usuario hace clic en un elemento.
BOTTOM:
Está encargado de definir que tanto lejos estará un elemento en específico hacia la parte de abajo del documento
LEFT
Está encargado de definir que tanto lejos estará un elemento en específico hacia la izquierda del documento
RIGHT
Está encargado de precisar que tanto lejos estará un elemento en específico hacia la derecha del documento.
TOP
Este se encarga de definir que tanto lejos estará un elemento en específico hacia la parte de arriba del documento.
Z-INDEX
Este es el encargado de de cual de los elemento que se encuentren agrupados en un mismo espacio se encontrara sobre el otro.
OVERFLOW
Esta encargado de delimitar como estará un texto dentro de un cuadro de textos, los cuales pueden tener diferentes elementos.
OVERFLOW-X
Es el encargado de definir como se encontrara un texto dentro de un cuadro de textos, los cuales pueden tener diferentes elementos en el eje x.
OVERFLOW-Y
Es el encargado de detallar como estará un texto dentro de un cuadro de textos, los cuales pueden tener diferentes elementos en el eje y.
OVERFLOW:VISIBLE
Este es un un valor permitido de overflow, el texto dentro del cuadro de texto se vera entero quepa o no en este cuadro.
OVERFLOW:HIDDEN
Este solo mostrara las palabras que estén dentro del cuadro de texto, que quepan en el, las demás no se mostraran
OVERFLOW: SCROLL
Este muestra el texto entero pero dentro del cuadro de texto usando dos barras de desplazamiento, para subir y para los lados
OVERFLOW: AUTO
Este muestra el texto entero pero dentro del cuadro de texto usando una barra de desplazamiento, para subir y bajar.
BOX-SIZING
Define cómo se calculan el ancho y el alto de un elemento: si deben incluir relleno y bordes, o no
CLEAR
Controla el comportamientos de los elementos adyacentes a elementos posicionados de forma flotante
FLOAT
La propiedad float se utiliza para posicionar un contenido,ya sea, dejar que una imagen flote a la izquierda o derecha.
FLOAT:LEFT
El valor permitido float-left Accede a que un elemento predeterminado pueda flotar a la izquierda.
FLOAT:RIGHT
El valor permitido float-right Accede a que un elemento predeterminado pueda flotar a la derecha.
FLOAT: NONE
El valor permitido float-none este hace que un valor no flote,es decir, se presenta como aparece en el texto.
FLOAT: INHERIT
El valor permitido float-inherit es aquel que se encarga de el elemento herede el valor de su padre.
PROPIEDAD FOCUS
Simboliza a un elemento (Como una entrada de un formulario) que ha recibido el foco. Se activa cuando el usuario hace clic en un elemento.
Comentarios
Publicar un comentario