{"id":1700,"date":"2020-10-19T17:14:10","date_gmt":"2020-10-19T22:14:10","guid":{"rendered":"https:\/\/niixer.com\/?p=1700"},"modified":"2020-11-24T16:42:02","modified_gmt":"2020-11-24T21:42:02","slug":"css-cascading-style-sheets-estilos-en-cascada","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2020\/10\/19\/css-cascading-style-sheets-estilos-en-cascada\/","title":{"rendered":"CSS: Cascading Style Sheets"},"content":{"rendered":"\n

Las hojas de estilo (CSS) es un lenguaje que nos permite modificar los aspectos visuales o estilo con el cual se presentan los objetos en HTML <\/a>(Hypertext Marked Language) en diferentes medios tales como pantallas, papel, etc.<\/p>\n\n\n\n

Historia<\/h3>\n\n\n\n

La evoluci\u00f3n de la inform\u00e1tica durante la segunda mitad del siglo XX, dio lugar a la necesidad de crear est\u00e1ndares que permitieran unificar la forma en que se hac\u00edan las cosas. Uno de los pioneros de estas definiciones fue IBM con su lenguaje de marcado generalizado (GML, Generalized Markup Language) que luego dio lugar al lenguaje de marcado generalizado est\u00e1ndar (SGML, Standard Generalized Markup Language).<\/p>\n\n\n\n

Despu\u00e9s de este est\u00e1ndar y dado el boom de internet y crecimiento exponencial de lenguajes como HTML para la creaci\u00f3n de documentos electr\u00f3nicos, W3C (Word Wide Web Consortium), propuso un lenguaje de hojas de estilo espec\u00edfico para HTML: CHSS (Cascading HTML Style Sheets) y SSP (Stream-based Style Sheet Proposal). Luego unieron lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets). Entre los a\u00f1os 1995 y 1998 se crearon diferentes versiones de CSS y la conocida “CSS nivel 3”, fue publicada en 2011 y el nivel 4 en el a\u00f1o 2017.<\/p>\n\n\n\n

Glosario b\u00e1sico<\/h3>\n\n\n\n

CSS define una serie de t\u00e9rminos que permiten describir cada una de las partes que componen las hojas de estilo CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy b\u00e1sico:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Los diferentes t\u00e9rminos se definen a continuaci\u00f3n:<\/p>\n\n\n\n

Regla:<\/strong> cada uno de los estilos que componen las hojas de estilo CSS. Cada regla est\u00e1 compuesta de una parte de “selectores”, un s\u00edmbolo de “llave de apertura” ({), otra parte denominada “declaraci\u00f3n” y por \u00faltimo, un s\u00edmbolo de “llave de cierre” (}).<\/p>\n\n\n\n

Selector:<\/strong> indica el elemento o elementos HTML a los que se aplica la regla CSS.<\/p>\n\n\n\n

Declaraci\u00f3n:<\/strong> especifica los estilos que se aplican a los elementos. Est\u00e1 compuesta por una o m\u00e1s propiedades CSS.<\/p>\n\n\n\n

Propiedad:<\/strong> caracter\u00edstica que se modifica en el elemento seleccionado, como por ejemplo su tama\u00f1o de letra, su color de fondo, etc.<\/p>\n\n\n\n

Valor:<\/strong> establece el nuevo valor de la caracter\u00edstica modificada en el elemento.<\/p>\n\n\n\n

Ejemplo:<\/em><\/p>\n\n\n\n

p {
  color: red;
  text-align: center;
}<\/p>\n\n\n\n

Todos los elementos del selector p<\/strong> estar\u00e1n alineados en el centro y el texto ser\u00e1 de color rojo.  <\/p>\n\n\n\n

Selectores<\/strong><\/h3>\n\n\n\n

Como se indic\u00f3 anteriormente los selectores indican \u201ca quien hay que aplicar la regla CSS\u201d. Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una p\u00e1gina.<\/p>\n\n\n\n

A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un n\u00famero ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas. Existen varios tipos de selectores; a continuaci\u00f3n, la descripci\u00f3n de algunos:<\/p>\n\n\n\n

Selectores b\u00e1sicos<\/strong><\/h3>\n\n\n\n

Se utiliza para seleccionar todos los elementos de la p\u00e1gina. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaraci\u00f3n de la regla CSS):<\/p>\n\n\n\n

* {<\/p>\n\n\n\n

  margin: 0;<\/p>\n\n\n\n

  padding: 0;<\/p>\n\n\n\n

}<\/p>\n\n\n\n

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es dif\u00edcil que un mismo estilo se pueda aplicar a todos los elementos de una p\u00e1gina.<\/p>\n\n\n\n

Selectores ID<\/strong><\/h3>\n\n\n\n

El selector ID utiliza el atributo ID de un elemento HTML para seleccionar un elemento espec\u00edfico. La identificaci\u00f3n de un elemento es \u00fanica dentro de una p\u00e1gina por lo que el selector de identificaci\u00f3n se utiliza para seleccionar un elemento \u00fanico.<\/p>\n\n\n\n

Para seleccionar un elemento con una identificaci\u00f3n espec\u00edfica, escriba un car\u00e1cter de almohadilla (#), seguido de la identificaci\u00f3n del elemento.<\/p>\n\n\n\n

#para1 {
  text-align: center;
  color: red;
}<\/p>\n\n\n\n

Colores<\/strong><\/h3>\n\n\n\n

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB num\u00e9rico y RGB porcentual. Aunque el m\u00e9todo m\u00e1s habitual es el del RGB hexadecimal; a continuaci\u00f3n, las alternativas que ofrece CSS.<\/p>\n\n\n\n

h1 {
  background-color: green;
}
div {
  background: rgba(0, 128, 0, 0.3) 
}<\/p>\n\n\n\n

Hemos expuesto unos pocos atributos de CSS, pero no solo se queda aqu\u00ed, ya que adem\u00e1s esta sintaxis CSS permite aplicar al documento formato de modo mucho m\u00e1s exacto. Otra ventaja importante de CSS es la capacidad de especificar las medidas con diversas unidades. Si HTML tan s\u00f3lo pod\u00edamos definir atributos en las p\u00e1ginas con pixeles y porcentajes, ahora podemos definir utilizando muchas m\u00e1s unidades como:<\/p>\n\n\n\n