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

Xiaomi vende 52,9 milhões de celulares no segundo trimestre de 2021 e faturamento dispara

A gigante chinesa Xiaomi registrou um aumento de quase 85% no seu faturamento no segundo trimestre de 2021 em comparação ao mesmo período do ano passado. A receita divulgada pela empresa foi de 13,5 bilhões de dólares (algo em torno de 70 bilhões de reais) nos meses de abril a junho deste ano...

Ler Notícia Completa

Galaxy S9 e Galaxy S9 Plus receberão atualização de segurança este mês

A Samsung começou a liberar esta semana, para proprietários dos modelos Galaxy S9 e Galaxy S9 Plus, uma nova atualização de segurança. Por enquanto somente alguns países da Europa receberam o pacote, que deve ser dis...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!