background
Las propiedades de fondo CSS se utilizan para definir los efectos de fondo para los elementos.
propiedades de fondo CSS:
color de fondo
imagen de fondo
background-repeat
background-attachment
background-position
Background-color
background-image
La propiedad background-image se emplea para establecer la imagen de fondo de cada elemento. La imagen se muestra en la zona que ocupan el contenido y el relleno del elemento, justo hasta su borde. Para indicar la imagen que se muestra como fondo de un elemento, se utiliza una URL.
propiedad establece si una imagen se desplaza fondo con el resto de la página, o es fijo.
background-repeat
El valor repeat coincide con el comportamiento por defecto del navegador y repite la imagen en todas las direcciones. ... CSS permite modificar la posición de la imagen de fondo mediante la propiedad background-position.
background-position
La propiedad background-position controla la posición en la que se muestra la imagen de fondo de un elemento.
background-attachment
La propiedad background-attachment controla si la imagen de fondo establecida en un elemento se mueve o permanece fija cuando se hace scroll en la ventana del navegador. Por defecto, las imágenes de fondo se mueven con el elemento en el que se muestran.
rgb------VALOR PARA ROJO VERDE AZUL
valores de color RGB son compatibles con todos los navegadores.
Un valor de color RGB se especifica con: RGB (rojo, verde, azul).
Cada parámetro (rojo, verde, y azul) define la intensidad del color como un número entero entre 0 y 255.
Por ejemplo, RGB (0, 0, 255) se representa como azul, porque el parámetro azul se establece en su valor más alto (255) y los otros se establece en 0.
hex------VALOR EN HEXADECIMAL
Hexadecimal color values are also supported in all browsers.
A hexadecimal color is specified with: #RRGGBB.
RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
For example, #0000FF is displayed as blue, because the blue component is set to its highest value (FF) and the others are set to 00.
hsl-------BRILLO Y SATURACION
SATURACIÓN: La saturación define la intensidad o grado de pureza de cada color. Sus valores se mueven desde su máximo, cualquier color puro, hasta su mínimo que correspondería a un tono de gris. Popularmente cuando decimos que un color es muy vivo o intenso significa que está muy saturado. La saturación es un valor de porcentaje; 0% significa un tono de gris y el 100% es el color.
rgba-------RGB CON DOMINIO DE TRANSPARENCIA
En HTML y CSS la forma más básica de establecer un color es con el sistema de color RGB en notación hexadecimal (por ejemplo: #FF2600), pero también se puede expresar de forma decimal del número 0 al 255 y actualmente gracias a CSS3 podemos añadirle el canal alpha (con el que establecemos el nivel de transparencia del color).
rgba(255,0,0,1)rgba(0,255,0,1)rgba(0,0,255,1)
rgba(255,0,0,0.6)rgba(0,255,0,0.6)rgba(0,0,255,0.6)
rgba(255,0,0,0.2)rgba(0,255,0,0.2)rgba(0,0,255,0.2)
hsla------HSL CON DOMINIO DE TRANSPARENCIA
Las declaraciones RGBa y HSLa son similares en sintaxis a RGB y HSL, con el agregado de un parámetro extra que define la opacidad del color. Es un valor decimal entre 0 (completamente transparente) y 1 (completamente opaco). Veamos un ejemplo de la sintaxis de RGBa
[css]background-color: rgba(23, 108, 238, 0.7);[/css]
y de su equivalente en HSLa:
[css]background-color: hsla(216, 86%, 51%, 0.7);[/css]
border
Establecer el estilo de las fronteras de diferentes elementos
ejemplo:
h1 {
border: 5px solid red;
}
h2 {
border: 4px dotted blue;
}
div {
border: double;
}
Establecer el estilo del borde inferior de diferentes elementos.
ejemplo:
h1 {
border-bottom: 5px solid red;
}
h2 {
border-bottom: 4px dotted blue;
}
div {
border-bottom: double;
}
border-bottom-color
Establecer un color para el borde inferior.
border-bottom-style
La border-bottom-stylepropiedad establece el estilo del borde inferior de un elemento.
border-bottom-width
La 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!
Esta propiedad puede tener de uno a cuatro valores. Estas son las reglas:
Cuatro valores - frontera de radio: 15px 50px 30px 5px; (primer valor se aplica a la esquina superior izquierda, segundo valor se aplica a la esquina superior derecha, tercer valor se aplica a la esquina inferior derecha, y cuarto valor se aplica a la esquina inferior izquierda):
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.
Ejemplos:
frontera de estilo: salpicado doble trazo sólido;
el borde superior es de puntos
borde derecho es sólida
borde inferior es el doble
borde izquierdo es discontinua
frontera de estilo: punteada doble sólido;
el borde superior es de puntos
fronteras derecha e izquierda son sólidos
borde inferior es el doble
frontera de estilo: punteado sólido;
bordes superior e inferior están salpicadas
fronteras derecha e izquierda son sólidos
frontera de estilo: de puntos;
los cuatro bordes son de puntos
Los border-top Abreviació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
Si se omite border-top-color, el color aplicado será el color del texto.
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-width
La border-top-width propiedad 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-width propiedad establece la anchura de cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
Ejemplos:
border-width: medio delgada 10px de espesor;
el borde superior es delgada
borde derecho es media
frontera inferior es grueso
borde izquierdo es 10px
border-width: medio delgada de espesor;
el borde superior es delgada
fronteras derecha e izquierda son de tamaño
frontera inferior es grueso
border-width: medio delgada;
bordes superior e inferior son delgadas
fronteras derecha e izquierda son de tamaño
border-width: delgado;
los cuatro bordes son delgadas
Nota: declarar siempre el border-style propiedad antes de la border-width propiedad. Un elemento debe tener fronteras antes de poder establecer la anchura.
LOS MARGENES Y PADDING
Este tutorial le ayudará a comprender mejor las propiedades de borde (border), relleno (padding) y margen (margin) de CSS. Estas propiedades ayudan mucho a los desarrolladores a colocar elementos en la página web de la manera necesaria.
Vamos a crear un div y asignar las propiedades de margen, relleno y borde.
margin
La margin propiedad establece los márgenes de un elemento, y es una propiedad abreviada para las siguientes propiedades:
margin-top
margin-right
margin-bottom
margin-left
Si la propiedad tiene margen de cuatro valores:
ejemplo:
margen: 10px 5px 15px 20px;
margen superior es 10px
margen derecho es 5px
margen inferior es 15px
margen izquierdo es de 20 píxeles
Si la propiedad tiene margen de tres valores:
margen: 10px 5px 15px;
margen superior es 10px
márgenes derecha e izquierda son 5px
margen inferior es 15px
Si la propiedad de margen tiene dos valores:
margen: 10px 5px;
márgenes superior e inferior son 10px
márgenes derecha e izquierda son 5px
Si la propiedad tiene un valor de margen:
margen: 10px;
los cuatro márgenes son 10px
Nota: Los valores negativos son permitidos.
margin-left
La margin-leftpropiedad establece el margen izquierdo de un elemento.
Nota: Los valores negativos son permitidos.
La margin-top propiedad establece el margen superior de un elemento.
Nota: Los valores negativos son permitidos.
margin-right
La margin-right propiedad establece el margen derecho de un elemento.
Nota: Los valores negativos son permitidos.
margin-bottom
La margin-bottom propiedad establece el margen inferior de un elemento.
Nota: Los valores negativos son permitido.
padding
el relleno de un elemento es el espacio entre su contenido y su frontera.
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.
Si la propiedad padding tiene cuatro valores:
padding: 10px 5px 15px 20px;
top relleno es 10px
relleno derecho es 5px
acolchado inferior es 15px
relleno a la izquierda es de 20 píxeles
Si la propiedad padding tiene tres valores:
padding: 10px 5px 15px;
top relleno es 10px
relleno derecho e izquierdo son 5px
acolchado inferior es 15px
Si la propiedad padding tiene dos valores:
padding: 10px 5px;
la parte superior y el relleno inferior son 10px
relleno derecho e izquierdo son 5px
Si la propiedad de relleno tiene un valor:
padding: 10px;
los cuatro rellenos son 10px
Nota: Negativo valores no están permitidos.
padding-bottom
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-bottompropiedad establece el relleno inferior (espacio) de un elemento.
Nota: Negativo valores no están permitidos.
padding-left
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-leftpropiedad establece el relleno a la izquierda (espacio) de un elemento.
Nota: Negativo valores no están permitidos.
padding-right
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-rightpropiedad establece el relleno derecho (espacio) de un elemento.
Nota: Negativo valores no están permitidos.
padding-top
el relleno de un elemento es el espacio entre su contenido y su frontera.
La padding-toppropiedad establece el relleno superior (espacio) de un elemento.
Nota: Negativo valores no están permitidos.
ALTURA Y ANCHO DE LAS PAGINAS WEB
La recomendación. Mi recomendación para la medida de un sitio web es de 940 a 1000 pixeles de ancho para el área de contenido de la página web. El canvas, lienzo o área de trabajo en tu programa de diseño, como Photoshop, que tenga unos 1200 o 1400px en total.
height
La heightpropiedad establece la altura de un elemento.
La altura de un elemento no incluye el relleno, bordes o márgenes!
Si height: auto;el elemento se ajustará automáticamente su altura para permitir que su contenido se muestre correctamente.
Si heightse establece en un valor numérico (como píxeles, (r) em, en porcentajes) a continuación, si el contenido no se ajusta a la altura especificada, que se desborde. Como el contenedor manejará el contenido desborde está definido por el desbordamiento de la propiedad.
Nota: Los min-altura y max-altura propiedades anulan la heightpropiedad.
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 inferior a la altura máxima, la max-heightpropiedad no tiene efecto.
Nota: Esto evita que el valor de la altura de la propiedad de convertirse en más grande que max-height. El valor de la max-heightpropiedad anula la propiedad height.
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.
Nota: Esto evita que el valor de la anchura de la propiedad de convertirse en más grande que max-width. El valor de la max-widthpropiedad reemplaza la propiedad de ancho.
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.
Nota: Esto evita que el valor de la altura de la propiedad de convertirse menor que min-height.
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.
Nota: Esto evita que el valor de la anchura de la propiedad de convertirse menor que min-width.
width
La widthpropiedad establece el ancho de un elemento.
El ancho de un elemento no incluye el relleno, bordes o márgenes!
Nota: El min-width y max-anchura propiedades anulan la width propiedad.
**MODELOS DE CAJAS DE CSS**
El fallo en el modelo de caja de Internet Explorer es uno de los más conocidos fallos en una implementación del estándar web CSS.
outline
Un esquema es una línea que se dibuja alrededor de los elementos, fuera de las fronteras, para hacer que el elemento "destaque".
La outlinepropiedad es una propiedad abreviada para:
contorno de ancho
esbozo de estilo (requerido)
contorno color
Si se omite el esquema de color, el color aplicado será el color del texto.
Nota: El esquema no es una parte de las dimensiones del elemento, por lo tanto, las propiedades de anchura y altura del elemento no contienen el ancho del contorno.
outline-width
Un esquema es una línea que se dibuja alrededor de los elementos (fuera de las fronteras) para hacer que el elemento de "sobresalir".
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
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-colorpropiedad especifica el color de un esquema.
Nota: declarar siempre el estilo de contorno propiedad antes de la outline-colorpropiedad. Un elemento debe tener un esquema antes de cambiar el color de la misma.
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.
Contornos difieren de las fronteras de tres maneras:
Un esquema es una línea trazada alrededor de los elementos, fuera
del límite del borde
Un esquema no ocupa espacio
Un esquema puede ser no rectangular
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.
outline-width
Un esquema es una línea que se dibuja alrededor de los elementos (fuera de las fronteras) para hacer que el elemento de "sobresalir".
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.
direction
La directionpropiedad especifica la dirección del texto / dirección de escritura dentro de un elemento en bloque.
Consejo: Utilice esta propiedad junto con el unicode-bidi propiedad para establecer o devolver si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento.
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.
Nota: Los valores negativos son permitidos. La primera línea será una sangría a la izquierda si el valor es negativo.
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.
Ambas de las siguientes propiedades son necesarias para el texto desbordamiento:
white-space: nowrap;
overflow: hidden;
Modifica el comportamiento del algoritmo utilizado para el texto Unicode bidireccional
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
La white-spacepropiedad especifica cómo se maneja un espacio en blanco dentro de un elemento.
font
La fontpropiedad es una propiedad abreviada para:
Estilo de fuente
font-variant
font-weight
tamaño de fuente / line-height
Familia tipográfica
Se requieren los valores de tamaño de fuente y la fuente-familia. Si uno de los otros valores no se encuentra, se utilizan los valores predeterminados.
Nota: La propiedad line-height establece el espacio entre las líneas.
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.
Hay dos tipos de nombres de la familia de las fuentes:
familia-nombre - El nombre de una familia de fuentes, como "tiempos", "mensajero", "Arial", etc.
familia-genérica - El nombre de una familia-genérica, como "serif", "sans-serif", "cursiva", "fantasía", "espacio sencillo".
Comenzar con la fuente que desea, y terminar siempre con una familia genérica, para permitir que el navegador recoger una fuente similar en la familia genérica, si no hay otras fuentes están disponibles.
Nota: Separar cada valor con una coma.
Nota: Si un nombre de fuente contiene espacios en blanco, debe ser citado. Las comillas simples se deben utilizar cuando se utiliza el atributo "style" en HTML.
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
En un pequeño-casquillos de fuente, todas las letras minúsculas se convierten en letras mayúsculas. Sin embargo, las letras mayúsculas convertidos aparece en un tamaño de letra más pequeño que las letras mayúsculas originales en el texto.
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
DIMENSIONES O TAMAÑOS DE LOS ICONOS
Para cambiar el tamaño de los iconos del escritorio
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
El :linkselector se utiliza para seleccionar los enlaces no visitados.
Nota: El selector: link no enlaces de estilo que ya ha visitado.
Consejo: Utilice el : visited selector para enlaces de estilo a las páginas visitadas, el : hover selector para enlaces de estilo al pasar el ratón sobre ellos, y el activo selector para enlaces de estilo cuando se hace clic en ellos.
a:visited
El :visited selector se utiliza para seleccionar los enlaces visitados.
Consejo: Utilice el : enlace selector para enlaces a páginas de estilo no visitados, el : hover selector para enlaces de estilo al pasar el ratón sobre ellos, y el activo selector para enlaces de estilo cuando se hace clic en ellos.
Navegadores limita los estilos que se pueden establecer para un: los enlaces visitados, debido a cuestiones de seguridad.
estilos permitidos son:
color
color de fondo
border-color (y border-color de lados separados)
color del contorno
columna de regla de color
las partes de color de relleno y el trazo
Todas las demás formas se heredan de a: link.
a:hover
El :hoverselector se utiliza para seleccionar elementos cuando puntero del ratón sobre ellos.
Consejo: El: Selector de vuelo estacionario se puede utilizar en todos los elementos, no sólo en los enlaces.
Consejo: Utilice el : enlace selector para enlaces a páginas de estilo no visitados, el : visited selector para enlaces de estilo a las páginas visitadas, y el activo selector de estilo el enlace activo.
Nota: : vuelo estacionario debe venir después: link y: visited (si están presentes) en la definición de CSS, con el fin de ser eficaz!
a:active
El :activeselector se utiliza para seleccionar el estilo y el enlace activo.
Un enlace se activa cuando se hace clic en él.
Consejo: El selector: activa se puede utilizar en todos los elementos, no sólo los enlaces.
Consejo: Utilice el : enlace selector para enlaces a páginas de estilo no visitados, el : visited selector para enlaces de estilo a las páginas visitadas, y el : hover selector para enlaces de estilo al pasar el ratón sobre ellos.
Nota: : tiene que activar vienen después: vuelo estacionario (si está presente) en la definición de CSS con el fin de ser eficaz!
LAS LISTAS
list-style-type
El list-style-typeespecifica el tipo de marcador de ítems de lista en una lista.
list-style-position
La list-style-positionpropiedad especifica la posición de los marcadores list-item (viñetas).
list-style-position: outside;medios que las viñetas estarán fuera del elemento de la lista. El inicio de cada línea de un elemento de la lista se alinea verticalmente:
Café - Una bebida preparada a partir de granos de café tostado elabora ...
Té
Coca Cola
list-style-position: inside;medios que las viñetas estarán en el interior del elemento de la lista. Ya que es parte del elemento de la lista, que será parte del texto y pulsa el texto en el inicio:
Café - Una bebida preparada a partir de granos de café tostado elabora ...
Té
Coca Cola
list-style-image
La list-style-imagepropiedad, se sustituye el marcador de ítems de lista con una imagen.
Nota: Siempre especificar el -style-type lista propiedad, además. Esta propiedad se utiliza si la imagen por alguna razón no está disponible.
LAS TABLAS EN CSS
Antes de centrarnos en el CSS, fijémonos en los elementos estructurales básicos de las tablas a las que deberéis aplicar estilos:
Encabezamientos de las tablas.
Celdas de datos de las tablas.
Títulos de las tablas.
Cuando los usuarios de vuestro sitio lean vuestra tabla, deberían poder entender y seguir fácilmente su estructura. La manera más sencilla de conseguirlo es utilizar bordes, colores de fondo o ambos.
No es necesario que sigáis estas convenciones estilísticas, pero sí deberíais garantizar que existe una diferencia clara entre las celdas th y td; además, el caption (título) debería estar asociado claramente con la tabla y diferenciado del resto del texto de la página.
border-collapse
Los border-collapseconjuntos de propiedades si los bordes de tabla deben colapsar en un solo borde o ser separados como en HTML estándar.
border-spacing
La border-spacingpropiedad establece la distancia entre los bordes de las celdas adyacentes.
Nota: Esta propiedad sólo funciona cuando border-collapse es independiente.
caption-side
La caption-sidepropiedad especifica la colocación de una leyenda de la tabla.
empty-cells
Los empty-cellsconjuntos de propiedades si debe o no mostrar bordes de las celdas vacías en una tabla.
Nota: Esta propiedad no tiene efecto si border-collapse es "colapso".
table-layout
La table-layoutpropiedad define el algoritmo utilizado para diseñar celdas de la tabla, filas y columnas.
Consejo: El principal beneficio de table-layout: fijo; es que la tabla hace mucho más rápido. En tablas grandes, los usuarios no podrán ver cualquier parte de la mesa hasta que el navegador ha prestado toda la tabla. Por lo tanto, si se utiliza table-layout: fijo, los usuarios verán la parte superior de la mesa mientras se carga el navegador y hace resto de la mesa. Esto da la impresión de que la página carga mucho más rápido!
nth-child(even)
La pseudo-clase :nth-last-child() de CSS selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final. nth-child(ODD)
OPCIONES DE FORMATO EN CSS INTERMEDIAS
DISPLAY
position
Los positionespecifica de propiedad del tipo de método de posicionamiento utilizado para un elemento (estático, relativo, absoluto, fijo, o pegajosa).
position:static
Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página. Quiere decir que los elementos se colocarán según el flujo normal del HTML, es decir, según estén escritos en el propio código HTML. Por decirlo de otra manera, static no provoca ningún posicionamiento especial de los elementos y por tanto, los atributos top, left, right y bottom no se tendrán en cuenta.
Podemos ver un ejemplo de posicionamiento static:
<div style="position: static; background-color: #ff9; padding: 10px; width: 300px;">Esto es una capa con posicionamiento estático</div>
<div style="position: static; background-color: #f9f; padding: 10px; width: 500px;">posicionamiento static, predeterminado.</div>
<h1>CSS</h1>
<div style="background-color: #9ff; padding: 10px; width: 400px;">Posicionamiento static, aunque en
position:relative
Un elemento con position: relative;se coloca en relación a su posición normal.
Configuración de la parte superior, derecho, inferior, y las propiedades izquierda de un elemento posicionado relativamente harán que se puede ajustar fuera de su posición normal. Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento.
position:fixed
Un elemento que se position: fixed;está posicionado en relación con el área de visualización, lo que significa que siempre permanece en el mismo lugar, incluso si la página se desplaza. La parte superior, derecho, inferior, y las propiedades de izquierda se utilizan para posicionar el elemento.
Un elemento fijo no dejar un hueco en la página donde normalmente habría sido localizado.
Note el elemento fijo en la esquina inferior derecha de la página. Aquí está el CSS que se utiliza:
Ejemplo
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Este elemento <div> tiene position: fixed;
position:absolute
position: absolute;
Un elemento con position: absolute;se posiciona con respecto al antepasado posicionado más cercano (en lugar de posicionado con respecto a la ventana gráfica, como fija).
Sin embargo; si un elemento posicionado absoluto ha ancestros no posicionado, se utiliza el cuerpo del documento, y se mueve junto con la página de desplazamiento.
Nota: Un "posicionada" elemento es uno cuya posición es nada, excepto static.
position:sticky
Un elemento con position: sticky;se coloca basa en la posición de desplazamiento del usuario.
Un elemento pegajoso alterna entre relativey fixed, dependiendo de la posición de desplazamiento. Se coloca relativa hasta una posición desplazada dado se cumple en la vista - a continuación, se "pega" en su lugar (como posición: fijo).
bottom
La bottompropiedad afecta la posición vertical de un elemento de posicionado. Esta propiedad tiene ningún efecto sobre los elementos no-posicionado.
Si la posición: absolute; o la posición: fijo; - la bottompropiedad establece el borde inferior de un elemento a una unidad de encima / debajo del borde inferior de su antepasado posicionado más cercano.
Si la posición: relative; - la bottompropiedad hace que el borde inferior del elemento para mover arriba / debajo de su posición normal.
Si la posición: pegajoso; - los bottomcomporta propiedad como su posición es relativa cuando el elemento está dentro de la ventana, y como su posición es fija cuando está fuera.
Si la posición: estática; - la bottompropiedad no tiene efecto.
left
La leftpropiedad afecta la posición horizontal de un elemento de posicionado. Esta propiedad tiene ningún efecto sobre los elementos no-posicionado.
Si la posición: absolute; o la posición: fijo; - la leftpropiedad establece el borde izquierdo de un elemento a una unidad hacia la izquierda del borde izquierdo de su antepasado posicionado más próximo.
Si la posición: relative; - la left propiedad establece el borde izquierdo de un elemento a una unidad hacia la izquierda / derecha de su posición normal.
Si la posición: pegajoso; - los leftcomporta propiedad como su posición es relativa cuando el elemento está dentro de la ventana, y como su posición es fija cuando está fuera.
Si la posición: estática; - la left propiedad no tiene efecto.
right
La rightpropiedad afecta la posición horizontal de un elemento de posicionado. Esta propiedad tiene ningún efecto sobre los elementos no-posicionado.
Si la posición: absolute; o la posición: fijo; - la rightpropiedad establece el margen derecho de un elemento de una unidad a la derecha del borde derecho de su antepasado posicionado más próximo.
Si la posición: relative; - la right propiedad establece el margen derecho de un elemento a una unidad hacia la izquierda / derecha de su posición normal.
Si la posición: pegajoso; - los rightcomporta propiedad como su posición es relativa cuando el elemento está dentro de la ventana, y como su posición es fija cuando está fuera.
Si la posición: estática; - la rightpropiedad no tiene efecto.
top
La toppropiedad afecta la posición vertical de un elemento de posicionado. Esta propiedad tiene ningún efecto sobre los elementos no-posicionado.
Si la posición: absolute; o la posición: fijo; - la toppropiedad establece el borde superior de un elemento a una unidad de arriba / abajo del borde superior de su antepasado posicionado más cercano.
Si la posición: relative; - la toppropiedad hace que el borde superior del elemento para mover arriba / debajo de su posición normal.
Si la posición: pegajoso; - los topcomporta propiedad como su posición es relativa cuando el elemento está dentro de la ventana, y como su posición es fija cuando está fuera.
Si la posición: estática; - la toppropiedad no tiene efecto.
z-index
La z-indexpropiedad especifica el orden de apilamiento de un elemento.
Un elemento con mayor orden de apilamiento está siempre en frente de un elemento con un orden de apilamiento inferior.
Nota: z-index sólo funciona en elementos posicionados (posición: absoluta, la posición: relativa, de posición: fijo, o de posición: pegajoso).
overflow
Las overflowespecifica la propiedad lo que debería suceder si el contenido desborda la caja de un elemento.
Esta propiedad especifica si se debe clip de contenido o para añadir barras de desplazamiento cuando el contenido de un elemento es demasiado grande para caber en un área especificada.
Nota: La overflowpropiedad sólo funciona para elementos de bloque con una altura especificada.
overflow-x
Las overflow-xespecifica la propiedad si se recorta el contenido, añadir una barra de desplazamiento, o mostrar contenido desbordamiento de un elemento en bloque, cuando se desborda en los bordes izquierdo y derecho.
Consejo: Utilice el desbordamiento-y propiedad para determinar el recorte en la parte superior e inferior.
overflow-y
Las overflow-yespecifica la propiedad si se recorta el contenido, añadir una barra de desplazamiento, o mostrar contenido desbordamiento de un elemento en bloque, cuando se desborda en la parte superior e inferior.
Consejo: Utilice el desbordamiento-x propiedad para determinar el recorte en los bordes izquierdo y derecho.
overflow:VISIBLE
Por defecto, el desbordamiento es visible, lo que significa que no se recorta y se hace fuera de la caja del elemento:
Puede utilizar la propiedad de desbordamiento cuando se desea tener un mejor control de la disposición. Está previsto por la propiedad de desbordamiento de lo que ocurre si el contenido desborda la caja de un elemento.
Con el hiddenvalor, el desbordamiento se recorta, y el resto del contenido se oculta:
Puede utilizar la propiedad de desbordamiento cuando se desea tener un mejor control de la disposición. Está previsto por la propiedad de desbordamiento de lo que ocurre si el contenido desborda la caja de un elemento.
Al establecer el valor scroll, el desbordamiento se recorta y se agrega una barra de desplazamiento para desplazarse dentro de la caja. Tenga en cuenta que esto añadirá una barra de desplazamiento horizontal y vertical (incluso si usted no lo necesita):
Puede utilizar la propiedad de desbordamiento cuando se desea tener un mejor control de la disposición. Está previsto por la propiedad de desbordamiento de lo que ocurre si el contenido desborda la caja de un elemento.
El autovalor es similar a scroll, pero añade barras de desplazamiento sólo cuando sea necesario:
Puede utilizar la propiedad de desbordamiento cuando se desea tener un mejor control de la disposición. Está previsto por la propiedad de desbordamiento de lo que ocurre si el contenido desborda la caja de un elemento.
box-sizing
La box-sizingpropiedad define cómo se calculan la anchura y la altura de un elemento: en caso de que incluya el relleno y los bordes, o no.
clear
Las clearespecifica la propiedad sobre la cual lados de un elemento elementos flotantes no se les permite flotador.
float
La floatpropiedad especifica cómo un elemento debe flotar.
Nota: los elementos posicionados absolutamente ignora la floatpropiedad!
Nota: Los elementos después de un elemento flotante fluirán a su alrededor. Para evitar esto, utilice la clara la propiedad o el hack clearfix (véase el ejemplo en la parte inferior de esta página).
FLOAT:LEFT
El siguiente ejemplo especifica que una imagen debe flotar a la izquierda en un texto:
FLOAT:RIGHT
El siguiente ejemplo especifica que una imagen debe flotar a la derecha en un texto:
FLOAT: NONE
Un elemento flotante es un elemento en el que el valor calculado de float no es igual a none FLOAT: INHERIT
Float es una propiedad de posicionamiento en CSS, es decir, el cómo se ubican los elementos dentro de un documento HTML. Podemos observar un ejemplo de float en un documento de word cuando “cuadramos” la imagen, o sea, que el texto se ajuste alrededor de la imagen PROPIEDAD FOCUS
La pseudo-clase :focus CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.
