comunidades

Como combinar declaraciones de estilo>CSS



Si tienes ya conocimiento de las declaraciones de CSS, este tuto te sera aburrido e irrelevante, te aconsejo te prepares unos Naños de carne asada que son deliciosos.  Pero si tienes poco conocimiento o nada, y deseas aprender algo hoy, entonces quedate, lo intentare hacer lo mas sencillo y fácil posible.

Iniciemos por saber que es el css, como lo definen en Maestros de la Web

CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.
Es decir la presentacion que nos permite darle un diseño personalizado a nuestra web/blog.Hoy vamos ver un poquito de las diferentes declaraciones en la hoja de estilo a la hora de agregar el css.

Las hojas de estilo se diferencian por una declaración.

h1 { color: #36c;}

h1 { font-weight: normal;}

h1 {letter-spacing: 04em;}

h1 {text-align: center;}

h1 {text-transform: lowercase;}

Pero imagina lo cargado que seria el código si tuviésemos o estariamos limitados a solo esta declaración.

Imagina como se escucharía si leyeramos nosotros estos códigos en un libro, esto le quitaria el sueño a cualquiera, no lo crees?

Vamos a ver como sonaria, "selecciona los elementos h1 y aplicales el color #36C" "selecciona otra vez los elementos h1 y aplicales un grosor de fuente normal " selecciona una vez mas los elementos h1 y asignales un espacio  entre letras de ......" y así seguiríamos, que agotador, no? 

Si este fuera el caso, madre mía, terminaría toda loca y sin querer saber nada de esto.

Imagina la sobre carga que esto ocasionaría a nuestra pagina, afortunadamente hay una pastillita para aliviar el malestar.

Las declaraciones múltiples para un mismo código, se pueden comprimir, con campos asignados por puntos y comas.

Veamos un simple ejemplo;

h1 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

Listo ! esto queda muchísimo mejor y alivia el estrés de sobre carga. Como vez podemos asignar varios propiedades de estilo a nuestro elemento h1.

Pero que pasa si queremos agrupas selectores

Que pasa si queremos aplicar el estilo de la regla h1 a otros elementos, como ejemplo h2 y(o) h3.

Tendríamos que seguir el anterior ejemplo, agregando el elemento correspondiente.

h1 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

h2 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

h3 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

Pero nuevamente estariamos cargando nuestra hoja de estilo, y la verdad que flojera tener que escribir lo mismo para cada elemento. Lo que queremos es mantener limpio nuestro código CSS y de no consumir tanto ancho de banda.

Si vemos las reglas de nuestros anteriores elemento comparten las mismas declaraciones, si? Bien pues lo que se puede hacer es agrupar y comprimir, te acuerdas que dijimos que "Las declaraciones múltiples para un mismo código, se pueden comprimir, con campos asignados por puntos y comas". 

vamos a asignar a nuestras tres declaraciones la misma regla, separada por comas y esto englobara TODO.

h1, h2, h3 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

Con esto haremos que todos los elementos tenga asignada las mismas declaraciones. El orden no tiene importancia.

Ahora te aconsejo que revises tu hoja de estilo y asegúrate de que los elementos que comparten las mismas declaraciones estén agrupados, esto hará mas liviana la carga de tu web.

Cuéntame en los comentarios, que te ha parecido, sabes que aprendemos de los aportes y experiencias de los demás.

Nos leemos pronto !



Fuente: este post proviene de Blog de CYeyas, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

TINGA DE POLLO TAMALE BITES

Esta publicación está dirigida a un público de adultos mayores de 21 años. Esta campaña ha sido compensada por Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mías. #SutterHomeSwee ...

Pescado a la veracruzana con clamato

Esta campaña ha sido compensada for Collective Bias, Inc. y su anunciante. Todas las opiniones son solo mias. Este contenido es para lectores de mayores de 21 años. #40DaysOfFlavor Si nunca has proba ...

Recomendamos

Relacionado

Programacion css programacion ...

Programar una página web con HTML5 y CSS

¿Creamos una página web con HTML y CSS y que sea chula?, que mole, que entres y digas… Dios es la página de las páginas. Cómo programar una web en html5 y css Pues ya vimos cómo podemos crear nuestra web con HTML5 y CSS, pero si es cierto que aunque bonita le falta ese punto de dinamismo, ese movimiento en la página que le haga estar viva. Crear un dinamismo con CSS Pues sí querido lector (c ...

general blogger personalizacion de blogs ...

¿Como centrar títulos de los post y fecha?

Holis!! Después de una ajetreada semana de estudio por fin llega la calma y con ello un tutorial imprescindible que no te debe faltar para poner chulo tu blog. No se yo pienso que le da un aspecto diferente por mas sencillo que esto sea. Vamos a centrar el titulo y la fecha de nuestros posts de la manera mas sencilla posible... por defecto aunque una personalice tipo de letra y color esta es la ap ...

general propuestas

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

Cómo personalizar el contador de visitas blogger

Señoras y señores... ¡otro post que tenía preparado y para no echarlo a perder! Os lo contaba el lunes, y este os otro que tenía, pero ya no tengo más... :( Tenía uno de la técnica Pomodoro, pero no tengo ni dos párrafos, así que tendría que escribirlo de cero como quien dice jaja, y luego otro sobre 10 razones por las que aprender html y css, que si queréis, lo publico, decírmelo en los comentari ...

general

Fundamentos de CSS: Selectores Parte II

Selectores CSS: Fundamentos Seguimos conla nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Esta es la segunda parte sobre Selectores CSS. Atributos Antes de explorar los selectores atributos de CSS tenemos que entender que és un Atributo HTML y si ya viste algun documento HTML seguramente sabes co ...

CSS: Nivel B1

Personalizar un formulario de suscripción

Tener una lista de suscripción es muy importante para captar seguidores más fieles que los que captaríamos en cualquier red social como Twitter o Facebook, sin embargo muchos piensan que una vez hecha la lista vale con pegar el código que nos da nuestro proveedor de e-mail marketing y ya nos lloverán los suscriptores, por lo que nos encontramos páginas con campos de formulario que se presentan con ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

Redes sociales Uncategorized Apariencia ...

Botones de click to tweet para tu blog y como ponerlos

Botones de click to tweet para tu blog y como ponerlos en wordpress y blogspot. Tenemos que incitar a nuestros lectores a que compartan nuestro contenido en las redes sociales para darnos a conocer. Una manera es conseguir que compartan nuestros post en Twitter, la mejor manera de hacerlo es mediante los famosos “clic to Tweet”. Existen muchos plugins sociales para Twitter o Facebook   ...

rendimiento

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

general desarrollo web programación ...

Que lenguage de programación debo aprender?

Hola, capaz que muchos no estarán de acuerdo con este post pero la intención no es decir cual es mejor, pues no creo que exista un mejor lenguage de programación. La verdad es que todos tienen sus Pros y sus Contras, y son pensados con especificaciones distintas unos de otros. Una de las preguntas más frecuentes en los foros para principiantes es "¿Cómo iniciarse en programación?" o &qu ...