xTibia

.com
LO
css

Aula 5 - Introdução ao CSS, como utilizar estilos

Por Lordfire, 08 de fev. de 2013 em Tutoriais de Websites

escola de website
introdução
estilos
otserv
tibia
13
2.4k
LordfireL
08 de fevereiro de 2013 às 14:25

E aí galera, finalmente vamos começar a deixar tudo mais bonito usando CSS! Mas não esqueça de acompanhar todas as aulas!

 

Como vocês já devem saber, o CSS é uma linguagem que serve para adicionar estilização às nossas páginas. Isso é feito por meio de uma folha de estilos, que é um conjunto de seletores, propriedades e valores. Para usar o CSS, temos três formas: em um arquivo externo, no cabeçalho e inline.

 

Para usar um arquivo externo com css, dentro das tags <head> você deve adicionar o seguinte código:

<link rel="stylesheet" href="arquivo.css" />

Lembrando de mudar "arquivo.css" para o nome do arquivo que você for usar. Eu costumo usar "style.css" ou com o mesmo nome da página, se necessário. O conteúdo desse arquivo deve ser apenas o código CSS, sem nada de HTML.

 

Já para usar no cabeçalho dentro do head, devemos usar a tag <style> e dentro dela, o código CSS:

<head>
   <style>
    p {
	    color: blue;
	    font-weight: bold;
    }
   </style>
</head>

 

Também podemos usar estilos "inline", isto é, no meio do código HTML para aplicar estilos a um único elemento, usando o atributo style que já usamos em aulas anteriores. Por exemplo:

<p style="color: blue; font-weight: bold;">Texto azul e negrito</p>

 

Obviamente, é possível misturar todos os três tipos. É bastante comum uma página que tem um layout padrão para todas as páginas (com arquivo externo), algumas páginas terem elementos que precisam de estilos específicos (com CSS no cabeçalho) e um ou outro elemento que tenha seu próprio estilo (usando inline). Tudo vai da necessidade e facilidade pra alterar depois.

 

Seletores

Um seletor nada mais é do que o elemento que desejamos aplicar o estilo. Existem três tipos de seletores: por tipo, por id e por class.

 

Seletor por tipo

Quando usamos um seletor por tipo, nós aplicamos um estilo a todos os elementos daquele tipo. Por exemplo:

p {
   color: blue;
   font-weight: bold;
}

Esse código CSS fará com que todos os elementos <p> tenham o texto azul (color: blue) e negrito (font-weight: bold). Em uma página com mais de um, todos eles terão o mesmo estilo.

 

Seletor por id

Usando um seletor por id, nós aplicamos estilo a um único elemento identificado pelo atributo id específico. Para isso, devemos usar um hash (o jogo da velha: "#") na frente do id do elemento:

<head>
   <style>
    p#azul {
	    color: blue;
	    font-weight: bold;
    }
   </style>
</head>
(...)
<p id="azul">Texto azul e negrito</p>
<p>Texto normal sem estilo</p>

Também é possível omitir o tipo do elemento:

#azul {
   color: blue;
   font-weight: bold;
}

Produzindo um texto azul e negrito. Tome cuidado: o id foi feito para identificar um elemento específico, portanto, evite usar o mesmo id para elementos diferentes. Use classes, que serão ensinadas agora:

 

Seletor por class

Um seletor por classes aplica estilo por todos os elementos identificados por um atributo "class". Um seletor para uma classe específica deve ter um ponto (".") na frente:

<head>
   <style>
    p.azul {
	    color: blue;
	    font-weight: bold;
    }
   </style>
</head>
(...)
<p class="azul">Texto azul e negrito</p>
<p id="azul">Texto normal sem estilo</p>

Note que também não é necessário usar o elemento na frente. Mas, neste caso, podem existir elementos diferentes com a mesma classe, e podemos trabalhar com isso:

<head>
   <style>
    .azul {
	    color: blue;
    }

    a.azul {
	    background-color: black;
    }

    p.azul {
	    font-weight: bold;
    }
   </style>
</head>
(...)
<a class="azul" href="http://xtibia.com">XTibia!</a>
<p class="azul">Texto azul e negrito</p>

Limitando a classe para um elemento específico, vamos ter tanto o link quanto o parágrafo em azul, porém apenas o link terá fundo preto e apenas o parágrafo estará negrito.

 

Você pode aplicar múltiplas classes em um mesmo elemento usando espaços:

<p class="azul fundo_vermelho center">Texto azul e negrito</p>

 

Uma classe ou id nunca deve começar por um número! Só o esquisito Internet Explorer aceita isso, hahahaha

 

Podemos trabalhar com os 3 seletores juntos, inclusive usando inline:

<style>
   p {
    color: blue;
   }

   a.azul {
    background-color: black;
   }   

   #azul {
    font-weight: bold;
   }
</style>
(...)
<p id="azul" class="azul" style="text-align: center;">Texto azul, com fundo preto e negrito, centralizado</p>

 

Mas não esqueça, o CSS tem uma ordem específica para ser aplicado:

  1. Arquivos externos, de cima pra baixo
  2. Tag style, de cima pra baixo
  3. Atributo style (inline)

 

Portanto, não importa o que o arquivo externo aplique ou as tags no cabeçalho, se houver alguma tag inline, ela vai substituir (mas nunca apagar: apenas soma).

 

Aqui há uma lista com todas as propriedades disponíveis:

http://www.w3schools.com/cssref/default.asp

 

Para ver os valores possíveis, clique no nome da propriedade. Você pode me perguntar sobre isso, ou me esperar ensinar algumas das principais possibilidades nas próximas aulas.

Piabeta KunP
09 de fevereiro de 2013 às 07:54

Bem basico, porem muito bom, espero que nas proximas aulas comecemos a alinhas tabelas dentro do layout!

 

fico feliz de saber que mesmo com tudo que houve recentemente vocÊ não tenha abandonado as aulas de websites, parabéns!

AlexandreKGA
09 de fevereiro de 2013 às 10:12

Parabéns pela aula!

 

Finalmente o CSS.

 

 

-PiabetaMan01

 

Olha o titulo,introdução ao CSS .

LordfireL
09 de fevereiro de 2013 às 16:18

Tô pensando em continuar postando aqui ou fazer um site pessoal pra isso. Se eu postar aqui, vai ser bem menos frequente, tenho mais o que fazer.

Piabeta KunP
10 de fevereiro de 2013 às 07:45

Tô pensando em continuar postando aqui ou fazer um site pessoal pra isso. Se eu postar aqui, vai ser bem menos frequente, tenho mais o que fazer.

 

intendo mais mesmo assim agradeço pelosótmis conteúdos postados!

Inté mano sucesso na facul!

DiogoTemporarioD
12 de fevereiro de 2013 às 08:21

Continue postando, Ranieri. Num blog seu ou aqui. Pode nao ter tanta audiencia imediata, mas reune tudo quando ficar pronto, poe um contador de acessos na pagina e umas tags interessantes que ctz vai ter acessos, muito didaticos os tutoriais.

 

Uma duvida: Pulei um pouco a frente e fiz uso da tag <span>. Existe alguma maneira melhor, ou mais simples, de fazer o seguinte?

 

<p><span class="bold">Nome:</span> Alef<br />
<span class="bold">Sexo:</span> Masculino<br />
<span class="bold">Idade:</span> 18<br />
<span class="bold">Residência:</span> Rio Grande do Sul</p>

 

Como visto em http://www.teste442....ulas/4/#Pessoal

 

Tanto em relacao a <span> quanto a <p> e <br />

 

Usando um paragrafo diferente para cada linha o browser quebra uma linha entre um <p> e outro.

Editado Fevereiro 12 por DiogoTemporario

LordfireL
13 de fevereiro de 2013 às 02:13

Se tu usar uma lista fica mais fácil de aplicar os estilos, e é uma lista mesmo, é bizarro usar quebras de linha assim.

 

Mas assim é eficiente também, é assim que o IPB usa nos nicks coloridos.

DiogoTemporarioD
13 de fevereiro de 2013 às 12:34

Usando lista fica decentralizado. E usando assim:

 

 <ul style="list-style-type: none" class="bold">
  <li>Nome:</li><p>Alef</p>
  <li>Sexo:</li><p>Masculino</p>
  <li>Idade:</li><p>18</p>
  <li>Residência:</li><p>Rio Grande do Sul</p>
 </ul>

 

Nao funciona porque fica tudo negrito. Alem da quebra de linha ficar completamente escrota.

Editado Fevereiro 13 por DiogoTemporario

LordfireL
13 de fevereiro de 2013 às 13:26

E se tu tentar assim:

 

ul.bold span {
   font-weight: bold;
}

<ul style="list-style-type: none" class="bold">
   <li><span>Nome:</span> Alef</li>
   <li><span>Sexo:</span> Masculino</li>
   <li><span>Idade:</span> 18</li>
   <li><span>Residência:</span> Rio Grande do Sul</li>
</ul>

DiogoTemporarioD
13 de fevereiro de 2013 às 13:42

Fica tudo negrito. Tentei usar ul.bold e ul.bold span em class= ao inves de so' bold, ai' nem pegou o negrito.

 

Outra duvida:

 

.bold { font-weight: bold }
ul.bold span { font-weight: bold }

 

Precisa setar esses dois? Nao tem como fazer como uma classe de uma OOP?

 

Tipo

 

class bold: tal

bold.ul ou ul.bold herdaria o que foi setado em bold

LordfireL
13 de fevereiro de 2013 às 23:24

Precisa, porque o ".bold" vai setar bold o conteúdo do "ul" inteiro, enquanto "ul.bold span" vai fazer o span herdar também o estilo.

1 mês depois...
PuricuteP
14 de março de 2013 às 21:58

Não vão mais postar novas aulas ?

alldakieA
15 de março de 2013 às 00:57

Muito bom o tutorial, to aprendendo a mexer ainda com LESS e CSS, focando mais no HTML, PHP.

Em fim, ótimo tutorial.

+REP