tecnologias-web.github.io
Introdução ao CSS3
Introdução
No começo da web, era importante apenas transmitir as informações, não importando se elas estavam “bonitas”. Mas com a popularidade da web, surgiu a necessidade de formatar melhor, colocar cor, nos documentos da web.
O CSS veio com o intuito de deixar simples a formatação mesmo dos mais complicados documentos.
CSS
CSS significa Cascading Style Sheets (folha de estilo em cascata). Estilo define como os elementos HTML são exibidos. Estilos são normalmente armazenados em Folhas de Estilo (arquivo CSS). Estilos foram adicionados para resolverem um problema no HTML 4.0. Folhas de estilo externo pode economizar tempo de trabalho. Múltiplos estilos podem ser definidos em cascata dentro de um único documento.
Como as folhas de estilos podem ser especificadas:
- Dentro de um elemento HTML (Inline).
- Dentro do elemento
<head>de uma página HTML. - Em um arquivo CSS externo.
CSS Inline
Usado para aplicar uma regra apenas para uma tag de uma página específica.
CSS Interno
Usado quando em um único documento há apenas um estilo. Definido na seção <head> </head> ou usando a tag <style> </style>.
CSS Externo
Ideal quando aplicado em várias páginas. Muda todo o visual se uma página mudando apenas um arquivo. Cada página deve ter um vínculo com a folha de estilo.
Repare nos atributos do marcador <link>.
- rel: especifica o relacionamento entre o documento HTML e o documento ligado. Para folhas de estilo, o valor do atributo é “stylesheet”.
- type: especifica o tipo do documento. Para CSS, o tipo é texto (text/css).
- href: especifica a localização do arquivo CSS. Pode ser um recurso local ou um recurso externo.
No marcador link apenas o atributo rel é obrigatório. Mas para inserir uma folha de estilo, precisamos colocar a referência (href).
Sintaxe do CSS
A sintaxe CSS é definida em 3 partes: um seletor, uma propriedade um valor:
seletor {
propriedade: valor;
}
Um seletor simples pode ser um marcador HTML, uma classe ou um id Exemplo utilizando um marcador HTML:
body {
background: yellow;
}
Se o valor é composto de múltiplas palavras, deve ser colocado aspas entre o valor. Se desejar especificar mais de uma propriedade, estas devem ser separadas por ponto e vírgula. Para tornar seu estilo mais legível, descreva cada propriedade em cada linha.
Classes de Estilo
Classes de estilo permitem definir diferentes estilos para o mesmo tipo de elemento HTML. No arquivo CSS, o nome de uma classe é identificada com um ponto (.). Ex.: Dois tipos de parágrafos em seu documento.
Você pode omitir o nome do elemento no seletor (.center { text-align: center }). Neste caso todo marcador com a classe center terá o estilo aplicado.
O nome da classe e o valor do atributo class não podem iniciar com números. Não utilizar espaços para um nome de classe. Um marcador HTML pode receber mais de uma classe. Para isso, separa-se cada uma das classes por espaços, no atributo class.
Seleção por ID
É possível definir estilo para elementos HTML usando o seletor id. Ele é definido com um #.
Agrupamento de seletores
Você pode agrupar seletores. Para agrupar seletores basta separá-los por vírgulas. O estilo dentro das chaves é aplicado a todos os seletores declarados.
Pseudo-Seletores
Pseudo-classes e pseudo-elementos são usados para adicionar efeitos especiais em alguns seletores.
Propriedades CSS mais comuns
Vamos ver algumas das propriedades mais comuns.
Cores
Existem 16,777,216 cores disponíveis nas CSS. As cores podem ser um nome pré-definido (red, blue, black). Podem ser definidas por valores RGB (red é o mesmo que rgb(255,0,0), o mesmo que rgb(100%,0%,0%)). Ou por um código hexadecimal (red é o mesmo que #ff0000 e o mesmo que #f00).
As cores podem ser aplicadas usando as propriedades color e background-color.
Tamanhos e unidades
Em CSS existem várias formas de especificar tamanhos:
- px é a unidade para pixel (ponto na tela).
- em é um elemento com tamanho x vezes da fonte atual do elemento pai. Se a fonte tem tamanho 12px, 2em tem 24px
- rem funciona da mesma maneira que a anterior, mas a sua referência é o elemento raiz do documento.
- % é a unidade para porcentagem.
Se nenhuma unidade for informada, o padrão é px.
Estilos de texto
Os atributos que permitem mudar a forma como o texto é representado são: font-family, font-size, font-weight, font-style, text-decoration e Exemplo do uso das unidades. Font-family indica a fonte a ser usada.
Esta fonte tem de estar no computador da pessoa que está a ver a página por isso não vale a pena usar fontes obscuras. Podemos especificar várias fontes separadas por vírgulas. O browser usa a primeira que o utilizador tenha. Se o nome da fonte tiver mais de uma palavra é necessário usar aspas. O último valor desta propriedade deverá ser uma classe de fonte mais genérica como serif, sans serif, cursive, fantasy, monospace.
Espacialização
Para definir uma maneira de especializar um elemento em relação aos outros, temos a propriedade float e clear. O float define onde um elemento aparecerá em outro elemento. Pode assumir os valores left ou right.
O elemento com float irá mover-se mais à esquerda ou mais à direita possível.
Já o clear define em quais lados de um elemento outros elementos não podem flutuar (float). Assume valores none, left, right e both.
Pontos principais
Atente para os tópicos a seguir. Eles devem ser estudados com muita atenção, pois representam os pontos mais importantes do capítulo.
-
Apesar das três maneiras, a única recomendada é a utilização de arquivos CSS externos ao documento HTML.
-
Seletores CSS são basicamente de três tipos: por tags, por classe de tags e por id de tags (além da combinação destes);
-
Existem diversas propriedades do CSS, apenas a experiência e utilização lhe fará entender todas elas. Treine muito.