Categorias
Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript

Folhas de estilo em cascata (CSS)

Capítulo 4

Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.

As folhas de estilos em cascata (CSS) descrevem um conjunto de regras de formatação que controlam a aparência de uma página da internet. Aprendemos anteriormente a aplicar estilos a elementos HTML utilizando a tag <style> ou o atributo style. Entretanto, inserir estilos diretamente no código HTML não é o método mais elegante para aplicação de estilos. Por exemplo, imagine que ao criar um site, você decide que todas as suas páginas deverão ter o título na cor vermelha. Algum tempo depois, você percebe que o título ficaria melhor na cor azul. Entretanto, o número de páginas de seu site cresceu. Agora você tem centenas delas e você percebe que seria inviável alterar o título de uma por uma.

O uso de folhas de estilo em cascata permite a separação de estilo e conteúdo em arquivos diferentes. Isso permite que uma grande quantidade de páginas seja alterada apenas com uma simples alteração no arquivo de estilos.

As folhas de estilos em cascata (CSS) descrevem um conjunto de regras de formatação que controlam a aparência de uma página da internet. Aprendemos anteriormente a aplicar estilos a elementos HTML utilizando a tag <style> ou o atributo style. Entretanto, inserir estilos diretamente no código HTML não é o método mais elegante para aplicação de estilos. Por exemplo, imagine que ao criar um site, você decide que todas as suas páginas deverão ter o título na cor vermelha. Algum tempo depois, você percebe que o título ficaria melhor na cor azul. Entretanto, o número de páginas de seu site cresceu. Agora você tem centenas delas e você percebe que seria inviável alterar o título de uma por uma.

O uso de folhas de estilo em cascata permite a separação de estilo e conteúdo em arquivos diferentes. Isso permite que uma grande quantidade de páginas seja alterada apenas com uma simples alteração no arquivo de estilos.

Vídeo-aula 10. O que são folhas de estilo em cascata?

Por que cascata?

Os estilos de páginas são regidos pelo chamado efeito cascata. Isso define a ordem de prioridade para estilos aplicados. Já percebeu que ao escrever um simples texto em uma página, o navegador automaticamente decide qual fonte usar e qual o tamanho. Isso ocorre porque o navegador possui uma folha de estilo própria, que é utilizada caso o desenvolvedor não informe qual estilo gostaria de aplicar.

Menor importância
l
l
l
l
l
l
l
l
l
l
l
l
Maior importância
Folha de estilo do navegador

Folha de estilo do usuário (se existir)

Folha de estilo do desenvolvedor

Estilo externo (importado)

Estilo incorporado (tag <style>)

Estilo inline (atributo style)

Marcação !important

Folhas de estilo do desenvolvedor

Estilos aplicados pelo desenvolvedor têm prioridade sobre os outros. Como explicado anteriormente, estilos criados pelo desenvolvedor podem ser aplicados de três formas: estilo externo (importado), estilo incorporado (tag <style>) e aplicado diretamente no elemento HTML (atributo style).

O atributo style tem prioridade sobre os outros, e apesar de termos o utilizado em todos os exemplos anteriores, seu uso deve ser evitado. Exemplos de uso do atributo style:

<div style="height:100px">
     <p style="color:red">Meu texto</p> 
</div>

c4_s1.html

A tag <style> permite que um estilo seja aplicado a uma página inteira. No exemplo abaixo, a cor vermelha é aplicada a todos os elementos declarados com a tag <p>. Para que seja aplicada a toda a página, a tag <style> deve ser declarada no cabeçalho <head>. Entretanto, é possível declará-la em qualquer parte do código inclusive no <body>. Nesse caso, o estilo será aplicado aos elementos posteriores a declaração da tag.

<head>
     <style>
         p {
             color: red;
         }
     </style>
 </head>
 <body>
     <p>Meu texto</p> 
</body>

c4_s2.html

A terceira forma de se declarar estilos em uma página é através da importação de um arquivo no formato “.css”. Para isso, os estilos devem ser gravados em um arquivo externo e importados no documento através da tag <link>.

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

c4_s3.html

A tag <link> recebe os atributos rel, type e href. O atributo rel indica o relacionamento do documento atual para âncora especificada, no caso especifica que o link se refere a uma folha de estilos (stylesheet). O tipo (type) é declarado como “text/css”. Por fim, o atributo href irá especificar o endereço do nosso arquivo com estilos, que no exemplo se chama “style.css”.

Vídeo-aula 11. Fundamentos do CSS.

Sintaxe

A sintaxe do CSS é composta por um seletor, seguido por declarações, que são propriedades e valores separados por ponto e vírgula dentro do bloco.

seletor { 
    propriedade: valor; 
}

No exemplo a seguir vamos declarar estilos aplicados a dois distintos seletores: à tag <body> e à tag <p>. À tag <body> vamos atribuir a fonte “arial” com estilo itálico. À tag <p> vamos declarar a fonte “courier”. Perceba que será necessário declarar que o estilo da fonte em <p> é normal. Apesar dessa propriedade ser aplicada por padrão, como aplicamos o estilo itálico ao body, ele será automaticamente aplicado à tag <p>. Logo, para retornar ao estilo padrão será necessário aplicar o estilo normal.

/* CSS */ 
body {
     font-family: Arial;
     font-style: italic; 
} 
p {
     font-family: Courier;
     font-style: normal; 
}

c4_s4.css

Em arquivos CSS, comentários são iniciados após os caracteres /* e encerrados nos caracteres */.

/* Isto é um comentário */

c4_s5.css

Seletores

Seletores são descritos como a “alma do CSS”. Eles podem ser definidos como declarações que identificam elementos HTML. Os seletores mais simples são as tags. Por exemplo, podemos aplicar um estilo a todas as tags <p> aplicando uma regra ao seletor “p” (como demonstrado anteriormente). Entretanto, os seletores vão muito mais além do que foi apresentado até agora. É possível combinar seletores, por exemplo, digamos que você deseja aplicar uma formatação à todas as tags <p> que estejam dentro de tags <div>. Para isso, basta utilizar o seletor “div p”.

Classes (class) e identificadores (id)

Para que possamos entender melhor como utilizar seletores é necessário apresentar dois conceitos que ainda não foram explicados neste livro: classes (class) e identificadores (id). Observe o exemplo a seguir:

<!-- Arquivo exemplo.html --> 
<link href="estilo.css" type="text/css" rel="stylesheet"> 

<p>Linha 1</p> 
<p class="cor_vermelha">Linha 2</p> 
<p id="linha_3" class="cor_vermelha">Linha 3</p> 
<p id="linha_4">Linha 4</p>

c4_s6.html

Agora observe o arquivo CSS referenciado:

/* Arquivo estilo.css */ 
p { color: blue; } 

.cor_vermelha { color: red; } 

#linha_3 { font-style: italic; } 
#linha_4 { font-weight:bold; }

c4_s7.css

Observe que a cor padrão de textos presentes na tag <p> é azul. Entretanto, todos aqueles que o atributo classe “cor_vermelha” possuem a cor vermelha e não azul. Além disso, os que possuem os identificadores “linha_3” e “linha_4” estão em itálico e negrito, respectivamente. Podemos concluir então que classes e identificadores aplicam estilos a um grupo específico de elementos HTML.

Identificadores devem ser utilizados para um único elemento. Enquanto isso, classes podem ser utilizadas para um grupo de elementos. Classes ainda podem ser utilizadas para tags diferentes. Classes são declaradas no arquivo CSS iniciando com o caractere ., enquanto identificadores devem iniciar com o caractere #. Não é necessário utilizar esses caracteres na página HTML.

Tipos de seletores

Além de classes e identificadores é possível combinar seletores para se obter formatações mais avançadas. Existem diversos tipos de combinações de seletores, abaixo uma tabela com combinações simples:

TiposRegraExemplo
Seletor_A Seletor_B { … }Seletores separados por espaço: aplica formatações a todos os seletores B que estejam dentro de seletores A./* <p> dentro de <div> */ div p { color: red; }
Seletor_A, Seletor_B { … }Seletores separados por vírgula: aplica uma mesma regra a dois seletores./* Mesma cor aplicadas as linhas 4 e 5 */ #linha_4, #linha_5 { color: red; }
Seletor.classe { … }Seletor e classe separados por ponto: aplica uma regra um seletor que possui uma classe específica./* Parágrafos que possuem a classe vermelho */ p.vermelho { color: red; }
Seletor:hover { … }Seletor separado de um tipo por dois pontos: aplica uma formatação a um seletor quando o mouse estiver sobreposto./* Links */ a:hover { color: black; }

Seletor universal

O seletor “*” é chamado de seletor universal. Ele aplica regras a todo documento. Um exemplo de uso comum do seletor universal é a remoção de margens aplicadas pelos navegadores.

* { margin: 0; padding: 0 }

c4_s8.css

Principais propriedades

Existem diversas propriedades CSS que podem ser aplicadas para formatação de elementos. No decorrer deste livro já apresentamos algumas. Não temos por objetivo apresentar todas elas (você provavelmente não será capaz de decorar todas, logo recomendamos buscá-las na internet sob demanda). Entretanto apresentamos abaixo alguns exemplos que poderão ser úteis.

Propriedades para textos

Muitas das propriedades listadas aqui já foram apresentadas anteriormente. Abaixo, apresentamos um compilado com as propriedades mais utilizadas para formatação de textos.

PropriedadeFunçãoExemplo
colorAplica cor ao texto. Recebe nome de cor em inglês (ex.: blue, red, black), código hexadecimal RGB (ex.: #000000), etc./* Cor branca */ color:#FFFFFF;
font-sizeAltera o tamanho do texto./* Fonte em tamanho grande */ font-size:40px;
font-styleAltera o estilo da fonte. Recebe os valores italic, normal ou oblique./* Itálico */ font-style:italic;
font-familyDefine a família da fonte utilizada. Nome da família. Ex.: arial, helvetica, times new roman./* Definindo fontes */ font-family: helvetica, arial;
font-weightRealça palavras de um texto (negrito). Recebe um valor que vai de 100 (mais fino) a 900 (mais grosso); ou bold (negrito)./* Negrito */ font-weight: bold;
text-alignDefine o alinhamento do texto. Pode ser a esquerda (left), direita (right), centralizado (center) ou justificado (justify)./* Centralizar */ font-align:center;
line-heightEspaçamento entre linhas./* Dobrando o espaço entre linhas */ line-height: 2;
text-decorationPermite a inserção de sublinhado. Overline: insere linha superior; line-through: insere linha no meio do texto; undeline: insere sublinhado; none: remove decoração./* Removendo sublinhado de links */ text-decoration: none;

Tamanho e margem

Propriedades de margens (internas e externas) são mais comumente usadas em divs, entretanto podem aplicadas a outros elementos HTML, como por exemplo parágrafos. Tais propriedades recebem valores numéricos seguidos de uma unidade de medida, em geral, apresentados em pixels (ex.: 200px) ou porcentagem (ex. 50%). Nesse último caso, o tamanho final baseia-se no elemento pai. Pode também receber o valor auto (definido pelo valor máximo para o local onde o elemento está posicionado).

PropriedadeFunçãoExemplo
heightDefine a altura de elemento./* Altura */ height: 200px;
max-heightDefine a altura máxima. Usado em sites com design responsivo, caso a janela seja reajustada./* Altura máxima */ max-height: 300px;
min-heightDefine a altura mínima. Usado em sites com design responsivo, caso a janela seja reajustada./* Altura mínima */ min-height: 100px;
widthDefine a largura de um elemento./* Largura */ width: 800px;
max-widthDefine a largura máxima.  Usado em sites com design responsivo, caso a janela seja reajustada./* Largura máxima */ max-width: 1000px;
min-widthDefine a largura mínima. Usado em sites com design responsivo, caso a janela seja reajustada./* Largura mínima */ width: 800px;
marginDefine as margens externas. Quando recebe quatro valores correspondem a distância para topo (1º), lado direito (2º), rodapé (3º) e lado esquerdo (4º); três valores indicam (1º) topo, (2º) esquerda e direita, e (3º) rodapé; dois valores indicam distância para o (1º) topo e rodapé e (2º) lado direito e esquerdo; um valor é válido para todos os outros./* Margens superior, direita, inferior e esquerda */ margin: 5px 0 10px 0; /* Margens superior, lados e inferior */ margin: 5px 0 10px; /* Margens topo/rodapé e lados */ margin: 10px 0; /* Todas iguais */ margin: 10px;
margin-topMargem superior./* Margem superior */ margin-top: 10px;
margin-bottomMargem inferior./* Margem inferior */ margin-bottom: 10px;
margin-leftMargem esquerda./* Margem esquerda */ margin-left: 10px;
margin-rightMargem direita./* Margem direita */ margin-right: 10px;
paddingMargem interna. Mesmas regras aplicadas à margin são válidas./* Margens internas */ padding: 10px;
padding-topMargem interna superior./*Padding superior*/ padding-top: 10px;
padding-bottomMargem interna inferior./* Padding inferior*/ padding-bottom: 10px;
padding-leftMargem interna esquerda./* Padding esquerdo*/ padding-left: 10px;
padding-rightMargem interna direita./* Padding direito*/ padding-right: 10px;

Fundo

As propriedades que gerenciam os planos de fundo (background) permitem a inserção de cores ou imagens, que podem ser repetidas seguindo diversos padrões. Planos de fundo podem ser aplicados a divs, spans, tabelas e outros elementos. A propriedade genérica que gerencia os planos de fundo é a background, entretanto é mais comum utilizar outras versões específicas dessa propriedade.

PropriedadeFunçãoExemplo
background-colorInsere uma cor no background./* Cor azul */ background-color: #0000FF;
background-imageInsere uma imagem como background. Requer o endereço de uma imagem./* Imagem de fundo */ background-image: url(“imagem.jpg”);
background-repeatDefine se a imagem irá se repetir no background. Requer a propriedade background-image declarada anteriormente. Recebe os valores: repeat (repetição nos eixos x e y), no-repeat (sem repitção), repeat-x e repeat-y./* Impedir repetição */ background-repeat: no-repeat;  
background-positionDefine o posicionamento de uma imagem no background. Requer a propriedade  background-image declarada anteriormente. Recebe as distâncias x e y, ou as palavras-chave: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, top, right, bottom, left./* Margem para background */ background-position: 100px 200px;  
background-attachmentPermite a fixação ou rolagem de uma imagem no background. Requer a propriedade  background-image declarada anteriormente./* Imagem fixa */ background-attachment: fixed;

Anteriormente descrevemos que cores podem ser inseridas de acordo com seu nome em inglês ou baseados no código hexadecimal. Cores também podem ser inseridas baseado o código RGB, RGBA, HSL e HSLA.

CSS3

A versão 3 do CSS trouxe algumas novidades, como por exemplo: selecionar primeiro e último elemento; selecionar elementos pares ou ímpares; selecionar elementos específicos de um determinado grupo de elementos; gradiente em textos e elementos; bordas arredondadas; sombras em texto e elementos; manipulação de opacidade; controle de rotação; controle de perspectiva; animação; e estruturação independente da posição no código HTML.

Vídeo-aula 12. CSS3.

Gradiente

Gradiente, também conhecido como degradê (do francês dégradé), é efeito de transição de uma cor para outra. Em páginas HTML, esse efeito era anteriormente feito com imagens. Abaixo um exemplo de degradê horizontal da cor preta para a cor branca.

A propriedade responsável por esse efeito é background-image, usando a propriedade “-linear-gradient” que receberá duas cores como entrada. Para utilizá-la é necessário realizar algumas modificações no código, uma vez que cada navegador tem suas especificidades:

<style> 
#degrade{
    width:200px;
    height:200px;
     
    /* Firefox */
    background-image: -moz-linear-gradient(green, red);  

    /* Safari, Chrome  */
    background-image: -webkit-linear-gradient(green, red); 

    /* Opera  */
    background-image: -o-linear-gradient(green, red);
} 
</style>

c4_s9.html

O código acima aplica um efeito degradê vertical da cor verde para a cor vermelha. É recomendado utilizar variações de cores suaves ao aplicar gradiente (diferente do que foi aplicado anteriormente).

Bordas arredondadas

Bordas são definidas pela propriedade border, que recebe um valor em pixels, um tipo (doted, solid, etc.) e uma cor. CSS3 trouxe a possibilidade de inserir bordas arredondadas através da propriedade border-radius.

No exemplo anterior vamos inserir uma borda sólida e depois aplicar a propriedade de arredondamento de bordas.

<style> 
#degrade{
     width:200px;
     height:200px; 

     /* Firefox */
     background-image: -moz-linear-gradient(green, red); 
     
     /* Safari, Chrome  */
     background-image: -webkit-linear-gradient(green, red); 

     /* Opera  */
     background-image: -o-linear-gradient(green, red);
     border: 10px solid black;
     border-radius: 40px;
} 
</style>

<div id="degrade"></div>

c4_s10.html

Sombras

Sombras podem ser aplicadas tanto em divs (box-shadow) quanto em textos (text-shadow). A propriedade box-shadow recebe como valores a distância de sombra horizontal, sombra vertical, a distância de desfoque e uma cor.

<style> 
 #degrade{     
   width:200px;     
   height:200px;     
   background-image: -moz-linear-gradient(green, red);    

   /* Firefox */     
   background-image: -webkit-linear-gradient(green, red);   

   /* Safari, Chrome  */     
   background-image: -o-linear-gradient(green, red);     

   /* Opera  */     
   border: 5px solid black;     
   border-radius: 40px;     
   box-shadow: 10px 10px 20px #333; 
 } 
</style> 

<div id="degrade"></div>

c4_s11.html

A propriedade text-shadow recebe os mesmos valores de entrada de box-shadow. No exemplo a seguir, demonstraremos a aplicação de sombras em um parágrafo.

Parte inferior do formulário 
<style> 
p {     
    text-shadow: 1px 1px 3px #333; 
} 
</style>   

<p>Aplicando sombras</p>

c4_s12.html

Transparências

CSS3 permite a inserção de transparências em backgrounds, por meio do padrão RGBA. O padrão de cores pode ser utilizado em diversas propriedades, como por exemplo, background-color. RGBA recebe quatro valores: os níveis de cores vermelho, verde e azul (valores de 0 a 255), e o valor de opacidade, que varia de 0 a 1 (sendo 0 transparente e 1 opaco).

background-color: rgba(Vermelho, Verde, Azul, Opacidade)

No exemplo a seguir demonstraremos duas divs se sobrepondo. Vamos colorir a div A de azul e a div B de verde. As duas divs terão opacidade de 50 % (valor alfa de 0.5).

<style>     
div{ 
  position: absolute; 
  width:200px; 
  height:200px; 
}     

#a{ background-color:rgba(0,0,255,0.5); }  
#b{ background-color:rgba(0,255,0,0.5); left:100px;} 
</style>   

<div id="a">     

  <p>Observe que metade da div A é sobreposta pela div B</p> 

</div>   

<div id="b"></div>

c4_s13.html

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

Capítulo 1
Introdução ao HTML

Capítulo 2
Fundamentos do HTML

Capítulo 3
Estrutura de páginas

Capítulo 4
Folhas de Estilo em Cascata (CSS)

Capítulo 5
Bootstrap

Capítulo 6
Iniciando a construção de um Website

Capítulo 7
Introdução ao PHP

Capítulo 8
Fundamentos do PHP

Capítulo 9
Transformando um Website em dinâmico

Capítulo 10
Introdução ao JavaScript

Capítulo 11
Fundamentos do JavaScript

Capítulo 12
jQuery

Capítulo 13
Bootstrap JavaScript

Capítulo 14
D3.js

Capítulo 15
3Dmol

Capítulo 16
Projeto Final

Epílogo
Referências Bibliográficas

Cite:

MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.

Uma resposta em “Folhas de estilo em cascata (CSS)”