CSS é, atualmente, uma das principais formas de separar a definição do visual de uma página de seu código fonte. Sendo assim é importante conhecer e utilizar os recursos destes elementos bem como entender a evolução do mesmo, conhecido como CSS3 que traz facilidades e maiores possibilidades ao desenvolvedor.
Este assunto é de grande utilidade a todo e qualquer desenvolvedor Web. Em se tratando de Web Standards é um dos recursos mais importantes, visto que auxilia na organização do código e ainda serve como forma de atualização aos desenvolvedores que ainda não tiveram contato com as tecnologias de CSS3.
Resumo do DevMan
Vamos aprender os conceitos de CSS e seus principais recursos. Vamos ver como escrever um documento CSS e ainda as diferenças entre classes e os demais recursos fornecidos por esta tecnologia. Por fim, vamos atualizar nossos conhecimentos fazendo uma introdução ao CSS3 e os seus seletores, que são recursos inexistentes em versões anteriores do CSS.
CSS é uma forma de definição do visual de documentos XML. Sim, CSS não serve apenas para nossos sites e pode ser usado para formatar arquivos XML de um modo geral. Em primeiro lugar, o que é CSS? Cascading Style Sheet - sua tradução pode ser Folha de Estilo em Cascata - é apenas uma formalidade visto que necessitamos entender realmente o conceito e o contexto em que esta tecnologia se faz necessária.
O conceito principal pode ser resumido em: separar as definições do visual de nosso documento XML do documento propriamente dito. Um arquivo CSS deve conter somente as definições de como determinado elemento, ou ainda elementos, devem aparecer na tela e estas definições são interpretadas pelo navegador do usuário, ou seja, é considerado um arquivo do tipo Client Side, pois é interpretado na máquina de nosso usuário e não em nosso servidor. Esse arquivo CSS pode estar contido em um arquivo externo ou integrado ao código de sua página. Ao utilizá-lo de forma separada podemos fazer uso do cache do ambiente para otimização de sua execução.
A tecnologia CSS faz parte dos chamados Web Standards definidos pela W3C (World Wide Web Consortium). Quando trabalhamos com desenvolvimento se faz necessário que exista um padrão para isso, e a W3C visa criar e especificar padrões que, se seguidos, devem trazer o mesmo resultado nas mais variadas situações, por exemplo, um usuário do navegador Firefox deve ver a página da mesma forma que um usuário do navegador Microsoft Internet Explorer.
Entender e utilizar estes padrões web são uma ótima política para qualquer desenvolvedor. Devemos entender que os padrões web não são de forma alguma obrigatória, sendo que você não vai sofrer com nenhum tipo de fiscalização por não fazer uso destes padrões, mas como já dito, são altamente recomendados, pois praticamente todos os navegadores atuais usam esses padrões como diretivas para exibição e renderização de nossas páginas.
Como qualquer tecnologia o CSS também evolui e sofre as devidas modificações. Na área da computação pode-se afirmar que nada é estático, pois, as necessidades dos desenvolvedores e usuários evoluem e novas soluções devem surgir para sanar estas necessidades. Estas soluções, por via de regra, são sempre sugeridas pela W3C, como já dito, mas é sempre bom lembrar a sua finalidade e os motivos de sua importância. A evolução mais recente do CSS está sendo chamada de CSS3 e incorporou mecanismos de controle de exibição de elementos baseados em regras, ou ainda seletores, onde através de algumas expressões podemos definir com maior precisão qual tipo de elemento deve receber a definição, mas isto será visto e entendido de forma mais consistente no decorrer deste artigo.
W3C e os Web Standards
Frequentemente nos deparamos com a expressão Web Standards, ou ainda, Padrões Web, mas sabemos o que realmente é isso? E para que serve? Vamos tentar entender estes padrões através de exemplos. Um dos padrões mais conhecidos diz que para desenharmos uma tela devemos utilizar elementos do tipo DIV, e não tabelas, sendo que as tabelas devem ser utilizadas para a exibição de dados tabulares, ou seja, tabelas servem para exibir dados em, como o próprio nome diz, tabelas e o layout, ou aparência do site, deve ser organizado utilizando DIVs.
Mas quem define isso? A W3C e os seus padrões definem isso, ou seja, através desta diretiva, os desenvolvedores passam a saber o que devem e o que não devem fazer para que seu site funcione de forma correta na maior parte dos navegadores Web, mas como já dito, você pode ou não seguir estas instruções.
O que obtenho de ganho seguindo estes padrões? Você ganha a garantia de que seu sistema irá funcionar de forma satisfatória na grande maioria dos navegadores e de que o mesmo funcionará com um desempenho mais agradável, ou você nunca notou diferença em carregar um site que utiliza tabelas em sua estrutura ao invés de DIVs? Isso se deve ao fato de que os navegadores renderizam a tag DIV de forma mais rápida do que uma tag TABLE. Este é apenas um exemplo, visto que muito outros padrões são definidos. E onde o CSS entra nisso? O CSS também é um padrão web, visto que é uma tecnologia especificada pela W3C.
A missão do World Wide Web Consortium é trazer, desenvolver padrões de alta qualidade para a internet de forma que várias empresas entrem em um consenso claro sobre o que deve ser feito e utilizado para garantir uma interoperabilidade entre si. Para a definição desses padrões o W3C conta com um time de profissionais altamente qualificados, sem contar a liderança do criador da internet, Tim Berners-Lee. Além disso membros do W3C e convidados também auxiliam os diversos grupos que definem esses padrões. Esses grupos são organizados pelos mais diversos assuntos como CSS, Educação e Pesquisa, Intercâmbio Eficiente de XML, Geolocalização, Melhores Práticas para Internet Móvel, Schema XML, Navegação por Voz, Web Semântica, e muito mais. Os membros são compostos por grandes empresas como Adobe Systems Inc., Alcatel-Lucent, Apple Inc., AT&T, BBC, o banco brasileiro CAIXA (Caixa Econômica Federal), Academia de Ciências Chinesa, Google, Microsoft e diversas outras incluindo universidades. Toda essa equipe, junta, pesquisa e desenvolve projetos que venham contemplar a visão W3C:
...Confira outros conteúdos:
Black November
Desconto exclusivo para as primeiras 200 matrículas!
Pagamento anual
12x no cartão
De: R$ 69,00
Por: R$ 59,00
Total: R$ 708,00
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- 12 meses de acesso
Pagamento recorrente
Cobrado mensalmente no cartão
De: R$ 79,00
Por: R$ 64,00 /mês
Total: R$ 768,00
Garanta o desconto
- Formação FullStack Completa
- Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
- +10.000 exercícios gamificados
- +50 projetos reais
- Comunidade com + 200 mil alunos
- Estude pelo Aplicativo (Android e iOS)
- Suporte online
- Fidelidade de 12 meses
- Não compromete o limite do seu cartão
<Perguntas frequentes>
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.