Cales son as follas de estilo en cascada?
Os sitios web están compostos por varias pezas individuais, que inclúen imaxes, texto e varios documentos. Estes documentos non só inclúen os que se poden vincular desde varias páxinas, como os ficheiros PDF, senón tamén os documentos que se usan para construír as páxinas mesmas, como documentos HTML para determinar a estrutura dunha páxina e os documentos CSS (Cascading Style Sheet) para dictar o aspecto dunha páxina. Este artigo vai afondar en CSS, cubrindo o que é e onde se usa nos sitios web de hoxe.
Unha Lección de Historia CSS
O CSS foi desenvolvido en 1997 como un camiño para que os desenvolvedores web definan a aparencia visual das páxinas web que estaban creando. Estaba destinada a permitir que os profesionais da rede separasen o contido e a estrutura do código dun sitio web do deseño visual, algo que non fora posible antes deste momento.
A separación de estrutura e estilo permite que HTML realice máis da función na que se baseaba inicialmente: a marca de contido, sen ter que preocuparse polo deseño e deseño da páxina en si, algo coñecido como o "aspecto" da páxina.
CSS non gañou popularidade ata preto de 2000, cando os navegadores web comezaron a usar máis de fonte básica e aspectos de cor desta linguaxe de marcado. Hoxe en día, todos os navegadores modernos admiten todo o CSS Nivel 1, a maioría de CSS Nivel 2 e ata a maioría dos aspectos do CSS Nivel 3. A medida que CSS continúa evolucionando e introdúcense novos estilos, os navegadores web comezaron a implementar módulos que proporcionan un novo soporte CSS a estes navegadores e que proporcionen aos diseñadores web ferramentas poderosas para traballar.
Nos últimos anos, houbo selectos diseñadores web que se negaron a utilizar CSS para o deseño e desenvolvemento de sitios web, pero esa práctica non se deu aínda á industria. CSS agora é un estándar amplamente usado no deseño web e difícilmente atoparás a alguén que traballa na industria hoxe que non tiña polo menos unha comprensión básica desta linguaxe.
CSS é unha abreviación
Como xa se mencionou, o término CSS significa "Folla de estilo en cascada". Imos dividir esta frase un pouco máis para explicar máis detalladamente o que fan estes documentos.
A palabra "folla de estilo" refírese ao documento en si (como HTML, os ficheiros CSS son realmente só documentos de texto que se poden editar con variedade de programas). As follas de estilo usáronse para o deseño de documentos durante moitos anos. Son as especificacións técnicas dun esquema, xa sexa impreso ou en liña. Os deseñadores de impresión usaron longas follas de estilo para asegurar que os seus debuxos estean impresos exactamente ás súas especificacións. Unha folla de estilo para unha páxina web serve co mesmo propósito, pero coa funcionalidade engadida de dicir tamén ao navegador web como facer que o documento se vexa. Hoxe, as follas de estilos CSS tamén poden usar consultas multimedia para cambiar a forma en que unha páxina busca diferentes dispositivos e tamaños de pantalla . Isto é moi importante xa que permite que un único documento HTML se represente de forma diferente segundo a pantalla que se utilice para acceder a ela.
Cascade é a parte realmente especial do termo "folla de estilo en cascada". Unha folla de estilo web está destinada a encaixar a través dunha serie de estilos nesa folla, como un río sobre unha fervenza. A auga no río choca con todas as rochas da fervenza, pero só as que se atopan na parte inferior afectan exactamente onde flúe a auga. O mesmo ocorre coa fervenza nas follas de estilo de páxina web.
Cada páxina web afecta a polo menos unha folla de estilo, aínda que o deseñador web non aplique ningún estilo. Esta folla de estilo é a folla de estilo do axente de usuario, tamén coñecidos como os estilos predeterminados que o navegador web usará para mostrar unha páxina se non se proporcionan outras instrucións. Por exemplo, por hipervínculos por defecto están estilizados en azul e son subliñados. Estes estilos proveñen da folla de estilo predeterminada do navegador web. Se o diseñador web ofrece outras instrucións, o navegador necesitará saber que instrucións teñen precedencia. Todos os navegadores teñen os seus propios estilos predeterminados, pero moitos destes valores predeterminados (como as ligazóns de texto subliñado azul) son compartidas en todos ou en moitos dos principais navegadores e versións.
Para outro exemplo dun navegador por defecto, no meu navegador web, o tipo de letra por defecto é " Times New Roman " que se mostra no tamaño 16. Case ningunha das páxinas que visito aparece nesa familia e tamaño de letra. Isto ocorre porque a fervenza define que as follas de segundo estilo, que son definidas polos propios deseñadores, redefinen o tamaño da fonte e a familia, anulando os valores predeterminados do meu navegador web. Calquera folla de estilo que crees para unha páxina web terá máis especificidade que os estilos por defecto do navegador, polo tanto, os valores predeterminados só se aplicarán se a folla de estilo non os anula. Se queres que as ligazóns sexan azuis e subliñadas, non tes que facer nada porque iso é o predeterminado, pero se o ficheiro CSS do teu sitio di que as ligazóns deben ser verdes, esa cor substituirá o azul por defecto. O subliñado permanecerá neste exemplo, xa que non especificou o contrario.
Onde está CSS usada?
O CSS tamén pode usarse para definir como deben verse as páxinas web cando se ve noutros medios que un navegador web. Por exemplo, pode crear unha folla de estilo de impresión que definirá como debe imprimir a páxina web. Debido a que os elementos da páxina web como os botóns de navegación ou os formularios web non terán ningún propósito na páxina impresa, pode usarse unha folla de estilo de impresión para "desactivar" esas áreas cando se imprime unha páxina. Aínda que non é realmente unha práctica habitual en moitos sitios, a opción de crear follas de estilo de impresión é potente e atractiva (na miña experiencia, a maioría dos profesionais da rede non o fan simplemente porque o alcance do orzamento dun sitio non require que se faga este traballo adicional ).
¿Por que é importante CSS?
CSS é unha das ferramentas máis potentes que un diseñador web pode aprender porque con el pode afectar toda a aparencia visual dun sitio web. As follas de estilo ben escritas poden actualizarse rapidamente e permitir que os sitios cambien o que se prioriza visualmente na pantalla, que á súa vez amosa valor e se enfoca aos visitantes, sen que se produza ningún cambio no marcado HTML subxacente.
O principal desafío de CSS é que hai un pouco de aprendizaxe e, con navegadores que cambian todos os días, o que funciona ben hoxe pode non ter sentido mañá a medida que os novos estilos sexan compatibles e outros caian ou se caigan por algún motivo .
Debido a que CSS pode encaixar e combinarse, e considerando como diferentes navegadores poden interpretar e implementar as directivas de forma diferente, o CSS pode ser máis difícil do que o HTML simple para dominar. CSS tamén cambia nos navegadores de maneira que o HTML realmente non. Unha vez que comece a usar CSS, verá que aproveitar o poder das follas de estilo daralle unha flexibilidade incrible na forma en que desexa configurar páxinas web e definir a súa aparencia. Ao longo do camiño, acumularás unha "maleta de trucos" de estilos e enfoques que teñan traballado para ti no pasado e que podes voltar a crear a medida que creas novas páxinas web no futuro.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 17 de febreiro de 17,