Introdução
Neste laboratório, você aprenderá como definir e manipular as cores das bordas usando CSS, explorando diversas técnicas para estilizar elementos HTML. O laboratório guia você através da criação de um arquivo HTML, aplicando estilos de borda inline, definindo cores de borda individuais e experimentando diferentes variações de cores em vários elementos. Ao seguir as instruções passo a passo, você adquirirá habilidades práticas no uso de CSS para aprimorar a aparência visual dos componentes da página web através da estilização de bordas.
O laboratório oferece uma abordagem prática para entender as propriedades de cor da borda, começando com uma estrutura HTML básica e adicionando progressivamente técnicas de estilização mais complexas. Você descobrirá como aplicar cores de borda diretamente aos elementos, personalizar lados individuais da borda e criar designs visualmente interessantes usando diferentes abordagens de cores.
Criar Arquivo HTML e Estrutura Básica
Nesta etapa, você aprenderá como criar um arquivo HTML básico que servirá como base para explorar as cores das bordas CSS. Usaremos o WebIDE para criar e configurar nossa estrutura HTML inicial.
Primeiramente, navegue até o diretório ~/project no WebIDE. Crie um novo arquivo chamado index.html clicando com o botão direito no explorador de arquivos e selecionando "Novo Arquivo".
Aqui está a estrutura HTML básica que você criará:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border Colors Example</title>
</head>
<body>
<div class="container">
<h1>CSS Border Colors Exploration</h1>
<p>This is our first HTML element to style with borders.</p>
</div>
</body>
</html>
Vamos detalhar os componentes-chave desta estrutura HTML:
<!DOCTYPE html>declara este como um documento HTML5- A tag
<html>é o elemento raiz da página HTML <head>contém informações meta sobre o documento<body>contém o conteúdo visível da página- Adicionamos uma
<div>container com um título e um parágrafo para fornecer elementos que estilizarão em etapas posteriores
Após criar o arquivo, salve-o pressionando Ctrl+S ou usando o ícone de salvar no WebIDE.
Exemplo de saída ao visualizar o conteúdo do arquivo:
$ cat ~/project/index.html
<!DOCTYPE html>
html lang="en">
...
Esta estrutura HTML simples fornece a base para nossa exploração de cores de borda CSS nas próximas etapas.
Adicionar Estilo de Borda Inline
Nesta etapa, você aprenderá como adicionar estilos de borda inline diretamente aos elementos HTML usando o atributo style. Estilos inline são uma maneira rápida de aplicar propriedades CSS diretamente a elementos individuais.
Abra o arquivo index.html no WebIDE que você criou na etapa anterior. Modifique o HTML para incluir estilos de borda inline para diferentes elementos:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border Colors Example</title>
</head>
<body>
<div class="container">
<h1 style="border: 2px solid black;">CSS Border Colors Exploration</h1>
<p style="border: 3px dotted blue;">
This is our first HTML element with an inline border style.
</p>
<div style="border: 4px dashed red; padding: 10px;">
This div has a different border style and width.
</div>
</div>
</body>
</html>
Vamos detalhar os estilos de borda inline:
border: 2px solid black;cria uma borda preta sólida de 2 pixels de larguraborder: 3px dotted blue;cria uma borda azul pontilhada de 3 pixels de larguraborder: 4px dashed red;cria uma borda vermelha tracejada de 4 pixels de largura
A propriedade border é uma abreviação que combina:
- Largura da borda (em pixels)
- Estilo da borda (solid, dotted, dashed, etc.)
- Cor da borda
Exemplo de saída ao visualizar o conteúdo do arquivo:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1 style="border: 2px solid black;">...
Salve o arquivo pressionando Ctrl+S ou usando o ícone de salvar no WebIDE.
Definir Cores Individuais de Borda
Nesta etapa, você aprenderá como definir cores de borda individuais para diferentes lados de um elemento HTML usando CSS. Essa técnica permite um estilo de borda mais preciso e criativo.
Abra o arquivo index.html no WebIDE e atualize-o com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Border Colors Example</title>
<style>
.individual-borders {
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: purple;
border-style: solid;
border-width: 4px;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Individual Border Colors</h1>
<div class="individual-borders">
This div has different colors for each border side.
</div>
<p>Notice how each border side has a unique color!</p>
</div>
</body>
</html>
Propriedades CSS-chave para cores de borda individuais:
border-top-color: Define a cor da borda superiorborder-right-color: Define a cor da borda direitaborder-bottom-color: Define a cor da borda inferiorborder-left-color: Define a cor da borda esquerda
Também adicionamos:
border-style: solid;para garantir que as bordas sejam visíveisborder-width: 4px;para tornar as bordas mais proeminentes
Exemplo de saída ao visualizar o conteúdo do arquivo:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="individual-borders">...
Salve o arquivo pressionando Ctrl+S ou usando o ícone de salvar no WebIDE.
Experimentar com Variações de Cor de Borda
Nesta etapa, você explorará diferentes maneiras de especificar cores de borda usando vários formatos e técnicas de cores CSS. Abra o arquivo index.html no WebIDE e atualize-o com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Color Variations</title>
<style>
.color-demo {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
}
.named-color {
border: 5px solid tomato;
}
.hex-color {
border: 5px solid #4caf50;
}
.rgb-color {
border: 5px solid rgb(33, 150, 243);
}
.rgba-color {
border: 5px solid rgba(255, 152, 0, 0.7);
}
.hsl-color {
border: 5px solid hsl(120, 100%, 25%);
}
</style>
</head>
<body>
<div class="container">
<h1>Border Color Variations</h1>
<div class="color-demo named-color">Named Color (Tomato)</div>
<div class="color-demo hex-color">Hex Color (#4CAF50)</div>
<div class="color-demo rgb-color">RGB Color (Blue)</div>
<div class="color-demo rgba-color">RGBA Color (Transparent Orange)</div>
<div class="color-demo hsl-color">HSL Color (Dark Green)</div>
</div>
</body>
</html>
Métodos de Especificação de Cor:
- Cores Nomeadas (Named Colors): Use nomes de cores predefinidos como
tomato - Cores Hexadecimais (Hex Colors): Use códigos hexadecimais de 6 dígitos (por exemplo,
#4CAF50) - Cores RGB: Use o formato
rgb(vermelho, verde, azul) - Cores RGBA: Adicione transparência alfa com
rgba() - Cores HSL: Use o formato
hsl(matiz, saturação, luminosidade)
Exemplo de saída ao visualizar o conteúdo do arquivo:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="color-demo named-color">...
Salve o arquivo pressionando Ctrl+S ou usando o ícone de salvar no WebIDE.
Aplicar Cor de Borda a Diferentes Elementos
Nesta etapa, você aprenderá como aplicar cores de borda a diferentes elementos HTML, demonstrando como o CSS pode estilizar vários elementos de forma única. Abra o arquivo index.html no WebIDE e atualize-o com o seguinte código:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Border Colors on Different Elements</title>
<style>
/* Heading styles */
h1 {
border: 3px solid #2196f3;
padding: 10px;
text-align: center;
}
/* Paragraph styles */
p {
border: 2px dashed green;
padding: 15px;
margin: 10px 0;
}
/* Button styles */
.custom-button {
border: 4px dotted purple;
background-color: #f0f0f0;
padding: 10px 20px;
display: inline-block;
margin: 10px;
}
/* Image styles */
.bordered-image {
border: 5px solid orange;
max-width: 300px;
}
/* List styles */
ul {
border: 3px solid red;
padding: 20px;
}
li {
border-bottom: 1px solid #ccc;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Styling Different Elements</h1>
<p>This paragraph has a green dashed border.</p>
<button class="custom-button">Bordered Button</button>
<img
class="bordered-image"
src="https://via.placeholder.com/300"
alt="Placeholder Image"
/>
<ul>
<li>List item with bottom border</li>
<li>Another list item</li>
<li>Last list item</li>
</ul>
</div>
</body>
</html>
Pontos Chave:
- Diferentes elementos podem ter estilos de borda únicos
- Use seletores CSS para direcionar tipos de elementos específicos
- Combine propriedades de borda como cor, estilo e largura
- Imagem de espaço reservado (placeholder) usada para demonstração
Exemplo de saída ao visualizar o conteúdo do arquivo:
$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1>Styling Different Elements</h1>
...
Salve o arquivo pressionando Ctrl+S ou usando o ícone de salvar no WebIDE.
Resumo
Neste laboratório, os participantes aprendem os fundamentos da definição de cores de borda em CSS através de uma abordagem passo a passo. Começando com a criação de uma estrutura básica de arquivo HTML, os alunos estabelecem uma base para explorar as técnicas de estilização de bordas em CSS. As etapas iniciais se concentram em entender como aplicar estilos de borda inline diretamente aos elementos HTML usando o atributo style, demonstrando um método rápido para adicionar bordas visuais aos componentes da página web.
O laboratório progride ensinando como definir cores de borda individuais, experimentar diferentes variações de cores e aplicar cores de borda a vários elementos HTML. Ao trabalhar com exemplos práticos, os participantes ganham experiência prática na manipulação de estilos de borda, compreendendo como o CSS pode ser usado para aprimorar a apresentação visual das páginas web através do controle preciso da cor da borda.
