Skip to main content
6 de 10
adicionou 4 caracteres ao conteúdo
Taisbevalle
  • 9,2mil
  • 6
  • 30
  • 62

CSS

Uma regra CSS segue uma sintaxe própria que define como será aplicado estilo a um ou mais elementos da marcação HTML de uma página. A regra, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado a seguir:

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)

Ao conjunto propriedade: valor denominamos declaração CSS.

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.

É recomendável que se use, sempre, o ponto-e-vírgula após cada declaração CSS, pois no caso de futuramente ter que se acrescentar mais declarações na regra CSS não se corra o risco de esquecer eventual ponto-e-vírgula inicialmente omitido.


**Agrupamento de Seletores**

Agrupando seletores pode-se fazer com que uma regra CSS seja aplicada a mais de um seletor. Para agrupar seletores separe-os com uma vírgula. No exemplo abaixo agrupamos todos o elementos cabeçalho de níveis 1 e 2 os parágrafos e o elemento com a classe .box. A cor do texto de todos eles será verde.

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

**Seletor classe**

Mas você não está restrito somente aos elementos HTML (tags) para aplicar regras de estilo.

Você pode "inventar" um nome e defini-lo como valor a ser atribuído ao atributo class (classe) do elemento HTML. O nome "inventado" será o seletor para aplicar declarações CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML, usando classes diferentes para cada um deles.

A sintaxe para o seletor classe é mostrada a seguir. Elemento HTML mais um nome qualquer que você "inventa" precedido de . (ponto):

elemento.nomedaclasse { 
    propriedade: valor;
}

Seletor ID

O seletor ID difere do seletor classe, por ser ÚNICO. Um seletor ID de determinado nome só pode ser definido a UM e somente UM elemento HTML dentro do documento.

Você pode "inventar" um nome e com ele criar um ID que será o seletor para definir a regra CSS. Um determinado ID só pode ser aplicado a UM elemento HTML.

A sintaxe para o seletor ID é mostrada a seguir. Um nome qualquer que você "inventa" precedido do sinal # ("cerquilha"/"tralha"/"jogo-da-velha"):

#meuID {
    propriedade: valor;
}

Inserindo comentários nas CSS

Você pode inserir comentários nas CSS para explicar seu código, e principalmente ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do código. Um comentário nas CSS começa 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