1.2 em} ◦ Usando palavras chaves ◦ p {font-size: small| medium| large } CSS – Cascading Style Sheets Font-style: usada para obter um texto obliquo ou italico. ◦ p {font-style: italic | oblique | normal} CSS – Cascading Style Sheets Classes em CSS Nos permitem criar estilos diferentes para seletores iguais; O objetivo é definir é definir uma classe de elementos e aplicar estilos a qualquer elemento que pertença a essa classe. CSS – Cascading Style Sheets Criar classes em CSS é necessário dois procedimentos. 1 – No meu documento HTML preciso adicionar um elemento a uma classe. Ex.: <html> <head> <title>Elixires do Bar Use a Cabeça</title> </head> <body> <h1>Nossos Elixires</h1> <h2>Chá Verde Cooler</h2> <p class=“classseA"> <img src="../images/green.jpg" alt="Chá Verde Cooler" /> Cheio de vitaminas e minerais, este elixir combina os benefícios saudáveis do chá verde com uma pitada de folhas de camomila e gengibre. </p> <h2>Framboesa Geladinha</h2> <p > <img src="../images/lightblue.jpg" alt="Framboesa Geladinha" /> Combinando suco de framboesa com capim-limão, raspas de gelo e o fruto da roseira-brava, este drinque super gelado vai clarear e revigorar sua mente. </p> <h2>Elixir da Felicidade</h2> <p > <img src="../images/blue.jpg" alt="Elixir da Felicidade" /> Essências de vacínio e cereja misturadas a uma base de chá de erva da flor do sabugueiro colocarão você em estado relaxado de felicidade rapidamente. </p> <h2>Explosão Anti-oxidante de Oxicoco</h2> <p> <img src="../images/red.jpg" alt="Explosão Anti-oxidante de Oxicoco" /> Acorde para os sabores do oxicoco e hibiscos neste elixir rico em vitamina C. </p> <p> <a href="../bar.html">Volte ao Bar</a> </p> </body> </html> CSS – Cascading Style Sheets Criando classes em CSS 2 No arquivo “css” preciso defino as regras aplicadas ao seletor adicionado a classe. Ex: body{ font-family: verdana; color: blue; } h1,h2 { color: red; } h2 { font-family: times-new- roman; } h1 { top: 1; border-bottom: 1px solid black; } p { color: yellow; font-family: sans-serif; } p. classseA{ color: green } CSS – Cascading Style Sheets Criando classes em CSS Com este trecho p. classseA{ color: green } Adicionamos uma nova regra para alterar a fonte de qualquer parágrafo que esteja na classeA. CSS – Cascading Style Sheets Criando classes em CSS E se surgisse a necessidade de adicionar outros elementos na classe A? 1 No arquivo css colocarei: h1.classe A, p.classeA { color: green } Se houver um lista razoavelmente grande de seletores posso especificá-la da seguinte forma: .classeA { color: green } CSS – Cascading Style Sheets Criando classes em CSS No documento HTML adiciono as classes para o respectivos elementos. <html> ...... <h1 class = “classeA”> <p class= “classeA”> ...... </html> CSS – Cascading Style Sheets Adicionando um elemento em mais de uma classe Posso adicionar um elemento a mais de classe da seguinte forma: <html> ...... <h1 class = “classeA classeB” > <p class= “classeA”> ...... </html> CSS – Cascading Style Sheets Modelo de caixa em CSS Caixas são como as CSS vêem os elemento. As CCS tratam cada elemento como se representasse uma caixa. Cada caixa é composta por uma área de conteúdo com enchimentos, bordas e margens opcionais Essências de vacínio e cereja misturadas a uma base de chá de erva da flor do sabugueiro colocarão você em estado relaxado de felicidade rapidamente CSS – Cascading Style Sheets Modelo de caixa em CSS A área de conteúdo: armazena o conteúdo do elemento. Pode ser um texto, uma imagem. Essências de vacínio e cereja misturadas a uma base de chá de erva da flor do sabugueiro colocarão você em estado relaxado de felicidade rapidamente Área de conteudo CSS – Cascading Style Sheets Modelo de caixa em CSS Área de enchimento É o espaço adicional em torno da área de conteúdo Com css é possível controlar a largura do enchimento em torno da área de conteúdo. Essências de vacínio e cereja misturadas a uma base de chá de erva da flor do sabugueiro colocarão você em estado relaxado de felicidade rapidamente Área de enchimento CSS – Cascading Style Sheets Modelo de caixa em CSS A borda Os elementos podem à volta uma borda opcional. A borda fica em torno do enchimento Essências de vacínio e cereja misturadas a uma base de chá de erva da flor do sabugueiro colocarão você em estado relaxado de felicidade rapidamente borda CSS – Cascading Style Sheets Modelo de caixa em CSS A margem é opcional e envolve a borda. Permite adicionar espaço os elementos na mesma pagina. Essências de vacínio e cereja misturadas a uma base de chá de erva da flor do sabugueiro colocarão você em estado relaxado de felicidade rapidamente margem CSS – Cascading Style Sheets Modelo de caixa em CSS Adicionando enchimento Isto é realizado através da propriedade padding, esta é usuda para definição algum enchimento para os quatro lados do conteúdo. Seu valor pode ser em pixels ou com porcentagem em relação a area da borda Ex.: p { padding: 25px} p {padding-left : 30} p {padding-right : 30} p {padding-bottom : 30} p {padding-top : 30} ou p {padding: 0x 20 px 30px 10px } 1em cima 2 a dir 3em bx 4 a esq CSS – Cascading Style Sheets Modelo de caixa em CSS Adicionando margens É definido através da propriedade margin. Seus valores podem estam em pixels ou porcentagem. Ex: p {margin 25px} p {margin -left : 30} p {margin -right : 30} p {margin -bottom : 30} p {margin -top : 30} Ou p {margin: 0x 20 px 30px 10px } 1em cima 2 a dir 3em bx 4 a esq CSS – Cascading Style Sheets Modelo de caixa em CSS Adicionando bordas Permite adicionar linhas de contorno a um determinado elemento. border-style : define o estilo da borda Border.widht: define a espessura da borda Border-color: cor da borda. Border-top-color Border-top-style