Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Tamanho: px

Começar a partir da página:

Download "Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata"

Carmem Antônia Caldeira Azambuja
8 Há anos
Visualizações:

1 Mudança de formatos no HTML <h1><font color="#00ff00">título</font></h1> CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil. O problema aparece quando queremos mudar, não a cor de uma só linha mas de várias linhas, ou de todo o conteúdo de toda a página ou ainda das 20 ou 30 páginas que constituem o site aí sim é que o problemas se torna complicado de resolver. Para facilitar a tarefa temos o CSS ( Cascating Styles Sheets - Folha de estilo em "cascata ) A prioridade para o efeito cascata Os diversos factores que definem a prioridade de aplicação dos CSS: tipo de folha de estilo o local físico da folha de estilo no seu todo o local físico da regra de estilo na folha de estilo especificidade da regra de estilo A prioridade para o efeito cascata 1. folha de estilo do utilizador; 2. folha de estilo do desenvolvedor; estilo inline (dentro de um elemento HTML); estilo incorporado (definido na secção head do documento); estilo externo (importado ou linkado). 3. folha de estilo nativa no navegador.

2 A prioridade para o efeito cascata 1. folha de estilo do utilizador O estilo definido pelo utilizador prevalece sobre todos os outros. 2. folha de estilo de quem desenvolve o site; seguir vem as folhas de estilo definidas por quem desenvolve o site e para estas os estilos inline. (dentro de um elemento HTML) tem a prioridade a mais elevada. o que significa que prevalecerá sobre aquele definido na secção head e este sobre o definido em uma folha de estilo externa 3. folha de estilo nativa no navegador. finalmente a última prioridade é para estilos padrão do navegador A regra do CSS Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: seletor { propriedade: valor; um seletor, uma propriedade um valor A regra exemplo de aplicação p { font-size: 12px; /* ponto-e-vírgula é facultativo */ body { color: #000000; background: #FFFFFF; font-weight: bold; /*ponto-e-vírgula é facultativo */ Agrupamento de selectores h1, h2, h3, h4, h5, h6 { color: #00FF00; Uma regra CSS quando válida para vários selectores, estes podem ser agrupados. Separa-se cada selector com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde.

3 Selector classe No CSS não estamos somente restritos aos elementos HTML Podemos inventar um nome e com ele criar uma classe a qual definirá as regras CSS a aplicar: elemento HTML.minhaclasse { propriedade: valor; Deve-se evitar usar números e caracteres especiais para o nome das classes. Selector classe - exemplo Classes definidas p.corum { color:#000000; p.cordois { color:#0000ff; No código c HTML <p class ="corum"> este parágrafo terá cor preta.</p> <p class ="cordois"> este parágrafo terá cor azul. </p> Selector classe Nota Em CSS 1 não é válido atribuir mais de uma classe para um elemento HTML <p class ="corum" class ="cordois"> Aqui há um erro. </p CSS 2 mudou este conceito, permitindo declarar mais de uma classe, no entanto nenhum browser actual suporta mais de uma classe declarada..cortres { color: #0000FF; <h2 class="cortres"> Este cabeçalho é azul. </h2> <p class="cortres"> Este parágrafo é azul. </p > O selector ID O selector ID difere do selector de classe, por ser ÚNICO. Um selector ID só pode ser aplicado a UM e somente UM elemento HTML dentro do documento. Pode-se com este selector "inventar" um nome e com ele criar uma ID a qual definirá as regras CSS. Uma ID só pode ser aplicada a UM elemento HTML.

4 O selector ID A sintaxe para o seletor ID: #minhaid { propriedade: valor; Vinculando folhas de estilo a documentos Os três tipos de vinculação de folhas de estilo 1. Importadas ou lincadas; 2. Incorporadas; 3. Inline. Folhas de estilo Importadas ou lincadas 1. Importadas ou lincadas; Folha de estilo externa <head> folha de estilo chamada estilo.css <link rel="stylesheet" type="text/css" href="estilo.css">... </head> Folhas de estilo interna Folha de estilo incorporada ou interna Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML. As regras de estilo, válidas para o documento, são declaradas na secção <head> do documento com a tag de estilo <style> <head> <style type url("estilo.css"); </style>... </head> folha de estilo chamada estilo.css de um site exterior. Nota: Um browser ignora normalmente as tags desconhecidas. Isto significa que um browser velho que não suporte estilos, ignorará a tag <style>, mas o conteúdo da tag será mostrado na tela. É possível impedir que um browser velho mostre o conteúdo da tag, "escondendo-o" através do uso da marcação de comentário do HTML. Observe a inclusão dos símbolos  (fecha comentário) no código acima.

5 <head> <style type="text/css">  </style> </head> Folha de estilo inline Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML. <p style="color:#000000; margin: 5px;"> Aqui um parágrafo de cor preta e com 5px nas 4 margens. </p> Nota: Um estilo inline só se aplica a um elemento HTML. Com este estilo perde-se muitas das vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método excepcionalmente, como quando quiser aplicar um estilo a uma única ocorrência de um elemento. Folhas múltiplas de estilo Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em acção, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica. Suponha, uma folha de estilo externa com as seguintes propriedades para o selector h2: h2 { color: #FFCC00; text-align: center; font: italic 9pt Verdana, Sans-serif; e, uma folha de estilo interna com as seguintes propriedades para o selector h2: h2 { color: #FFCC00; text-align: center; font: italic 10pt Verdana, Sans-serif; Se ambas as páginas estiverem vinculadas ao documento, como há um conflito no tamanho das letras para <h2>, prevalecerá a folha interna e a letra de <h2> terá o tamanho igual a 10 pt. Selectores descendentes Os selectores descendentes especifica o estilo a ser aplicado quando o elemento em questão é descendente. Separa-se os vários elementos por espaços. h3 em { color: white; background-color: black; Este selector só se aplica a texto emphasize que esteja no elemento HTML h3. Ex: <h3>este texto é <em>emphasize</em></h3>

6 Selectores descendentes Mas para quê aplicar este tipo de selectores? Um exemplo da aplicação deste tipo de selectores é para quando aplicarmos a um determinado site mais complexo, um conjunto de estilos poder especificar por exemplo que todas as imagens dentro de uma tabela tenham margens e as outras não. Revisão sobre HTML Elementos EM LINHA e EM BLOCO Elementos em Bloco São posicionados sobre camadas como representados no esquema seguinte: <p> bloco <p> bloco de forma Vertical. Revisão sobre HTML Elementos EM LINHA e EM BLOCO Elementos em Linha A propriedade display CSS O CSS pode controlar a forma em como um elemento pode ser mostrado, isso fazse aplicando a propriedade display. São posicionados sobre camadas como representados no esquema seguinte: <p> elemento <p> elemento de forma horizontal.

7 Revisão do HTML <div> tag O tag div e uma forma genérica para adicionar estrutura em bloco ao documento HTML. Revisão do HTML <span> tag A tag span é também uma forma genérica para adicionar estrutura mas em linha ao documento HTML. Também pode ser aplicado ao selector ID Também pode ser aplicado ao selector ID

Documentos relacionados

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,