Esse artigo irá tratar um pouco sobre o CSS, uma ferramenta chave para o design web. No caso de você não estar familiarizado com o CSS:
Introdução ao CSS: Parte 1
A primeira parte desse artigo é projetada para que você “sinta o chão onde está pisando”. Você deve saber ao menos um pouco de HTML e web design antes de começar. Ao terminar de ler essa parte, você estará pronto para mergulhar de cabeça no tutorial que vem a seguir!
Uma introdução ao CSS – Cascading Style Sheets
O CSS é um acrônimo para: ‘Cascading Style Sheets’. CSS é uma extensão ao HTML básico que permite que você estilize a sua página web.
Um exemplo de mudança de estilo seria tornar as palavras em negrito. No HTML padrão, usariamos a tag <b> dessa forma:
<b>make me bold</b> |
Isso funciona bem, e não há nada de errado com isso, exceto que agora se quisermos fazer com que todo o texto que está em negrito passe a ser sublinhado, teríamos que ir em cada ponto da página e alterar a tag.
Uma outra desvantagem pode ser encontrada nesse exemplo: diga que você queira fazer o texto acima negrito, definir a fonte para Verdana e alterar a cor para vermelho, precisaria de um bocado de código em volta do texto:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"> <strong>This is text</strong></font> |
<p class="myNewStyle">My CSS styled text</p> |
E entre as tags do topo de sua página web você precisa inserir o código CSS que define esse estilo que acabamos de aplicar:
<style type="text/css">
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
</style>
|
No código acima, embutimos o código CSS diretamente na página. Isso é satisfatório para projetos pequenos ou situações onde os estilos que esteja sendo definido será usado em uma única página. Existirão diversas situações onde você estará aplicando seus estilos à muitas páginas, e seria muito complicado ter de copiar e colar o código CSS em cada página.
Além do fato de que você estará atravancando suas páginas com o mesmo código CSS, também teria que editar cada uma dessas páginas se quiser fazer uma alteração no estilo. Como no caso do JavaScript, você pode definir/criar seus estilos CSS em uma arquivo separado e aponta-lo na página onde quer aplicar o estilo:
<link href="myFirstStyleSheet.css" rel="stylesheet" type="text/css"> |
A linha de código acima aponta seu documento HTML à sua folha de estilo CSS, chamada ‘myFirstStyleSheet.css’. Você deve colocar essa linha de código entre as tags <head> </head> de sua página web.
Introdução ao CSS: Parte 2
Como criar um folha de estilo externa
Para criar uma folha de estilo externa, tudo o que você precisa fazer é criar um documento de texto simples (no Windows, simplesmente clique com o botão direito do mouse e selecione Novo -> Documento de texto) e em seguida altere o tipo do arquivo de .txt para .css.
Você pode alterar o tipo do arquivo apenas alterando a extensão do arquivo. A extensão do arquivo no Windows informa ao computador que tipo de arquivo ele é e permite que o computador determine como manipular esse arquivo quando você tenta abri-lo, por exemplo.
Você provavelmente já deve ter notado; arquivos CSS são arquivo de texto formatados de forma especial, muito da mesma forma que páginas HTML são. Não há nada especial ou diferente no arquivo em si, já que é o conteúdo do arquivo que faz com que o documento HTML ou uma página CSS o que eles são.
Quando estiver trabalhando com um documento CSS externo, existem alguns pontos a serem lembrados:
1. Você não adiciona essas tags na página CSS como faria se estivesse embutindo o código CSS em seu HTML:
<style type="text/css"></style> |
Como o link CSS em sua página Web informa que você está apontando para uma página CSS, você não precisa declarar (no arquivo CSS externo) que o código da página CSS é CSS. Isso é o que a tag acima faz. Ao invés disso, você apenas adiciona seu código CSS diretamente na página dessa forma:
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
|
No exemplo acima, criamos uma série de classes CSS que podem ser aplicadas a qualquer tag HTML dessa forma:
<p>My CSS styled text</p> |
ou:
<h2 class=”my3rdNewStyle”>My CSS styled text</h2> |
Você pode observar que no exemplo acima aplicamos um estilo CSS à tag <h2>. Normalmente essa tag configura o tamanho do texto dentro dela para uma tamanho pré-definido do navegador (ex.: 10 pixels).
Quando você aplica uma classe CSS a ela, o código CSS sobrepõe o tamanho padrão que você normalmente obteria com uma tag <h2> pelo tamanho especificado na classe CSS. Dessa forma, você pode ver que o CSS pode sobrepor o comportamento padrão das tags HTML.
Nos exemplo acima, temos código CSS que define uma classe CSS e em seguida aplica ela à vários elementos da página. Uma outra maneira de aplicar o CSS é redefinir globalmente uma tag HTML de uma certa forma:
h1 { font-family: Garamond, "Times New Roman", serif; font-size: 200%; }
|
O que esse código CSS faz é ajustar o estilo e tamanho da fonte de todas as tags <h1> de uma vez. Dessa forma, você não precisa aplicar uma classe CSS como fizemos anteriormente a todas as tags <h1> já que todas elas são afetadas automaticamente pelas regras de estilo do CSS.
A seguir um outro exemplo onde damos a toda a página uma margem maior:
body { margin-left: 15%; margin-right: 15%; }
|
Como você pode ver, você pode redefinir qualquer tag e alterar a maneira que ela é exibida. Isso pode ser um recurso muito poderoso:
div {
background: rgb(204,204,255);
padding: 0.5em;
border: 1px solid #000000;
}
|
O código CSS acima configura todas as tags <div></div> para terem uma cor de fundo rgb(204,204,255) e um padding de 0.5em e uma bordar de 1 pixel na cor preto sólido.
Algumas coisas que precisam ser explicadas sobre o exemplo acima:
Cores em CSS podem ser expressas de algumas maneiras:
- Em Hexadecimal -> por exemplo: #000000 – isso é preto e isso: #FF0000 é vermelho.
- Em rgb -> rgb(204,204,255) é a cor azul claro.
- Como nomes das cores, como: ‘red’ ou ‘blue’
O mais comum é o uso do código hexadecimal da cor, que é o que a maioria das pessoas está familiarizada. Dessa forma, o exemplo acima pode ser reescrito como:
div {
background: green;
padding: 0.5em;
border: 1px solid #FF0000;
}
|
Assim, ao invés de ‘rgb(204,204,255)’ , apenas especificamos ‘green’.
[Nota do tradutor: Você pode consultar aqui uma lista de cores e seus respectivos códigos hexadecimais.]
Ao usar o RGB (RGB é um acrônimo para ‘Red Green Blue’) e o código Hexadecimal, você pode obter exatamente a cor que quer facilmente quando conhece o código dela. Por sorte, muitos programas (como o Dreamweaver) fornecem maneiras fáceis de escolher uma cor de forma que você não precise saber os valores do código para cada uma.
Nesse último exemplo, mostraremos a você o código CSS ‘super legal’ que permite que você crie efeito com links sem imagens:
a:link { color: rgb(0, 0, 153) }
a:visited { color: rgb(153, 0, 153) }
a:hover { color: rgb(0, 96, 255) }
a:active { color: rgb(255, 0, 102) }
|
O CSS acima fará com que seus links mudem de cor quando alguém passe o mouse sobre eles. Uma observação importante sobre o código acima, é que é importante que as declarações de estilo estejam na ordem correta:
“link-visited-hover-active”,
… ou alguns navegadores podem não conseguir interpretar o CSS.
O CSS é muito poderoso e permite que você faça coisas que não pode fazer com o HTML padrão. É bem suportado atualmente por todos os navegadores modernos e é uma ferramenta de aprendizagem obrigatória para web designers.
Os exemplos acima são apenas uma pequena amostra do que você pode fazer como CSS, mas devem ser o bastante para você começar a estilizar suas páginas.
Como muitas tecnologias, o CSS tem muitos recursos que a maioria das pessoas não precisará usar com frequência, ou mesmo usar algum vez. Assim, não caia na armadilha de pensar que se algum recurso está disponível você tem que usa-lo.
Conceitos básicos do CSS: Parte 1
Após completar esse tutorial, você deve possuir informação suficiente para explorar o CSS e desing para web mais a fundo.
- Você pode baixar os arquivos CSS e HTML que foram criados para esse tutorial: CSS files
- Você pode ver como a página deve ficar aqui: CSS example page
- tornar um texto em negrito.
- posicionar coisas na página.
- ajustar o estilo da página ou do parágrafo, etc.
A linguagem irmã do CSS é o HTML: o código que diz ao navegador O QUE de fato está contido na página.
O CSS reduz o número de tags usadas
Por causa do poder do CSS, somos capazes de reduzir o número de tags HTML que usamos em uma página, tudo isso enquanto ainda somos capazes de projetar belas páginas usando apenas 6 tipos (por falta de palavras melhores) de tags HTML.
As tags que usaremos para projetar o estilo do conteúdo:
- <h> As tags de titulo que podem variar de ‘<h1></h1>’ para ‘<h6></h6>’, serão usadas para marcar titulos em nossas páginas. Dessa forma, o titulo mais importante será marcado como <h1> te o menos importante será marcado como <h6>. Um exemplo de titulo:
<h1><strong>CSS Template Layout</strong></h1>
Isso informa aos navegadores e mecanismos de pesquisa que essa página tem como tema primário: ‘CSS Template Layout’.
Todos os navegadores possuem um tamanho padrão para cada tag <h>, para saber como renderizar o texto entre essas tags. Muitos desses valores padrão são inúteis (espcialmente <h1>) porque eles são muito grandes. Mas nunca tema, o CSS está ai para isso. Usaremos o CSS para tornar os tamanhos do texto em algo que seja de nosso agrado. - <p> Essa tag é usada para marcar partes de uma página como ‘parágrafos’. Tags como essa são chamadas ‘elemento de bloco’; isso significa que ela age com um bloco onde um espaço é inserido automaticamente antes e depois de cada par de <p>.
- <ul> e <ol> Tags de lista serão usadas para criar nossos menus. A tag <ul> é a lista não numerada que cria uma lista com pontos ou outras imagens/icones que não especificam uma ordem; por isso a denominação ‘não numerada’. A outra tag de lista mencionada (<ol>) é a lista ordenada, que cria uma lista que, ao invés de pontos, seus elementos são marcados com números ou letras em ordem crescente.
- <div> Sabemos o que a tag <div> faz das seções anteriores desse artigo. Usamos ela para criar ‘contêineres’ de partes de nossa página. Um div será usado para definir nosso menu de navegação e outro para definir a página principal.
- <a href> A tag mais importante do HTML: a tag de criação de links (ou hyperlinks). Isso faz com que o texto de torne ‘hyper’ de modo que quando cliquemos nele podemos carregar uma outra página ou ativar algum programa JavaScript (também conhecido como script ECMA).
- <img> Essa é a tag de imagem, que permite que você aponte imagens que devem ser exibidas em suas páginas. No HTML, imagens não são embutidas na página atualm ao invés disso a tag de imagem apenas aponta para onde a imagem está e o navegador tenta carregar a imagem quando um usuário carrega a sua página.
Isso cobre as tags HTML que usaremos em nosso layout! Não há necessidade de tags de tabelas, <br> e a desagradável tag <font>.
Conceitos básicos do CSS: Parte 2
O modelo básico da página
Vá para Web Designers Killer Handbook home page e obtenha um modelo prático de página HTML que usaremos como modelo para esse tutorial. Você pode achar esse model sob o titulo: ‘To create the practice HTML page do the following:’ Siga as instruções do artigo para criar sua página HTML básica.
Uma vez que tenha criado a página, cria uma pasta e nomeia como algo do tipo: ‘myCSSwebsite’ e jogue a página HTML nela. Na mesma pasta, crie um novo documento de texto e chame de: ‘myCSS.css’. Uma vez que tenha criado esse arquivo, abra-o e cole o código a seguir, salvando o arquivo em seguida:
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li :link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 50px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
|
Don’t let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page.
In between the <body></body> tags you will need to insert this code:
<div id="navigation"> <h2>The Main navigation</h2> </div> <div id="centerDoc"> <h1>The Main Heading</h1> <p>Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.</p> <p>Follow the instructions there and create your basic HTML page ... and do it now!</p></div> |
And in between the <head> </head> tags you will need to insert this:
<title>First CSS Tutorial</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="myCSS.css" rel="stylesheet" type="text/css"> |
Com tudo isso pronto, seremos capazes de começar a estilizar a nossa página. Se você der uma olhada na página HTML ficará surpreso em ver que já começamos a fazer isso!
Layout de uma página com o CSS: Parte 1
Nossa página é realmente muito simples. Como você já deve saber, todo o conteúdo (texto, imagens, Flash, etc) que o usuário vê quando visualiza uma página web é codificada com tags HTML que ficam entre as tags <body> e </body>.
No nosso caso, seria esse código:
<div id="navigation"> <h2>The Main navigation</h2> </div> <div id="centerDoc"> <h1>The Main Heading</h1> <p>Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now!</p> </div> |
No código acima, podemos ver que existem 2 seções principais demarcadas por tags <div>. Como vimos nas seções anteriores desses artigos, as tags <div> são projetadas para serem usadas para criar ‘divisões’ no documento ou, em outras palavras, um ‘contêiner’. Criamos dois desses ‘contêineres’ e demos a cada um dele um ID único:
<div id="navigation"> ... </div> |
Você notará que todo o conteúdo da página está contido nessas duas divisões. Assim, as primeiras questões seriam quais as regras dos ID’s em páginas HTML e por quê usamos eles e associamos eles a elementos da página como DIVs?
- Em primeiro lugar, você pode associar ID’s a qualquer tag HTML. Assim, poderíamos ter associado um ID à tag <p> também.
- Um ID em uma página deve ser usado apenas uma vez. Dois elementos não podem ter o mesmo ID. IDs tem por objetivo identificar de forma única um elemento da página. Dessa forma, no exemplo acima, sabemos que existe apenas um único elemento na página com o ID ‘ navigation’ e apenas um único elemento com o ID ‘centerDoc’. È uma boa prática usar nomes de IDs que deixem claro a função de cada divisão da página.
- IDs de elementos da página HTML (tags) são usados no CSS. Podemos mirar IDs no código CSS para alterar a aparência, posição e mesmo o comportamento do elemento que é referenciado pelo ID.
Entre as tags <div> usamos tags de titulo (<h1> e <h2>) para defini-los. E finalmente temos algumas tags <p>, onde naturalmente inserimos texto para compor nossa página simples.
Agora iremos pular para o arquivo CSS que é apontado pela página HTML. Anexamos o arquivo CSS com essa linha de código entre as tags <head> </head>:
<head> <link href="myCSS.css" rel="stylesheet" type="text/css"> </head> |
Como um link normal para uma página, temos um atributo ‘href’ que aponta para um documento CSS que possui todo o código CSS que afetará essa página. Essa não é a única forma de associar código CSS a páginas (existem algumas outras maneiras). Dessa forma, no link acima chamamos o arquivo CSS dessa forma: ‘href=myCSS.css’ e dizemos ao navegador que esse link é uma página CSS com esse atributo: ‘type=text/css’. O que é importante aqui é que esse link aponte para um arquivo CSS com o nome “myCSS.css”.
Agora que associamos a folha de estilo ao documento, vamos dar uma olhada no código CSS. O primeiro pedaço e código ‘estiliza’ ps IDs únicos que falamos anteriormente:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
|
Há muitia coisa acontecendo aqui, assim focaremos apenas em alguns poucos elementos no momento. No código acima, temos 2 seletores, um para cada ID e cada seletor é agrupado pelo de chaves: { }. A seguir temos o código dos seletores CSS com todo o miolo removido:
#navigation {
/*Look ma no CSS rules!*/
}
#centerDoc {
/*Look ma no CSS rules!*/
}
|
Foi inserido o texto: ‘/*Look ma no CSS rules!*/’ para mostrar onde o código CSS deve estar normalmente. Assim, você pode ver que tudo que esteja entre as chaves é parte de um grupo que no CSS é genericamente chamado de seletor.
Nos exemplo acima, podemos ver que existe um texto que aparece antes da chave. Esse texto fornece um nome para o seletor. Assim, nesse caso, temos dois nomes para seletores e dessa forma dois seletores: #centerDoc e #navigation. Então, por que temos um simbolo # na frente do texto? Por quê não podemos apenas chama-los de ‘centerDoc’ e ‘navigation’?
Layout de uma página com o CSS: Parte 2
No HTML (e em programação em geral) certos texto, posicionados em certos locais, possuem um significado especial que informa ao sistema para fazer algo. Nesse caso, sempre que você tem um símbolo # na frente do nome de um seletor, estamos dizendo que esse seletor é um tipo especial de seletor chamado de seletor de ID. O que tem de especial em relação a esse tipo? Esse tipo pode ser aplicado apenas a um elementos da página HTML. Parece familiar?
Assim, aqueles que não dormiram no ponto, podem perceber que temos um seletor de ID para cada um dos nossos DIVs que possuem um ID, e eles tem os mesmos nomes. Assim, o seletor #centerDoc é aplicado ao div: <div id=”centerDoc”>. Seja lá quais forem as regras/estilos que escolhermos codificar em nosso seletor de ID, irá alterar o que está contido entre o div correspondente. Assim, para o div com o id ‘navigation’, temos as seguintes regras CSS:
#navigation {
position: absolute;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
|
Observe que no final do bloco dizemos que todo o texto terá a propriedade font-weight configurada para ‘normal’:
font-weight: normal; |
Poderíamos facilmente ter informado que queremos que todo texto apareça no div com a ID ‘navigation’ esteja em negrito:
font-weight: bold; |
Mas já vimos isso nas seções anteriores desse artigo. Aqui, a intenção é criar um modelo de página fácil de usar, assim daremos destaque a 2 elementos que fazem isso acontecer.
Em nossa página, a div ‘navigation’ está posicionada a esquerda e possui uma borda… por quê? Ela possui uma bela borda verde clara de 1 pixel porque isso foi configurado no CSS:
border-right: 1px solid #C6EC8C; |
Bem auto-explicativo, não? Sugiro que você mude a cor da borda e altera a largura da borda e veja como fica.
Por quê esse div está posicionada a esquerda da página enquanto o centerDoc fica à direita? Bem, em primeiro lugar vamos dar uma olhada nessa linha do seletor da ID ‘navigator’:
position: absolute; |
Isso diz ao navegador para posicionar esse div apenas na página como está. Isso simplifica bastante o assunto, mas para nossos propósitos funciona no momento.
A mágica de verdade está no código CSS da ID ‘centerDoc’:
#centerDoc {
position: absolute;
padding: 0 0 20px 0; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
|
A linha:
padding: 0 0 20px 0; /*top right bottom left*/ |
Diz ao navegador para inserir 20 pixels de padding na parte inferior da div que possui a ID “centerDoc’.
Vamos dar uma pausa aqui. Usamos algo chamado ‘padding‘ e isso significa o seguinte: Espaço que fica em volta de nosso elemento.
O CSS possui esse recurso e o conceito de um box model (modelo de caixa) que é essencialmente uma caixa que envolve os elementos HTML. Esse modelo consiste de: padding, margens, bordas e o conteúdo em si. Isso permite que nós posicionemos uma borda em volta dos elementos e criemos espaçamentos relativos a outros elementos. A ordem desses elementos é a seguinte:
conteúdo -> padding -> borda -> margem
Em nosso caso, qualquer coisa entre as tags <div> é o conteúdo. Logo após ele, vem o padding. Depois vem uma bordem e finalmente a margem. A margem e o padding podem parecer a mesma coisa, mas se pensar um pouquinho sobre isso, pode perceber como controlar o espaço antes da borda (padding) e o espaço depois da borda (margem) pode afetar muito seu layout.
Nesse exemplo, você pode perceber que a div ‘navigation’ é posicionada mais acima da página do que a div ‘centerDoc’. Isso não se deve à ordem que elas aparecem no HTML, como normalmente seria sem o CSS, mas por causa da configuração de margens que foi usada para cada seletor; para centerDoc foi usado o valor 50px:
margin-top: 50px; |
E para navigation foi usado o valor 0px:
margin-top: 0px; |
Isso ajusta a margem para 0 pixels, ficando assim 50 pixels mais alta do que centerDoc. Sugiro que você mova a posição da div ‘navigation’ para baixo da div ‘centerDoc’ apenas para ver se há alguma mudança; você verá que o local onde a div aparece no código HTML não influencia em nada no local onde ela aparece para o usuário, pois estamos posicionando elas através do CSS. Outra coisa para ser testada é mudar o padding, as margens, etc
Nessa seção do artigo, quebramos o HTMK em várias partes e definimos essas partes pelo uso de DIVs com IDs únicos associados com eles:
<div id="navigation"> ...</div>
<div id="centerDoc"> ...</div>
|
Usar DIVs para posicionar partes da página é o método alternativo que a maioria das pessoas usa para tabelas. Eu argumentaria que um método não é necessariamente melhor do que outro. Mas considere que o CSS é o método ‘oficial’ para posicionar elementos na página e tabelas devem ser usadas apenas para dados tabulares.
Por outro lado, existem momentos que usar tabelas é muito mais fácil do que CSS.
Dito isso, nosso layout atual (navegação à esquerda ou á direita) em CSS é muito mais fácil de ser usado e é uma solução melhor em geral.
Agora que cobrimos tudo isso, tudo fica muito fácil a partir daqui. Definimos nosso documento principal e cada seção está em seu lugar, tudo o que precisamos é adicionar texto e imagens.
Quebrando a página:
Essa página é simples, temos apenas um titulo:
<h1>The Main Heading</h1> |
E um único parágrafo:
Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now! |
Definimos como os parágrafos e os títulos devem ser exibidos no código CSS:
p {
width: 80%;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
|
Esse código é bem auto-explicativo. A única coisa que deve ser mencionada é que configuramos a largura de <p> para 80%. Isso permite que controlemos a largura de todo o texto de forma fácil para poder edita-la em um único local.
A única coisa que falta da página é a navegação. A melhor e mais fácil maneira de fazer isso é usando a tag de lista <li>. Isso faz sentido, já que menus de navegação são essencialmente uma lista de páginas.
Definimos o estilo dos itens da lista com esse código CSS:
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
|
O código acima usa uma imagem para substituir os pontos da lista e define o espaçamento entre os itens da lista em 1,5 vezes o normal. Você não precisa ter uma imagem para substituir os pontos, pode deixar sem nenhuma imagem e nenhum ponto apenas removendo o atributo:
list-style-image: url(../images/arrowSmall.gif); |
Ou pode usar uma das opções pré-definidas: ‘disc’, ‘circle’ e ‘square’.
Em seguida você deve adicionar à página uma lista não ordenada (<ul> </ul>) dentro da div ‘navigation’ logo abaixo do titulo ‘main navigation’:
<h2>The Main navigation</h2> <ul> <li><a href="cssTutorialPage1.htm">Page One</a></li> <li><a href="cssTutorialPage2.htm">Page Two</a></li> </ul> |
Para tornar as coisas mais fáceis, mude o CSS que afeta os itens da lista (<li>) de forma a usar um ponto pré-definido:
li {
list-style-type: disc;
line-height: 150%;
}
|
Agora temos a navegação!
Isso tudo praticamente cobre nossos objetivos para esse artigo, mas apenas arranhamos a superfície do assunto. Como você pode ver, criamos uma página com um belo visual, usando poucas tags HTML. Nesse exemplo, não temos muito texto na página, mas podemos adicionar texto facilmente, adicionando um bocado de informação e imagens sem nenhum trabalho com o HTML.
Espero que esse tutorial de CSS seja útil para você; pode ser um pouco difícil disso tudo entrar na sua cabeça no começo, mas com o tempo você verá que seus esforços serão recompensados. Sinta-se a vontade para comentar e dizer o que achou desse artigo.
– Artigo traduzido de: csstutorial.net