Presentamos algunos trucos de CSS para desarrolladores web, que es uno de los principales lenguajes de codificación.
Aspectos importantes de CSS
Dado que CSS es bastante sólido, razonablemente fácil de aprender y universal para los diversos navegadores, es popular entre los desarrolladores de sitios web.
Como ocurre con otros lenguajes de codificación, existen varios atajos o trucos con CSS que permiten escribir código más limpio, mejorar los elementos de diseño y ahorrar tiempo.
Hay que recordar que no es necesario ser un desarrollador web senior para utilizar CSS y el hecho de utilizar CSS para mejorar el diseño y la apariencia de un sitio web es fundamental para el funcionamiento de los principales CMS de código abierto como WordPress.
De hecho, la mayoría de las herramientas de creación de sitios web más importantes ahora permiten a los usuarios insertar código CSS personalizado.
Presentamos diez trucos CSS
Arreglar la posición de un elemento en CSS
A pesar de que los sitios web son dinámicos, es posible que haya elementos que se deseen corregir en determinadas posiciones. Para hacerlo se utiliza position:absolutescript.
Usar este método con cuidado y probarlo en cada tamaño y resolución de pantalla ayuda a no romper el diseño del sitio.
Seguir este script con un nodo de posición específico asegura que el elemento permanezca en la misma posición para los usuarios.
Ejemplo:
/* suppose you want to fix your sidebar’s position and size */
.sidebar {
position: absolute;
top: 15px;
right: 15px;
width: 300px;
height: 150px;
}
Ajustar imágenes a la página en CSS
Las imágenes que se derraman sobre la pantalla del visitante del sitio pueden romper el diseño del sitio.
Sin embargo, con este truco, se puede asegurar que las imágenes siempre quepan en la pantalla del visitante, independientemente del dispositivo que estén usando.
Ejemplo:
img {
max-width: 100%;
height: auto;
}
Editar el estilo en una sola página de CSS
Si se desea que algunas de las publicaciones de la página se vean diferentes a otras, puede usar la secuencia de comandos .single-post para anular el estilo CSS del sitio. Esto garantiza que solo se modifique una página y deje el formato de las otras páginas como predeterminado.
Sin embargo, si usa mucho este método, es mejor modificar el estilo CSS general para evitar escribir líneas de código innecesarias.
Fragmento de ejemplo:
.single-post .entry-title {
font-size: 24px;
font-weight: 750;
color: red;
}
Cómo consolidar el estilo en CSS
Si se sabe que desea agregar estilo CSS a varios elementos, entonces escribir los fragmentos de código uno por uno lleva tiempo. A pesar de ello, cuando se separan los elementos con comas y escribe el estilo CSS en el interior, el estilo se agrega a todos ellos.
Esto ayuda a ahorrar tiempo y a reducir el peso de su código porque no se tiene que escribir una línea de código similar varias veces.
Ejemplo:
/* suppose you want to add a solid border around your caption element, image, and paragraph element */
.caption, img, p {
border: 2px solid #000000;
}
/* you can also limit the selection using selectors */
p.white-text, div > p.unique {
color: white;
font-size: 24px;
}
Leíste: Trucos de CSS para desarrolladores web, te recomendamos: Trucos de JavaScript para desarrolladores web
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
