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í.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

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 ...

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 ...

¿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 curso blogger desde cero

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...

general css css3 ...

Selectores CSS: Fundamentos Hoy inicio una nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Les comparto un este post muy interesante y bien explicado sobre Selectores CSS:Fundamentos. Todos los creditos del post son de Maria Kovacs de quien les compartiré más información al final de esta traducci ...

general

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 ...

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 blogger personalizacion de blogs ...

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 diseño

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera: Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas. Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática. Eso sí, lo primero que quiero a ...

diy manualidades blogger ...

Hola, hola! Bonita y bendecida semana, este mes me propuse hacerle un cambio de look al blog,básicamente tunearlo pero yo sólita, nuevas tipografías, paletas , fondos y mas... Pero me tope con un inconveniente y al parecer no soy la única, anteriormente me proporcionaron un codigo CSS para centrar los Widgets, yo supuse que todos, toditos los widgets se centrarían, así como el titulo de cada uno ...

Blogging Tutoriales

Una de las cosa que más me gustan de Blogger, es la capacidad de insertar y personalizar un formulario de contacto, sin la necesidad de recurrir a servicios como JotForm o Foxyform. Sin duda, un gran acierto, pues muchos de estos servicios tienen una limitación en cuanto a la cantidad de mensajes que puedes recibir en tu correo. Añadirlo es bastante sencillo, pues esta función se trata de un gadg ...

rendimiento

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 ...