Elementos de CSS

Elementos de CSS

1. Selectores: Elemento conectado a un estilo

   • Basicos
     • De clase: Aplica estilo a un solo elemento de la pagina
       • .nombre_clase { ... } .logicos { margin : 0; }
     • Universal: Selecciona todos los elementos de la pagina
       • * {margin : 0; padding : 0; }
     • De etiqueta: Selecciona los elementos cuya etiqueta coincida con la del selector
       • p {color : red; }
     • Descendente: Selecciona los elementos que se encuentran dentro de otros
       • p span {color : red}
     • De ID: Selecciona un elemento de la pagina a tyraves de su atributo
       • #nombre_ID { ... } #logicos { margin : 0; }
   • Avanzados
     • De hijos: Selecciona un elemento que es hijo directo de otro
       • P > a { color : red; }
     • Adyacente: Se emplea para seleccionar elementos consecutivos
       • Elemento1 + Elemento2 = { ... } h1 + h2 { color : red; }
     • De atributos: Selecciona los elementos en funcion de su atributo
       • [nombre_atributo = valor] a [ class = "interno" ]

2. Unidades de medida

   • Absolutas: Su valor se encuentra completamente definido
     • cm: Centimetros
       • body { margin : 2cm; }
     • mm: Milimetros
       • body { margin : 4mm; }
     • pt: Puntos
       • body { margin : 12pt; }
     • in: pulgadas
       • body { margin : 0.5in; }
     • pc: Picas
       • body { margin : 1pc; }
   • Relativas: Su valor esta referenciado respecto a otro
     • em: relativo respecto al tamaño de la letra del elemento
     • ex: Relativa respecto a la altura "x" de la letra del elemento
     • px: Relativa respecto a la resolucion de pantalla
     • % (porcentaje): Unidad que siempre esta referenciando a otra medida

3. Colores

   • RGB Decimal: Define el color indicando la cantidad de verde, rojo y azul que se debe mezclar
     • p { color: rgb(10,10,10); }
   • Palabra clave: Corresponde al nombre en ingles de cada color
     • p { color: red }
   • RGB Hexadecimal: Define el color mediante un codigo hexadecimal
     • p { color: #4762B0; }
   • RGB Porcentual: Define el color indicando cantidad de verde, rojo y azul pero en porcentajes
     • p { color: rgb(10%,10%,10%); }

4. Modelo de Cajas

   • Ancho
     • Width
       • .tabla { width : 30%; }
   • Alto
     • Height
       • .tabla { height : 30%; }
   • Margen
     • Margin
       • margin-top: superior
       • margin-bottom: inferior
       • margin-left: Izquierdo
       • margin-right: Derecho
   • Relleno
     • Padding: Espacio entre contenido y el contenedor
       • Padding-bottom
       • Padding-right
       • Padding-left
       • Padding-top