Propiedades de Css Parte: 1

 propiedades de fondos de la página                                                  

Background:

Es un atajo para definir un solo valor de fondo en una sola regla CSS.

Background-color:

Es una propiedad de CSS que se usa para definir el color de fondo del elemento, puede ser el valor del color o una palabra.

Background-imagen:

Se utiliza para configurar la imagen de fondo de cada elemento.

Background-img:

La propiedad background-img repite una imagen tanto horizontal como verticalmente.

Background-position:

La propiedad establece la posición inicial de una imagen de fondo.

Background-attachment:

Controla si la imagen de fondo establecida en el elemento se mueve o permanece fija al desplazarse por

la ventana del navegador.

Propiedad color

Rgb-valor para rojo verde azul: Los códigos RGB se pueden expresar de distintas formas.

• rgb(rojo, verde, azul), donde rojo, verde y azul son números enteros desde 0 a 255.
• rgb(rojo, verde, azul), donde rojo, verde y azul son porcentajes desde 0% hasta 100%.

Dominio de bordes

border: La propiedad border permite definir de golpe todos los bordes en una única regla de la hoja de estilos.

border-bottom: es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales.

border-bottom-color: La propiedad border-bottom-color usa el valor de color o la palabra clave transparente para

definir el color del borde inferior del elemento.

border-bottom-style: este  permite establecer el estilo del borde inferior de un elemento. 

border-bottom-width: define el ancho del borde inferior de una caja.

border-color: es un atajo para definir el color de los cuatro bordes de un elemento.

border-left: es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. 

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 propiedad establece el estilo del borde izquierdo de un elemento.

border-left-width: La propiedad establece el ancho del borde izquierdo de un elemento.
border-radius: La propiedad define el radio de las esquinas del elemento.

border-right: es una propiedad abreviada de (en el siguiente orden):

• border-right-width
• border-right-style (required)
• border-right-color

border-right-color: La propiedad establece el color del borde derecho de un elemento.
border-right-style: La propiedad establece el estilo del borde derecho de un elemento.
border-right-width: propiedad establece el ancho del borde derecho de un elemento.
border-style:La propiedad establece el estilo de los cuatro bordes de un elemento.

border-top:La propiedad abreviada establece todas las propiedades del borde superior en una declaración.

border-top-color: La propiedad establece el color del borde superior de un elemento.

border-top-style: La propiedad establece el estilo del borde superior de un elemento.

border-top-width: Es la propiedad que establece el ancho del borde superior de un elemento.
border-width: La propiedad establece el ancho de los cuatro bordes de un elemento. Esta propiedad puede tener de uno a cuatro valores.

Los margenes y padding

margin: property establece los márgenes de un elemento y es una propiedad abreviada de las siguientes propiedades:

• margin-top

• margin-left

• margin-bottom

• margin-right

margin-left: propiedad establece el margen izquierdo de un elemento.

margin-top: propiedad establece el margen superior de un elemento. p.ex1 {
  margin-top: 25px;
}

margin-right: propiedad establece el margen derecho de un elemento. p.ex1 {
  margin-right: 150px;
}

margin-bottom: propiedad establece el margen inferior de un elemento.

padding: property es una propiedad abreviada de:

• padding-top
• padding-right
• padding-bottom
• padding-left

padding-bottom: La propiedad establece el relleno inferior (espacio) de un elemento.

padding-left: propiedad establece el relleno izquierdo (espacio) de un elemento.

p.ex1 {
  padding-left: 50px;
} padding-right: propiedad establece el relleno correcto (espacio) de un elemento.

p.ex1 {
  padding-right: 150px;
}

padding-top: propiedad establece el relleno superior (espacio) de un elemento.

p.ex1 {
  padding-top: 25px;
}

Altura y ancho de las paginas web

height: propiedad establece la altura de un elemento. ¡La altura de un elemento no incluye relleno, bordes ni márgenes!

div.a {
  height: auto;
  border: 1px solid black;
}

div.b {
  height: 50px;
  border: 1px solid black;
} max-height: La propiedad define la altura máxima de un elemento.

p.ex1 {
  max-height: 50px;
} max-width:La propiedad define el ancho máximo de un elemento.

p.ex1 {
  max-width: 150px;
} min-height: La propiedad define la altura mínima de un elemento.

p.ex1 {
  min-height: 200px;
} min-width: La propiedad define el ancho mínimo de un elemento.

span.ex1 {
  min-width: 500px;
}

width: es la propiedad que establece el ancho de un elemento.

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: Es una línea que se dibuja alrededor de los elementos, fuera de los bordes, para hacer que el elemento "destaque".

h2 {
  outline: 5px dotted green;
}

div.a {
  outline: 2px dashed blue;
}

outline-width: especifica el ancho de un contorno.

outline-color: propiedad especifica el color de un contorno.

div {outline-color: coral;}

outline-offset: La propiedad agrega espacio entre un contorno y el borde o borde de un elemento. div {
  outline: 4px solid red;
  outline-offset: 15px;
}

outline-style: propiedad especifica el estilo de un contorno.

direction: propiedad especifica la dirección del texto / dirección de escritura dentro de un elemento a nivel de bloque. p.rtl {
  direction: rtl;
}

letter-spacing: esta es la propiedad aumenta o disminuye el espacio entre caracteres en un texto.

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: 2px;
}

h3 {
  letter-spacing: -1px;
}

line-height: propiedad especifica la altura de una línea.

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: propiedad especifica la alineación horizontal del texto en un elemento.

text-decoration: propiedad especifica la decoración agregada al texto y es una propiedad abreviada para:

text-decoration-line: La propiedad establece el tipo de decoración de texto que se utilizará (como subrayado, sobrelínea, línea directa).

text-decoration-color: propiedad especifica el color de la decoración del texto (subrayados, sobrelíneas, pasajes de línea).

text decoration style: Es la propiedad establece el estilo de la decoración del texto (como sólido, ondulado, punteado, discontinuo, doble).

unicode-bidi: La propiedad 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.

div {
  direction: rtl;
  unicode-bidi: bidi-override;
}

text-indent: propiedad especifica la sangría de la primera línea en un bloque de texto.

div.a {
  text-indent: 50px;
}

div.b {
  text-indent: -2em;
}

div.c {
  text-indent: 30%;
}

text-shadow: La propiedad agrega sombra al texto.

h1 {
  text-shadow: 2px 2px #ff0000;
}

 text-transform: La propiedad controla las mayúsculas del texto.

div.a {
  text-transform: uppercase;
}

div.b {
  text-transform: lowercase;
}

div.c {
  text-transform: capitalize;
}

text-overflow: La propiedad especifica cómo se debe señalar al usuario el contenido desbordado que no se muestra.

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

vertical-align:  La propiedad establece la alineación vertical de un elemento.

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: propiedad especifica cómo se maneja el espacio en blanco dentro de un elemento.

p.a {
  white-space: nowrap;
}

p.b {
  white-space: normal;
}

p.c {
  white-space: pre;
}

 word-spacing: propiedad aumenta o disminuye el espacio en blanco entre palabras.

 font:  La propiedad  permite establecer de una sola vez los valores para todas las propiedades:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

p.a {
  font: 15px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

font-family: La propiedad font-family define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado.

p.a {
  font-family: "Times New Roman", Times, serif;
}

p.b {
  font-family: Arial, Helvetica, sans-serif;
}

font-size: propiedad establece el tamaño de una fuente.

font-style: propiedad especifica el estilo de fuente de un texto.

p.a {
  font-style: normal;
}

p.b {
  font-style: italic;
}

p.c {
  font-style: oblique;
}

font-variant: La propiedad especifica si un texto debe mostrarse en letra pequeña.

p.small

 font-variant: small-caps;

} 

font-weight: La propiedad establece cómo se deben mostrar los caracteres delgados o gruesos en el texto.

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}

Los link en css

a:link: Es un enlace normal no visitado.

/* unvisited link */
a:link {
  color: red;
}

a:visited: Este se utiliza para seleccionar enlaces visitados.

a:visited {
  color: pink;
}

a:hover : Es un enlace para cuando el usuario pasa el mouse sobre él /* mouse hover link */
a:hover {
  color: hotpink;
}

a:active: Es un enlace que se entra en el momento en que se hace clic en él

/* selected link */
a:active {
  color: blue;
}

L 

as listas

list-style-type: especifica el tipo de marcador de elemento de lista en una lista.

list-style-position: propiedad especifica la posición de los marcadores de elementos de la lista (viñetas).

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

list-style-image: La propiedad reemplaza el marcador de elemento de lista con una imagen.

ul {
  list-style-image: url('sqpurple.gif');
}

LAS TABLAS EN CSS

border-collapse: La propiedad establece si los bordes de la tabla deben colapsar en un solo borde o estar separados como en HTML estándar.

border-spacing: La propiedad establece la distancia entre los bordes de las celdas adyacentes. #table1 {
  border-collapse: separate;
  border-spacing: 15px;
}

#table2 {
  border-collapse: separate;
  border-spacing: 15px 50px;
}

caption-side: propiedad especifica la ubicación de un título de tabla,

empty-cells: La propiedad establece si se muestran o no los bordes de las celdas vacías de una tabla.

table {
  empty-cells: hide;
}

table-layout: La propiedad define el algoritmo utilizado para diseñar celdas, filas y columnas de la tabla. table.a {
  table-layout: auto;
  width: 180px;
}

table.b {
  table-layout: fixed;
  width: 180px;
}