Selecciona todo en el archivo
*{
color:blue;
}
Selecciona la etiqueta que este dentro de otras etiquetas
div article p{
color:blue;
}
Selecciona las etiquetas directas del div
div > p{
color:blue;
}
Selecciona todos los inputs con el atributo type sin importar el valor que tengan
input[type]{
color:blue;
}
Selecciona los atributos que tengan text o cualquier otro valor que especifiquemos
Se utiliza mucho para desarrollar buenos estilos en los formularios
input[type="text"]{
color:blue;
}
repeat(2, 1fr); = 50 50 , repeat(4, 1fr); = 25 25 25 25
h1{}
también h1, p{}
| Por id: #titulo{}
| Por clase: .titulo{}
también
.titulo , .parrafo{}
.titulo{
color:blue;
}
#color > .titulo{}
| a[href]{color:red;}
ó a[href="empresa.com"]{color:red;}
| a[class="titulo"]{color:blue;}
body {
background-image: url("img/goku0.jpg");
background-repeat: no-repeat;
}
height: 100vh;
Background-attachment:fixed;
Background-img
y a
veces
Background-position
ó Background-attachment
) .caja {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: auto;
}
.caja2 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 300px 100px;
}
.caja3 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 300px 100px;
background-repeat: no-repeat;
}
.caja4 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.caja4 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.caja6 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: contain;
background-repeat: no-repeat;
}
.caja7 {
width: 400px;
height: 200px;
border: solid 1px red;
background-image: url("img/goku0.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.caja8 {
width: 900px;
height: 600px;
border: solid 1px red;
background-image: url("../img/goku0.jpg");
background-repeat: no-repeat;
background-size: 50%;
background-position: center center;
position: relative;
}
background:url('img/imagen.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
Aquí va resumido
background: url('img/imagen.jpg') no-repeat fixed center center;
Te da combinaciones cool de colores, no olvides presionar la barra espaciadora, con "lock" seleccionas un color para que no cambie y con la barra espaciadora cambian los demás
Pone las cajas una al lado de la otra, se debe de poner display:inline-block" en cada caja
Font-family: 'Roboto'
Pone el tipo de tipografía
Font-style: italic
Font-size: 20px;
Pone el tamaño de la tipografía
Font-family: 'Roboto'
word-spacing
deja un espacio entre cada palabra
letter-spacing
deja un espacio entre cada LETRA
text-align:center/right;
Centra el texto o lo pone a la derecha
text-decoration:none/overline/underline/line-through
para que no tenga nada de CSS predeterminado
text-decoration: overline
text-decoration: underline
text-decoration: line-through
text-transform: uppercase/lowercase
texto en mayúsculas o minúsculas
El primer valor es horizontal, el segundo vertical y el tercero el tamaño de la sombra
text-shadow: 2px 2px 2px purple; Primer parameto: horizontal, Segundo parametro: vertical, Tercer parametro: Blur, Cuarto parametro: color(nombre,rgba ó hexadecimal)
El impacto de las sombras es "resaltar las fuentes"
La sombra es la que permite que se vea lo que estoy escribiendo
Fuentes por default en la computadora
body{
font-family: Arial, Sans-serif, Helvetica;
}
Como agregar una fuente
h1{
font-family: "Falcon Masters";
font-size: 20px;
font-style:italic;
color:#428ied;
}
@font-face {
font-family: 'Indie Flower';
src: url('../fonts/IndieFlower-Regular.ttf');
}
Para usarse:
h1.dancingScriptSemiBold,
p.dancingScriptSemiBold {
font-family: 'Dancing Script', cursive;
font-weight: 600;
}
Checa como se ven
Las unicas medidas que se usan para buenas practicas son: px,em, rem
El tamaño de la letra que te pone el navegador por defecto
em: su tamaño es relativo a su padre más cercano
rem: su tamaño es relativo al body
Debes usar display:inline-block siempre en los botones enlace
.btn{
background: blue;
color: white;
text-decoration:none;
padding: 10px;
display: inline-block;
margin: 0 10px;
}
Soy un boton
display: none; //esta wea se usa para desaparecer por completo
visibility: hidden;//esta wea desaparece pero respeta el espacio donde iba lo que desaparecio
Oculta el texto que se sale de la caja (hidden) y con auto le pone un scroll
overflow: hidden;
overflow: auto;
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ad labore. Quas alias eligendi, architecto repellat rerum reprehenderit. Quas facere nulla officiis omnis, quis fugit blanditiis suscipit nostrum mollitia quasi!
hijo relative: toma la esquina de la caja padre como referencia, si lo mueves en negativo se sale de la caja por "ENCIMA" de la caja padre
hijo static: No se mueve para ningún lado
Hijo fixed:Toma como referencia el navegador, se pone por encima del padre
hijo absolue: Se pone encima de la caja padre
Puedes modificar el tamaño de las imagenes usando "Width" y "height" en la misma etiqueta HTML
La imagen debe tener una posición relativa y el texto una posición absoluta
list-style:none | circle | square | lower-roman | upper-roman
.thumb {
margin: 10px;
border: 5px solid #ddd;
width: 150px;
}
.thumb:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, .5);
width: 200px;
}
Batman y Gatubela
filter: blur(2px);
filter: brightness(1.5);
filter: brightness(0.5);
filter: contrast(1);
filter: grayscale(1);
filter: invert(1); (invierte los colores)
filter: saturate(3); (Te satura de más color)
filter: sepia(.2);
Este texto está en posición absoluta y le doy colocación con top y left
.polaroid8 {
position: relative;
background-color: burlywood;
width: 300px;
padding: 10px;
margin: auto;
margin-bottom: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, .5);
div.polaroid9:hover {
filter: sepia(1);
transform: translate(10px, 20px);
}
div.polaroid9:hover {
filter: sepia(1);
transform: rotate(50deg);
}
El transition NO va en el hover, si no en la clase
transition: 1s;
div.polaroid9:hover {
filter: sepia(1);
transform: scale(1.2,1.2);
}
El transition NO va en el hover, si no en la clase
transition: 1s;
div.polaroid9:hover {
filter: sepia(1);
transform: scale(1.2,1.2);
}
El transition NO va en el hover, si no en la clase
transition: 1s;
div.cubo:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
animation-name: cuboMamalon;
animation-duration: 4s;
animation-delay: .8s;
}
@keyframes cuboMamalon {
0% {
background-color: red;
}
25% {
background-color: cornflowerblue;
}
50% {
background-color: darkgreen;
}
75% {
background-color: aquamarine;
}
100% {
background-color: brown;
}
}
div.polaroid9:hover {
filter: sepia(1);
transition: width 1s, transform .3s;
transition-delay: .3s;
animation-name: skew;
animation-iteration-count: 2;
animation-duration: 1s; }
a:visited Cuando ya fue visitado un link
a:visited{
color:red;
}
Cuando NO ha sido visitado un link
a:link{
color:yellow;
}
a:link Cuando nosotros damos "click" segundos antes de ir al link
a:link{
color:purple;
}
a:active Cuando nosotros damos "click" , PERO vuelve a su color normal cuando soltamos
a:link{
color:red;
}
p:nth:child(2) Pinta la segunda etiqueta P
p:nth:child(2){
background-color:purple;
}
p:nth-of-typye(even) Pinta los que sean pares
p:nth-of-typye(even){
background-color:purple;
}
p:nth-of-type(odd) Pinta los que sean INPARES
p:nth-of-type(odd){
background-color:purple;
}
p:first-of-type Pinta el primer HIJO , osea que siempre que haya una etiqueta P dentro de un div, pintara la primera P
p:first-of-type{
background-color:purple;
}
p:last-of-type Pinta el último HIJO , osea que siempre que haya una etiqueta P dentro de un div, pintara la ULTIMA P
p:last-of-type{
background-color:purple;
}
p:only-of-type Pinta el único en su tipo
p:only-of-type{
background-color:purple;
}
p:last-child Pinta el último hijo
p:last-child{
background-color:purple;
}
p:only-child Pinta el unico hijo
p:only-child{
background-color:purple;
}
p:only-enable Pinta el elemento activado (se utiliza para los input)
p:only-enable{
background-color:purple;
}
p:only-disable Pinta el elemento desactivado (se utiliza para los input)
p:only-disable{
background-color:purple;
}
p:only-enable Pinta el elemento activado(se utilizan para los radio button ó checkbox)
p:only-enable{
background-color:purple;
}
p:empty Pinta un elemento VACIO
p:empty{
width:10px;
height:10px;
background-color:purple;
}
first-line:La primera linea cambiará, no importa el tamaño de la linea
p::first-line{
color: green;
}
first-letter:La primera linea cambiará a Mayúscula
p::first-line{
color: green;
}
p::before agregara cosas antes del texto
p::before{
content: url("image.jpg");
color: green;
font-size: 3em;
}
p::afteragregara cosas después de que termine el texto
p::after{
content: url("image.jpg");
color: green;
font-size: 3em;
}
p::selection modifica los estilos de todo lo que seleccionas
p::selection{
color: green;
font-size: 3em;
}
@media screen and (max-width:800px){
aside{
width:100%;
}
}
La dirección por defecto de flex es alinearse en fila a la izquierda una caja al lado de la otra ejemplo:
display: block usa todo el espacio de manera horizontal y pone todo uno debajo del otro
display: inline-flex utilizan solo el espacio que necesitan
display: inline-flex utilizan solo el espacio que necesitan
flex-direction: row; pone las cajas en fila del lado izquierdo de manera horizontal
flex-direction: row-reverse; pone las cajas en fila del lado contrario de manera horizontal e invierte su orden
flex-direction: column; coloca las cajas de manera vertical
flex-direction: column-reverse; coloca las cajas de manera vertical pero al reves invirtiendo su orden
flex-direction: row; flex-wrap: nowrap; Va a mantener en una linea todas las cajas
flex-direction: row; flex-wrap: wrap; coloca las cajas de manera horizontal y si no caben, las pasa abajo
flex-direction: row; flex-wrap: wrap-reverse; coloca las cajas de manera horizontal y si no caben, las pasa abajo, pero invierte los valores del último al primero
flex-direction: column; flex-wrap: nowrap; coloca las cajas de manera vertical y mantiene el tamaño de las cajitas en una sola columna
flex-direction: column; flex-wrap: wrap; coloca las cajas de manera vertical y si no caben en la columna, las pone en otra
flex-flow: row wrap-reverse; sirve para usar flex-direction y flex-wrap(es un shortcut) al mismo tiempo pero sin escribir tanto
flex-flow: row wrap; + justify-content: flex-start; Sirve para poner al inicio los bloques
flex-flow: row wrap; + justify-content: flex-end; Sirve para poner al final los bloques
flex-flow: row wrap; + justify-content: flex-start; Sirve para poner al inicio los bloques
flex-flow: row wrap; + justify-content: space-between; Sirve para poner al inicio los bloques
flex-flow: row wrap; + justify-content: space-around; Sirve para poner al inicio los bloques
flex-flow: row wrap; + justify-content: space-evenly; Sirve para poner al inicio los bloques
flex-flow: row wrap; + justify-content: flex-start; Sirve para poner al inicio los bloques
flex-flow: column wrap; + justify-content: flex-end; Sirve para poner al inicio los bloques
flex-flow: column wrap; + justify-content: center; Sirve para poner al inicio los bloques
flex-flow: column wrap; + justify-content: space-between; Sirve para poner al inicio los bloques
flex-flow: column wrap; + justify-content: space-around; Sirve para poner al inicio los bloques
flex-flow: column wrap; + justify-content: space-evenly; Sirve para poner al inicio los bloques
flex-flow: row wrap; + justify-content: flex-start; align-items: stretch; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: row wrap; + justify-content: flex-start; align-items: stretch; alinea las cajas al final
flex-flow: row wrap; + justify-content: flex-start; align-items: stretch; alinea las cajas al inicio
flex-flow: column wrap; + justify-content: flex-start; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: column wrap; + justify-content: flex-start; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: column wrap; + justify-content: flex-end; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: column wrap; + justify-content: flex-start; align-items: center; estira las cajas, sea column o row lo que hayas puesto en flex-flow, igual las va a estirar
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-start;
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-end;
flex-flow: column wrap; + justify-content: flex-start; align-content: center;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-between;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-around;
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-start;
flex-flow: column wrap; + justify-content: flex-start; align-content: flex-end;
flex-flow: column wrap; + justify-content: flex-start; align-content: center;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-between;
flex-flow: column wrap; + justify-content: flex-start; align-content: space-around;