Minicursos - CSS

Tipos de Folhas de Estilo


Você pode aplicar as folhas de estilo em suas páginas através de três maneiras diferentes, que são:

- Folha de estilo interna: com esse tipo de folha estilo, as regras são criadas dentro da tag<head>do documento HTML, mais especificamente dentro da tag <style>. A vantagem desse método é que você pode concentrar, em um único arquivo HTML, a estrutura do documento e as regras de exibição desse conteúdo. Por outro lado, se precisar aplicar uma mesma regra a vários documentos, terá que fazê-lo individualmente em cada arquivo, ou seja, cada arquivo HTML terá que conter o bloco de instruções CSS desejado. Sempre há a opção de copiar e colar, mas ainda assim, será trabalhoso.

Abaixo segue um exemplo de código css interno.

<head>
...
<style type="text/css">
body {
background: #fff;
url(pictures/pic01.gif);
}

H1 {
color: #f00;
}

p {
margin-left: 5px;
padding:5px;
}

</style>
...
</head>

Lembrando que as regras devem ser criadas dentro da tag<head>.

- Folha de estilo in-line:com esse modelo de folha você cria suas regras diretamente dentro da tag que está estruturando seu código. Recomendo sua utilização somente em casos muito específicos, pois ela acaba tirando do CSS sua grande vantagem, que é o reaproveitamento das regras para vários documentos.

Exemplo de código CSS inline:

<p style="color: #ffff00; font-size: 16px; text-align: justity; ">

Não é necessário a inserção do atributo type=”text/css”, pois os navegadores já partirão do princípio que quaisquer regras de estilo criadas serão CSS.

- Folha de estilo externa: é a mais usada e, para mim, a melhor, já que isola completamente o código CSS da estrutura do documento. Utilizando a folha de estilo dessa forma você cria um arquivo em formato texto, o salva com a extensão css e o vincula ao seu documento da seguinte forma:

<head>
...
<link href="layout.css" rel="stylesheet" type="text/css" />
...
</head>

O exemplo acima vincula um arquivo chamado "layout.css" ao documento HTML.

Você também pode utilizar mais de um método numa mesma página, ou seja, pode criar uma folha externa vinculada a determinada página e pode, dentro dela, colocar instruções inline.

A folha de estilos externa poderia conter, por exemplo, instruções de formatação como tamanho de texto igual a 20px às tags h1 e, nessa mesma tag, colocar uma instrução inline dizendo que seu texto deve ser azul. O navegador exibiria, nesse caso, o texto de tamanho 20 pixels e na cor azul. Ele percebe que existem regras para serem aplicadas à tag h1 tanto no css externo quanto no inline e as soma. Isso é bastante interessante.
Bem, mas o que aconteceria se as instruções fossem conflitantes? E se a folha de estilos externa contivesse a informação de que o tamanho do texto precisa ter 20 pixels, mas a inline dissesse que essa tag associada deveria ter o tamanho 12 pixels? Em casos como esse o navegador executa as regras em forma de cascata e obedecendo a uma prioridade. Abaixo segue ordem de execução:

1- Configurações do próprio navegador (quando não existe nenhuma regra css associada)
2- Folha de estilo externa
3- Folha de estilo interna
4- Estilo inline

Ou seja, se existirem regras conflitando entre uma folha de estilos externa e uma interna, a interna terá prioridade e irá se sobrepor à regra externa. Se houver um conflito entre uma regra numa folha de estilo interna e uma instrução inline, esta última irá prevalecer. Caso você opte por utilizar mais de uma folha de estilos na mesma página, é importante saber essa ordem de execução. Aliás, essa execução em cascata pode ser muito útil. Imagine uma situação onde 10 parágrafos tenham um mesmo padrão de formatação, como cor, tamanho e fonte, mas apenas um tenha que possuir um alinhamento diferente. Neste caso você pode criar uma regra geral para esses 10 parágrafos em uma folha de estilos externa e criar, apenas na exceção, a regra particular. Nesse caso bastaria inserir o comando para modificar o alinhamento, já que os parâmetros de cor e tamanho seriam recebidos da folha de estilos externa. Parece confuso, mas acompanhando os próximos artigos você verá que é extremamente simples e útil.



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa
Você gostará destes vídeos: