Comentarios – Formatação – Espaçamento

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

O CSS é flexível com quebras de linha e espaçamentos, tanto que você pode escrever tudo em uma unica linha se você quiser, mas como convenção para que seja mais legível e fácil de dar manutenção utilizamos o padrão.

seletor {
    propriedade: valor;
    propriedade: valor;
}

Esse padrão pode ter algumas variações de projeto para projeto, o importante é você definir um padrão e seguir ele.

além disso podemos adicionar comentarios no noss CSS para adicionar alguma informação extra utilizando a sintaxe

/* escrevendo meu comentarios */

Exercício 1: Organização de Código CSS

Dada a seguinte estrutura HTML:

HTML (index.html):

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <h1>Meu Site</h1>
    <p>Esta é a página inicial do meu site.</p>
</body>
</html>

Você deve criar um arquivo CSS (estilos.css) e organizar as propriedades CSS de acordo com um padrão de quebras de linha e espaçamento para tornar o código mais legível.

Exercício 2: Adição de Comentários no CSS

Dado o seguinte código CSS, adicione comentários para explicar o propósito de cada seletor e regra:

CSS (estilos.css):

/* Estilos para o cabeçalho (h1) */
h1 {
    font-size: 24px;
    color: #333;
    text-align: center;
}

/* Estilos para os parágrafos (p) */
p {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Comentário de seção separando as regras para links (a) */
a {
    text-decoration: none;
    color: #0077b6;
}

/* Estilos para links quando estão em estado de foco (hover) */
a:hover {
    text-decoration: underline;
    color: #005f8b;
}

Nos exercícios, crie um arquivo CSS, organize as propriedades CSS de acordo com um padrão de formatação e adicione comentários explicativos para cada seletor e regra CSS. Isso ajudará você a praticar a formatação adequada do código CSS e a adição de comentários para melhorar a manutenção e a legibilidade.

Curso de CSS 3

Participantes 867

Comentarios – Formatação – Espaçamento

Roger.Santos 03/01/2023

Exercício 1: Organização de Código CSS

Exercício 2: Adição de Comentários no CSS