Aula 02 sintaxe css

195 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
195
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 02 sintaxe css

  1. 1. Sintaxe – CSS Style Sheet Professor: Jolvani Aula 02
  2. 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. 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. 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. 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. 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. 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. 8. Sintaxe CSS  Para usar comentários em css use os carateres /* para abrir e */ para fechar  Até a próxima...
  9. 9. Próxima Aula: Utilização in-line, incorporado e externo

×