Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Painel de Usuario
Convidado
Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Ter 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Sab 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Sab 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Sab 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último usuário registrado atende pelo nome de kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Setembro 2018
SegTerQuaQuiSexSabDom
     12
3456789
10111213141516
17181920212223
24252627282930

Calendário Calendário

Visitou

Manual básico sobre CSS

Ir em baixo

Tutoriais Manual básico sobre CSS

Mensagem por konan em Sex 17 Jun 2011 - 11:51

Há pouco tempo passei a estudar um pouco sobre HTML/XHTML. Daí, acredito que como todos que fazem isso, dei de cara com as CSS, folhas de estilo em cascata. Encontrei boas matérias, mas uma única fonte, com boa referência para CSS "em geral", demorei um pouco ver. Com um pouco de pesquisa, encontrei.

Neste artigo estou trazendo mais uma tradução livre de bom material disponível apenas em inglês. Para quem quiser se aventurar no original, o link é [Você precisa estar registrado e conectado para ver este link.] e possui material não apenas sobre CSS, mas sobre HTML, XHTML, XML, ASP, PHP, Javascript, e sei lá mais o quê! É muita coisa mesmo.

Vamos ver uma compilação sobre os principais pontos das folhas de estilo, e você só precisa saber o básico sobre HTML. Acredito que será útil tanto para os iniciantes como para os mais avançados, estes últimos podendo utilizar o artigo como fonte de referência rápida. Portanto, mãos à obra.

O que é CSS


  • CSS significa Cascading Style Sheets, algo como Folhas de Estilo em Cascata;
  • Estilos definem como mostrar elementos HTML na tela;
  • Estilos normalmente são guardados em "folhas de estilo";
  • Estilos foram adicionados ao HTML 4.0 para resolver um problema;
  • Folhas de Estilo Externas podem evitar um bocado de trabalho;
  • Definições de estilo múltiplas serão usados em cascata.


O uso de estilos resolveram um grande problema

O HTML nunca teve o objetivo de conter tags para a formatação de um documento. Tags HTML deveriam ser destinadas a definir o conteúdo de um documento.

Quando tags como e atributos como "color" foram adicionadas à especificação HTML 3.2, começou um pesadelo para os desenvolvedores web. Desenvolvimento de grandes sites, onde fontes e cores tiveram de ser organizados a cada página do site, acabou sendo um processo longo, caro e indevidamente tortuoso.

Para resolver este problema, a World Wide Web Consortium (W3C) - responsável pela padronização do HTML - criou as CSS em adição ao HTML 4.0. Com o HTML 4.0, toda a formatação pode ser removida do documento HTML e armazenada em um arquivo CSS separado. Todos os navegadores atuais suportam CSS.

Usar estilos economiza um monte de trabalho

Folhas de estilos definem como elementos HTML devem ser exibidos. Os estilos normalmente são salvos em arquivos ".css" diferentes dos arquivos HTML. Tais folhas de estilo salvos assim nos permitem alterar a aparência e o layout de todas as páginas em um site, editando apenas um documento CSS.

Vários estilos "cairão" em cascata sobre um único objeto

Folhas de estilo permitem que o estilo das informações possam ser indicados de diversas maneiras.

Estilos podem ser indicados:


  • Dentro de um elemento HTML;
  • Dentro da seção head de uma página HTML;
  • em um arquivo CSS externo.


Dica: Múltiplas folhas de estilo externas podem ser usadas no interior de um único documento HTML.

Sintaxe

A sintaxe das CSS é composta por três partes: um seletor, uma propriedade e um valor, da forma abaixo:

selector { propriedade: valor }

O selector é normalmente o elemento HTML, ou tag, que você deseja definir, a propriedade é o atributo que você deseja mudar, e cada propriedade pode ter um valor. A propriedade e o valor são separados por dois pontos, e cercado por chavetas, por exemplo:

body { color: black }

Nota: Se o valor possui mais de uma palavra, devemos colocar aspas em torno do valor:

p {font-family: "sans serif"}

Se você quiser especificar mais de uma propriedade, deve separar cada propriedade com um ponto e vírgula. O exemplo abaixo mostra como definir um parágrafo centralizado, com texto de cor vermelha:

p {text-align: center; color: red}

E para tornar as definições de estilo mais legíveis, podemos descrever uma propriedade por linha, como visto abaixo:

p {
text-align: center;
color: black;
font-family: Arial
}

Agrupamento

Você também pode agrupar seletores. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos de cabeçalho. Todos os elementos de cabeçalho serão exibidos com texto de cor verde:

H1, H2, H3, H4, H5, H6 {
color: green
}

Seletores

As classes

Com as classes é possível definir diferentes estilos para o mesmo tipo de elemento HTML. Suponha que você gostaria de ter dois tipos de parágrafos em seu documento: um alinhado à direita, e um centralizado. Aqui está como fazer usando CSS:

p.right {text-align: right}
p.center {text-align: center}

A partir daí, para inserir esses estilos, precisaremos usar o atributo class no documento HTML:

<p class="right"> Este parágrafo será alinhado à direita. </p>
<p class="center"> Este parágrafo será centralizado. </p>

Para aplicar mais de uma classe em um mesmo elemento,, a sintaxe é:

<p class="center bold"> Este é um parágrafo. </p>

O parágrafo acima terá os estilos indicados da classe "center" e da classe "bold". Você também pode omitir o nome da tag ou do elemento quando escrever a definição de sua classe. Isso servirá para definir um estilo utilizado por todos os elementos HTML que possuem uma determinada classe. No exemplo abaixo, todos os elementos HTML com class = "center" serão centralizados:

.center {text-align: center}

No código abaixo tanto o elemento h1 como o elemento p possuem o seletor class = "center". Isto significa que ambos os elementos seguirão as regras do ".center" indicado acima:

<h1 class="center"> Este cabeçalho será centralizado</h1>
<p class="center"> Este parágrafo também será centralizado. </p>

Lembre-se: Não comece o nome de uma classe com um número! Não funcionará no Mozilla / Firefox.

Adicionar estilos a elementos com atributos particulares

Você também pode aplicar estilos para elementos HTML com atributos particulares. A regra de estilo abaixo irá funcionar com todos os elementos de input do tipo "text":

input [type = "text"] {background-color: blue}

O seletor id

Você também pode definir estilos para elementos HTML com o seletor id. O seletor id é definido com um "#". O exemplo do uso de estilos visto abaixo mostra a definição de um atributo ao seletor id com um valor "green":

#green {color: green}

Já a regra de estilo seguinte vale para o elemento p com um id com um valor "para1":

p #para1 {
text-align: center;
cor: red
}

Lembre-se: não inicie um ID com um número! Não funcionará no Mozilla / Firefox.

Inserindo comentários

Comentários em CSS

Como em qualquer linguagem, comentários são usados para explicar o seu código, e podem ajudar quando você editar o código-fonte em uma data posterior. Um comentário será ignorado pelos browsers, e em CSS começa com "/*" e termina com "*/", como este:

/ * Este é um comentário * /
p {
text-align: center;
/ * Este é outro comentário * /
color: black;
font-family: Arial
}

Exemplos

O arquivo HTML abaixo utiliza uma folha de estilos externa com a tag "link". Veja:

<html>
<link rel="stylesheet" type="text/css" href="ex1.css" />
<h1>Este cabeçalho tem 36 pt</h1>
<h2>Este cabeçalho é azul</h2>
<p>Este parágrafo tem uma margem esquerda
de 50 pixels</p>

Este é o conteúdo do arquivo com a folha de estilo (ex1.css) indicado na tag "link" visto acima:

body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}

Outro exemplo no uso de folhas de estilo externa:

<html>
<link rel="stylesheet" type="text/css" href="ex2.css" />
<h1>Este é um cabeçalho do tipo h1</h1>
<hr />
<p>Você pode ver que a folha de estilo
formata o texto</p>
<p><a href="http://www.w3schools.com" target="_blank">Este é um link</a></p>

Abaixo, como ficaria o conteúdo do arquivo com a folha de estilo indicado acima (ex2.css):

body {background-color: tan}
h1 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}

Teste em seu [Você precisa estar registrado e conectado para ver este link.] e veja as mudanças que a folha de estilo causam na aparência da página.

Salve os arquivos HTML e os .css na mesma página, e depois acesse os arquivos HTML normalmente como você sempre faz. Você verá como o uso de folhas de estilo alteram a formatação dos elementos.

Inserindo as folhas de estilo

Quando um navegador lê uma folha de estilo, ele irá formatar o documento de acordo com ela. Existem três maneiras de inserir uma folha de estilo:

Folha de estilo externa

Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Com uma folha de estilos externa, você pode mudar a aparência de um site inteiro, alterando um único arquivo. Cada página deve indicar a folha de estilo usada como base por meio da tag "link", como já vimos anteriormente. A tag link deve estar dentro da seção "head" do arquivo HTML. Veja:

<head>
<link rel="stylesheet" type="text/css" href="meuestilo.css" />
</head>

O browser lerá as definições de estilo a partir do arquivo meuestilo.css e formatará o documento de acordo.

Uma folha de estilos externa pode ser escrita em qualquer editor de texto. Porém, sugiro os editores bem "simples", como nano, gedit ou mesmo o vim ou emacs. Nada de OpenOffice e companhia, pois esses editores mais sofisticados alteram o conteúdo do arquivos para melhorar sua aparência e seu uso pelo programa. O arquivo .css não deve conter quaisquer tags HTML. E, obviamente, a folha de estilo deve ser salva com extensão .css. Veja um exemplo de folha de estilo:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url ("images/back40.gif")}

Lembre-se: Não deixe espaços entre o valor da propriedade e as unidades! Por exemplo, usar "margin-left: 20 px" (e não usar "margin-left: 20px") só irá funcionar no IE, mas não funcionará no Firefox ou Opera.

Folha de estilo interna

Uma folha de estilo interna deve ser utilizada quando um determinado documento tem um estilo único.

Você define os estilos internos na seção "head" usando a tag <style>, como neste exemplo:

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url ("images/back40.gif")}
</style>
</head>

O browser agora lê as definições de estilo e formata o documento de acordo com elas.

Lembre-se: Um browser normalmente ignora tags desconhecidas. Isto significa que um browser que não suporta estilos, vai ignorar a tag "style", mas seu conteúdo será exibido na página. É possível evitar que um browser antigo faça isso, ou seja, não exibir o conteúdo das definições de estilo. Para isso incluímos as definições entre comentários do HTML. Veja:

<head>
<style type="text/css">
<! --
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url ("images/back40.gif")}
->
</style>
</head>

Estilos em linha

Um estilo "em linha" perde muitas das vantagens das folhas de estilo, misturando conteúdo com apresentação. Use este método o mínimo possível, por exemplo quando um estilo será aplicado uma única vez em um elemento.

Para utilizar estilos "em linha" usar o atributo "style" na respectiva tag. Este atributo style pode conter qualquer propriedade CSS. Veja um exemplo de como alterar a cor e a margem esquerda de um parágrafo:

<p style="color:sienna;margin-left:20px"> Este é um parágrafo. </p>

Múltiplas folhas de estilo

Se algumas propriedades foram indicadas para o mesmo seletor em diferentes folhas de estilo, os valores serão herdadas da folha de estilo mais específica. Por exemplo, uma folha de estilos externa tem estas propriedades para o seletor h3:

h3 {
color: red;
text-align: left;
font-size: 8pt
}

E uma folha de estilo interna tem estas propriedades para o seletor h3:

h3 {
text-align: right;
font-size: 20pt
}

Se a página com a folha de estilo interna também tem links para a folha de estilo externa, as propriedades de h3 serão:

color: red;
text-align: right;
font-size: 20pt

O que aconteceu? A cor foi herdada da folha de estilos externa, mas o alinhamento do texto e o tamanho da fonte foram substituídos pela folha de estilo interna. Traduzindo, o que estiver indicado na folha de estilos mais específica será utilizado, depois a segunda folha de estilos mais específica é usada, e assim por diante.

Conclusão

É isso, pessoal. Para os iniciantes, já serviu como uma boa base para começar. E para os avançados, aí está uma referência rápida. No próximo artigo veremos pontos mais específicos: como aplicar estilos de background (cor, imagem, etc), de texto, de fonte, e o importante conceito do modelo da caixa.
avatar
konan
Uplouder
Uplouder

Respeito às regras : Respeito as regras 100%

Mensagens : 59
Reputação : 0
Data de inscrição : 13/06/2011
Idade : 26

Voltar ao Topo Ir em baixo

Voltar ao Topo


 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum