Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
10 Consejos Muy Útiles de CSS para Principiantes
#1
Arcoiris 

Gracias a CSS, el estilo se puede crear de manera independiente del código HTML que define la estructura de la página web. Hoy en día con unos pocos conocimientos de CSS, incluso una persona sin experiencia en programación puede darle estilo a su sitio web.

Tanto si estás interesado en aprender CSS para crear tu propia página web, como si lo que quieres es simplemente retocar un poco el aspecto de tu blog, vale la pena tener en cuenta unos principios básicos para crear un buen código CSS. Veamos pues algunos consejos de CSS que pueden ser útiles para principiantes.
1. Utiliza reset.css

Cuando se trata de mostrar los estilos CSS, cada uno de los diferentes navegadores tiene un modo distinto de interpretar los mismos. Para evitar diferencias en la presentación de nuestras páginas web, utilizaremos lo que se llama un reset, que es una colección de parámetros que restablecen los valores de los estilos a un mismo valor para todos los navegadores y, a partir de aquí, definimos los parámetros en función de nuestras necesidades.

Esto lo podemos hacer bien con un archivo aparte llamado reset.css, bien especificándolo arriba del todo de nuestra hoja de estilos. Aquí tienes una recopilación de los mejores CSS resets.
2. Comprende la diferencia entre id y class

Este es uno de los puntos que confunden más a los principiantes, ¿para qué utilizar un ID y para qué usar class? Bien, utilizaremos un ID cuando se trata de un elemento que aparece una y sólo una vez en una página web. En CSS definiremos un id empezando con el signo de la almohadilla “#“. Por otro lado, utilizamos una clase cuando vamos a hacerla servir más de una vez en un determinado documento web. Para referirnos a una class en CSS utilizamos el punto “.”
3. Añade comentarios a tu CSS

Si bien cuando estás creando el CSS te parece que no es necesario añadir comentarios, créeme si te digo que lo agradecerás. Cuando pasan unos meses y has estado entremedio trabajando en otros proyectos y vuelves al CSS que escribiste entonces, puedes perder un montón de tiempo si no has incluido comentarios. Lo mejor es poner comentarios del estilo /*--formulario de contacto --*/ o /* -- menú principal -- */, pues facilitan mucho el trabajo de revisión y mantenimiento.
4. Descubre la potencia de !important

!important se utiliza cuando quieres sobreescribir a un selector que viene después, con lo que te saltas la jerarquía de CSS. Veamos un ejemplo:
1 .estilo {
2 background-color:blue !important;
3 background-color:red;
4 }

Vemos que sobreescribimos el color de azul a rojo, sin embargo el estilo será azul, pues hemos puesto que es !important. Esto es muy útil cuando por ejemplo en WordPress estamos queriendo sobreescribir el CSS de un plugin y no nos deja, si utilizamos !important podremos poner los valores que queramos sin problemas.
5. Evita el uso de table

Anteriormente se utilizaba mucho table en HTML, si eres de los que programaba en los años 90, seguro que todavía piensas en el uso de table en la maquetación de tus páginas web, ¡olvídalo! Las tablas sólo debes utilizarlas en el caso de querer tabular datos en una tabla, nada más. Descubre la potencia de los div y olvídate del uso de tablas.
6. Esconde el texto detrás de una imagen

A veces queremos esconder texto detrás de una imagen. Está claro que con la etiqueta alt podemos poner el texto alternativo a la imagen, pero si se trata de una etiqueta tipo h1 nos puede interesar poner el texto en la etiqueta por temas de SEO. Y aquí está el truco: si utilizas text-indent:-9999 el texto se irá detrás de la imagen, a pesar de estar en el documento HTML, con lo que quedará escondido a los ojos del usuario, pero no a los ojos de Google.
1 h1 {
2 text-indent:-9999px;
3 background:url("titulo.jpg") no-repeat;
4 width:200px;
5 height:50px;
6 }
7. Utiliza Firebug y mejora tu CSS

Muchas veces cuando doy clases de diseño web y WordPress los alumnos me preguntan cómo pueden hacer que la letra sea como la de la página tal o conseguir un efecto muy chulo que sale en la página pascual. Bien, hay dos maneras, una, romperte los cuernos con el prueba una y otra vez o dos, instalarte Firebug y espiar el código de la página que te gusta. Firebug es un plugin excelente para Firefox y Chrome que, entre otras cosas, con un sólo clic te permite ver el código HTML y CSS de un determinado elemento de una página web. Con este plugin no sólo aprendes un montón a través de los diseños de otras páginas web, sino que ahorras mucho tiempo cuando quieres implementar algo que no sabes cómo hacer.
8. Utiliza un editor de CSS

Si trabajas con el Notepad de Windows o algo por el estilo, prepárate para dejarte los ojos en la pantalla. Mejor utiliza un editor que use diferentes colores para las etiquetas, pues esto te facilitará mucho la vida. Aquí tienes un listado de los mejores editores de texto para diseño web.

[Imagen: notepadplus.jpg]

9. No utilices hacks para IE

Todos sabemos los problemas que da Internet Explorer, que interpreta las cosas como le da la gana. En lugar de utilizar hacks del estilo _main o *main, lo mejor es crear un documento CSS para IE7.Cara IE6, soy de la opinión que ya no se debería darle soporte, pues un navegador muy desfasado. Para ello puedes utilizar un script que bloquea el contenido en IE6.
1 <!--[if lte IE 7]>
2 <link rel="stylesheet" type="text/css" href="css/ie7.css">
3 <![endif]-->
10. Utiliza un código optimizado (shorthand).

Utilizar un código shorthand optimiza el tiempo de carga y el mantenimiento del código. El código CSS shorthand se refiere a que en lugar de utilizar:
1 p { margin-top: 10px;
2 margin-right: 20px;
3 margin-bottom: 30px;
4 margin-left: 40px; }

se utiliza:
1 p { margin: 10px 20px 30px 40px; }

Aquí tienes 4 maneras de especificar los márgenes:

[Imagen: css3.jpg]
#2
Estoy deacuerdo con lo de dejar de dar soporte para usuarios de IE, es increíble que usen éste navegador y encima versiones muuy antiguas, tengo un blog y me reporta visitantes que usan IE6.... IE6! lo puedes creer?!
WWW
#3
(09-07-2012, 01:28 AM)AbaddonOrmuz escribió: Estoy deacuerdo con lo de dejar de dar soporte para usuarios de IE, es increíble que usen éste navegador y encima versiones muuy antiguas, tengo un blog y me reporta visitantes que usan IE6.... IE6! lo puedes creer?!

Claro, me habia pasado muchas veces en un antiguo blog jajaja pero les podia un box con la descarga de Firefox.
#4
Pues muy buena la explicación que dejas.

Algo que no entendí del todo es sobre esta parte:

xXxDangerSoulxXx escribió:Para ello puedes utilizar un script que bloquea el contenido en IE6.

Entendí que usemos algo para bloquear el acceso a usuarios con ie6. No estoy de acuerdo.

Si bien coincidimos en que ie* es un insulto y una falta de respeto para los diseñadores web, no queda de otra que "intentar" que nuestras webs se vean medianamente presentables con ie.

Después de todo, es uno de los navegadores más utilizados en la actualidad.
WWW
#5
Muy buen contenido, muy bien explicado, y muy bueno en fin, me lo guardo para despues leer todo con mas tiempo.
Skylium, el mejor Hosting que conocí en mi vida!
[Imagen: firmataq.png]
WWW
#6
Esta muy buenos estos consejos Sonrisa

Sobre todo el uso de reset que muchas veces no la utilizamos.
Cita:1. Utiliza reset.css

Cuando se trata de mostrar los estilos CSS, cada uno de los diferentes navegadores tiene un modo distinto de interpretar los mismos. Para evitar diferencias en la presentación de nuestras páginas web, utilizaremos lo que se llama un reset, que es una colección de parámetros que restablecen los valores de los estilos a un mismo valor para todos los navegadores y, a partir de aquí, definimos los parámetros en función de nuestras necesidades.

Esto lo podemos hacer bien con un archivo aparte llamado reset.css, bien especificándolo arriba del todo de nuestra hoja de estilos. Aquí tienes una recopilación de los mejores CSS resets.
#7
Lo voy a leer detenidamente para estar actualizado en lo del HTML5.
#8
Muy buenos consejos, gracias por compartirlo por aca.
La verdad yo no uso reset en mi CSS Lengua
WWW
#9
o.o buenos concejos u.u yo nesecito mas de estos....
WWW
#10
gracias por los concejos soy nuevo y me acian falta, saludos


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Consejos para un Newbie en Zend Framework avdarie 0 222 30-07-2016, 11:59 AM
Último mensaje: avdarie
  7 Mejores Tutoriales de Desarrollo Web para principiantes CarlosAlberto 14 939 19-02-2016, 11:06 PM
Último mensaje: zeuz
  Consejos para aumentar la seguridad Taquion 14 2,109 16-05-2013, 02:55 PM
Último mensaje: MrLoco
  consejos basicos seguridad web nicolasfidalgo 0 456 02-04-2013, 07:13 PM
Último mensaje: nicolasfidalgo
  3 Consejos para adaptar tu logo a las redes sociales lsdr 1 1,253 12-03-2013, 08:39 AM
Último mensaje: Mari0x



Usuarios navegando en este tema: 1 invitado(s)