Este documento fornece uma introdução à sintaxe básica do CSS. Explica que o CSS é usado para estilizar páginas HTML e que declarações CSS contêm propriedades e valores separados por ponto e vírgula. Também descreve seletores CSS que indicam quais elementos HTML serão estilizados e a estrutura básica de uma regra CSS entre chaves.
2. Sintaxe CSS
Olá, quando vcs estiverem terminado as aulas
de css, suas páginas estarão bem mais
“estilosas”...
Ai deixarão de ser simples codificadores html
e se tornarão verdadeiros programadores de
interface.
Lembre-se que o html é utilizado para
estruturar suas páginas e o Css é que faz toda
aquela apresentação visual...
Nesta aula iremos construir a primeira pagina
usando CSS, e iremos aprender a sintaxe do
CSS...
3. Sintaxe CSS
Organize seu diretório ou pasta de trabalho e copie a ultima pagina de xhtml
para seu novo diretório css... Renomeio o arquivo para aula02.html
Já usamos o atributo style e usamos valores para ele, exemplo cores no
texto, lembram cores por nome, rgb ou hexa...
Então, esse atributo style, recebe exatamente declarações CSS, essas
declarações são compostas de propriedades e seus valores, se tivermos varias
propriedades e valores, separamos por ponto e vírgula (;).
Vamos aprofundar um pouco mais...
4. Sintaxe CSS
Existe uma tag chamada style que deve ser
declarada entre o cabeçalho <head> html e
serve para definir os estilos da pagina...
Também é possível e aconselhável criar um
arquivo separado css para a pagina, que
veremos + adiante.
Então vejamos como fica...
No html4 era necessário especificar o
atributo type identificando o tipo do
documento que estamos trabalhando....
Type=“text/css” no html5 não é mais
necessário...
Se colocarmos somente a
declaração não será aplicada a
nenhum elemento.
Precisamos informa em qual
elemento aplicar...
Para fazer isso vc precisa usar
seletores... Seletores indicam
aonde eu quero aplicar o
elemento, qual o meu alvo....
5. Sintaxe CSS
Então, qual é o meu alvo? É o elemento <p> então
vejamos....
A declaração fica sempre entre chaves { }
Então o elemento p é chamado de seletor e ele
indica com precisão onde eu quero na minha
marcação html aplicar a regra css (o resultado, o
efeito).
No site w3school vc encontra a sintaxe fundamental,
a regra básica da sintaxe css.
Ela é composta de duas partes, o seletor que são os
elementos do html (ou aqueles que eu criar) e a
declaração que fica entre chaves. Nos podemos ter
várias declarações.
Cada declaração é composta por uma propriedade e
seu valor, sendo separadas por ponto e vírgula (;)
6. Sintaxe CSS
Veja a maneira de usar as declarações...
Agora vamos incrementar + nosso Css...
Vendo o código e o resultado, como eu posso
alterar a cor do cabeçalho <h1>?
É so criar um seletor para ele h1 { color:#006699}
7. Sintaxe CSS
No css nos temos a possibilidade de
colocar a mesma regra par vários
seletores.... Separando-os com uma
virgula (,)
E se quiséssemos somente trocar a fonte
do nosso cabeçalho (h1) então
poderíamos criar um novo seletor
somente com o nome da fonte...
Agora imagine se eu defino o valor com
mais do que uma palavra, então use
aspas duplas...
Último aspecto comentários....
8. Sintaxe CSS
Para usar comentários em css use os
carateres /* para abrir e */ para fechar
Até a próxima...