CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Sintaxe

Um CSS é composto por regras de estilo que são interpretadas pelo navegador e, em seguida, aplicadas aos elementos correspondentes em seu documento. Uma regra de estilo é composta por três partes:

Seletor – um seletor é uma tag HTML na qual um estilo será aplicado. Pode ser qualquer tag como <h1> ou <table> etc.
Propriedade – uma propriedade é um tipo de atributo da tag HTML. Simplificando, todos os atributos HTML são convertidos em propriedades CSS. Eles podem ser coloridos, bordados, etc.
Valor – os valores são atribuídos às propriedades. Por exemplo, a propriedade de cor pode ter o valor vermelho ou # F1F1F1 etc.

Os Tipos de Seletores

Este é o mesmo seletor que vimos acima. Novamente, mais um exemplo para dar uma cor a todos os títulos de nível 1

h1 {
   color: #36CFFF; 
}

Seletores Universais

Em vez de selecionar elementos de um tipo específico, o seletor universal simplesmente corresponde ao nome de qualquer tipo de elemento:

* { 
   color: #000000; 
}

Essa regra renderiza o conteúdo de cada elemento em nosso documento em preto.

Os Seletores Descendentes

Suponha que você queira aplicar uma regra de estilo a um elemento específico apenas quando ele estiver dentro de um elemento específico. Conforme fornecido no exemplo a seguir, a regra de estilo se aplicará ao elemento <em> apenas quando ele estiver dentro da tag <ul>.

ul em {
   color: #000000; 
}

Os seletores de classes

Você pode definir regras de estilo com base no atributo de classe dos elementos. Todos os elementos que possuem essa classe serão formatados de acordo com a regra definida.

.black {
   color: #000000; 
}

Essa regra renderiza o conteúdo em preto para cada elemento com o atributo de classe definido como preto em nosso documento. Você pode torná-lo um pouco mais específico. Por exemplo:

h1.black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com o atributo de classe definido como preto.

Você pode aplicar mais de um seletor de classe a determinado elemento. Considere o seguinte exemplo:

<p class = “center bold”> Este paragrafo será estilizado pela classes center e bold. </p>

Os seletores de ID

Você pode definir regras de estilo com base no atributo id dos elementos. Todos os elementos com esse id serão formatados de acordo com a regra definida.

#black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto para cada elemento com o atributo id definido como preto em nosso documento. Você pode torná-lo um pouco mais específico. Por exemplo:

h1#black {
   color: #000000; 
}

Esta regra renderiza o conteúdo em preto apenas para elementos <h1> com o atributo id definido como preto.

O verdadeiro poder dos seletores de id é quando eles são usados como base para seletores descendentes, por exemplo:

#black h2 {
   color: #000000; 
}

Neste exemplo, todos os títulos de nível 2 serão exibidos em preto, quando esses títulos ficarão com as tags com o atributo id definido como preto.

Os Seletores Filhos

Você viu os seletores descendentes. Existe mais um tipo de seletor, que é muito semelhante aos descendentes, mas tem funcionalidades diferentes. Considere o seguinte exemplo:

body > p {
   color: #000000; 
}

Esta regra renderizará todos os parágrafos em preto se eles forem filhos diretos do elemento <body>. Outros parágrafos colocados dentro de outros elementos como <div> ou <td> não teriam qualquer efeito nesta regra.

Os Seletores de Atributos

Você também pode aplicar estilos a elementos HTML com atributos específicos. A regra de estilo abaixo irá corresponder a todos os elementos de entrada tendo um atributo de tipo com um valor de texto:

input[type = "text"] {
   color: #000000; 
}

A vantagem desse método é que o elemento <input type = “submit” /> não é afetado e a cor é aplicada apenas aos campos de texto desejados.

Existem as seguintes regras aplicadas ao seletor de atributos.

p [lang] – Seleciona todos os elementos de parágrafo com um atributo lang.
p [lang = “fr”] – Seleciona todos os elementos de parágrafo cujo atributo lang tem um valor exatamente “fr”.
p [lang ~ = “fr”] – Seleciona todos os elementos de parágrafo cujo atributo lang contém a palavra “fr”.
p [lang | = “en”] – Seleciona todos os elementos de parágrafo cujo atributo lang contém valores que são exatamente “en” ou começam com “en-“.

Regras de múltiplos estilos

Você pode precisar definir várias regras de estilo para um único elemento. Você pode definir essas regras para combinar várias propriedades e valores correspondentes em um único bloco, conforme definido no exemplo a seguir:

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Aqui, todos os pares de propriedades e valores são separados por ponto e vírgula (;). Você pode mantê-los em uma única linha ou em várias linhas. Para melhor legibilidade, nós os mantemos em linhas separadas.

Por um tempo, não se preocupe com as propriedades mencionadas no bloco acima. Essas propriedades serão explicadas nos próximos capítulos e você pode encontrar detalhes completos sobre as propriedades em Referências CSS

Seletores de agrupamento

Você pode aplicar um estilo a vários seletores, se desejar. Apenas separe os seletores com uma vírgula, conforme mostrado no exemplo a seguir:

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Esta regra de definição de estilo também será aplicável aos elementos h1, h2 e h3. A ordem da lista é irrelevante. Todos os elementos no seletor terão as declarações correspondentes aplicadas a eles.

Você pode combinar os vários seletores de id como mostrado abaixo:

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

Anterior CSS – Introdução

Próximo CSS – Unidades de medida

CSS - Fundamentos Básicos