[TUTORIAL] Elaborar um Código CSS

O código CSS tem como funcção gerir o estilo da página, desde cores, fundos até posição de objetos, plano e transparência. Os sites possuem classes e, para elas podem ser atribuidas formatações que desejar, tornando seu site mais profissional e elegante.

Identificar a classe de um objeto e estruturá-la

1º - Aceder à página em que o objeto está;


2º - Exibir o código fonte da página:
Para que possamos obter a classe CSS, teremos de aceder ao código fonte da página, este mostrará quais são os códigos HTML que á compõe.

No menu superior do seu navegador deverá clicar em "Exibir", agora no menu que será mostrado, você deverá selecionar "Código fonte".


Caso preifra poderá carregar "Ctrl + U" mas, este atalho pode não ser o mesmo para todos os navegadores.



3º - Localizar a classe CSS:
Este ponto deve ser cuidadosamente lido pois, encontrar uma classe exige que tenha certa noção de HTML mas, isso não será necessário neste caso, já que mostraremos passo-á-passo como deve ser feito. Lembre-se também de que nem sempre conseguiremos obter sucesso com uma tentativa, em alguns casos são necessárias várias antes de que algo seja resultante. Caso não consiga poderá abrir um tópico com a sua dúvida.

• Localizar segmentos que estejam próximos à classe:

Deverá carregar "Ctrl +F" onde será aberta uma caixa de busca, no Internet será em um tipo de janela separada, já no Firefox ela será mostrada no rodapé da janela. Para fazer a busca pelo que precisamos, digite o fragmento inicial de um texto, o endereço de imagem... algo que esteja dentro do objeto que pretendemos localizar. Por exemplo:
Caso pretenda localizar a classe CSS da mensagem da home-page deste fórum, deverá digitar: "Bem-vindo!". Veja o que iremos encontrar:

<div class="panel introduction"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">Bem-vindo!</div><div class="mes-txt"><br><span style="float: left; margin-left: 10px; display: block; font-size: 0.8em;">
<strong>Antes de postar, siga as instruções :</strong><br>

Perceba que, nem tudo o que encontramos será o que iremos necessitar, mas será o ponto de partida para a nossa busca.

• Localizar á classe em sí:

Apartir do código que conseguimos encontrar, teremos de obter a classe. Geralmente podemos personalizar todos os tipos de tags, desde links até tags como div, marquee entre outras. Vejamos como poderemos encontrá-la, apartir do código utilizado de exemplo acima:

<div class="panel introduction"><div class="inner"><span class="corners-top"><span></span></span><div class="h3">Bem-vindo!</div><div>

Devemos estar atentos á dois tipos de segmentos, pois estes irão determinar a classe ou ID do objeto que desejados, são eles:

class="Classe"
id="ID"

Veja que, encontraremos várias classes cada um tem a função de personalizar uma das partes, teremos de localizar a que queremos. Para isso façamos uma eliminatória por testes, até que consigamos encontrar o que procuramos. Com a prática irá se tornar mais fácil reconhecê-las.

Após alguns testes, poderemos constatar que as classes que modificam o quadro da mensagem da homepage são estas:

<div class="panel introduction"

isso não é a classe em sí, somente o segmento onde a mesma se encontra. Vejamos que, a tag html utilizada é uma div. Para que possamos encontrá-la, basta fazer a leitura apartir da abertura "<" até o primeiro espaço. Por exemplo:

<div

Localizar a tag é fundamental, sendo que ela é necessária em alguns casos, em que a mesma classe modifca vários locais mas, estes possuem tags diferentes, sendo assim podemos fazer uma modificação em um local expecífico.

Finalmente iremos obter a classe, na grande maioria das vezes será o que está entre as áspas do parâmentro class ou do parâmetro ID, vejamos um exemplo de cada modo:

<div class="panel">
<select id="qjump">

Em alguns casos iremos encontrar mais de uma classe modificando uma mesma tag, neste cado elas serão separadas por um espaço, como acontece no caso da mensagem da homepage:

<div class="panel introduction"

Para modificar neste caso, poderá utilizar uma das duas classes, faça os testes e veja qual é a mais apropriada para a situação do que pretende personalizar. Neste caso a mais apropriada seria "introduction".

• Classes filhas:

Em determinadas situações, necessitamos personalizar um objeto que possui uma classe que não está somente presente no determinado local e sim em vários. Para resolver este tipo de problema podemos utilizar campos filhos, ou seja somente personalizar o campo que esteja dentro de outra classe, vejamos um exemplo de como ficaria o HTML e o código CSS:

<div

Para personalizar somente a classe "panel" que se encontra dentro da id "qjump" iremos precisar utilizar uma outra estrutura de códigos, veja como fica a classe, mais abaixo explicaremos como foi feito para obter este resultado:

div#qjump div.panel

Veja que, definimos a tag e, logo após definimos a classe ou o id. Para separar o campo "mestre" do campo "filho" temos de utilizar um espaço. Note também como foi feita a elaboração do código, veja este exemplo para que possa compreender melhor a explicação que será dada logo abaixo:

div.panel
select#qjump

Vermelho -> deve ser colocada a tag html, como já foi mostrado como identificá-la mais acima.
Laranja -> neste ponto temos de diferenciar se o que pretendemos modificar é uma ID ou uma classe e isso se faz por meio destes sinais:

• # -> Identifica uma ID;
  
• . -> Identifica uma classe;

Verde -> deve colocar o nome da classe ou ID, como já foi explicado o modo de localizar.

Caso deseje personalizar todas as tags que possuam a mesma classe ou ID, não é necessário colocar a tag no início do código, neste caso ficará:

.panel
#qjump

• Personalizar uma tag:

Do mesmo modo como podemos personalizar uma classe ou ID, também pdemos personalizar uma tag HTML, mas para esta tudo que for definido será para todos os locais onde a mesma aparece. Vejamos um exemplo de como ficaria com a tag "body":

body

Vermelho -> não é necessário muitas coisas, somente ncessita definir o nome da tag pelo qual deseja modificar.

• Classes normais com tags filhas:

Em alguns casos desejamos modificar tags mas, somente aquelas que estejam dentro de uma determinada classe. Para isso, do mesmo modo como podemos modificar os campos filhos com classes, também podemos fazer o mesmo através de tags, veja só:

div.navbar ul.navlinks li a

Perceba que, também podemos definir uma hierarquia, ou seja somente modifique o link que estiver dentro de uma lista e, que esta lista esteja no grupo "navlinks" que está dentro da tag "navbar"

Verde -> Classe normal, como já foi estudada e detalhada anteriormente, somente deverá definí-la, não é necessário nenhum tipo de modificações.
Laranja -> As tags devem ser colocadas aqui, sem a necessidade de nada para as indidicar, diferentemente das classes e IDs.


4º - Para finalizar esta parte, um exemplo de cada método:
Não se preocupe em entender a função das chaves pois explicaremos detalhadamente para que elas servem no próximo ponto. Pelo momento somente se procupe com a classe.

• Campos normais:
  

  .navbar {

  #page-header {

  div.navbar {

  div#page-header {

  
  
• Campos filhos:
  

  #page-header .navbar {

  #page-header {

  div.navbar div.h3 {

  div#page-header ul.navlinks {

  
  
• Tags:
  

  body {

  b {

  div {

  table {

  
  
• Campos filhos com o uso de tags:
  

  #submenu ul {

  ul.navlinks li a {

  table.ipbtable th {

  table.tfoot td {

---

© Power Pixel Fórum e -JusT

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Elaborar um código CSS