Aula 4

Pseudo-Classes

Pseudo-classe em CSS é um seletor que especifica um estado especial de um elemento.

Elas são utilizadas para selecionar elementos com base em características como interações do utilizador, estados de foco, visitas e relações com outros elementos.

São representadas por dois pontos ( : ) antes do nome da pseudo-classe.

/* Seleciona links quando o rato está sobre eles */
a:hover {
    color: blue;
}

/* Seleciona um elemento quando está a ser clicado */
button:active {
    background-color: #e0e0e0;
}

/* Seleciona um input quando está em foco */
input:focus {
    border: 2px solid #ff0000;
}

/*Seleciona o primeiro filho de um elemento */

li:first-child {
    font-weight: bold;
}

Box Model

Quando falamos do CSS Box Model, estamos a referir-nos à maneira de como o browser vê os elementos de HTML, como boxes/caixas.

Vamos visualizar:

A margin, border e padding são propriedades. Ou seja, são utilizadas para estilizar elementos de HTML.

Neste caso, a margin refere-se ao espaço entre dois elementos.

A border refere-se a uma borda à volta desse mesmo elemento, e por fim, o padding refere-se ao espaço entre o conteúdo de um elemento e as suas bordas.

Border

Podem ser definidos utilizando atributos, começando pelo border-style:

Ainda é possível também aplicar estilos mistos, sempre em sentido horário.

A propriedade “border-radius” permite associar um valor em px para arredondar os cantos dos limites.

Margin

Margin permite definir o espaço que vai desde o limite do elemento até ao elemento imediatamente colado (pode ser a própria página).

Padding

Padding aplica uma margem interna ao elemento, ou seja desde o limite até por exemplo ao texto que contém.

Margin e Padding

.margin {
    background-color: blue;
    border: 2px solid red;
    color: white;
    margin: 20px;
}

.padding {
    background-color: blue;
    border: 2px solid red;
    color: white;
    padding: 20px;
}