fieldset é uma propriedade CSS
Soluções para a tarefa
Resposta:
A linguagem CSS é simples de ser aprendida, mas leva tempo para ser dominada. Nas próximas lições iremos ver os principais conceitos desta linguagem, conhecimento necessário para a construção de websites eficientes.
Para começar, vamos ver como funcionam as regras, classes, ids, seletores e o funcionamento da cascata CSS.
REGRAS
Para utilizarmos estilos CSS em um elemento, fazemos uso das regras CSS. Uma regra é escrita como o exemplo abaixo:
body {
background-color: white;
}
No exemplo acima, definimos como cor de fundo da tag body a cor branca. Uma regra é feita dos seguintes componentes:
Seletor(es): um dos mais poderosos aspectos CSS, permite que selecionemos qualquer elemento na página. No exemplo acima, estamos selecionando a tag body.
Chaves ("{" e "}"): contém as declarações CSS.
Declaração: cada declaração aplica um estilo específico para o elemento ou elementos selecionados. Uma declaração é composta de:
Propriedade: no exemplo acima, background-color. Sempre a propriedade é seguida de dois pontos ":". Há várias outras propriedades que iremos estudar.
Valor: no exemplo acima, white, o que aplica um fundo branco para a tag body, ou seja, a página inteira.
Todas as declarações são terminadas por ponto-e-vírgula ";".
CLASSES E IDS
Para possibilitar uma organização melhor da página e da seleção de elementos por CSS, podemos utilizar classes e/ou ids para identificar tags.
Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é utilizada para identificar elementos estruturais da página.
Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr mais de uma classe em um elemento).
É perfeitamente possível fazer um site apenas com ids, apenas com classes, com uma combinação das duas, ou sem nenhuma das duas. Tudo irá depender do seu estilo de fazer o código das páginas. O importante é definir um padrão e segui-lo.
Por exemplo, vamos imaginar um site com três blocos de conteúdo que aparecem em todas as páginas do site:
<div>
Aqui vai o cabeçalho do site
</div>
<div>
Aqui vai o conteúdo do site
</div>
<div>
Aqui vai o rodapé do site
</div>
Como estes elementos sempre aparecem nas páginas e aparecem apenas uma vez em cada página, podemos utilizar uma id para cada um, através do atributo id, da seguinte forma:
<div id="cabecalho">
Aqui vai o cabeçalho do site
</div>
<div id="conteudo">
Aqui vai o conteúdo do site
</div>
<div id="rodape">
Aqui vai o rodapé do site
</div>
Este é um exemplo de aplicação de id.
Quanto a classes, podemos imaginar um site onde temos vários parágrafos de texto:
<p>
...
</p>
<p>
...
</p>
<p>
...
</p>
Se utilizarmos o seletor p para aplicar estilos, estes serão aplicados a todos os parágrafos. Se quisermos, por exemplo, destacar um ou mais parágrafos, podemos criar uma classe com o nome "destaque" e colocá-la apenas nos parágrafos que desejamos, através do atributo class como no código abaixo:
<p class="destaque">
...
</p>
<p>
...
</p>
<p class="destaque">
...
</p>
Desta forma, quando selecionarmos a classe "destaque" no CSS (veja próxima seção abaixo), estaremos aplicando os estilos apenas nos parágrafos onde a classe está aplicada. Outra vantagem é que podemos aplicar a classe "destaque" para outros tipos de elementos também, como links, entre outros. Classes são mais versáteis que ids e por isso muitos desenvolvedores utilizam apenas classes nos seus sites.
No nosso website do curso, utilizaremos uma mistura de ids e classes (ids para estrutura e classes para elementos reutilizáveis).
SELETORES
Muito do poder da linguagem CSS está nos seletores. Com os seletores, conseguimos escolher qualquer elemento (ou elementos) na página para aplicar estilos.
Vejamos primeiro os principais tipos de seletores:
Seletor de tipo: este é o tipo de seletor que utilizamos nos exemplos até agora. Com este seletor, selecionamos todas as tags de um mesmo tipo. Por exemplo, se digitamos a estaremos selecionando todas as tags a (links) da página e poderemos aplicar estilos a elas. Útil para estilos gerais, mas para maior especificidade utilizamos outros seletores.
Seletor descendente: com este seletor, podemos escolher um ou mais elementos que estão dentro de outro, ou seja, que são descendentes do elemento principal. Exemplo: p strong. Com isso, selecionamos apenas tags strong que estão dentro de parágrafos. Podemos selecionar com ainda mais especificidade, escrevendo mais elementos, como: div p strong a. Neste exemplo, selecionamos links que estão dentro de tags strong que estão dentro de parágrafos que estão dentro de tags div.
Seletor de classe: seleciona elementos com uma classe específica aplicada. Exemplo: .destaque seleciona todos os elementos com a classe "destaque".
Seletor de id: seleciona o elemento com a id especificada. Exemplo: #cabecalho irá selecionar o elemento com a id "cabecalho". Cada id é única e não pode ser repetida no mesmo documento