Baixe o app para aproveitar ainda mais
Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original
CSS Cascading Style Sheets 1 Titao Yamamoto – titaoyamamoto.com/estacio 1 Introdução Como surgiu a tecnologia CSS De início, a linguagem HTML foi criada para a construção de páginas Web, que exibiam apenas documentos científicos. Com a evolução tecnológica (aplicativos, software, hardware): Houve a necessidade de uma maior flexibilidade para manipular visualmente os conteúdos. Com a criação da primeira tag fonte atributo color, nasceu o conceito de estilização dos conteúdos HTML 2 Titao Yamamoto – titaoyamamoto.com/estacio Folhas de Estilo em Cascata Como surgiu a tecnologia CSS? Com a inclusão de novas tags e atributos de estilização, a velha linguagem de marcação HTML, passou a ter 2 funções: Estruturar o conteúdo através da marcação Dar uma aparência final a este conteúdo. PROBLEMA: como estilizar projetos de documentos HTML cada vez maiores e sofisticados? SOLUÇÃO: criação da tecnologia CSS. 3 Titao Yamamoto – titaoyamamoto.com/estacio Folhas de Estilo em Cascata Uma regra CSS, compõe-se de três partes: seletor { propriedade: valor; } Seletor: É o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra ser válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc.); Propriedade: É o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background,etc.); Valor: É a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc.) 4 Titao Yamamoto – titaoyamamoto.com/estacio A regra CSS e sua sintaxe p { font-size: 12px; /* ponto-e-vírgula é facultativo */ } body { color: #000; background: #fff; /*ponto-e-vírgula ́e facultativo */ font-weight: bold; } h3 { font-family: "Comic Sans MS"; /*valor com palavra composta, deve estar entre aspas duplas ou simples*/} h1, h2, h3, h4, h5, h6 { /*Agrupamento de Seletores*/ color: #0f0;} 5 Titao Yamamoto – titaoyamamoto.com/estacio Vinculando folhas de estilos à documentos As folhas de estilo podem ser vinculadas a um documento HTML de três maneiras distintas: Importadas ou linkadas: quando as regras CSS estão declaradas em um documento a parte do documento HTML. O arquivo de folha de estilo deve ser gravado com a extensão .css Incorporadas: quando as regras CSS estão declaradas no próprio documento HTML. Inline: quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style 6 Titao Yamamoto – titaoyamamoto.com/estacio Folha de estilo externa – Sintaxe O arquivo css da folha de estilo externa deverá ser linkado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css: <head> ... <link rel="stylesheet" type="text/css" href="estilo.css"> ... </head> A sintaxe geral para importar uma folha de estilo chamada estilo.css: <head> ... <style type="text/css"> </style>@import url("estilo.css"); ... </head> 7 Titao Yamamoto – titaoyamamoto.com/estacio Folha de estilo incorporada ou interna – Sintaxe Ideal para ser aplicada a uma única página. Dever ser declarada na seção head do documento com a tag de estilo <style>, conforme sintaxe: <head> <style type="text/css"> body { background: #f00; url(imagens/minhaimagem.gif); } h1 {color: #00f; } p { margin-left: 15px; padding: 1.5em; }</style> </head> 8 Titao Yamamoto – titaoyamamoto.com/estacio Folha de estilo inline – Sintaxe Um estilo inline só se aplica a um elemento HTML Ele perde muitas das vantagens de folhas de estilo, pois mistura a apresentação com a marcação . Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento. <p style="color:#000; margin: 5px;"> /*Aqui um parágrafo de cor preta e com 5 px nas 4 margens.*/ </p> 9 Titao Yamamoto – titaoyamamoto.com/estacio Folhas de estilo múltiplas Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica. Conflito: tamanho da fonte para o elemento h2 Solução: h2 terá o tamanho igual a 10 pt. Pois a folha interna foi declarada depois da externa na seção head do documento. 10 Titao Yamamoto – titaoyamamoto.com/estacio Classes e IDs Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em uma certa parte do texto. Para mudar o estilo dele, pode-se incluir as declarações em um atributo chamado Style. Mas, tal procedimento torna difícil a localização e a gerência dos estilos, pode-se então usar um recurso recurso para marcá-lo de forma que seja considerado diferente. Isto pode ser feito atribuindo-lhe uma identificação única. 11 Titao Yamamoto – titaoyamamoto.com/estacio Classes e Ids - Exemplo <P Id=w779> Texto especial </p> Para alterar as características deste parágrafo agora, pode-se usar o seu Id como seletor: #w779{color:cyan} Se isto estiver em um arquivo CSS, todas as páginas que o usam e que tiverem um elemento com o Id #w779 serão afetadas. 12 Titao Yamamoto – titaoyamamoto.com/estacio Exemplo: <html> <head> <style> #w779{color:cyan} </style> </head> <body> <P Id=w779> Texto especial </p> </body> </html> 13 Titao Yamamoto – titaoyamamoto.com/estacio Classes e Ids Se quiséssemos que cada um tivesse uma cor diferente, poderíamos declara cada um como sendo de uma classe distinta: <p class=padre>Eu retiro o que disse, João</p> <p class=grilo>Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim</p> <p class=bispo>Um cachorro? Enterrado em latim?</p> <p class=padre>Enterrado latindo, Senho Bispo, au, au, au, não sa-be?</p> 14 Titao Yamamoto – titaoyamamoto.com/estacio Classes e Ids Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atributos, usa-se: P.grilo{color:maroon} P.padre{color:black} P.bispo{color:navy} Desta maneira, todos os textos que deverão ser lidos pelos personagem “Bispo” estarão em azul marinho. 15 Titao Yamamoto – titaoyamamoto.com/estacio Classes e Ids Uma classe também pode conter descritos diferentes. Se todos os textos citados por um certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar o descritor: .verde{color:green} Todos os descritores que tiverem o atributo CLASS=verde serão afetados, por exemplo: <P class=verde>,<h3 class=verde>,<table class=verde> 16 Titao Yamamoto – titaoyamamoto.com/estacio Padding e Margin Todos os elementos de HTML pode ser considerado como caixas. Em CSS, o termo "modelo de caixa" é usado quando se fala em design e layout. O modelo de caixa de CSS é essencialmente uma caixa que envolve elementos HTML, e é composto por: margens, bordas, preenchimento e conteúdo real. O modelo de caixa nos permite adicionar uma borda em torno de elementos, e para definir o espaço entre os elementos. 17 Titao Yamamoto – titaoyamamoto.com/estacio Padding e Margin 18 Content - O conteúdo da caixa, em que o texto e as imagens aparecem Padding - Limpa uma área em torno do conteúdo. Border - A fronteira que está em torno do preenchimento e conteúdo Margin - Limpa uma área fora da fronteira. Titao Yamamoto – titaoyamamoto.com/estacio Exemplo Borda <html> <head> <style type="text/css"> h3 { border-width: medium; border-style: solid; border-color: #0000FF; } p{ border-width: 6px; border-style: dashed; border-color: #FF0000; } </style> </head> 19 <body> <h3>Borda média, contínua e azul</h3> <p>Borda 6px, tracejada e vermelha</p> </body> </html> Titao Yamamoto – titaoyamamoto.com/estacio Exemplo Margin <html> <head><style> p { background-color: yellow; } p.ex { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 50px; } </style></head> 20 <body> <p>This is a paragraph with no specified margins.</p> <p class="ex">This is a paragraph with specified margins.</p> </body> </html> Titao Yamamoto – titaoyamamoto.com/estacio Exemplo Padding <html> <head><style> p.ex1 { padding: 2cm; } p.ex2 { padding: 0.5cm 3cm; } </style></head> 21 <body> <p class="ex1">This text has equal padding on each side. The padding on each side is 2cm.</p> <p class="ex2">This text has a top and bottom padding of 0.5cm and a left and right padding of 3cm.</p> </body> </html> Titao Yamamoto – titaoyamamoto.com/estacio
Compartilhar