Buenas Pr Cticas Con CSS 3
REGLAS DE ORO, PARA SABER ACOMODAR EL CSS
Primero se ponen las etiquetas, luego por id’s y por ultimo por clases. Ej:
nav{} Etiquetas
#texto{} Id’s
.color{} Clases
Cada uno de los elementos se ordena alfabéticamente según sea el caso. Ej:
body{}
footer{} Etiquetas, ordenadas alfabéticamente
nav{}
#cuerpo{}
#logo {} Id’s,ordenados alfabéticamente
# texto {}
.cursos{}
.foto{} Clases, ordenadas alfabéticamente
.manchita{}
Dentro de las propiedades de cada elemento, también se debe de ordenaralfabéticamente. Ej:
body
{
display: inline-block;
vertical-align: top;
width: 10%; Propiedades CSS, ordenadas alfabéticamente dentro de una etiqueta
}
#cuerpo
{
box-shadow: rgba(0, 0, 0, 1)0px 5px 5px;
margin: 0 1em 0 0; Propiedades CSS, ordenadas alfabéticamente dentro de un id
padding: 2em;
}
.manchita
{
opacity: 0.4; Propiedades CSS, ordenadasalfabéticamente dentro de una clase
transition: all 0.5s ease;
}
body {
background-image: url(Ejercicio2/fondo.jpg);
}
/* INICIA CONFIGURACION DEL LOGO Y MENU*/
#logo {
width: 20%;background-color:#001F3E;
padding: 10px 250px 0 200px;
float:left;
}
#logo2 div:hover img
{
/*background: white;*/
/*-webkit-transform: rotate(360deg);*/
-webkit-transform: scale(1.2) rotate(-5deg);
}
#logo2 img
{transition: all 0.5s ease;
}
#menu {
width: 100%;
height: 163px;
background-color:#001F3E;
margin: 0 0 40px 0;
}
#menu li a:hover { /* aplica la propiedad hover al menu*/
background: orange;color: white;
cursor: pointer;
transform: rotate(360deg);
}
#menu li a
{
border-radius: 5px;
-webkit- border-radius: 5px;
padding: 10px;
transition: all 0.5s ease;
}
ul.men li {
list-style:none;/*oculta las listas*/
float: left;
margin: 0 25px 0 0;
line-height: 7.5em;
}
ul#nav {
float: left;
}
ul#nav li a {
font: 18px arial;
color: black;
margin-right: 5px;...
Regístrate para leer el documento completo.