Introdução ao CSS
O que é css
O css(cascading style sheet) é uma linguagem de estilo que é utilizada para formatar os documentos html, possibilitando formatar entre outras coisas o tamanho, a fonte, a cor de fundo, as bordas, as margens, a posição e muito mais dos elementos de um documento html.
Como usar o css
O css pode ser usado de três formas nos documentos html:
- a primeira forma é aplicar diretamente na linha do elemento html através do atributo style, essa forma limita muito o uso do css, mas pode ser útil quando se quer afetar somente um elemento
- a segunda forma é inserir o css no cabeçalho do documento através da tag <style></style> entre as tags head, esta forma de inserir o css é um pouco mais ampla afetando todo o documento html.
- a terceira e melhor forma de aplicar css em um documento é através de um arquivo .css externo, é feito um link no documento html a partir da tag <link /> que vai referir ao arquivo .css pelo atributo href e vai também utilizar o atributo rel que define a relação entre o html e o arquivo do link e deve ter o valor "stylesheet" e o atributo type que define o tipo do arquivo e deve ter o valor "text/css". A grande vantagem de se utilizar um arquivo css externo é a facilidade de manutenção, já que qualquer modificação no arquivo será aplicado a todos os documentos associados poupando tempo, alem da melhor padronização de todos os documentos.
A sintax da linguagem css
Seletores e bloco de declaração
As regras da linguagem css são baseadas em dois pontos o seletor e um bloco de declaração, onde o seletor é um elemento do documento html e as declarações são atributos e valores desses elementos.
body
{
background-color : #CC3333;
} No exemplo acima body é o seletor e o background-color : #CC3333 é a declaração que vai mudar a cor de fundo do elemento body para vermelho, as cores em css podem ser definidas com notação hexadecimal usando o padrão RGB(red,green,Blue).
Pseudo-classes
Existe também no css as chamadas pseudo-classes que são formas de especificar por exemplo um estado de determinado elemento. p:hover
{
color:black;
}
O hover é uma pseudo-classe que vai mudar a cor da fonte do elemento paragrafo quando o mouse estiver sobre o mesmo.
ids e classes
O css permite ainda que você crie seus próprios seletores utilizando os atributos html class e id, após definir esses atributos no documento html você pode usar #id ou .class no css para modificar o estilo dos elementos que estiverem usando o id ou a classe
<body>
<div id="divId" ></div>
<div class="divClasse"></div>
</body>
#divId
{
background-color : yellow;
}
.divClasse
{
background-color : blue;
}
O seletor #divId vai definir a cor de fundo da primeira div como sendo amarelo e o seletor .divClasse define a cor de fundo do segundo div como azul.
Essas são as principais regras da linguagem css, no próximo post vamos falar das principais propriedades do css. Ate a próxima.
Nenhum comentário:
Postar um comentário