PROPIEDADES DE FONDOS DE LA PAGINA
Background
La propiedad de fondo en CSS le permite controlar el fondo de cualquier elemento (lo que pinta debajo del contenido de ese elemento). Es una propiedad abreviada, lo que significa que le permite escribir lo que serían múltiples propiedades CSS en una.
Background-color
Propiedad de background-color. La propiedad de color de fondo en CSS se utiliza para especificar el color de fondo de un elemento. El fondo cubre el tamaño total del elemento con relleno y borde pero excluyendo el margen. Hace que el texto sea tan fácil de leer para el usuario.
background-image
Hay dos tipos diferentes de imágenes que puede incluir con CSS: imágenes regulares y degradados.
background-repeat.
background-position
La propiedad de posición de fondo en CSS le permite mover una imagen de fondo (o gradiente) dentro de su contenedor.
background-attachment
Hay tres valores: desplazamiento, fijo y local. La mejor manera de explicar esto es a través de una demostración
color (Propiedad)
La propiedad CSS de color establece el valor de color de primer plano del texto y las decoraciones de texto de un elemento, y establece el valor de color actual. currentcolor puede usarse como un valor indirecto en otras propiedades y es el valor predeterminado para otras propiedades de color, como border-color.
rgb (Funcion)
La función CSS rgb () se puede usar para proporcionar un valor de color cuando se usa CSS. Le permite especificar un valor de color RGB especificando los canales rojo, verde y azul directamente.
hex (Valor)
Color-hex proporciona información sobre colores, incluidos modelos de color (RGB, HSL, HSV y CMYK), colores triádicos, colores monocromáticos y colores análogos calculados en la página de colores. Color-hex.com también genera un código CSS simple para el color seleccionado. Las muestras de elementos HTML también se muestran debajo de la página de detalles de color.
hsl (Valor)
HSL (las funciones hsl () y hsla () en CSS) significa matiz, saturación, luminosidad y, opcionalmente, alfa. Ya lo hemos hablado antes, pero podemos analizarlo un poco más y hacer algunas cosas interesantes con él.
rgba
Aquí hay un ejemplo del uso de la notación CSS rgba () para especificar el blanco con un 50% de opacidad.
pag {
color: rgba (255, 255, 255, 0.5);
}
RGBA es una extensión del modelo de color RGB. El acrónimo significa rojo verde azul alfa. El valor alfa representa el nivel de transparencia / opacidad del color.
Es similar a RGBa en que declara tres valores que determinan el color y luego un cuarto valor para su nivel de transparencia. Puede leer más sobre el soporte del navegador a continuación, pero básicamente es cualquier navegador que soporte rgba también soporta hsla.
hsla
Hue - Piensa en una rueda de colores. Alrededor de 0o y 360o son rojos, 120o son verdes, 240o son azules. Use cualquier cosa entre 0-360. Los valores superiores e inferiores serán el módulo 360.Saturación: 0% está completamente desnaturalizado (escala de grises). 100% está completamente saturado (a todo color).
Luminosidad: 0% es completamente oscuro (negro). 100% es completamente ligero (blanco). 50% es la ligereza promedio.
alfa: valor de opacidad / transparencia. 0 es completamente transparente. 1 es completamente opaco. 0.5 es 50% transparente.
DOMINIO DE BORDES
Border
CSS Background and Borders es un módulo de CSS que define cómo se describe el fondo y los bordes de los elementos. Los bordes pueden ser líneas o imágenes, los cuadros pueden tener uno o varios fondos, tener esquinas redondeadas y sombras.
border-bottom
La propiedad CSS border-bottom define el ancho, el estilo de línea y el color del borde inferior de un cuadro. Es una propiedad abreviada para configurar las propiedades CSS borde-fondo-ancho, borde-fondo-estilo y borde-fondo-color.
border-bottom-color
La propiedad CSS border-bottom-color define el color del borde inferior de un cuadro.
border-bottom-style
La propiedad de estilo de borde inferior en CSS se usa para establecer el estilo del borde inferior de un elemento.
border-bottom-width
El ancho del borde inferior de un cuadro, debajo del contenido y las áreas de relleno y antes del área del margen inferior.
border-color
La propiedad de color de borde es una propiedad abreviada de color de borde superior, color de borde derecho, color de borde inferior y color de borde izquierdo. Si solo desea especificar un color de borde para algunos lados (pero no para todos), puede usar una o más de esas propiedades.
border-left
border-left-style
border-left-width
La propiedad CSS border-left-width le permite establecer el ancho de un borde izquierdo. También puede usar el ancho del borde para establecer el ancho de todos los lados de su elemento, o el borde izquierdo para establecer todas las propiedades del borde izquierdo. El ancho predeterminado para los bordes es medio.
border-radius
Es una propiedad CSS para redondear la esquina de un elemento. La propiedad border-radius se usa para establecer el border-radius.
border-right
La propiedad de borde derecho de CSS define el ancho, el estilo de línea y el color del borde derecho de un cuadro. Es una propiedad abreviada para configurar las propiedades CSS de borde-derecho-ancho, borde-derecho-estilo y borde-derecho-color.
border-right-color
La propiedad CSS border-right-color establece el color del borde derecho de un elemento. También se puede configurar con las propiedades abreviadas de CSS border-color o border-right.
border-right-style
La propiedad de borde derecho de CSS define el ancho, el estilo de línea y el color del borde derecho de un cuadro. Es una propiedad abreviada para configurar las propiedades CSS de borde-derecho-ancho, borde-derecho-estilo y borde-derecho-color.
border-right-width
El ancho del borde derecho de un cuadro, a la derecha del contenido y las áreas de relleno y antes del área del margen derecho.
border-style
La propiedad CSS de estilo de borde es una propiedad abreviada que establece el estilo de línea para los cuatro lados del borde de un elemento.
border-top
La propiedad CSS border-top define el ancho, el estilo de línea y el color del borde superior de un cuadro. Es una propiedad abreviada para configurar las propiedades CSS de border-top-width, border-top-style y border-top-color.
border-top-color
La propiedad CSS border-top-color establece el color superior de un elemento border. Tenga en cuenta que en la mayoría de los casos las propiedades abreviadas border-color o border-top son mas convenientes y preferidas.
border-top-style
Establece el estilo del borde superior de un elemento. Para establecer los cuatro bordes, use la propiedad abreviada, estilo de borde. De lo contrario, puede establecer los bordes individualmente con estilo de borde superior, estilo de borde derecho, estilo de borde inferior, estilo de borde izquierdo.
border-top-width
La propiedad CSS border-top-width establece el ancho del borde superior de un elemento.
border-width
La propiedad de ancho de borde CSS define el ancho del borde de un cuadro.
margin
La propiedad CSS margen establece el margen para los cuatro lados. Es una apertura para evitar tener que establecer cada lado por separado con las otras propiedades de margen: margen superior, margen derecho, margen inferior e margen izquierdo.
margin-left
La propiedad CSS margen izquierdo establece el área de margen en el lado izquierdo de un elemento. Un valor positivo lo ubica más lejos de sus vecinos, mientras que un valor negativo lo ubica más cerca.
margin-top
La propiedad CSS de margen superior establece el área de margen en la parte superior de un elemento. Un valor positivo lo ubica más lejos de sus vecinos, mientras que un valor negativo lo ubica más cerca.
margin-right
La propiedad margin-right en CSS se usa para establecer el margen derecho de un elemento. Establece el área de margen en el lado derecho del elemento. Los valores negativos también están permitidos. El valor predeterminado de la propiedad de margen derecho es cero.
margin-bottom
margin-bottom establece el margen inferior de un elemento.
padding
La propiedad de relleno en CSS define la parte más interna del modelo de caja, creando espacio alrededor del contenido de un elemento, dentro de los márgenes y / o bordes definidos.
Los valores de relleno se establecen utilizando longitudes o porcentajes, y no pueden aceptar valores negativos. El valor inicial o predeterminado para todas las propiedades de relleno es 0.
padding-bottom
La propiedad padding-bottom se usa para especificar el ancho del área inferior del cuadro de relleno del elemento. Es decir, especifica el área de espacio requerida en la parte inferior del contenido del elemento, dentro de cualquier borde definido. Cada elemento en una página web es rectangular.
padding-left
acolchado-izquierda. La propiedad padding-left se usa para especificar el ancho del área izquierda del cuadro de relleno del elemento. Es decir, especifica el área de espacio requerida a la izquierda del contenido del elemento, dentro de cualquier borde definido. Cada elemento en una página web es rectangular.
padding-right
La propiedad CSS de relleno derecho establece el ancho del área de relleno a la derecha de un elemento.
padding-top
El relleno superior de un cuadro, dentro de las áreas de margen superior y borde, y fuera de la parte superior del área de contenido.
height
La propiedad de altura en CSS define especifica la altura del contenido de los cuadros y acepta cualquiera de los valores de longitud. El área de "contenido" se define como el relleno y el borde, además de la altura / ancho o tamaño que ocupa el contenido en sí. Valores negativos como altura: -100px no son aceptados.
max-height
La propiedad max-height en CSS se usa para establecer la altura máxima de un elemento especificado. Los autores pueden usar cualquiera de los valores de longitud siempre que sean un valor positivo. max-height anula la altura, pero min-height siempre anula max-height.
max-width
La propiedad max-width en CSS se usa para definir el ancho máximo de un elemento. El valor del ancho no puede ser mayor que el valor por ancho máximo. Si el contenido es más grande que el ancho máximo, irá a la siguiente línea y si el contenido es más pequeño que el ancho máximo, entonces no tiene ningún efecto.
min-height
La propiedad min-height en CSS se usa para establecer la altura mínima de un elemento especificado. La propiedad de altura mínima siempre anula la altura y la altura máxima. Los autores pueden usar cualquiera de los valores de longitud siempre que sean un valor positivo.
min-width
La propiedad min-width en CSS se usa para establecer el ancho mínimo de un elemento especificado. La propiedad de ancho mínimo siempre anula la propiedad de ancho si se sigue antes o después del ancho en su declaración. Los autores pueden usar cualquiera de los valores de longitud siempre que sean un valor positivo.
width
La propiedad de ancho en CSS especifica el ancho del área content del elemento. Esta área de "contenido" es la porción dentro del relleno, borde y margen de un elemento.
outline
La propiedad de esquema en CSS dibuja una línea alrededor del exterior de un elemento. Es similar al borde, excepto que:
Siempre va por todos los lados, no puedes especificar lados particulares
No es parte del modelo de caja, por lo que no afectará la posición del elemento o elementos adyacentes.
outline-width
El esquema es la línea que se crea alrededor del elemento especificado fuera del borde del elemento para hacer que el elemento particular sea distinto y más fácil de distinguir.
La propiedad del ancho del contorno se utiliza para especificar el ancho de este contorno para un elemento específico.
outline-color
La propiedad del color del contorno de CSS establece el color del contorno de un elemento.
outline-offset
La propiedad de desplazamiento de contorno en CSS compensa un contorno definido desde el borde del borde de un elemento en una cantidad especificada. Un contorno, que es diferente de un borde, no ocupa ningún espacio en la página (como un elemento posicionado absolutamente), por lo que el contorno se puede compensar en cualquier cantidad y no afectará la posición o el diseño de los elementos circundantes.
outline-style
La propiedad de estilo de contorno en CSS se utiliza para establecer la apariencia del contorno de un elemento. El contorno y el borde de un elemento son similares, pero no iguales. El contorno no ocupa espacio y se dibuja fuera del borde de un elemento.
outline-width
La propiedad del ancho del contorno se utiliza para especificar el ancho de este contorno para un elemento específico.
direction
La propiedad direction en CSS establece la dirección del flujo de contenido dentro de un elemento a nivel de bloque. Esto se aplica a elementos de texto, en línea y de bloque en línea. También establece la alineación predeterminada del texto y la dirección en que las celdas de la tabla fluyen dentro de una fila de la tabla.
letter-spacing
La propiedad de espacio entre letras controla la cantidad de espacio entre cada letra en un elemento o bloque de texto dado. Los valores admitidos por el espacio entre letras incluyen valores relativos a la fuente (em, rem), valores relativos a los padres (porcentaje), valores absolutos (px) y la propiedad normal, que se restablece al valor predeterminado de la fuente.
line-height
La propiedad de altura de línea CSS se utiliza para definir la altura mínima de los cuadros de línea dentro del elemento. Establece las diferencias entre dos líneas de su contenido. Define la cantidad de espacio encima y debajo de los elementos en línea. Le permite establecer la altura de una línea independientemente del tamaño de la fuente.
text-align
La propiedad de alineación de texto se usa para especificar la alineación horizontal del contenido de nivel en línea, como texto e imágenes. Ejemplo de CSS: las propiedades de alineación de texto están establecidas a la derecha, justificar y centrar. left: alinea el contenido al lado izquierdo. right: alinea el contenido al lado derecho.
text-decoration
La propiedad CSS text-decoration se usa para establecer el formato de texto a subrayado (subrayado) y suprarrayado (overline), tachado (line-through) o parpadeo (parpadeo). El subrayado y el suprarrayado son posicionados bajo el texto, mientras que la línea a través de este se posiciona por encima.
text-indent
La propiedad de sangría de texto en CSS se utiliza para definir la sangría de la primera línea en cada bloque de texto. También toma valores negativos. Significa que si el valor es negativo, la primera línea se sangrará a la izquierda.
text-shadow
La propiedad text-shadow se usa para agregar sombras al texto. Acepta una lista de efectos de sombra separados por comas que se aplicarán al texto del elemento.
text-transform
La propiedad de transformación de texto en CSS controla mayúsculas y minúsculas.
text-overflow
La propiedad de desbordamiento de texto en CSS trata situaciones en las que el texto se recorta cuando desborda el cuadro del elemento. Se puede recortar (es decir, cortar, ocultar), mostrar puntos suspensivos ('...', valor de rango Unicode U + 2026) o mostrar una cadena definida por el autor (no es compatible con el navegador actual para cadenas definidas por el autor).
unicode-bidi
La propiedad CSS Unicode-bidi, junto con la propiedad de dirección, determina cómo se maneja el texto bidireccional en un documento. Por ejemplo, si un bloque de contenido contiene texto de izquierda a derecha y de derecha a izquierda, el agente de usuario utiliza un complejo algoritmo Unicode para decidir cómo mostrar el texto.
vertical-align
La propiedad de alineación vertical en CSS controla cómo se alinean los elementos establecidos uno al lado del otro en una línea.
white-space
La propiedad de espacio en blanco en CSS se usa para controlar el ajuste de texto y el espacio en blanco. Hay varios tipos de valores en esta propiedad para usar.
word-spacing
La propiedad de espacio entre palabras es similar al espacio entre letras, aunque naturalmente su uso gobierna la cantidad de espacio entre las palabras en un texto, no los caracteres individuales.
font
La propiedad de espacio entre palabras permite cambiar el espacio entre las palabras en un fragmento de texto, no los caracteres individuales.
Esta propiedad puede tener un valor positivo o negativo. Un valor positivo agrega espacio adicional entre palabras, mientras que un valor negativo elimina el espacio entre palabras. Cuando la propiedad se establece en "normal", la fuente definida especificará el espacio entre las palabras.
font-family
La familia de fuentes CSS define la prioridad para que el navegador elija la fuente de múltiples fuentes.
font-size
La propiedad de tamaño de fuente se puede establecer para cualquier etiqueta HTML (incluso si normalmente no contendría contenido textual como br). Se le puede asignar una variedad de parámetros de tamaño absoluto, relativo o de longitud.
font-style
La propiedad de estilo de fuente le permite hacer que el texto aparezca en cursiva (es decir, inclinado o inclinado). Esta propiedad acepta uno de los tres valores posibles: normal, cursiva y oblicua. Si una familia de fuentes dada tiene una cara cursiva u oblicua incrustada, el navegador seleccionará esa cara.
font-variant
La propiedad variante de fuente se utiliza para convertir todas las letras minúsculas en letras mayúsculas. Pero las letras superiores convertidas aparecen con un tamaño de fuente demasiado pequeño que las letras mayúsculas originales.
font-weight
La propiedad de peso de fuente del CSS se utiliza para establecer el peso o el grosor de la fuente que se utiliza con el texto HTML. El peso de la fuente aplicado dependerá de la familia de fuentes utilizada y del navegador. Por ejemplo, algunas fuentes familiares están disponibles solo en pesos específicos.
COMO AGREGAR ICONOS
DIMENSIONES O TAMAÑOS DE LOS ICONOS
Los iconos heredan el tamaño de fuente de su contenedor principal, lo que les permite hacer coincidir cualquier texto que pueda usar con ellos. Con las siguientes clases, podemos aumentar o disminuir el tamaño de los iconos en relación con el tamaño de fuente heredado.
a:link
a:visited
a:hover
a:active
los enlaces pueden tener un estilo diferente según el estado en que se encuentren.Los cuatro estados de enlaces son:
a: enlace: un enlace normal no visitado
a: visitado - un enlace que el usuario ha visitado
a: hover: un enlace cuando el usuario pasa el mouse sobre él
a: activo: un enlace en el momento en que se hace clic
Ejemplo
Al configurar el estilo para varios estados de enlace, hay algunas reglas de orden:
a: hover DEBE venir después de un: enlace y a: visitado
a: active DEBE venir después de a: hover
Decoración de texto
La propiedad de decoración de texto se usa principalmente para eliminar subrayados de enlaces:
Ejemplo
Color de fondo
La propiedad de color de fondo se puede usar para especificar un color de fondo para los enlaces:
Ejemplo
Avanzado - Botones de enlace
Este ejemplo demuestra un ejemplo más avanzado donde combinamos varias propiedades CSS para mostrar enlaces como cuadros / botones:
Ejemplo
list-style-type
La propiedad de tipo de estilo de lista define el tipo de lista estableciendo el contenido de cada marcador o viñeta en la lista. Los valores de palabras clave aceptables para list-style-type incluyen:
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
list-style-position
list-style-image
border-collapse
The border-collapse property is used to specify the border model of a table. It specifies whether the borders of the table and its table cells should be “joined” or separated. When borders are separate, the table and each of its table cells can have their own distinct borders, and there is space between them.
border-spacing
La propiedad de espaciado de borde en CSS controla qué tan separadas están las celdas en un elemento
(o un elemento que se hace como una tabla a través de display: table;).
(o un elemento que se hace como una tabla a través de display: table;).
Se necesita cualquiera de las longitudes de CSS.
Notablemente, solo tiene algún efecto si la tabla está usando el colapso de borde predeterminado: separado; y no tiene ningún efecto cuando el colapso de la frontera: colapso; Está establecido.
caption-side
The caption-side property specifies the position of a table's (
) caption ( caption ) with respect to the table itself. It specifies which side of the table the caption is to be positioned at. Using caption-side , a table caption can be positioned above or below the table.
) caption ( caption ) with respect to the table itself. It specifies which side of the table the caption is to be positioned at. Using caption-side , a table caption can be positioned above or below the table.
empty-cells
The empty-cells property in CSS selects empty table cells for the purpose of specifying whether or not to display borders and backgrounds on them. In other words, it tells the browser whether or not to draw borders around a table cell or fill in the background when that cell contains no content.
table-layout
La propiedad de diseño de tabla define qué algoritmo debe usar el navegador para diseñar las filas, celdas y columnas de la tabla.
nth-child(even)
El selector: nth-child le permite seleccionar uno o más elementos según su orden de origen, de acuerdo con una fórmula. Se define en la especificación CSS Selectores Nivel 3 como una "pseudoclase estructural", lo que significa que se usa para dar estilo al contenido en función de su relación con los elementos primarios y hermanos.
nth-child(ODD)
El selector: nth-child le permite seleccionar uno o más elementos según su orden de origen, de acuerdo con una fórmula. Se define en la especificación CSS Selectores Nivel 3 como una "pseudoclase estructural", lo que significa que se usa para dar estilo al contenido en función de su relación con los elementos primarios y hermanos.
DISPLAY
La propiedad Display en CSS define cómo se colocarán los componentes (div, hipervínculo, encabezado, etc.) en la página web. Como su nombre indica, esta propiedad se utiliza para definir la visualización de las diferentes partes de una página web. Se utiliza para mostrar un elemento como un elemento en línea.
position
La propiedad de posición CSS define, como su nombre lo indica, cómo se posiciona el elemento en la página web.
Si está interesado en leer sobre las propiedades de fuente, los artículos sobre el tamaño de fuente relativo y las columnas CSS pueden ser de interés.
position:static
La propiedad de posición puede ayudarlo a manipular la ubicación de un elemento, por ejemplo:
position:relative
relative: la posición original de un elemento permanece en el flujo del documento, al igual que el valor estático. Pero ahora funcionará left / right / top / bottom / z-index. Las propiedades posicionales "empujan" el elemento desde la posición original en esa dirección.
position:fixed
fixed: el elemento se elimina del flujo del documento como elementos posicionados absolutamente. De hecho, se comportan casi de la misma manera, solo los elementos de posición fija siempre son relativos al documento, no a ningún padre en particular, y no se ven afectados por el desplazamiento.
position:absolute
absolute: el elemento se elimina del flujo del documento y otros elementos se comportarán como si ni siquiera estuviera allí, mientras que todas las demás propiedades posicionales funcionarán en él.
position:sticky
sticky: el elemento se trata como un valor relativo hasta que la ubicación de desplazamiento de la ventana gráfica alcanza un umbral específico, en cuyo punto el elemento toma una posición fija donde se le dice que se pegue.
bottom
La propiedad inferior CSS define la posición inferior de un elemento en combinación con la propiedad de posición.
left
La propiedad izquierda en CSS se usa para especificar la posición horizontal de un elemento posicionado. No tiene efecto en elementos no posicionados.
right
La propiedad derecha de CSS define la posición correcta de un elemento en combinación con la propiedad de posición.
top
La propiedad superior CSS define la posición superior de un elemento en combinación con la propiedad de posición.
z-index
La propiedad del índice z en CSS controla el orden de apilamiento vertical de los elementos que se superponen. Como en, cuál aparece como si estuviera físicamente más cerca de ti. El índice z solo afecta a los elementos que tienen un valor de posición que no sea estático (el valor predeterminado).
overflow
La propiedad de desbordamiento controla lo que sucede con el contenido que se rompe fuera de sus límites: imagine un div en el que ha establecido explícitamente un ancho de 200 píxeles, pero que contiene una imagen de 300 píxeles de ancho. Esa imagen sobresaldrá del div y será visible por defecto.
overflow-x
La propiedad overflow-x en CSS especifica si se debe agregar una barra de desplazamiento, recortar el contenido o mostrar el contenido de desbordamiento de un elemento a nivel de bloque, cuando se desborda en los bordes izquierdo y derecho. En otras palabras, esta propiedad nos ayuda a mostrar el contenido que se desborda de la página horizontalmente.
overflow-y
La propiedad CSS overflow-y define qué hacer cuando el contenido desborda el cuadro de contenido verticalmente (es decir, arriba y abajo), como mostrar el contenido fuera del cuadro de contenido, recortar el contenido o mostrar una barra de desplazamiento vertical.
overflow:VISIBLE
overflow:HIDDEN
overflow: SCROLL
overflow: AUTO
visible: el contenido no se recorta cuando sale de su caja. Este es el valor predeterminado de la propiedad.
hidden: el contenido desbordado estará oculto.
scroll: similar a oculto, excepto que los usuarios podrán desplazarse por el contenido oculto
auto: si el contenido continúa fuera de su caja, entonces ese contenido estará oculto, mientras que una barra de desplazamiento debe estar visible para que los usuarios lean el resto del contenido.
box-sizing
La propiedad de tamaño de caja puede hacer que la creación de diseños CSS sea más fácil y mucho más intuitiva.
clear
La propiedad clara está directamente relacionada con las carrozas. Si el elemento puede caber horizontalmente en el espacio al lado de otro elemento que está flotando, lo hará. A menos que apliques claro a ese elemento en la misma dirección que el flotador. Entonces el elemento se moverá hacia abajo debajo del elemento flotante.
float
La propiedad flotante en CSS se usa para posicionamiento y diseño en páginas web.
FLOAT:LEFT
FLOAT:RIGHT
FLOAT: NONE
FLOAT: INHERIT
left: flota el elemento a la izquierda de su contenedor.
right: flota el elemento a la derecha de su contenedor.
none: el elemento no flota. Este es el valor inicial.
inherit: el elemento hereda la dirección de flotación de su padre
PROPIEDAD FOCUS
La propoedad: focus en CSS se usa para diseñar un elemento que actualmente está dirigido por el teclado o activado por el mouse.
Comentarios
Publicar un comentario