Embed Size (px)
Citation preview
Sintaxe – CSS
Style SheetProfessor: Jolvani
Aula 02
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...
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...
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....
Sintaxe CSS
Então, qual é o meu alvo? É o elemento <p> entãovejamos....
A declaração fica sempre entre chaves { }
Então o elemento p é chamado de seletor e eleindica com precisão onde eu quero na minhamarcação html aplicar a regra css (o resultado, oefeito).
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 oselementos do html (ou aqueles que eu criar) e adeclaração que fica entre chaves. Nos podemos tervárias declarações.
Cada declaração é composta por uma propriedade eseu valor, sendo separadas por ponto e vírgula (;)
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}
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....
Sintaxe CSS
Para usar comentários em css use os
carateres /* para abrir e */ para fechar
Até a próxima...
Próxima Aula: Utilização in-line, incorporado e externo
