Objetivos de aprendizagem
Conhecer a linguagem de estilo CSS Entender a sintaxe básica da linguagem CSS Conhecer as propriedades básicas da CSS
CSS descreve como os elementos HTML devem ser exibidos. Quando um navegador vai exibir uma página Web ele lê o conteúdo do HTML e a formatação do CSS. HTML e CSS se completam.
<p>
) de uma página HTML tenham o seu conteúdo (texto) alinhado à direita, seria necessário este CSS:<p style="text-align: right; ">texto</p>.
Esta forma é considerada uma má prática, pois mistura o código HTML com CSS e não permite a reutilização de código, tornando a manutenção e evolução do código mais complexa. Portanto, EVITE! <style type="text/css"> p { text-align: right; } </style>.
Esta forma também é considerada uma má prática, pois coloca o código HTML com CSS em um mesmo arquivo e não permite a reutilização do CSS entre arquios HTML diferentes, que pode gerar duplicidade de código e tornar a manutenção mais trabalhosa. Portanto, EVITE! .css
, separadamente do arquivo HTML. Nesse caso é necessário vincular o arquivo CSS no arquivo HTML. A ligação entre o HTML e CSS é realizada por meio do elemento link, que deve ser adicionado no elemento <head>
. Veja o exemplo abaixo, onde o arquivo style.css
está vinculado ao arquivo index.html
:rel="stylesheet"
especifica que o documento vinculado é um CSS e o atributo href
recebe como valor a localização (link) do arquivo CSS a ser vinculado.<p>
(paragrafo) serão estilizados conforme o bloco de declarações.{}
, contém uma ou mais declarações separadas por ponto e vírgula.text-align
e color
são utilizadas para definir o alinhamento do texto e cor do texto respectivamente. No exemplo da imagem acima, para o text-align
foi atribuído o valor right
, que alinha o texto à direita e para a color
foi atribuído o valor green
, que deixa a cor de texto verde. {}
(chaves) determina o inicio e o fim de um bloco de declarações; :
(dois pontos) separa a propriedade do valor;;
(ponto e vírgula) encerra uma declaração; p {
}
#my-id { }
id
por página HTML. O seletor de id inicia com uma hashtag #
..my-class { }
.
.a:hover {
}
seletor:estado
./* comentários */
text-align
, color
e font-size
, que só fazem efeitos em elementos de texto. Já outras podem ser aplicadas com efeitos em qualquer elemento, tais como width
, margin
, etc. Vamos ver mais detalhes sobre elas na próxima seção. padding
), borda (border
) e margem externa (margin
). Todas essas partes que compõe o elemento é conhecida como box model. A figura abaixo tem a representação gráfica de um elemento.width
- largura de um elemento, pode ser definido com valor fixo usando píxel (px) ou valor dinâmico usando porcentagem (%);height
- altura de um elemento, pode ser definido com valor fixo usando píxel (px) ou valor dinâmico usando porcentagem (%);margin
- espaço externo a um elemento.border
- linha que envolve todo o elemento.padding
- espaço entre a borda e o conteúdo.background-color
- a cor de fundo do elemento, as propriedades de cores podem receber valores literais (nome da cor em inglês), ou cores em hexadecimal (aquelas que começam #) ou cores RGB padding
, margin
e border
são aplicadas aos quatro lados de um elemento: topo, direita, baixo e esquerda. No exemplo acima, essas propriedades receberam apenas um valor, com isso esse valor é aplicado a todos os lados do elemento, no entanto, é possível especificar valor específico para cada lado. Para as propriedades margin
e padding
há duas formas de fazer isso.padding
aplicado é 2px
para o topo, 5px
para a direita, 3px
para baixo e 4px
para esquerda.margin
aplicada é 5px
para o topo e baixo e 7px
para esquerda e direita.margin
:margin-top
margin-right
margin-bottom
margin-left
padding
:padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-right
border-bottom
border-left
border
) recebem três valores: largura da borda, tipo da borda e cor da borda.padding
, margin
e border
, estamos usando a forma abreviada das propriedades individuais, com isso deixamos o código mais curto e limpo, facilitando a manutenção do mesmo. Sempre que possível utilize a forma abreviada, só recomendo a utilização das propriedades individuais quando realmente for necessário fazer customizações para lados específicos do elemento.