5044533
Description
Mind Map by EDUARDO ANDRES A3422, updated more than 1 year ago
|
Created by EDUARDO ANDRES A3422
over 8 years ago
|
|
Elementos de CSS
- Selectores: Elemento
conectado a un estilo
- Basicos
- De clase: Aplica
estilo a un solo
elemento de la
pagina
- .nombre_clase { ... }
.logicos { margin : 0; }
- .nombre_clase { ... }
.logicos { margin : 0; }
- Universal:
Selecciona todos
los elementos
de la pagina
- * {margin : 0;
padding : 0; }
- * {margin : 0;
padding : 0; }
- De etiqueta:
Selecciona los
elementos cuya
etiqueta coincida
con la del selector
- p {color : red; }
- p {color : red; }
- Descendente:
Selecciona los
elementos que
se encuentran
dentro de otros
- p span {color : red}
- p span {color : red}
- De ID:
Selecciona un
elemento de la
pagina a tyraves
de su atributo
- #nombre_ID { ... }
#logicos { margin : 0; }
- #nombre_ID { ... }
#logicos { margin : 0; }
- De clase: Aplica
estilo a un solo
elemento de la
pagina
- Avanzados
- De hijos:
Selecciona un
elemento que
es hijo directo
de otro
- P > a { color : red; }
- P > a { color : red; }
- Adyacente: Se
emplea para
seleccionar
elementos
consecutivos
- Elemento1 + Elemento2 = { ... }
h1 + h2 { color : red; }
- Elemento1 + Elemento2 = { ... }
h1 + h2 { color : red; }
- De atributos:
Selecciona los
elementos en
funcion de su
atributo
- [nombre_atributo = valor]
a [ class = "interno" ]
- [nombre_atributo = valor]
a [ class = "interno" ]
- De hijos:
Selecciona un
elemento que
es hijo directo
de otro
- Basicos
- Unidades de medida
- Absolutas: Su valor
se encuentra
completamente
definido
- cm: Centimetros
- body { margin : 2cm; }
- body { margin : 2cm; }
- mm: Milimetros
- body { margin : 4mm; }
- body { margin : 4mm; }
- pt: Puntos
- body { margin : 12pt; }
- body { margin : 12pt; }
- in: pulgadas
- body { margin : 0.5in; }
- body { margin : 0.5in; }
- pc: Picas
- body { margin : 1pc; }
- body { margin : 1pc; }
- cm: Centimetros
- 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
- em: relativo respecto
al tamaño de la
letra del elemento
- Absolutas: Su valor
se encuentra
completamente
definido
- Colores
- RGB Decimal: Define
el color indicando la
cantidad de verde,
rojo y azul que se
debe mezclar
- p { color: rgb(10,10,10); }
- p { color: rgb(10,10,10); }
- Palabra clave:
Corresponde al
nombre en ingles
de cada color
- p { color: red }
- p { color: red }
- RGB Hexadecimal:
Define el color
mediante un
codigo
hexadecimal
- p { color: #4762B0; }
- p { color: #4762B0; }
- RGB Porcentual:
Define el color
indicando cantidad
de verde, rojo y azul
pero en porcentajes
- p { color: rgb(10%,10%,10%); }
- p { color: rgb(10%,10%,10%); }
- RGB Decimal: Define
el color indicando la
cantidad de verde,
rojo y azul que se
debe mezclar
- Modelo de Cajas
- Ancho
- Width
- .tabla { width : 30%; }
- .tabla { width : 30%; }
- Width
- Alto
- Height
- .tabla { height : 30%; }
- .tabla { height : 30%; }
- Height
- Margen
- Margin
- margin-top: superior
- margin-bottom: inferior
- margin-left: Izquierdo
- margin-right: Derecho
- margin-top: superior
- Margin
- Relleno
- Padding: Espacio
entre contenido
y el contenedor
- Padding-bottom
- Padding-right
- Padding-left
- Padding-top
- Padding-bottom
- Padding: Espacio
entre contenido
y el contenedor
- Ancho
Want to create your own Mind Maps for free with GoConqr? Learn more.