CSS Listas e Menus

CRIAÇÃO DE MENU USANDO CSS

A técnica de criar de criar menus em CSS é com certeza uma das tarefas mais apreciadas por web designers, ela possibilita um visual atraente sem acarretar “lentidão” ao site.

Para criar menus em CSS, começamos por criar uma lista de tópicos em formas de links para que as páginas do site possam ser integradas as demais, para isso usamos a tag <ul>.

Usamos a tag <ul> quando queremos uma lista não ordenada, dentro desta tag inserimos os tópicos da lista através da tag <li> (lista), exemplo a seguir:

<ul>

<li> <a href=”índex.html”> HOME </a> </li>

<li> <a href=”servicos.html”> SERVIÇOS </a> </li> <li> <a href=”contato.html”> CONTATO </a> </li> </ul>

Na tela do computador a renderização mostrará:

·         HOME

·         SERVIÇOS

·         CONTATO

De certa forma já temos um menu, mas convenhamos muito simples e sem graça. Ao criarmos uma div ( Do inglês division, define uma divisão ou uma seção em um documento HTML), podemos formatar esta lista (menu) usando CSS e seu visual ficará muito mais atraente, exemplo de menu com div:

<div id=”menu”>

<ul>

<li> <a href=”índex.html”> HOME </a> </li>

<li> <a href=”servicos.html”> SERVIÇOS </a> </li> <li> <a href=”contato.html”> CONTATO </a> </li> </ul>

</div>

Por  enquanto não haverá  mudança no visual,  pois  ainda  não criamos  a formatação

CSS, antes, vamos entender algumas funções de CSS:

Align: usada para alinhar blocos de informação usando os eixos X e Y, nossa “tela” tem a parte superior (top), direita (right), inferior (bottom) e esquerda (left), é neste sentido que usamos a programação para mover os objetos, exemplo:

#menu {align:10px 0 0 40px}

No exemplo acima, temos uma programação para mover um objeto (div menu) mantendo uma distância de 10pixel da margem superior, 0 entre a esquerda e inferior e 40 pixels da margem direita.

padding: comando semelhante ao align, a diferença entre ambos, é que usamos o padding para alinhar o conteúdo dentro da div, enquanto o align, serve para alinhar a própria div em relação ao demais elementos do layout.

float: propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Caso você queira o menu à direita, poderá utilizar o comando a seguir:

#menu {float:right}

width: comando que define a largura da área de um elemento. Imagine um menu na horizontal, que ocupe 80% da área da tela, independente da resolução, neste caso, poderá utilizar o comando a seguir:

#menu {width:80%}

height: comando CSS que define a altura de um elemento. Assim como o comando de largura, pode receber valores absolutos em pixel ou trabalhar com valores percentuais. Exemplo: #menu {height:90px}

No caso do menu, podemos aplicar diferentes formatações para os itens da lista, definir imagem de fundo, remover o caractere característico da lista, etc. Por exemplo, o comando list-style:none, se aplicado à ul, define que não queremos o símbolo bullet “bolinha que precede cada item da lista não ordenada”.

Para nossa próxima tarefa, devemos criar um site com pelo menos três páginas; em todas as páginas devem conter um menu em forma de lista usando a tag div, como o exemplo abordado a seguir:

<div id=”menu”>

<ul>

<li> <a href=”índex.html”> HOME </a> </li>

<li> <a href=”servicos.html”> SERVIÇOS </a> </li>

<li> <a href=”contato.html”> CONTATO </a> </li>

</ul>

</div>

Podemos aplicar aos links do menu a propriedade transition oferecendo feedback ao usuário. A transição do estado do link pode ser definida com uma cor inicial, sendo esta substituída ao passarmos o mouse sobre o link. A seguir exemplo de utilização.

#menu a {color: #000080}

#menu a:hover { #228B22}

No exemplo acima foi definido um tom de azul para o instante inicial (NavyBlue), o elemento hover (rondar em torno) do link quando acionado, substitui a cor inicial por um tom de verde (ForestGreen).
Observe a estrutura HTML e CSS completa abaixo...

<html>
<head>
<!--Declaração do método de formatação interno do CSS-->
<style type="text/css">

/*Início da formatação da div menu, definição do tamanho, largura, posicionamento e imagem de fundo*/

#menu {
width: 980px;
height: 90px;
float: left;
padding: 30px 0 0 300px;
background: url(images/img03.jpg) no-repeat;
}


/*Definição do estilo de itens da lista do menu, a margem com valor zero define que os itens sejam centralizados*/

#menu ul {
list-style: none;
margin: 0;
}


/*Posicionamento dos itens da lista, área que sera ocupada dentro da div por cada item*/

#menu li {
display: block;
float: left;
width: 140px;
padding: 0 0 5px 0;
}


/*Define a aprarência que cada item deve possuir ao carregar a página*/

#menu a {
padding-left: 24px;
background: url(images/img04.gif) no-repeat left center;
text-decoration: none;
font: bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFA500;
font-style: italic;
}

/*Define a aprarência que cada item deve possuir ao carregar ao passar o mouse sobre o mesmo*/

#menu a:hover {
background-image: url(images/img05.gif);
font: bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFA500;
font-style: italic;
}

</style>
</head>
<body>
<!--div menu que é referenciada no CSS, o CSS é uma linguagem orientada a objeto, o id funciona no sentido de identificação similar à chave primária-->

<div id="menu">
<ul>
<li><a href="index.html" title="">HOME</a></li>
<li><a href="servicos.html" title="">SERVIÇOS</a></li>
<li><a href="contato.html" title="">CONTATO</a></li>
</ul>
</div>

</body>
</html>

Veja o exemplo em navegador:

Pronto! Pronto!


fonte: Profº José Roberto Lima,

HTML e CSS - Textos

TEXTOS em CSS
Estilização de textos

Observe a seguir um trecho de documento HTML com algumas informações inseridas em CSS... veja.

<!DOCTYPE html>
<html>
<head>
    <title>Liga da Justiça</title>
</head>
<body>   
    <h1>Liga da Justiça</h1>       
    <p>A Liga da Justiça é uma fictícia equipe de super-heróis
       publicadas pela editora americana DC Comics. A equipe é
       um conjunto de super-heróis e entre seus membros,
       destacam-se: Superman, Batman, Aquaman, Mulher Maravilha,
       Flash e Ciborgue.</p>   
    <h2>Clark Kent (Superman)</h2>
    <h3>Bruce Wayne (Batman)</h3>
    <h4>Arthur Curry (Aquaman)</h4>
    <h5>diana prince (mulher maravilha)</h5>
    <h6>Barry Allen  (Flash)</h6>
    <h6>Victor Stone (Ciborgue)</h6>
</body>
</html>

Para que possamos fazer juntos este projeto modelo, copie o código HTML acima em um editor de código de sua preferência e salve em uma pasta no seu computador com o nome “liga-justica.html”. Em seguida, acrescente tag <style> dentro da seção <head> conforme mostra o exemplo a seguir.

<head>
    <title>Liga da Justiça</title>
    <style type="text/css">
       
    </style>
</head>

Executando o código “liga-justica.html” em um navegador web para visualizar o resultado...

Propriedade: font-family

A propriedade font-family é utilizada para definir uma lista de fontes e sua prioridade para apresentação de um elemento HTML em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser utilizada a segunda, e assim por diante, até ser encontrada uma fonte instalada.

Vamos acrescentar então no nosso projeto a propriedade font-family conforme mostra o código a seguir.

<title>Liga da Justiça</title>
    <style type="text/css">
    body {
       font-family: Arial, Verdana, sans-serif;
    }
    </style>

Aplicando a propriedade font-family na tag <body> faremos com que todos os textos da nossa página utilizem o mesmo tipo de fonte que, no exemplo em questão, será a fonte Arial. Se o usuário não possuir a fonte Arial instalada no seu computador, será utilizada a fonte Verdana e, se ambas estiverem indisponíveis, será utilizada uma fonte qualquer da família “sans-serif”.

Vamos aplicar agora uma estilização na tag <p>.

<title>Liga da Justiça</title>
    <style type="text/css">
    body {
       font-family: Arial, Verdana, sans-serif;
    }
    p {
       font-family: "Times New Roman";
    }
</style>

Perceba que na estilização da tag <p> foi utilizado apenas a fonte “Times New Roman”, e nela foi necessário utilizar aspas (“”). Isso é necessário para fontes com nomes compostos que contenham espaços entre os nomes.

Até o momento, a nossa página da Liga da Justiça está com fonte “Times New Roman” na tag <p> e fonte “Arial” no restante dos textos. 

Propriedade: color

A propriedade color é utilizada para definir a cor de um elemento. Como já dito anteriormente, existem várias formas de definir cores em uma regra CSS, mas a partir de agora utilizaremos a notação hexadecimal por ser a mais comumente utilizada pelos desenvolvedores web. 

Exemplo:

<title>Liga da Justiça</title>
    <style type="text/css">
    body {
       font-family: Arial, Verdana, sans-serif;
    }
    p {
       font-family: "Times New Roman";
    }
    h1 {
        color: #FF0000;
    }
    </style>

Aplicando a propriedade color na tag <h1> com o valor #FF0000, faremos com a que cor do título da nossa página fique na cor vermelha.  Faça os testes em um navegador.

Propriedade: font-size

A propriedade font-size é utilizada para definir o tamanho da fonte de um elemento. Como também já dito anteriormente, existem várias unidades de medidas para definir o tamanho de uma fonte, mas neste curso utilizaremos a medida px (pixel) no nosso projeto. Observe no código a seguir:

<title>Liga da Justiça</title>
    <style type="text/css">
    body {
       font-family: Arial, Verdana, sans-serif;
    }
    p {
       font-family: "Times New Roman";
    }
    h1 {
        color: #FF0000;
    }
    h2 {
       font-size: 22px;
       color: #0000FF;
    }
    h5 {
        font-size: 22px;
        color: #0000FF;
    }
    </style>

No exemplo acima você pode observar que aplicando a propriedade font-size com valor 22px nas tags <h2> e <h5>, ambas passam a ter o mesmo tamanho da letra. Além disso, aplicamos também na propriedade color o valor #0000FF (azul) para melhor diferenciarmos dos demais textos.

É importante frisar que apesar do tamanho da letra das tags <h2> e <h5> serem iguais, a relevância do conteúdo para os mecanismos de busca não foi alterado.

Propriedade: font-style

A propriedade font-style é utilizada para definir um estilo para a fonte, que pode ser: normal ou italic. O estilo normal é o padrão do navegador, mas se você deseja que determinado elemento HTML da sua página fique em itálico, você pode utilizar a propriedade font-style como mostra o exemplo a seguir :

h2{
   font-size: 22px;
   color: #0000FF;
   font-style: italic;
}

Dessa forma, estaremos diferenciando as tags <h2> e <h5> que até o momento estavam com o mesmo font-size e color.

Propriedade: font-weight

A propriedade font-weight é utilizada para definir outro tipo de estilo para uma fonte. Podendo os valores serem normal ou bold. O estilo normal é o padrão do navegador, mas se você deseja que determinado elemento HTML de sua página fique em negrito você pode utilizar a propriedade font-weight como mostra o exemplo a seguir:

p{
   font-family: "Times New Roman";
   font-weight: bold;
}

Propriedade: text-indent

A propriedade text-indent é utilizada para definir um recuo na primeira linha de um parágrafo. No exemplo a seguir temos um recuo de 50px que será aplicado em todos os textos marcados com a tag <p>:

p{
   font-family: "Times New Roman";
   font-weight: bold;
   text-indent: 50px;
}

Propriedade: text-align

A propriedade text-align é utilizada para definir o alinhamento de um elemento. Podendo ele ser alinhado à esquerda (left), à direita (right), centralizado (center), ou justificado (justify), que é quando o texto contido em uma linha se estende tocando as margens esquerda e direita, tal como você vê em jornais e revistas. Vamos testar alguns exemplos em nossa página:

p{
   font-family: "Times New Roman";
   font-weight: bold;
   text-indent: 50px;
   text-align: justify;
}
h1{
   color: #FF0000;
   text-align: center;
}
h2{
   font-size: 22px;
   color: #0000FF;
   font-style: italic;
   text-align: right;
}

Observe que acrescentamos a propriedade text-align nas tags <p>, <h1> e <h2>, colocando diferentes valores em cada um deles. Na tag <h1> definimos o valor centerpara centralizar o texto no navegador; na tag <p> definimos o valor justify para justificar o texto; e na tag <h2> definimos o valor right para alinhar o texto à direita. Observe na imagem a seguir o comportamento de cada um desses elementos que receberam a propriedade text-align.

Código HTML +CSS Continuando...

<!DOCTYPE html>
<html>
<head>
    <title>Liga da Justiça</title>
</head>
<body>   
    <h1>Liga da Justiça</h1>       
    <p>A Liga da Justiça é uma fictícia equipe de super-heróis
       publicadas pela editora americana DC Comics. A equipe é
       um conjunto de super-heróis e entre seus membros,
       destacam-se: Superman, Batman, Aquaman, Mulher Maravilha,
       Flash e Ciborgue.</p>   
    <h2>Clark Kent (Superman)</h2>
    <h3>Bruce Wayne (Batman)</h3>
    <h4>Arthur Curry (Aquaman)</h4>
    <h5>diana prince (mulher maravilha)</h5>
    <h6>Barry Allen  (Flash)</h6>
    <h6>Victor Stone (Ciborgue)</h6>
</body>
</html>

Propriedade: text-decoration

A propriedade text-decoration é utilizada para adicionar efeitos em elementos de texto. Você pode, por exemplo, sublinhar, riscar ou colocar uma linha sobre um texto qualquer.

No exemplo a seguir estamos sublinhando o texto da tag <h3> com o valor underline e riscando o texto da tag <h4> com o valor line-through, além de estilizar as duas tags com a cor #007722 (verde).

h3{
   text-decoration: underline;
   color: #007722;
}
h4{
   text-decoration: line-through;
   color: #007722;
}

Ainda com relação à propriedade text-decoration, você tem também a opção de colocar uma linha acima do texto utilizando o valor overline.

Propriedade: letter-spacing

A propriedade letter-spacing é utilizada para definir o espaçamento entre letras. Vamos testar este recurso na tag <h3> através do seguinte código:

h3{
   color: #007722;
   text-decoration: underline;
   letter-spacing: 15px;
}

  

Propriedade: word-spacing

A propriedade word-spacing é utilizada para definir o espaçamento entre palavras. Vamos testar este recurso na tag <h4> através do seguinte código:

h4{
   color: #007722;
   word-spacing: 18px;
}

A imagem abaixo mostra o nosso projeto com todas as regras CSS que aprendemos até este momento. Observação: a propriedade “text-decoration: line-through” foi retirada do exemplo para melhor visualização da página.

Propriedade: line-height

A propriedade line-height é utilizada para definir o espaçamento (altura) entre linhas. Vamos testar este recurso na tag <p> colocando 30px de espaçamento.

p{
   font-family: "Times New Roman";
   font-weight: bold;
   text-indent: 50px;
   text-align: justify;
   line-height: 30px;
}

Propriedade: text-transform

A propriedade text-transform é utilizada para a capitalização do texto, ou seja, serve para controlar a forma de exibição dos textos com letras maiúsculas ou minúsculas, independente da maneira como foi escrita no código HTML.

Para esta propriedade temos os valores uppercase, lowercase, capitalize e none.

• Uppercase – converte todas as letras em maiúsculas;
• Lowercase – converte todas as letras em minúsculas;
• Capitalize – converte a primeira letra de cada palavra em maiúscula;
• None – as letras são exibidas exatamente como foram escritas no HTML.

Para testarmos a propriedade text-transform vamos atribuir o valor uppercase na tag <h4> e o valor capitalize na tag <h5>.

h4{
   color: #007722;
   word-spacing: 35px;
   text-transform: uppercase;
}

h5{
   font-size: 22px;
   color: #0000FF;
   text-transform: capitalize;
}

A imagem abaixo mostra o nosso projeto modelo com todas as regras CSS que aprendemos até este momento.

Propriedade: font

A propriedade font é utilizada para definir em um único local vários estilos para a fonte de um elemento. Ou seja, através dessa propriedade conseguimos resumir várias linhas de código CSS em apenas uma.

Supondo que para estilizar um parágrafo nós tenhamos a seguinte regra:

p{
   font-style: italic;
   font-weight: bold;
   font-size: 22px;
   line-height: 30px;
   font-family: Arial, Verdana, sans-serif;
}

Utilizando a propriedade font nós podemos colocar todas as características do parágrafo acima em uma única linha da seguinte forma:

p{
   font: italic bold 14px/24px Arial, Verdana, sans-serif;
}

A sintaxe geral para a propriedade font é: [style] [weight] [size] [/line-height] [family]. Sendo os valores size e family obrigatórios, os demais são facultativos e omitindo-os será adotado o valor padrão.

Altere no seu código do projeto modelo a regra CSS para a tag <p> conforme o exemplo utilizado acima com a propriedade font.

Para finalizar esta aula, vamos estilizar a tag <h6> com as seguintes propriedades abaixo:

h6{
   font-size: 16px;
   color: #8A7B2C;
   text-transform: lowercase;       
}

Observe na imagem a seguir o que acontece no nosso projeto quando acrescentamos a regra CSS acima.

Os textos “barry allen (flash)” e “victor stone (ciborgue)” passaram a ter exatamente a mesma estilização devido a ambos os textos estarem marcados com a tag <h6>. 

Pronto!Pronto!

fonte:cursocss hiperbytes