Blog hecho por: Emmanuel Acosta A.
Formas de insertar código de Css dentro de HTML, tanto como en linea, etiqueta style y archivo externo.
Background.
Utilizado para poner fondo; o definir efectos de fondo para los elementos, tiene muchas formas de uso.
Formas de usar Background.
Background-color
Esta propiedad especifica el color de fondo de un elemento, para esto necesitamos poner un nombre de color valido o en hex. o RGB.
Ej.
Resulado.
Background-image
Es para colocar una imagen de fondo, la imagen se repetirá según el verdadero tamaño de la página que estás viendo y de la imagen.
Ej.
Da como resultado:
Mencioné antes que la imagen se repetirá, hasta que quepa y según el tamaño de la imagen.
Ej.
Mas luego explicare como hacer para que no se repita la misma imagen.
Propiedades de desplazamiento.
que no se repita.
Ej.
Si quieres que se repita en horizontal:
background-repeat: repeat-x;
En vertical:
Para posicionar la imagen en la parte superior derecha:
Para posicionar la imagen en la parte superior izquierda: la misma acción solo que hay cambiar right top por left top.
fixed: permite que no se desplace con el resto de la pagina.
scroll: permite que se desplace con el resto de la pagina, aunque el simple hecho de no poner nada hace esta misma función.
En Css los colores se especifican con nombres específicos.
RGB: Rojo, Verde y Azul (Red, Green and Blue).
Hex: valor hexadecimal.
En CSS, un color se puede especificar utilizando un valor hexadecimal en la forma:
# rrggbb
Para usar valores hexadecimales siempre ponemos # al principio,
Ej,
Hsl: Brillo y saturación.
Un color puede especificarse utilizando matiz, saturación, luminosidad (HSL) en la forma: (tonalidad, saturación, luminosidad).
Se utiliza poniendo un (%) al final de cada número.
RGBA: RGB con dominio de transparencia.
Valores de color RGBA son una extensión de valores de color RGB con un canal alfa - que especifica la opacidad de un color.
HSLA: Hsl con dominio de transparencia.
HSLA ( tonalidad, saturación , luminosidad, alfa ).
El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (no transparente en absoluto):
Dominio de bordes.
Los CSS border le permiten especificar el estilo, el ancho y el color del borde de un elemento, poniendo fronteras en todos los lados.
A continuación explicare, en general para que se usa cada propiedad y luego mostrare ejemplos.
Se usan de la sigt. Manera:
En esta imagen se están poniendo un ejemplo de cada una de las propiedades de borde.
Resultado:
Ahora explicare por lados individuales, que aplica para cada uno de estos bordes.
border-bottom
Utilizado para poner poner borde inferior.
border-bottom-style
Utilizado para modificar específicamente el lado inferior de los 4 bordes que hay. Ej.
Se utiliza igualmente con los otros bordes.
top: Borde superior.
right: Borde derecho.
bottom: Borde inferior.
left: Borde izquierdo.
Al igual con los otros bordes, derecho, superior e izquierdo.
border-bottom-color
Esta acción lo que hará es que solo cambiara el color del borde inferior.
Y así dependiendo que borde que especifiquemos.
border-bottom-width
Establece el ancho del borde inferior de un elemento. Se establece con <length>, o usando una palabra clave de ancho borde: delgado, medio y grueso.
Todas estas explicaciones con buttom se utilizan también de la misma manera con los otros lados de borde; top, right, bottom, left.
Los margenes y padding
La propiedad margin establece los márgenes de un elemento, y es una propiedad abreviada para las siguientes propiedades:
margin-top
margin-right
margin-bottom
margin-left
margin-left
Esta propiedad establece el margen izquierdo de un elemento, Nota: los valores negativos son permitidos.
margin-top
Esta propiedad es para establecer el margen superior de un elemento, se utiliza de la sigt. manera:
margin-rightEsta por igual, es para establecer el margen derecho de un elemento, se utiliza al igual que los otros de varias formas.
margin-bottom
Esta propiedad es para establecer el margen inferior de un elemento, se utiliza al igual que los otros.
padding
Ajusta el relleno para los cuatro lados de un elemento, el relleno de un elemento es el espacio entre su contenido y su borde.
padding-bottom: Relleno inferior.
padding-left: Relleno izquierdo.
padding-right: Relleno derecho.
padding-top: Relleno superior.
Altura y ancho de las paginas web.
height
Es la propiedad que establece la altura de un elemento. La altura de un elemento no incluye el relleno, bordes o márgenes!
El height se utiliza o poniendo un valor numérico, puede ser expresado en px o utilizar (auto), el auto es para que el elemento ajuste automáticamente su altura, (en la imagen anterior se muestra como se usan).
max-height y min-height
Nota: Los min-altura y max-altura propiedades anulan la heightpropiedad.
width
Esta propiedad establece el ancho de un elemento.
El ancho de un elemento no incluye el relleno, bordes o márgenes!
Puede ser expresado en: (px), (cm), (%) o en auto.
Ajuste el ancho de un elemento <img> utilizando un valor por ciento:
max-width y min-width
Esta propiedad define la anchura mínima de un elemento.
Si el contenido es menor que el ancho mínimo, se aplicará la anchura mínima.
Esta propiedad define la anchura máxima de un elemento.
outline
Establece un contorno o esquema, es una línea que se dibuja alrededor de los elementos, fuera de las fronteras, para hacer que el elemento "destaque".
outline-width
Especifica la anchura de un esquema. Un elemento debe tener un esquema antes de cambiar el ancho de la misma.
outline-color
Propiedad que establece un color para el contorno. Un elemento debe tener un esquema antes de cambiar el color de la misma.
outline-offset
Esquema de compensación de la propiedad.
Establecimiento tiene espacio entre un esquema y el borde o borde de un elemento.
outline-style
Esta propiedad establece un estilo para el contorno o esquema, ya sea rayado, punteado, etc.
Otros.
outline-width
Esta propiedad es para especificar la anchura de un esquema, debe declarar un esquema antes de utilizar.
DirectionEsta propiedad especifica la dirección del texto / dirección de escritura dentro de un elemento en bloque.
Valor por defecto: ltr.
(LTR: La dirección del texto va de izquierda a derecha. Esto es por defecto).
letter-spacing
Background-repeat
Esta propiedad es para hacer que la imagen se repita hacia cualquier lado, horizontal o vertical. ... (cual quieras) o paraque no se repita.
Ej.
Si quieres que se repita en horizontal:
background-repeat: repeat-x;
En vertical:
Background-repeat: no-repeat
Background-position
Se utiliza para especificar la posición de la imagen de fondo, ya sea para posicionar la imagen en la esquina superior derecha y viceversa.Para posicionar la imagen en la parte superior derecha:
Para posicionar la imagen en la parte superior izquierda: la misma acción solo que hay cambiar right top por left top.
Background-attachment
Especifica si la imagen se mueve o se queda fija en el sitio, aunque te desplaces. (no se desplazará con el resto de la página).
fixed: permite que no se desplace con el resto de la pagina.
scroll: permite que se desplace con el resto de la pagina, aunque el simple hecho de no poner nada hace esta misma función.
Color--------Propiedad color
Los colores se especifican el uso de nombres de colores predefinidos, o RGB, HEX, HSL, valores RGBA, HSLA.En Css los colores se especifican con nombres específicos.
RGB: Rojo, Verde y Azul (Red, Green and Blue).
Hex: valor hexadecimal.
En CSS, un color se puede especificar utilizando un valor hexadecimal en la forma:
# rrggbb
Para usar valores hexadecimales siempre ponemos # al principio,
Ej,
Hsl: Brillo y saturación.
Un color puede especificarse utilizando matiz, saturación, luminosidad (HSL) en la forma: (tonalidad, saturación, luminosidad).
Se utiliza poniendo un (%) al final de cada número.
RGBA: RGB con dominio de transparencia.
Valores de color RGBA son una extensión de valores de color RGB con un canal alfa - que especifica la opacidad de un color.
HSLA: Hsl con dominio de transparencia.
HSLA ( tonalidad, saturación , luminosidad, alfa ).
El parámetro alfa es un número entre 0,0 (completamente transparente) y 1,0 (no transparente en absoluto):
Dominio de bordes.
Los CSS border le permiten especificar el estilo, el ancho y el color del borde de un elemento, poniendo fronteras en todos los lados.
A continuación explicare, en general para que se usa cada propiedad y luego mostrare ejemplos.
Se usan de la sigt. Manera:
En esta imagen se están poniendo un ejemplo de cada una de las propiedades de borde.
Resultado:
Ahora explicare por lados individuales, que aplica para cada uno de estos bordes.
border-bottom
Utilizado para poner poner borde inferior.
border-bottom-style
Utilizado para modificar específicamente el lado inferior de los 4 bordes que hay. Ej.
Se utiliza igualmente con los otros bordes.
top: Borde superior.
right: Borde derecho.
bottom: Borde inferior.
left: Borde izquierdo.
Al igual con los otros bordes, derecho, superior e izquierdo.
border-bottom-color
Esta acción lo que hará es que solo cambiara el color del borde inferior.
Y así dependiendo que borde que especifiquemos.
border-bottom-width
Establece el ancho del borde inferior de un elemento. Se establece con <length>, o usando una palabra clave de ancho borde: delgado, medio y grueso.
Todas estas explicaciones con buttom se utilizan también de la misma manera con los otros lados de borde; top, right, bottom, left.
Los margenes y padding
La propiedad margin establece los márgenes de un elemento, y es una propiedad abreviada para las siguientes propiedades:
margin-top
margin-right
margin-bottom
margin-left
margin-left
Esta propiedad establece el margen izquierdo de un elemento, Nota: los valores negativos son permitidos.
margin-top
Esta propiedad es para establecer el margen superior de un elemento, se utiliza de la sigt. manera:
margin-rightEsta por igual, es para establecer el margen derecho de un elemento, se utiliza al igual que los otros de varias formas.
margin-bottom
Esta propiedad es para establecer el margen inferior de un elemento, se utiliza al igual que los otros.
padding
Ajusta el relleno para los cuatro lados de un elemento, el relleno de un elemento es el espacio entre su contenido y su borde.
padding-left: Relleno izquierdo.
padding-right: Relleno derecho.
padding-top: Relleno superior.
Altura y ancho de las paginas web.
height
Es la propiedad que establece la altura de un elemento. La altura de un elemento no incluye el relleno, bordes o márgenes!
max-height y min-height
- min-height
- max-height
Nota: Los min-altura y max-altura propiedades anulan la heightpropiedad.
width
Esta propiedad establece el ancho de un elemento.
El ancho de un elemento no incluye el relleno, bordes o márgenes!
Puede ser expresado en: (px), (cm), (%) o en auto.
Ajuste el ancho de un elemento <img> utilizando un valor por ciento:
max-width y min-width
- min-width
Esta propiedad define la anchura mínima de un elemento.
Si el contenido es menor que el ancho mínimo, se aplicará la anchura mínima.
- max-width
Esta propiedad define la anchura máxima de un elemento.
Si el
contenido es mayor que la anchura máxima, cambiará automáticamente la altura
del elemento.
outline
outline-width
Especifica la anchura de un esquema. Un elemento debe tener un esquema antes de cambiar el ancho de la misma.
outline-color
Propiedad que establece un color para el contorno. Un elemento debe tener un esquema antes de cambiar el color de la misma.
outline-offset
Esquema de compensación de la propiedad.
Establecimiento tiene espacio entre un esquema y el borde o borde de un elemento.
Esta propiedad establece un estilo para el contorno o esquema, ya sea rayado, punteado, etc.
Otros.
outline-width
Esta propiedad es para especificar la anchura de un esquema, debe declarar un esquema antes de utilizar.
DirectionEsta propiedad especifica la dirección del texto / dirección de escritura dentro de un elemento en bloque.
Valor por defecto: ltr.
(LTR: La dirección del texto va de izquierda a derecha. Esto es por defecto).
letter-spacing
