A la hora de trabajar con CSS es muy fácil confundirnos y complicarnos las cosas si no tenemos cierto orden o si no respetamos ciertos principios básicos.
Aquí te dejo varios Tips CSS. Consejos útiles para que trabajes correctamente en la codificación de tus Hojas Estilo Cascada.
1 – Acorta las hojas de estilo (shothand)
Es fundamental mantener la hoja de estilos lo mas simple y corta posible.
Esto se verá reflejado en un tiempo de carta mas reducido y en la facilidad a la hora de actualizar o modificar nuestro CSS.
Para esto es muy útil el uso de las propiedades llamadas Shorthand.
Las mismas permiten reducir hasta en un 50% el largo de nuestro código CSS.
Para aprender a usar las propiedades Shorthand ingresa AQUÍ.
2 – Resetear CSS
El objetivo que todo programador o maquetador web debe alcanzar, es lograr que el sitio funcionando se vea igual al diseño original, y que el mismo se represente exactamente igual en cualquier navegador con el que se acceda.
Para ello es fundamental “volver a cero” ciertos parámetros CSS que ya vienen por defecto configurados de forma diferente en cada navegador.
Esta técnica se llama “Resetar CSS”
Para aprender esta técnica, ingresa AQUÍ.
3 – CSS en archivo externo y carpeta aparte
No conviene incluir el código CSS en la sección de <head> del propio HTML. Esto no sólo hace confusa la estructuración del HTML, sino que además esto evita que luego podamos conectar dichos CSS a otros documento HTML y utilizarlos, haciendo mucho más difícil cualquier actualización que hagamos en el futuro.
Siempre es ideal incluir las propiedades CSS en un archivo aparte y conectarlo al HTML.
Y por otro lado, aconsejo que ese archivo CSS, o varios de ellos, estén ubicados en una carpeta aparte dentro del sitio.
4 – Usa DIVS en lugar de tablas
La tendencia de desarrollo actual, obliga a la utilización de DIVs en lugar de tablas, cuando estructuramos los contenidos de nuestro documento HTML.
Esto nos permitirá aplicar los estilos CSS de una forma mucho más efectiva, y sobre todo, garantizará la compatibilidad y escalabilidad de nuestro sitio web en diferentes dispositivos móviles y navegadores.
5 – La utilización de “!important”
Al utilizar “!important” al finalizar una propiedad CSS, esta propiedad sobreescribira cualquier otra propiedad que ya esté modificando el mismo elemento.
Por ejemplo:
div#head {
color: blue;
}
div {
color: red !important;
}
Aquí forzamos a CSS para que elija y de prioridad a la propiedad que esta marcada como “!important”, descartando la primera.
6 – Anida correctamente las etiquetas
Es fundamental que tengamos cuidado a la hora de anidar diferentes elementos, es decir, incluir elementos dentro de otros elementos.
Hay un orden lógico que debemos seguir a la otra de incluir elementos dentro de otros.
La regla básica es que los elementos de tipo “block” no deben ir insertados dentro de elemento de tipo “inline” (si al revés)
Para saber cuales elementos son de tipo “block” y cuáles de tipo “inline”, ingresa AQUÍ.
7 – Dejar las tipografías a CSS
La estilización o formato de los elementos tipográfico, no deben establecerse dentro del HTML, sino por medio de CSS.
Por ejemplo, si tenemos un menú donde los ítems van en mayúscula, no debemos colocar ese texto directamente en mayúscula dentro del HTML.
La forma correcta es colocarlo en minúscula y por medio de CSS, aplicarle un formato de mayúscula.
Ejemplo, una lista con ítems de tipo link (clásico de un menú):
HTML:
<ul> <li><a href=”#”>home</a></li> </ul>
CSS:
ul li a{
text-transform: uppercase;
}
Estos serían algunos de los tips CSS mas rápidos y útiles a las hora de convertir PSD a HTML y de maquetar cualquier sitio web con XHTML y CSS.
Necesito ocultar la url de mi pagina web con una ficticia y de esa forma poder permitir el ingreso de quien yo quiera con una contraseña, tendran un Scripts por el cual pueda mantener oculta la verdadera direccion.-
desde ya muchas gracias
Juan
En un articulo pasado, explique esto que necesitas:
http://www.psdahtmlpasoapaso.com/blog/como-ocultar-la-url-enmascarar-url-con-iframe-al-100
saludos!
Cristian
Hola de nuevo, tengo una duda sobre uno de los tips que das y refiere a dejar el estilizado de tipografìas al CSS y dejar el estilo de mayusculas al CSS, ¿cuál sería la diferencia a dejar la palabra en mayusculas y no dejarlo al CSS?
Saludos!
Hola Diana
Me refiero a dejar los contenidos del codigo HTML lo mas limpios posibles para que los buscadores los indexen bien y para mantener la compatibilidad entre dispositivos moviles.
La estilizacion se debe hacer con CSS y no con HTML.
Saludos!
Cristian