{"id":412,"date":"2018-04-12T14:39:49","date_gmt":"2018-04-12T17:39:49","guid":{"rendered":"https:\/\/marciovilaca.com\/culturadigital\/?p=245"},"modified":"2018-04-12T14:39:49","modified_gmt":"2018-04-12T17:39:49","slug":"css-cascading-style-sheet-folhas-de-estilo-em-cascata","status":"publish","type":"post","link":"https:\/\/educardigitalinova.com.br\/digital\/css-cascading-style-sheet-folhas-de-estilo-em-cascata\/","title":{"rendered":"CSS – Cascading Style Sheet – Folhas de estilo em cascata"},"content":{"rendered":"
\"\"
Imagem: Pixabay<\/figcaption><\/figure>\n

Voc\u00ea j\u00e1 se perguntou como muitos sites mudam de apar\u00eancia de uma hora para a outra? A curiosidade fica maior quando o site \u00e9 grande, com centenas ou milhares de p\u00e1ginas. Um dos “segredos” que possibilitam essa m\u00e1gica s\u00e3o poucos arquivos CSS. CSS \u00e9 a sigla para Cascading Style Sheet, em portugu\u00eas folhas de estilo em cascata. O nome folha de estilo ajuda a prever que elas afetam o estilo de p\u00e1ginas na internet, ou seja, a sua apar\u00eancia.<\/p>\n

A “grande m\u00e1gica” do CSS \u00e9 o efeito em cascata. Ou seja, ao atualizar um arquivo, voc\u00ea pode ter mudan\u00e7as de design afetando todos os sites.<\/p>\n

O arquivo CSS \u00e9 um arquivo de texto, salvo com a extens\u00e3o CSS, que cuida de grande parte apar\u00eancia do site. Entre outras coisas, o arquivo pode ter informa\u00e7\u00f5es sobre fontes, cores, bordas, divis\u00f3rias…<\/p>\n

Imagine por exemplo um site est\u00e1tico com 200 p\u00e1ginas. Imagine que o texto apare\u00e7a em cor vermelha e com a fonte Arial. Com um ajuste m\u00ednimo no arquivo CSS original, voc\u00ea pode trocar a fonte para Verdana azul. Ao fazer o upload de um \u00fanico arquivo para o servidor, layout.css (por exemplo), voc\u00ea altera, ao mesmo tempo, a apar\u00eancia das p\u00e1ginas. Isto significa que n\u00e3o \u00e9 necess\u00e1rio fazer altera\u00e7\u00f5es separadas em nas 200 p\u00e1ginas e realizar novo upload de todas elas. Um pequeno arquivo pode afetar todos os sites. Entre outras coisas, isto significa economia de tempo e de franquia de banda de uso da internet.<\/p>\n

Hoje a maioria dos sites, especialmente os grandes e os din\u00e2micos, empregam CSS para facilitar o design.<\/p>\n

Antigamente, muitos sites est\u00e1ticos eram feitos puramente em HTML. Dependendo do programa usado, todos os arquivos precisavam ser refeitos ou modificados e, depois carregados para o servidor de hospedagem. Alguns softwares, como o famoso e poderoso Dreamweaver, possu\u00edam a fun\u00e7\u00e3o de modelos. Com esta fun\u00e7\u00e3o, altera\u00e7\u00f5es feitas no modelo eram transferidas para todas as p\u00e1ginas constru\u00eddas a partir daquele modelo. Seria a mesma coisa do CSS ?<\/p>\n

N\u00e3o ! A altera\u00e7\u00e3o at\u00e9 podia ser feita em todas as p\u00e1ginas, mas as p\u00e1ginas precisavam ser atualizadas (por upload) no servidor. Logo, os arquivos anteriores precisavam ser alterados pelos novos. Sem d\u00favida, era um recurso muito \u00fatil, mas n\u00e3o era a mesma coisa.<\/p>\n

O CSS ficou conhecido muitas vezes como tableless design (design sem tabela). Em outro post, tratarei dos designs baseados em tabela e os tableless.<\/p>\n

 <\/p>\n

(Aviso:<\/strong> O conte\u00fado desta p\u00e1gina pode ser editado, modificado, atualizado e revisto periodicamente. Volte com frequ\u00eancia.)<\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Voc\u00ea j\u00e1 se perguntou como muitos sites mudam de apar\u00eancia de uma hora para a outra? A curiosidade fica maior quando o site \u00e9 grande, com centenas ou milhares de p\u00e1ginas. Um dos “segredos” que possibilitam essa m\u00e1gica s\u00e3o poucos arquivos CSS. CSS \u00e9 a sigla para Cascading Style Sheet, em portugu\u00eas folhas de estilo…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[32],"tags":[54,122],"class_list":["post-412","post","type-post","status-publish","format-standard","hentry","category-web","tag-design","tag-web"],"_links":{"self":[{"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/posts\/412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/comments?post=412"}],"version-history":[{"count":0,"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/posts\/412\/revisions"}],"wp:attachment":[{"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/media?parent=412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/categories?post=412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/educardigitalinova.com.br\/digital\/wp-json\/wp\/v2\/tags?post=412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}