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

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

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