febrero 15, 2021

Trucos de CSS para desarrolladores web

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