O documento apresenta os conceitos básicos de sintaxe CSS. Ele explica que CSS é usado para estilizar a apresentação visual das páginas HTML e que a sintaxe CSS é composta por seletores, que indicam os elementos HTML aos quais as regras serão aplicadas, e declarações entre chaves, contendo propriedades e valores separados por ponto e vírgula. O documento fornece exemplos simples de como aplicar estilos como cor, fonte e comentários em elementos HTML usando a sintaxe CSS.
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.
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....
Então vejamos como fica...
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...