Web Design > html (aula 2)
0 gostou833 visualizações
O documento discute design web, explicando que HTML é usado para marcação estrutural de páginas, enquanto CSS é usado para estilização visual de elementos de acordo com o layout. CSS usa seletores, propriedades e valores para definir declarações de estilo, e IDs e classes podem ser usados para facilitar a aplicação de estilos. Um exemplo mostra como aplicar estilos a um site pessoal, agrupando definições dentro de uma tag <style>.
Web Design > html (aula 2)
- 1. Web Design Quando os sonhos se tornam realidade... (2)
- 2. Web Design Como vimos, o HTML é responsável pelo conteúdo e pelas estruturas de marcação das páginas, as TAGS.
- 3. Web Design E após a marcação estrutural, é hora de dar forma e estilo visual aos elementos de acordo com o layout desenvolvido. E essa "estilização" é feita utilizando o CSS (Cascate Style Sheets).
- 4. Web Design CSS, a Sintaxe: h1 { color: green } Seletor Propriedade Valor (TAG) Declaração
- 5. Web Design CSS, a Sintaxe: h1 { color: green } Seletor Propriedade Valor (TAG) Declaração /* exemplo de comentário */
- 6. Web Design Com intuito de facilitar a aplicação de estilo aos seletores (tags), o CSS conta com recurso de IDs e CLASSes.
- 7. Web Design Onde, ID - identificadores exclusivos, só pode ser utilizado uma vez. Class - prédefinições de estilo, podem ser usadas quantas vezes quiser.
- 8. Web Design Exemplo de aplicação, ID - no CSS, é identificado por # ex.: #cabecalho { background:black } Class - é identificado por um . antes do seletor ex.: .box { border: 1px solid #000 }
- 9. Web Design Vamos praticar um pouquinho...
- 10. Web Design Website pessoal (continuação)
- 11. Web Design Website pessoal (continuação) body #corpo #containe r #coluna- direita #rodape
- 12. Web Design Website pessoal (continuação) Após a marcação estrutural, precisamos aplicar as dimensões corretas aos boxes (DIVs). Podemos agrupar as definições de estilo dentro de uma tag <STYLE>, que deverá ser declarada no <HEAD> do arquivo.
- 13. Web Design Website pessoal (continuação) Exemplo: ... <head> <title>Titulo do site</title> <style> body { background-color: black; } </style> </head> ...