Imagina esto:
Estas siguiendo algún tutorial para personalizar un elemento en tu plantilla, y no tienes los resultados que esperabas, luego llega la incertidumbre y quizás la frustración y te preguntas: "¿por qué no me funciona?, si lo estoy siguiendo al pie de la letra", bueno, a todos nos puede pasar, y ésto puede deberse a dos razones:
1. Algo está mal en el tutorial (los códigos que te facilitan).
2. Algo estás haciendo mal, al pegar o editar los códigos.
Si te aventuras a personalizar la plantilla, sin saber absolutamente nada de códigos, tal vez no sepas lo que es "CSS". El CSS, dicho de forma simple y tomando en cuenta tu plantilla, se un código que sirve para darle una apariencia definida a cualquier elemento en tu blog, por ejemplo, definir un color de fondo en tu blog, un tamaño de fuente, o hacer que se muestre una imagen en el título de la columna lateral, solo por mencionar algunas cosas que puedes hacer. Lo reconoces porque verás llavecitas como estas: "{", "}".
Algo básico que debemos saber cuando pretendemos cambiar apariencia del blog, es cómo se ve el CSS (la sintaxis o estructura), y es ésta:
selector {
propiedad: valor;
}
Si leemos lo anterior diría así:
Selector, llave de apertura, propiedad, dos puntos, valor, punto y coma, llave de cierre.
Como puedes ver, el CSS, es muy sencillo, a diferencia de otros códigos como por ejemplo el JavaScript. Está compuesto por un selector. Así se le llama a la cosa que pretendemos manipular o darle una apariencia determinada, por ejemplo, podría ser la cabecera de tu blog.
Las propiedades, se pueden traducir como las características que tendrá el elemento que queremos manipular o dar cierta presentación. Todos los códigos que se usan en la Web, incluyendo el CSS, es reglamentado por un consorcio llamado W3C. La W3C es algo así como la RAE en ortografía, y hablando de CSS, ellos definen los posibles selectores y las propiedades que existirán, y cuáles son los valores posibles para poder ser usados. Luego, los navegadores los implementan para poder ser interpretados y mostrar los resultados en las pantallas de los dispositivos, cuando se carga la página o documento web.
Pues bien, hoy vas a saber cuáles son los errores más comunes en el CSS, cuando tratas de personalizar la plantilla, o cuando la estás editando, y que evitan que tengas los resultados deseados ;)
1. Se me olvido la llave.
Cada regla en el CSS de tu plantilla, tiene un llave de apertura "{" cuando empezamos a escribir las propiedades y otra de cierre "}" al terminar.
Recuerda, todo lo que abre tiene que cerrar:
Ejemplo:
Incorrecto:
#cajita_feliz {
width: 300px;
height: 100px;
.cajita_alegre {
margin: 0;
padding: 0;
}
Correcto:
#cajita_feliz {
width: 300px;
height: 100px;
}
.cajita_alegre {
margin: 0;
padding: 0;
}
Síntomas: desde poner tu plantilla patas para arriba, hasta provocar que algún elemento no se vea con la apariencia que debería verse, en otras palabras, no se aplica el CSS nuevo que agregas.
2. Poner un valor sin unidades
Otra de las cosas que es muy común que se olvide, ya sea por desconocimiento, distracción etc., es NO poner las unidades a un valor que debería tener, excepto por el valor cero "0" donde no lo necesita, y en algunas propiedades como line-height, donde es opcional, y z-index que no lo lleva.
Ejemplo:
Incorrecto:
.cajita_feliz {
margin: 0;
padding: 10px 0 0 20;
}
correcto: padding: 10px 0 0 20px;
Síntomas: No se leerá correctamente la propiedad que lleva el error, por lo tanto el resultado no será el esperado.
3. Poner un espacio entre el valor y las unidades:
Ejemplo:
Incorrecto:
.cajita_feliz {
margin: 0;
padding: 10px 5px 15 px;
}
correcto: padding: 10px 5px 15px;
Síntomas: Es como si no hubieras declarado esa propiedad.
4. No poner punto y coma después de cada propiedad, donde solo en la última es opcional no ponerlo.
Ejemplo:
Incorrecto:
.cajita_feliz {
width: 300px;
margin: 10px
padding: 10px 5px;
}
Correcto:
.cajita_feliz {
width: 300px;
margin: 10px;
padding: 10px 5px;
}
Síntomas: Varían dependiendo de que propiedades se trate, aunque lo que estés tratando de editar, no se verá como esperas, te lo prometo.
5. Escribir un valor que no existe.
También pasa, a veces se ponen valores que creen que existen, en algunas propiedades, ya sea por que se asume que así es, por comparar los valores de otras propiedades, etc.
Ejemplo:
Incorrecto:
.cajita_feliz{
width: 200px;
height: 100px;
float: center;
}
Correcto:
La propiedad float, solo permite los valores: left, right, none, inherit.
Otro Ejemplo:
Incorrecto:
.cajita_feliz {
padding: 0 auto;
...
}
Correcto:
El padding, a diferencia del margin, no admite el valor auto, solo valores numéricos con unidades en pixeles "px", porcentajes, etc.
Ejemplos:
padding: 10px 20px; o padding: 2%;
6. Poner el valor hexadecimal de un color sin almohadilla, numeral o como comúnmente algun@s le llaman: "el gatito":
Incorrecto:
.cajita_feliz {
width: 100%;
color: FE2EF7;
...
}
Correcto: color: #FE2EF7;
Síntomas: El valor del color de la fuente no se interpretará.
7. Repetir propiedades.
Este es de los más comunes, a mi me a pasado, cuando escribo linea por linea:
.cajita_feliz {
width: 200px;
margin: 10px 12px;
padding: 5px;
margin: 4px;
...
}
Afortunadamente para nosotros, este tipo de errores, son notorios y los resultados, nos dicen que algo está mal, así que podemos corregirlos si los identificamos.
Cuando algo no salga bien, relájate, respira profundo y echale un vistazo a estos errores comunes ;), si no logras resolver tu problema, pide ayuda sin temor o pena, seguramente la encontrarás.
Si tienes una duda de algún valor, puedes consultar la página de w3schools, que es súper completa ;).
*Actualización: Otro error común.
8. No respetar el espacio en la propiedad background. Cuando escribimos la propiedad background, en el caso de llevar una imagen, en el valor necesita llevar un espacio después del paréntesis de cierre que contiene la URL de la imagen:
Incorrecto:
background: url(imagen.gif)no-repeat left top;
Correcto:
background: url(imagen.gif) no-repeat left top;
Síntomas: La imagen no se verá en los navegadores aunque mida 1000 pixeles de ancho. También te lo prometo ;)
No hay comentarios:
Publicar un comentario