Css3 - Aula 2
•Download as PPT, PDF•
2 likes•628 views
Material de apoio para aula de folhas de estilo. Estilos para fundos e textos. Estilos inline, Folha interna e externa.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Css3 - Aula 2
Similar to Css3 - Aula 2 (20)
More from Dorival Silva
Recently uploaded
Recently uploaded (20)
Css3 - Aula 2
- 1. CSS 3 Por: Dorival Silva Aula 02
- 2. Inserindo CSS Existem três maneiras diferentes de inserir uma folha de estilos: • Folha de estilos externa • Folha de estilos interna • Estilo inline
- 3. Folha de estilos externa Quando um estilo deve ser aplicado em muitas páginas o ideal é que seja uma folha de estilos externas. Alterando apenas um arquivo, você pode alterar a aparência de um site inteiro. Para tal, basta que cada página possua um link para folha de estilos. A tag <link> deve ser adicionada dentro da seção <head> </head>.
- 4. Exemplo <head> <link rel="stylesheet" type="text/css" href=“nomedoestilo.css"> </head> Obs.: <link rel="stylesheet“ type="text/css“ href=“nomedoestilo.css">
- 5. Arquivo.css Qualquer editor de texto pode ser utilizado para criar folha de estilos. O documento deve ser salvo com a extensão “.css”. O arquivo não deve conter tags HTML. Exemplo: body { background-color: silver; } h1 { font-size: 45px; }
- 6. Folha de estilos externa Uma folha de estilo interna deve ser usada quando um único documento tem um estilo único. Você define estilos internos na seção <head> de uma página HTML, dentro da tag <style>:
- 7. <head> <style> body { background-color: olive; } h1 { color: navy; margin-left: 45px; } </style> </head>
- 8. Estilo inline Para aplicação de estilo em uma tag HTML adicione o atributo que pode conter qualquer propriedade CSS. <p style=“margin-left: 45px; color: purple;”>
- 9. Propriedades de fundo São utilizadas para definir os efeitos de um elemento de fundo. • background-color – (Definir cor) • background-image – (Imagem de fundo) • background-repeat – (repetir imagem em X ou Y) • background-attachment – (taquigrafia) • background-position – (posição)
- 10. Exemplo de taquigrafia body { background: #ffffff url("img_tree.png") no-repeat right top; } Obs.: Na mesma ordem
- 11. Propriedades de texto São utilizadas para definir os efeitos de texto: • color – (Definir cor) • text-align – (alinhamento) • text-decoration – (decoração) • text-transform – (transformação) • text-indent – (recuo)
- 12. Alinhamento seletor { text-align: right; } seletor { text-align: justify; } seletor { text-align: center; }
- 13. Decoração seletor { text-decoration: none; } seletor { text-decoration: overline; } seletor { text-decoration: line-through; } seletor { text-decoration: underline; }
- 14. Recuo de texto p { text-indent: 50px; }