Link:
<link rel="StyleSheet" href="[Link]" type="text/css">
CSS:
SELECTORES:
Se le aplica a todo el documento HTML: Con el asterisco (*)
/*Selector Universal*/
*{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
POR ETIQUETA:
/*Selector Etiqueta*/
body{
background-color: white;
}
h1{
background-color: red;
color: white;
font-size: 40px;
padding: 10px;
}
ul li a{
color: red;
font-size: 18px;
text-decoration: none;
}
footer a{
color: green;
font-size: 18px;
text-decoration: none; /*Le quita el subrayado al link*/
}
POR ID:
El ID esta hecho para UN unico elemento en la pagina.
/*Selector Id*/
Html > id=”description”
#descripcion{
border: 5px solid black;
padding: 15px;
}
POR CLASE:
/*Selector Clase*/
HTML > class=”parrafo1”
.parrafo1, .parrafo3{
font-style: italic;
font-weight: bold;
color: white;
background-color: brown;
padding: 10px;
}
.parrafo2{
font-weight: bold;
color: white;
background-color: rebeccapurple;
padding: 10px;
}
POR ATRIBUTO:
DISPLAY: Sirve Para cambiar si quiero el elemento en línea o en bloque.
Aplicado a un FORMULARIO.
/*Selector Atributo*/
#usuario form{
border: 5px solid green;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
}
#usuario form *{
display: block; /*PARA QUE LOS ELEMENTOS ESTEN EN BLOQUE*/
}
input[type="text"]{
margin-bottom: 15px;
padding: 10px;
width: 300px;
}
input[type="submit"]{
background: green;
color: white;
padding: 15px;
font-size: 15px;
text-transform: uppercase; /*Para tranformar letras en MAYUSCULAS*/
border: 1px solid black;
cursor: pointer; /*Para cambiar cursor a Manito*/
}
SELECTORES HIJO:
Llegamos hasta el elemento que queremos con >
/*Selector HIJO*/
#menu > li > a{
font-style: italic;
color: blue ;
font-size: 18px;
text-decoration: none;
}
PRIORIDADES CSS:
FUENTES Y COLORES:
FUENTES:
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 40px;
font-style: italic; /*Cursiva*/
}
h3{
font-family: "Comic sans ms";
font-size: 30px;
font-weight: lighter; /*Letra mas fina*/
}
p{
font-family: sans-serif;
font-size: 16px;
font-weight: bold; /*Negrita*/
}
FUENTES PERSONALIZADAS:
GOOGLE FONTS.
h1{
font-family: 'Dosis', sans-serif;
font-family: 'Mansalva', cursive; /*Linkeada al HTML desde Google*/
font-size: 40px;
text-transform: uppercase;
}
IMPORTADA desde la carpeta:
@font-face{
font-family: MansalvaAgu;
src: url(fonts/Mansalva/[Link]);
}
h1{
font-family: 'Dosis', sans-serif;
font-family: MansalvaAgu, cursive; /*Creada desde la Carpeta*/
font-size: 40px;
text-transform: uppercase;
COLORES:
/*COLORES*/
/*Colores del Sistema*/
color: LightSeaGreen;
/*Colores Hexadecimal*/
color: #FFA07A;
/*Colores RGB*/
color: rgb(255, 255, 107);
/*Colores RGBA*/
color: rgba(255, 255, 107, 1);
FONDOS:
FONDOS:
/*FONDOS*/
body{
background-image: url(img/[Link]);
background-repeat: no-repeat;
background-size: 100% 100%; /*se adapta toda la imagen*/
background-attachment: fixed; /*Para que si bajo no me siga*/
background-position: left bottom; /*elige la parte de la imagen*/
}
#caja{
border: 5px solid black;
padding: 10px;
background-color: rgb(185, 76, 25);
color: black;
TEXTOS PROPIEDADES:
#caja{
border: 5px solid black;
padding: 10px;
background-color: rgb(185, 76, 25);
color: black;
text-align: center;
line-height: 30px; /*ALTURA DE LA LINEA*/
text-transform: uppercase; /*MAYUSCULAS*/
text-decoration: underline; /*PONE UNA LINEA DEBAJO*/
}
p{
border: 5px solid rgb(0, 0, 0);
padding: 10px;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
text-indent: 15PX; /*TABULA EN EL COMIENZO DEL PARRAFO*/
}
CAJAS Y POSICIONAMIENTO:
MARGENES, PADDINGS, ALTO, ANCHO Y BORDES:
*{
margin: 0px; /*MARGEN*/
padding: 0px; /*MARGEN INTERIOR DE CAJA*/
}
/*CAJAS*/
#caja1, #caja2{
width: 250px;
height: 250px;
background-color: lightblue;
border: 10px solid red;
margin: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 24px;
padding: 20px;
}
p{
font-weight: bold;
font-size: 20px;
text-align: center;
font-family: 'Lucida Sans';
line-height: 250px; /*CENTRAR EN EJE Y - ALTURA*/
}
POSICIONAMIENTO DE CAJAS: - FLOAT y CLEAR
.caja{
width: 250px;
height: 250px;
background-color: lightblue;
border: 10px solid red;
margin: 15px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 24px;
padding: 20px;
float: left; /*Pone al lado a los elementos EN BLOQUE - con display BLOCK*/
}
.clearfix{
float: none;
clear: both; /*LIMPIA LO FLOTADO QUE HAY ARRIBA*/
SOMBRAS Y EFECTOS:
SOMBRAS:
EN CAJAS:
box-shadow: 10px 10px 15px blue; /*INSET para sombre interior*/
En TEXTO:
#contenido > h1{
text-align: center;
border: 1px solid saddlebrown;
padding: 10px;
color: rgb(14, 55, 92);
text-shadow: 5px 5px 10px blue;
}
BORDES REDONDEADOS:
LE DA BORDE A TODAS LAS ESQUINAS
border-radius: 60px
La primera: arriba a la izquierda
Segunda: Arriba a la derecha
Tercera: abajo a la derecha
Cuarta: abajo a la izquierda
border-radius: 60px 15px 15px 60px;
POSICIONAMIENTO ABSOLUTO, RELATIVO Y FIJO:
OVERFLOW:
#lateral{
width: 30%;
min-height: 500px;
max-height: 650px;
border: 1px solid red;
float: left;
text-align: center;
overflow: hidden; /*Para Ocultar lo que se sale del DIV*/
overflow-y: scroll; /*Para poder ir para abajo con barra lateral*/
}
POSICION ABSOLUTA (ABSOLUTE):
PARA POSICIONAR UN ELEMENTO LIBREMENTE. CON ALGUNAS PROPIEDADES
.libre{
position: absolute; /*Opcion para mover el elemento libre*/
top: 4%;
left: 20%;
z-index: 2; /*Para posicion: Frente o Atras*/
border: 1px solid black;
background-color: brown;
color: aliceblue;
width: 60px;
height: 60px;
font-size: 13px;
text-align: center;
line-height: 60px;
POSICION FIJA (FIXED:)
.fija{
position: fixed;
top: 50%;
left: 0px;
z-index: 2;
TRANSICIONES Y ANIMACIONES:
PSEUDOCLASES: LAS MAS UTILIZADAS
ul li:first-child{ /*Selecciona el primero de la lista*/
color: brown;
font-weight: bold;
}
ul li:nth-child(2){ /*Selecciona el numero que quiera de la lista*/
color: rgb(37, 10, 99);
font-weight: bold;
}
ul li:last-child{ /*Selecciona el ultimo elemento*/
color: rgb(158, 27, 77);
font-weight: bold;
}
#mienlace{
font-size: 30px;
color: lightsalmon;
}
#mienlace:link{ /*Cuando no he visitado el enlace*/
color: red;
}
#mienlace:visited{ /*Cuando ya fui al enlace*/
color: rgb(66, 14, 116);
}
#mienlace:active{ /*Mientras pulso el link*/
color: rgb(14, 116, 91);
}
input[type="text"]{
margin-top: 20px;
padding: 10px;
input[type="text"]:focus{ /*Cambia cuando hago click*/
border: 3px solid red;
input[type="text"]:hover{
border: 3px solid rgb(212, 0, 255);
}
TRANSICIONES:
#boton{
display: block;
padding: 20px;
background-color: green;
color: white;
width: 200px;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
text-decoration: none;
border: 5px solid rgb(107, 218, 107);
/*transition: all 0.5s; - Transiciones a TODO*/
transition: border 0.5s, background-color 3s, border-radius 1s;
/*Transiciones por eleccion de propiedad*/
#boton:hover{
border-radius: 25px;
background-color: red;
border: 5px solid black;
}
ANIMACIONES:
ANIMACIONES 1:
#caja{
margin-top: 25px;
width: 250px;
height: 250px;
background-color: lightseagreen;
color: white;
border: 5px solid black;
font-size: 20px;
text-align: center;
line-height: 250px;
animation: desplazamiento; /*Llama la funcion de la animacion*/
animation-duration: 10s; /*Duracion de la animaciones*/
animation-iteration-count: infinite; /*Se repite de forma infinita*/
}
@keyframes desplazamiento{
from{
margin-left: 0px; /*aca empieza*/
}
to{
margin-left: 900px; /*aca termina*/
}
}
ANIMACION 2:
#caja{
margin-top: 25px;
width: 250px;
height: 250px;
background-color: lightseagreen;
color: white;
border: 5px solid black;
font-size: 20px;
text-align: center;
line-height: 250px;
animation: desplazamiento; /*Llama la funcion de la animacion*/
animation-duration: 10s; /*Duracion de la animaciones*/
animation-iteration-count: infinite; /*Se repite de forma infinita*/
animation-timing-function: linear; /*a una velocidad lineal*/
}
@keyframes desplazamiento{
0%{
margin-left: 0px;
}
50%{
margin-left: 900px;
}
100%{
margin-left: 0px;
}
}
ANIMACION 3:
animation: desplazamiento; /*Llama la funcion de la animacion*/
animation-duration: 10s; /*Duracion de la animaciones*/
animation-iteration-count: infinite; /*Se repite de forma infinita*/
animation-timing-function: linear; /*a una velocidad lineal*/
}
@keyframes desplazamiento{
0%{
margin-left: 0px;
transform: rotate(0deg); /*Rotaciones en grados*/
}
50%{
margin-left: 900px;
transform: rotate(360deg);
border-radius: 999px;
}
75%{
background-color: RED; /*a ESTA ALTURA LE CAMBIA EL COLOR*/
}
100%{
margin-left: 0px;
transform: rotate(0deg);
}
}