Wikia

Wiki Community

Comentários8

Introdução ao CSS

Cordg 5 de Fevereiro de 2015 Blogue do utilizador: Cordg
O CSS.png

Às vezes é um terror ver isso, mas com este blogue de utilizador não haverá medo :)

Oi, wikianos!

Meu nome é @cordgw, e eu vim para dar um guia básico ao CSS.

Que é o CSS?

É algo que sempre falam os utilizadores, e as respostas não resolver nossas dúvidas.

  • Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Ele consiste de "regras" que são dadas para os elementos de uma página (blocos, ficheiros, parágrafos) para obter o estilo.

Ter em mente:

Regras

Cada regra ou conjunto de regras consiste de um ou mais seletores e um bloco de declaração.

.wikiheader {
    background: #FFF;
}
  • Seletor: Os seletores são usados para declarar a quais elementos de marcação um estilo se aplica.
  • Propriedade: Basicamente seria mudar o estilo (borda, sombreamento, margen, fundo, cor do texto...)
  • Valor: É a maneira que vai levar o selector.

O formato de uma regra é a seguinte:

seletor {
    propriedade: valor;
}

Seletores

Como você pode ver, o seletor inclui o estilo que lhe é aplicável. Vejamos um exemplo:

  • Eu tenho muitas predefinições no meu Wikia e quero fazer que todos têm o mesmo estilo.
  • O estilo, que tem um fundo verde, borda preta e bordas arredondadas.

Para isso, cada predefinição que tem de atribuir algo a ter em comum. Aqui é onde os seletores entram em jogo:

  • Elemento: É o objecto em si, por exemplo, o elemento de imagem é "img", a ligação "a", que de um bloco: "div". Simplesmente denominada de elemento para definir seu estilo.
  • Classe (class): As classes são usadas para definir um grupo de elementos para dar-lhes o mesmo estilo. Exemplo: A coluna da direita tem diferentes "blocos" no mesmo estilo, porque levam a classe "module". Sempre comece com um ponto.
  • ID: Ele define um único elemento da página, que não podem ter dois elementos com o mesmo ID. Ele está sempre com o prefixo #

Há muitos mais seletores, mas este é o mais básico e essencial. Em síntese:

CSSestilo através das regras formadas pela propiedade, valor e seletor. O seletor pode ser elemento ou classe ID.

CSS em Wikia...

Para isso, vamos dar uma classe chamada "bobby", que está sendo estruturado como este:

<div class="bobby">Blablabla</div>

Que se parece com isso:

Blablabla

Por quê? Porque não da qualquer estilo. Tecnicamente, seria algo como isto:

.bobby {
}

Como faço para dar os estilos?

Existem muitas propriedades diferentes, cada um com uma função diferente (há mesmo navegadores que possuem propriedades que outros não). Vamos nos concentrar no que precisamos:

O que eu quero Propiedade
Fundo background
Borda boder
Bordas arredondadas border-radius

Que eu faço?

  • Fundo verde: background (propriedade), verde (valor, verde).
  • Borda preta: border (propriedade), tamanho da borda (2 pixels, 5 pixels...), tipo de borda (sólido, pontilhado...), preto (valor, preto).
  • Borda arredondada: border-radius, tamanho de arredondamento (2 pixels, 10 pixels...)
.bobby {
    background:green;
    border:2px solid black;
    border-radius:10px;
}

Seria parecido com ...

Blablabla

Nós também podemos dar-lhe uma cor de texto branco e sarjeta por isso não é tão perto da borda:

  • Margem interno: preenchimento, espaço (5 pixels, 10 pixels).
  • Cor do texto: color, nome da cor/código
.bobby {
    background:green;
    border:2px solid black;
    border-radius:10px;
    padding:10px;
    color:white;
}
<div class="bobby">Blablabla</div>

Blablabla

Assim, o estilo se aplica a todas as predefinições que possuem a classe bobby.


Se você tiver dúvidas ou sugestões, problemas ou idéias, não hesite em comentar neste blog de usuário.

Ao redor da rede Wikia

Wikia aleatória