Propiedades de CSS part 1
PROPIEDADES DE FONDOS DE LA PAGINA
Background: Las propiedades background de CSS se utilizan para agregar efectos de fondo a los elementos.
Background-color: La background-colorpropiedad especifica el color de fondo de un elemento.
Ejemplo
El color de fondo de una página se establece así:
body {
background-color: lightblue;
}
Background-image: La background-imagepropiedad especifica una imagen para usar como fondo de un elemento.
Ejemplo
Establecer la imagen de fondo de una página:
body {
background-image: url("paper.gif");
}
Background-repeat: Mostrar la imagen de fondo solo una vez también está especificado por la background-repeatpropiedad
Ejemplo
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
background-positionpropiedad se utiliza para especificar la posición de la imagen de fondo.Ejemplo
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
background-attachmentpropiedad especifica si la imagen de fondo debe desplazarse o ser fija (no se desplazará con el resto de la página):Ejemplo
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Ejemplo
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
VALOR PARA ROJO VERDE AZUL (rgb)
Un valor de color RGB representa fuentes de luz ROJA, VERDE y 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 en rojo, porque el rojo se establece en su valor más alto (255) y los demás se establecen en 0.
VALOR EN HEXADECIMAL (hex)
Un color hexadecimal se especifica con: #RRGGBB, donde los enteros hexadecimales RR (rojo), GG (verde) y BB (azul) especifican los componentes del color.
Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que el decimal 0-255).
Por ejemplo, # ff0000 se muestra en rojo, porque el rojo está configurado en su valor más alto (ff) y los demás están configurados en el valor más bajo (00).
BRILLO Y SATURACION (hsl)
En CSS, un color se puede especificar usando tono, saturación y luminosidad (HSL) en la forma:
hsl ( tono , saturación , luminosidad )
Por ejemplo, El tono es un grado en la rueda de colores de 0 a 360. 0 es rojo, 120 es verde y 240 es azul.
La saturación es un valor porcentual, 0% significa un tono de gris y 100% es el color completo.
La claridad también es un porcentaje, el 0% es negro, el 50% no es ni claro ni oscuro, el 100% es blanco
RGB CON DOMINIO DE TRANSPARENCIA (rgba)
Los valores de color RGBA son una extensión de los 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 )
Por ejemplo, El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (nada transparente)
HSL CON DOMINIO DE TRANSPARENCIA (hsla)
Los 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 ( tono, saturación , luminosidad, alfa )
Por ejemplo, El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (nada transparente)
DOMINIO DE BORDES
Border: La borderpropiedad es una propiedad abreviada para:
- ancho del borde
- estilo de borde (obligatorio)
- color del borde
Si se omite el color del borde, el color aplicado será el color del texto.
Por ejemplo, Establezca el estilo de los bordes para diferentes elementos:
h1 {
border: 5px solid red;
}
h2 {
border: 4px dotted blue;
}
div {
border: double;
}
Border-bottom: La border-bottompropiedad es una propiedad abreviada de (en el siguiente orden):
- border-bottom-width
- estilo de borde inferior
- color del borde inferior
Si se omite border-bottom-color, el color aplicado será el color del texto.
Por ejemplo, Establezca el estilo del borde inferior para diferentes elementos:
h1 {
border-bottom: 5px solid red;
}
h2 {
border-bottom: 4px dotted blue;
}
div {
border-bottom: double;
}
Border-bottom-color: La border-bottom-colorpropiedad establece el color del borde inferior de un elemento.
Nota: Declare siempre la propiedad border-style o border-bottom-style antes de la border-bottom-colorpropiedad. Un elemento debe tener un borde antes de poder cambiar el color.
Por ejemplo, Establezca un color para el borde inferior:
div {border-bottom-color: coral;}
Border-bottom-style: La border-bottom-stylepropiedad establece el estilo del borde inferior de un elemento.
Por ejemplo, Establezca un estilo para el borde inferior:
div {border-bottom-style: dotted;}
Border-bottom-width: La border-bottom-widthpropiedad establece el ancho del borde inferior de un elemento.
Nota: Declare siempre la propiedad border-style o border-bottom-style antes de la border-bottom-widthpropiedad. Un elemento debe tener bordes antes de poder cambiar el ancho.
Por ejemplo, Establezca un ancho para el borde inferior:
div {border-bottom-width: thin;}
Border-color: La border-colorpropiedad establece el color de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Por ejemplo, Establecer un color para el borde:
div {border-color: coral;}
Border-left: La border-leftpropiedad es una propiedad abreviada de (en el siguiente orden):
- border-left-width
- border-left-style (obligatorio)
- color de borde izquierdo
Si se omite el color del borde izquierdo, el color aplicado será el color del texto.
Por ejemplo, Establezca el estilo del borde izquierdo para diferentes elementos:
h1 {
border-left: 5px solid red;
}
h2 {
border-left: 4px dotted blue;
}
div {
border-left: double;
}
Border-left-color: La border-left-colorpropiedad establece el color del borde izquierdo de un elemento.
Nota: Declare siempre la propiedad border-style o border-left-style antes de la border-left-colorpropiedad. Un elemento debe tener un borde antes de poder cambiar el color.
Por ejemplo, Establezca un color para el borde izquierdo:
div {border-left-color: coral;}
Border-left-style: La border-left-stylepropiedad establece el estilo del borde izquierdo de un elemento.
Por ejemplo, Establezca un estilo para el borde izquierdo:
div {border-left-style: dotted;}
Border-left-width: La border-left-widthpropiedad establece el ancho del borde izquierdo de un elemento.
Nota: Declare siempre la propiedad border-style o border-left-style antes de la border-left-widthpropiedad. Un elemento debe tener bordes antes de poder cambiar el ancho.
Por ejemplo, Establezca un ancho para el borde izquierdo:
div {border-left-width: thin;}
Border-radius: La border-radiuspropiedad define el radio de las esquinas del elemento.
Por ejemplo, Agregue esquinas redondeadas a dos elementos <div>:
#example1 {
border: 2px solid red;
border-radius: 25px;
}
#example2 {
border: 2px solid red;
border-radius: 50px 20px;
}
Border-right: La border-rightpropiedad es una propiedad abreviada de (en el siguiente orden):
- borde-ancho-derecho
- border-right-style (obligatorio)
- color del borde derecho
Si se omite el color del borde derecho, el color aplicado será el color del texto.
Por ejemplo, Establezca el estilo del borde derecho para diferentes elementos:
h1 {
border-right: 5px solid red;
}
h2 {
border-right: 4px dotted blue;
}
div {
border-right: double;
}
Border-right-color: La border-right-colorpropiedad establece el color del borde derecho de un elemento.
Nota: Declare siempre la propiedad border-style o border-right-style antes de la border-right-colorpropiedad. Un elemento debe tener un borde antes de poder cambiar el color.
Por ejemplo, Establezca un color para el borde derecho:
div {border-right-color: coral;}
Border-right-style: La border-right-stylepropiedad establece el estilo del borde derecho de un elemento.
Por ejemplo, Establezca un estilo para el borde derecho:
div {border-right-style: dotted;}
Border-right-width: La border-right-widthpropiedad establece el ancho del borde derecho de un elemento.
Nota: Declare siempre la propiedad border-style o border-right-style antes de la border-right-widthpropiedad. Un elemento debe tener bordes antes de poder cambiar el ancho.
Por ejemplo, Establezca un ancho para el borde derecho:
div {border-right-width: thin;}
Border-style: La border-stylepropiedad establece el estilo de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Por ejemplo, Establezca un estilo para el borde:
div {border-style: dotted;}
Border-top: La border-toppropiedad abreviada establece todas las propiedades del borde superior en una declaración.
Las propiedades que se pueden configurar deben estar en el siguiente orden:
- border-top-width
- border-top-style (obligatorio)
- borde-color-superior
Si se omite border-top-color, el color aplicado será el color del texto.
Por ejemplo, Establezca el estilo del borde superior para diferentes elementos:
h1 {
border-top: 5px solid red;
}
h2 {
border-top: 4px dotted blue;
}
div {
border-top: double;
}
Border-top-color: La border-top-colorpropiedad establece el color del borde superior de un elemento.
Nota: Declare siempre la propiedad border-style o border-top-style antes de la border-top-colorpropiedad. Un elemento debe tener un borde antes de poder cambiar el color.
Por ejemplo, Establezca un color para el borde superior:
div {border-top-color: coral;}
Border-top-style: La border-top-stylepropiedad establece el estilo del borde superior de un elemento.
Por ejemplo, Establezca un estilo para el borde superior:
div {border-top-style: dotted;}
Border-top-width: La border-top-widthpropiedad establece el ancho del borde superior de un elemento.
Por ejemplo, Establezca un ancho para el borde superior:
div {border-top-width: thin;}
Border-width: La border-widthpropiedad establece el ancho de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Por ejemplo, Establezca un ancho para los bordes:
div {border-width: thin;}
LOS MARGENES Y PADDING
Margin: La marginpropiedad establece los márgenes de un elemento y es una propiedad abreviada de las siguientes propiedades:
- margen superior
- margen derecho
- margen inferior
- margen izquierdo
p {
margin: 35px;
}
Margin-left: La margin-leftpropiedad establece el margen izquierdo de un elemento.
Nota: Se permiten valores negativos.
Por ejemplo, Establezca el margen izquierdo de un elemento <p> en 30 píxeles:
p.ex1 {
margin-left: 30px;
}
Margin-top: La margin-toppropiedad establece el margen superior de un elemento.
Nota: Se permiten valores negativos.
Por ejemplo, Establezca el margen superior de un elemento <p> en 25 píxeles:
p.ex1 {
margin-top: 25px;
}
Margin-right: La margin-rightpropiedad establece el margen derecho de un elemento.
Nota: Se permiten valores negativos.
Por ejemplo, Establezca el margen derecho de un elemento <p> en 150 píxeles:
p.ex1 {
margin-right: 150px;
}
Margin-bottom: La margin-bottompropiedad establece el margen inferior de un elemento.
Nota: Se permiten valores negativos.
Por ejemplo, Establezca el margen inferior de un elemento <p> en 25 píxeles:
p.ex1 {
margin-bottom: 25px;
}
Padding: El relleno de un elemento es el espacio entre su contenido y su borde.
La paddingpropiedad es una propiedad abreviada para:
- acolchado superior
- padding-right
- fondo acolchado
- padding-left
Por ejemplo, Establezca el relleno para los cuatro lados de un elemento <p> en 35 píxeles:
p {
padding: 35px;
}
Padding-bottom: La padding-bottompropiedad establece el relleno (espacio) inferior de un elemento.
Nota: No se permiten valores negativos.
Por ejemplo, Establezca el relleno inferior para un elemento <p> en 25 píxeles:
p.ex1 {
padding-bottom: 25px;
}
Padding-left: La padding-leftpropiedad establece el relleno izquierdo (espacio) de un elemento.
Nota: No se permiten valores negativos.
Por ejemplo, Establezca el relleno izquierdo para un elemento <p> en 50 píxeles:
p.ex1 {
padding-left: 50px;
}
Padding-right: La padding-rightpropiedad establece el relleno correcto (espacio) de un elemento.
Nota: No se permiten valores negativos.
Por ejemplo, Establezca el relleno correcto para un elemento <p> en 150 píxeles:
p.ex1 {
padding-right: 150px;
}
Padding-top: La padding-toppropiedad establece el relleno superior (espacio) de un elemento.
Nota: No se permiten valores negativos.
Por ejemplo, Establezca el relleno superior para un elemento <p> en 25 píxeles:
p.ex1 {
padding-top: 25px;
}
ALTURA Y ANCHO DE LAS PAGINAS WEB
Height: La heightpropiedad establece la altura de un elemento.
¡La altura de un elemento no incluye relleno, bordes ni márgenes!
Por ejemplo, Establezca la altura de dos elementos <div>:
div.a {
height: auto;
border: 1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
Max-height: La max-heightpropiedad define la altura máxima de un elemento.
Si el contenido es mayor que la altura máxima, se desbordará. La propiedad de desbordamiento define cómo el contenedor manejará el contenido desbordado .
Si el contenido es menor que la altura máxima, la max-heightpropiedad no tiene ningún efecto.
Por ejemplo, Establezca la altura máxima de un elemento <p> en 50 píxeles:
p.ex1 {
max-height: 50px;
}
Max-width: La max-widthpropiedad define el ancho máximo de un elemento.
Si el contenido es mayor que el ancho máximo, cambiará automáticamente la altura del elemento.
Si el contenido es menor que el ancho máximo, la max-widthpropiedad no tiene ningún efecto.
Por ejemplo, Establezca el ancho máximo de un elemento <p> en 150 píxeles:
p.ex1 {
max-width: 150px;
}
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 ningún efecto.
Por ejemplo, Establezca la altura mínima de un elemento <p> en 200 píxeles:
p.ex1 {
min-height: 200px;
}
Min-width: La min-widthpropiedad define el ancho mínimo de un elemento.
Si el contenido es menor que el ancho mínimo, se aplicará el ancho mínimo.
Si el contenido es mayor que el ancho mínimo, la min-widthpropiedad no tiene ningún efecto.
Nota: Esto evita que el valor de la propiedad de ancho sea menor que min-width.
Por ejemplo, Establezca el ancho mínimo de un elemento <span> en 500 píxeles:
span.ex1 {
min-width: 500px;
}
Width: La widthpropiedad establece el ancho de un elemento.
¡El ancho de un elemento no incluye relleno, bordes ni márgenes!
Nota: Las propiedades min-width y max-width anulan la width propiedad.
Por ejemplo, Establezca el ancho de tres elementos <div>:
div.a {
width: auto;
border: 1px solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width: 50%;
border: 1px solid black;
}
MODELOS DE CAJAS DE CSS
Outline: La outlinepropiedad es una propiedad abreviada para:
- ancho de contorno
- estilo de contorno (obligatorio)
- color de contorno
Si se omite el color del contorno, el color aplicado será el color del texto.
Por ejemplo, Establezca un contorno alrededor de un elemento <h2> y un elemento <div>:
h2 {
outline: 5px dotted green;
}
div.a {
outline: 2px dashed blue;
}
Outline-width: El outline-widthespecifica la anchura de un esquema.
Nota: Declare siempre la propiedad de estilo de contorno antes que la outline-widthpropiedad. Un elemento debe tener un contorno antes de cambiar su ancho.
Por ejemplo, Establecer el ancho de un contorno
div {outline-width: thick;}
Outline-color: La outline-colorpropiedad especifica el color de un contorno.
Nota: Declare siempre la propiedad de estilo de contorno antes que la outline-colorpropiedad. Un elemento debe tener un contorno antes de cambiar su color.
Por ejemplo, Establezca un color para el contorno:
div {outline-color: coral;}
Outline-offset: La outline-offsetpropiedad agrega espacio entre un contorno y el borde o borde de un elemento.
El espacio entre un elemento y su contorno es transparente.
Por ejemplo, Especifique un contorno rojo sólido de 4 píxeles 15 píxeles fuera del borde del borde:
div {
outline: 4px solid red;
outline-offset: 15px;
}
Outline-style: La outline-stylepropiedad especifica el estilo de un contorno.
Por ejemplo, Establezca un estilo para el contorno:
div {outline-style: dotted;}
Outline-width: El outline-widthespecifica la anchura de un esquema.
Por ejemplo, Establecer el ancho de un contorno:
div {outline-width: thick;}
Direction: La directionpropiedad especifica la dirección del texto / dirección de escritura dentro de un elemento a nivel de bloque.
Por ejemplo, Establezca la dirección del texto en "de derecha a izquierda":
p.rtl {
direction: rtl;
}
Letter-spacing: La letter-spacingpropiedad aumenta o disminuye el espacio entre caracteres en un texto.
Por ejemplo, Establezca el espacio entre letras para los elementos <h1>, <h2> y <h3>:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: 2px;
}
h3 {
letter-spacing: -1px;
}
Line-height: La line-heightpropiedad especifica la altura de una línea.
Nota: No se permiten valores negativos.
Por ejemplo, Establezca la altura de la línea para diferentes elementos <div>:
div.a {
line-height: normal;
}
div.b {
line-height: 1.6;
}
div.c {
line-height: 80%;
}
div.d {
line-height: 200%;
}
MANEJO DE TEXTO Y ESTILO A TRAVES DE CSS
Text-align: La text-alignpropiedad especifica la alineación horizontal del texto en un elemento.
Por ejemplo, Establezca la alineación del texto para diferentes elementos <div>:
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.c {
text-align: justify;
}
Text-decoration: La text-decorationpropiedad especifica la decoración agregada al texto y es una propiedad abreviada para:
- línea de decoración de texto (obligatorio)
- color-decoracion-texto
- estilo de decoración de texto
Por ejemplo, Establezca diferentes decoraciones de texto para los elementos <h1>, <h2> y <h3>:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
h4 {
text-decoration: underline overline;
}
Text-indent: La text-indentpropiedad especifica la sangría de la primera línea en un bloque de texto.
Nota: Se permiten valores negativos. La primera línea se sangrará a la izquierda si el valor es negativo.
Por ejemplo, Sangra la primera línea de texto con diferentes valores:
div.a {
text-indent: 50px;
}
div.b {
text-indent: -2em;
}
div.c {
text-indent: 30%;
}
Text-shadow: La text-shadowpropiedad agrega sombra al texto.
Esta propiedad acepta una lista de sombras separadas por comas que se aplicarán al texto.
Por ejemplo, Sombra de texto básica:
h1 {
text-shadow: 2px 2px #ff0000;
}
Text-transform: La text-transformpropiedad controla las mayúsculas del texto.
Por ejemplo, Transforma el texto en diferentes elementos <div>:
div.a {
text-transform: uppercase;
}
div.b {
text-transform: lowercase;
}
div.c {
text-transform: capitalize;
}
Text-overflow: La text-overflowpropiedad especifica cómo se debe señalar al usuario el contenido desbordado que no se muestra. Puede recortarse, mostrar puntos suspensivos (...) o mostrar una cadena personalizada.
Por ejemplo, Uso de la propiedad text-overflow:
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Unicode-bidi: La unicode-bidipropiedad se usa junto con la propiedad de dirección para establecer o devolver si el texto debe anularse para admitir varios idiomas en el mismo documento.
Por ejemplo, Anular texto:
div {
direction: rtl;
unicode-bidi: bidi-override;
}
Vertical-align: La vertical-alignpropiedad establece la alineación vertical de un elemento.
Por ejemplo, Alinear verticalmente una imagen:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
White-space: La white-spacepropiedad especifica cómo se maneja el espacio en blanco dentro de un elemento.
Por ejemplo, Demuestre diferentes valores de la propiedad de espacio en blanco:
p.a {
white-space: nowrap;
}
p.b {
white-space: normal;
}
p.c {
white-space: pre;
}
Word-spacing: La word-spacingpropiedad aumenta o disminuye el espacio en blanco entre palabras.
Nota: Se permiten valores negativos.
Por ejemplo, Especifique que el espacio entre palabras en los elementos <p> debe ser de 30 píxeles:
p {
word-spacing: 30px;
}
Font: La fontpropiedad es una propiedad abreviada para:
- Estilo de fuente
- variante de fuente
- peso de la fuente
- tamaño de fuente / altura de línea
- Familia tipográfica
Los valores de tamaño de fuente y familia de fuentes son obligatorios. Si falta uno de los otros valores, se utiliza su valor predeterminado.
Por ejemplo, Establezca algunas propiedades de fuente con la declaración abreviada:
p.a {
font: 15px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
Font-family: La font-familypropiedad especifica la fuente de un elemento.
La font-familypropiedad puede contener varios nombres de fuentes como un sistema "alternativo". Si el navegador no admite la primera fuente, intenta con la siguiente.
Por ejemplo, Especifique la fuente para dos párrafos:
p.a {
font-family: "Times New Roman", Times, serif;
}
p.b {
font-family: Arial, Helvetica, sans-serif;
}
Font-size: La font-sizepropiedad establece el tamaño de una fuente.
Por ejemplo, Establezca el tamaño de fuente para diferentes elementos:
div.a {
font-size: 15px;
}
div.b {
font-size: large;
}
div.c {
font-size: 150%;
}
Font-style: La font-stylepropiedad especifica el estilo de fuente de un texto.
Por ejemplo, Establezca diferentes estilos de fuente para tres párrafos:
p.a {
font-style: normal;
}
p.b {
font-style: italic;
}
p.c {
font-style: oblique;
}
Font-variant: La font-variantpropiedad especifica si un texto debe mostrarse o no en letra minúscula.
Por ejemplo, Establezca un párrafo en una fuente en minúscula:
p.small {
font-variant: small-caps;
}
Font-weight: La font-weightpropiedad establece cómo se deben mostrar los caracteres delgados o gruesos en el texto.
Por ejemplo, Establezca un peso de fuente diferente para tres párrafos:
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
EXPLICAR COMO AGREGAR ICONOS, Y LAS DIMENSIONES O TAMAÑOS DE LOS ICONOS, A NIVEL ESTANDAR QUE SON USADAS
Para insertar un icono, agregue el nombre de la clase del icono a cualquier elemento HTML en línea.
Los elementos <i>y <span>se utilizan ampliamente para agregar iconos.
Todos los íconos en las bibliotecas de íconos , son íconos vectoriales escalables que se pueden personalizar con CSS (tamaño, color, sombra, etc.)
LOS LINK EN CSS
a:link: un enlace normal no visitado
Por ejemplo,
/* unvisited link */
a:link {
color: red;
}
a:visited: un enlace que el usuario ha visitado
Por ejemplo,
/* visited link */
a:visited {
color: green;
}
a:hover: un enlace cuando el usuario pasa el mouse sobre él
Por ejemplo,
/* mouse over link */
a:hover {
color: hotpink;
}
a:active: un enlace en el momento en que se hace clic en él
Por ejemplo,
/* selected link */
a:active {
color: blue;
}
LAS LISTAS
List-style-type: La list-style-typepropiedad especifica el tipo de marcador de elemento de lista.
El siguiente ejemplo muestra algunos de los marcadores de elementos de lista disponibles:
Por ejemplo,
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
List-style-position: La list-style-positionpropiedad especifica la posición de los marcadores de elementos de la lista (viñetas).
Por ejemplo,
List-style-image: La list-style-imagepropiedad reemplaza el marcador de elemento de lista con una imagen.
Por ejemplo, Especifique una imagen como marcador de elemento de lista en una lista:
ul {
list-style-image: url('sqpurple.gif');
}
LAS TABLAS EN CSS
Border-collapse: La border-collapsepropiedad establece si los bordes de la tabla deben colapsarse en un solo borde:
Por ejemplo, table {
border-collapse: collapse;
}
Border-spacing: La border-spacingpropiedad establece la distancia entre los bordes de las celdas adyacentes.
Nota: esta propiedad solo funciona cuando el colapso de borde está separado.
Por ejemplo, Establezca el espaciado de los bordes de una tabla:
#table1 {
border-collapse: separate;
border-spacing: 15px;
}
#table2 {
border-collapse: separate;
border-spacing: 15px 50px;
}
Caption-side: La caption-sidepropiedad especifica la ubicación de un título de tabla.
Por ejemplo, Especifique la ubicación de los títulos de las tablas:
#example1 {
caption-side: bottom;
}
#example2 {
caption-side: top;
}
Empty-cells: La empty-cellspropiedad establece si se muestra o no bordes en celdas vacías en una tabla.
Nota: esta propiedad no tiene ningún efecto si border-collapse es "collapse".
Por ejemplo, No mostrar bordes en celdas vacías en una tabla:
table {
empty-cells: hide;
}
Table-layout: La table-layoutpropiedad define el algoritmo utilizado para diseñar celdas, filas y columnas de la tabla.
Por ejemplo, Establezca diferentes algoritmos de diseño de tablas:
table.a {
table-layout: auto;
width: 180px;
}
table.b {
table-layout: fixed;
width: 180px;
}
Nth-child(even): Selecciona cada elemento hijo par
Por ejemplo,
p:nth-child(even) {
background: blue;
}
Nth-child(ODD): Selecciona cada elemento secundario impar
Por ejemplo,
p:nth-child(odd) {
background: red;
}
Comentarios
Publicar un comentario