Webdesign - CSS na Prática no Webdesign
Transferir como PPT, PDF0 gostou468 visualizações
O documento fornece informações sobre CSS (Cascading Style Sheets) e sua função na programação web. Explica que HTML é usado para conteúdo, CSS para estilo e JavaScript para interatividade. Detalha seletores CSS como body, IDs e classes e como definir estilos para cada um. Fornece exemplos de código CSS.
Webdesign - CSS na Prática no Webdesign
- 1. CSS NA PRÁTICA PARA WEBDESIGNERS RENATO MELO - 2018
- 2. QUAL A FUNÇÃO DO CSS NA PROGRAMAÇÃO?
- 3. Programação em Três Partes Html: Conteúdo CSS: Estilo Javascript: Inteligência
- 4. Nome = técnico Define um estilo único para um elemento: body, h1...
- 5. #nome = time Define um estilo único para um identificador
- 6. .nome = jogador Define um estilo único para uma classe, que pode ser utilizada qualquer hora.
- 7. Exemplo body{ background: #ccc; font: 12pt Arial, Sans-Serif; color: #000; } #topo{ width: 780px; background: #ccc url(bgtopo.jpg) repeat-x; font-size: 20pt; color: #ff0000; } .produto{ float: right; text-align: center; font-size: 16pt; color: #ff0000; }
- 8. PADRÃO DE CORES = COR HEX É a cor do #
- 9. Exemplos de fontes: Arial, Calibri, Verdana Trebuchet, Times New Roman...
- 10. trabalho 2 05.06
- 12. 1 – ALTERAR O TÍTULO PARA HEINEKEN UEFA CHAMPIONS LEAGUE; 2 – ALTERAR CONTATO PARA FAQ; 3 – ALTERAR CHAMADA PARA: “VOCÊ NA FINAL DA CHAMPIONS 2015” 4 – AUMENTAR A FONTE DE “RESPONDA, POR QUE...” PARA 20PX 5 – TROCAR A COR DA FONTE DOS TÍTULOS (FACEBOOK, SMS E E-MAIL) PARA #dcddde 6 – ACRESCENTAR NO TEXTO DO RODAPÉ A FRASE: “BEBA COM MODERAÇÃO” 7 – TROCAR A COR DO RODAPÉ DE PRETO PARA VERMELHO: #ff0004
- 15. 3. ABRA O HTML E O CSS NO BLOCO DE NOTAS 1. DESCOMPACTE SEMPRE TUDO NA MESMA PASTA 2. ABRA O HTML NO NAVEGADOR
- 16. 1. ABRA O BLOCO DE NOTAS 2. VÁ EM ABRIR 3. VÁ NA PASTA DOS SEUS ARQUIVOS 4. SELECIONE PARA ABRIR TODOS OS ARQUIVOS PARA APARECER O HTML E CSS PARA ABRIR OS ARQUIVOS NO BLOCO DE NOTAS
- 17. SALVE O HTML OU CSS NO BLOCO DE NOTAS QUER VER COMO ESTÁ INDO AS ALTERAÇÕES? PRESSIONE A TECLA F5 NO NAVEGADOR
- 18. QUER ACHAR ALGO NO SEU CÓDIGO? Editar - Localizar
- 19. ATENÇÃO: Na Direção, cuidado com Acima e Abaixo
- 20. DIV: O nome da DIV sempre será o correspondente no css
- 22. #ALTERAR 1. NO TÍTULO: ALTERAR COCA COLA PARA CONCURSO COCA COLA
- 23. #ALTERAR 2. NA CHAMADA, ALTERAR PROMOÇÃO PARA CONCURSO
- 24. #ALTERAR 3. NO TEXTO: CONCURSO COCA COLA, TROCAR A FONTE PARA A COR PRETA: #000000;
- 25. #ALTERAR 4. NO TEXTO: AQUI VOCÊ ENCONTRA... TROCAR A COR DO TEXTO PARA PRETO: #000000
- 26. #ALTERAR 5. ALTERAR A COR DOS TÍTULOS: FACEBOOK, E- MAIL E SMS DE BRANCO PARA PRETO #000000
- 27. #ALTERAR 6. ALTERAR A COR DO RODAPÉ DE VERMELHO PARA PRETO: #000000