Skip to main content
10 de 10
removeu 1354 caracteres do conteúdo
Taisbevalle
  • 9,2mil
  • 6
  • 30
  • 62

CSS

No site do Maujor tem um tutorial sobre CSS muito bom, vou deixar aqui algumas partes relevantes.

A regra CSS tem sua própria sintaxe e define como o estilo será aplicado aos elementos do HTML:

seletor { propriedade: valor; }
  • seletor: é um elemento da marcação HTML identificado pelo seu nome (por exemplo: <p>, <h1>, <form>), pelo nome de uma classe aplicada ao elemento da marcação HTML (por exemplo: .topo, .principal, .menu), pelo nome de um identificador ID aplicado ao elemento da marcação HTML (por exemplo: #tudo, #auxiliar, #rodape) ou por qualquer outro identificador CSS de elementos ou trechos da marcação HTML, genericamente denominados de seletores CSS.
  • propriedade: é a propriedade do elemento HTML ao qual será aplicada a estilização definida no valor (por exemplo: tamanho da fonte, cor do texto, altura do elemento).
  • valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, altura igual a 300px)

Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e o valor separados por dois pontos e colocados entre chaves { }.

É possível escrever mais de uma declaração CSS em uma regra com o objetivo de estilizar-se várias propriedades de um mesmo seletor. Neste caso deve-se usar ponto-e-vírgula (;) para separar as declarações CSS constantes da regra CSS. O ponto-e-vírgula é facultativo quando a regra CSSfor constituída de uma só declaração CSSe também facultativo após a última declaração CSSquando houver mais de uma declaração CSS.


**Agrupamento de Seletores**

A regra será aplicada a mais de um seletor, basta utilizar a vírgula(,).

h1, h2, p, .box {
    color: green;
}

**Seletor classe** Você pode criar uma regra para uma classe específica e colocá-la no HTML como o atributo `class`. No seu código CSS, utilize o nome da sua classe precedido de ponto(`.`):
elemento.nomedaclasse { 
    propriedade: valor;
}

Seletor ID

A grande diferença entre o seletor id e o de classe é a unicidade. Ou seja, um seletor id de determinado nome só pode ser definido a um e somente um elemento HTML dentro do documento.

É a mesma ideia da classe, porém o id é precedido do # ("cerquilha"/"tralha"/"jogo-da-velha"):

#meuID {
    propriedade: valor;
}

Inserindo comentários nas CSS

Comentários em CSS começam com o sinal /* e termina com */:

/* este é um comentário*/
p { 
font-size: 14px;               /* este é outro comentário*/
    color: #000;
    font-family: Arial, Serif;
}

**No seu exemplo**:
  • .e1{}: estilo será aplicado na classe .e1
  • #e1{}: estilo será aplicado no id #e1
  • e1 e2{}: o estilo será aplicado dentro do elemento e2 que está dentro de e1, vou te dar um exemplo:
    • Suponha que e1 seja a table e e2 a td, que tem a classe padrao:

      .table td.padrao { font-size: 10pt; color: red; }

    • Todas as td, que tiverem a classe padrao, da table terão tamanho da fonte 10pt e cor vermelha.


  • e1,e2{}: aplica o estilo nos dois.

  • e1 *{}: aplica o estilo para todos os elementos dentro de e1,

  • e1{}: aplica o estilo no e1, um exemplo seria o body:

    body { min-width: 650px; }


  • .e1 a:link{} = olha o exemplo, ele "muda" o estilo de um link quando você passa o mouse sobre ele:

    a:hover { background-color: yellow; }


Referência:
Taisbevalle
  • 9,2mil
  • 6
  • 30
  • 62