Propiedades de CSS part 1"
Propiedades de CSS part 1"
Mediante la etiqueta <style> dentro de la cabecera del documento. Dentro de <style> ponemos los estilos que queramos incluir en el documento HTML. Es importante incluir el atributo type=”text/css”.
background
Background-color
background-image
background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
}
h1, h2, h3 {
background-image: url("imagenes/fondo.png");
}
ul li {
background-image: url('../comun/imagenes/icono.gif');
background-repeat.
background-position
La background-position propiedad establece la posición inicial de una imagen de fondo.
background-attachment
background-attachmentpropiedad establece si una imagen de fondo se desplaza con el resto de la página o es fija.
color
Los colores se especifican utilizando nombres de colores predefinidos o valores RGB, HEX, HSL, RGBA, HSLA.
RGB
En CSS, un color se puede especificar como un valor RGB, usando esta fórmula: RGB ( rojo, verde , azul )
HEX
En CSS, un color se puede especificar usando un valor hexadecimal en la forma: # rrggbb
HSL
En CSS, un color se puede especificar usando tono, saturación y luminosidad (HSL) en la forma: hsl ( tono , saturación , luminosidad )
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 )
DOMINIO DE BORDES
border
Las propiedades del borde CSS le permiten especificar el estilo, el ancho y el color del borde de un elemento.
border-bottom
La propiedad border-bottom permite de definir de una vez todas las propiedades individuales border-bottom-color, border-bottom-style, y border-bottom-width, las cuales describen el color, estilo y ancho del borde inferior de un elementos.
border-bottom-color
La propiedad border-bottom-color define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave transparente.
border-bottom-style define el estilo de línea del borde inferior de una caja.
border-bottom-width
border-bottom-width define el ancho del borde inferior de una caja.
La border-colorpropiedad se utiliza para establecer el color de los cuatro bordes.
border-left
border-left es una propiedad abreviada de (en el siguiente orden):
border-left-color
border-left-color pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo transparente .
border-left-style
La border-left-stylepropiedad establece el estilo del borde izquierdo de un elemento.
border-left-width
La border-left-widthpropiedad establece el ancho del borde izquierdo de un elemento
border-radius
border-radiuspropiedad define el radio de las esquinas del elemento.
border-right
La propiedad CSS border-right es un a propiedad rápida para dar valores al border-right-width, border-right-style y border-right-color. Estas propiedades establecen un borde derecho del elemento.
border-right-color
La border-right-colorpropiedad establece el color del borde derecho de un elemento.
border-right-style
border-right-stylepropiedad establece el estilo del borde derecho de un elemento.
border-right-width
border-right-widthpropiedad establece el ancho del borde derecho de un elemento.
border-style
La border-stylepropiedad especifica qué tipo de borde mostrar.
border-top
border-toppropiedad abreviada establece todas las propiedades del borde superior en una declaración.
border-top-color
border-top-colorpropiedad establece el color del borde superior de un elemento.
border-top-style
La border-top-stylepropiedad establece el estilo del borde superior de un elemento.
border-top-width
La border-top-widthpropiedad establece el ancho del borde superior de un elemento.
border-width
border-widthpropiedad establece el ancho de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.
LOS MARGENES Y PADDING
margin
Las marginpropiedades de CSS se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.
margin-left
a margin-leftpropiedad establece el margen izquierdo de un elemento.
margin-leftpropiedad establece el margen izquierdo de un elemento.
margin-top
margin-toppropiedad establece el margen superior de un elemento.
margin-rightLa margin-rightpropiedad establece el margen derecho de un elemento.
La margin-rightpropiedad establece el margen derecho de un elemento.
margin-bottom
El margin-bottom CSS ( margen-inferior ) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.
El margin-bottom CSS ( margen-inferior ) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.
paddingLas paddingpropiedades CSS se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
paddingpropiedades CSS se utilizan para generar espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
padding-bottom
padding-left
a padding-leftpropiedad establece el relleno izquierdo (espacio) de un elemento.
padding-leftpropiedad establece el relleno izquierdo (espacio) de un elemento.
padding-right
La padding-rightpropiedad establece el relleno correcto (espacio) de un elemento.
padding-rightpropiedad establece el relleno correcto (espacio) de un elemento.
padding-top
La padding-toppropiedad establece el relleno superior (espacio) de un elemento.
padding-toppropiedad establece el relleno superior (espacio) de un elemento.
ALTURA Y ANCHO DE LAS PAGINAS WEB
heightpropiedad establece la altura de un elemento
La max-heightpropiedad define la altura máxima de un elemento.
La max-widthpropiedad define el ancho máximo de un elemento.
La min-heightpropiedad define la altura mínima de un elemento.
La min-widthpropiedad define el ancho mínimo de un elemento.
widthpropiedad establece el ancho de un elemento.
MODELOS DE CAJAS DE CSS
outline
outline-widthLa outline-widthpropiedad especifica el ancho del contorno y puede tener uno de los siguientes valores:
- delgado (normalmente 1 px)
- medio (normalmente 3px)
- grueso (normalmente 5px)
- Un tamaño específico (en px, pt, cm, em, etc.)
outline-coloroutline-colorestablece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.
outline-offset
La propiedad CSS outline-offset es usada para establecer el espacio entre un contorno outline y el límite o borde de un elemento.
outline-style
outline-style es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.
outline-width
La propiedad CSS outline-width es usada para establecer el grosor del contorno de un elemento.
direction
La propiedad direction se utiliza para indicar en que dirección fluye el texto: rtl para hebreo o árabe y ltr para otros tipos de escritura.
letter-spacing
La letter-spacingpropiedad aumenta o disminuye el espacio entre caracteres en un texto.
line-heightLa line-heightpropiedad especifica la altura de una línea.
La outline-widthpropiedad especifica el ancho del contorno y puede tener uno de los siguientes valores:
- delgado (normalmente 1 px)
- medio (normalmente 3px)
- grueso (normalmente 5px)
- Un tamaño específico (en px, pt, cm, em, etc.)
outline-colorestablece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.
outline-style es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.letter-spacingpropiedad aumenta o disminuye el espacio entre caracteres en un texto.
La line-heightpropiedad especifica la altura de una línea.
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 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
text-indent
La text-indentpropiedad especifica la sangría de la primera línea en un bloque de texto.
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.
text-transform
La text-transformpropiedad controla las mayúsculas del texto.
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.
unicode-bidi
Las propiedades unicode-bidiy directionson las únicas propiedades que no se ven afectadas por la alltaquigrafía.
vertical-align
La propiedad vertical-align de CSS especifica el alineado vertical de un elemento en línea o una celda de una tabla.
white-space
La white-spacepropiedad especifica cómo se maneja el espacio en blanco dentro de un elemento.
word-spacing
La word-spacingpropiedad aumenta o disminuye el espacio en blanco entre palabras.
font
La fuente agrega valor a su texto. También es importante elegir el color y el tamaño de texto correctos para la fuente.
font-family
La font-familypropiedad especifica la fuente de un elemento.
font-size
La font-sizepropiedad establece el tamaño de una fuente.
font-style
La font-stylepropiedad especifica el estilo de fuente de un texto.
font-variant
La font-variantpropiedad especifica si un texto debe mostrarse o no en letra minúscula.
font-weight
La font-weightpropiedad establece cómo se deben mostrar los caracteres delgados o gruesos en el texto.
a:link - un enlace
normal no visitado
a:visited
a:visited - un
enlace que el usuario ha visitado
a:hover
a:hover - un enlace
cuando el usuario pasa el mouse sobre él
a:active
a:active - un enlace
en el momento en que se hace clic en él
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 de elementos de la lista (viñetas).
list-style-imagepropiedad reemplaza el marcador de elemento de lista con una imagen.
La border-collapsepropiedad establece si los bordes de la tabla deben colapsar en un solo borde o estar separados como en HTML estándar.
border-spacing
border-spacingpropiedad establece la distancia entre los bordes de las celdas adyacentes.
caption-side
caption-sidepropiedad especifica la ubicación de un título de tabla.
empty-cells
La empty-cellspropiedad establece si se muestran o no bordes en celdas vacías en una tabla.
table-layoutpropiedad define el algoritmo utilizado para diseñar celdas, filas y columnas de la tabla.
nth-child(even)
El selector coincide con cada elemento que es el n- ésimo hijo, independientemente del tipo, de su padre.:nth-child(n)
La pseudo-clase :nth-child() de CSS coincide con uno o más elementos en función de su posición entre un grupo de hermanos.
Muy útil gracias
ResponderBorrar❤
ResponderBorrar