sexta-feira, 31 de maio de 2013

INTERNACIONALIZAÇÃO

PPSI 2

TÉCNICAS BÁSICAS PARA DISPONIBILIZAR O CONTEÚDO EM UM FORMATO INTERNACIONAL

CODIFICAÇÃO

Utilize Unicode sempre que possível para conteúdo, bases de dados, etc. Declare sempre a codificação do conteúdo.

A codificação de caracteres que escolhe determina quantos bytes são mapeados para caracteres no seu texto.

Normalmente as codificações de caracteres limitam-no a uma escrita particular ou conjunto de idiomas. O Unicode permite-lhe lidar simplesmente com a maior parte das escritas e idiomas em utilização à volta do mundo. Desta forma, o Unicode simplifica o manuseamento de conteúdo em vários idiomas, seja dentro de uma única página ou ao longo de um ou mais sítios. O Unicode é particularmente útil quando usado em formulários, escritas e bases de dados, onde necessita frequentemente suportar vários idiomas. O Unicode também torna muito directo adicionar novos idiomas ao seu conteúdo.


A menos que declare corretamente qual a codificação de caracteres que está a usar, os seus utilizadores não conseguem ler o seu conteúdo. Isto deve-se a suposições incorretas que possam ser efetuadas pela aplicação ao interpretar o seu texto sobre quantos bytes mapear para os caracteres.

 A codificação mais utilizada é a UTF-8, pois abrange todas as linguagens existentes. Para garantir ou verificar de qual codificação está definida no seu software ou seu editor de texto. Deve-se seguir alguns passos,( exemplo no NotePad++):
 1. Clicar na aba formatar
 2.Selecionar qual a sua preferência o padrão está a codificação em ANSI
 3. Mudar para UTF-8 e seus arquivos estaram codificados nesse padrão.






Também pode se definir a codificação pela tag charset com a codificação de uma tag com o JavaScript externo como no exemplo (1) ou então na metatag (2) que especifica  a codificação da página.




SAÍDAS

Utilize caracteres diferentes das saídas (p.ex.á á ou á) sempre que puder.

Saídas tais como Referências de Caracteres Numéricos (NCRs) e entidades são formas de representação de qualquer caractere Unicode em markup com utilização de caracteres ASCII. Por exemplo, pode representar o caractere "á" em X/HTML como á or á or á.


Tais saídas são úteis para representar claramente caracteres invisíveis ou ambíguos, e para prevenção de problemas com caracteres da sintaxe como o & comercial ou sinais de maior e menor. Também podem ser úteis em ocasiões para representar caracteres não suportados pela sua codificação de caracteres ou indisponível a partir do seu teclado. De outra forma deve sempre usar caracteres em vez de saídas.

IDIOMA

Declare o idioma dos documentos e indique as alterações internas do idioma.

A informação sobre o idioma (humano) do conteúdo é também importante para acessibilidade, estilo, pesquisa, edição, e outros motivos. Quanto mais e mais conteúdo for etiquetado e etiquetado corretamente, as aplicações que possam detectar informação do idioma irão tornar-se cada vez mais úteis e dominantes.


Quando declarar o idioma, deverá necessitar de expressar informação sobre uma gama específica de conteúdo de uma forma diferente a partir da metadata sobre o documento como um todo. É importante entender esta distinção.


O exemplo abaixo mostra que a página html esta marcada com o idioma em “português”, porém se desejar pode-se introduzir outro idioma em um trecho específico por exemplo em um parágrafo. Para colocar o idioma basta incluir o atributo lang na tag desejada.




APRESENTAÇÃO VS. CONTEÚDO

Utilize folhas de estilo para apresentação de informação. Restringir marcação a semânticas.

É um princípio importante do desenho da Web manter a forma como o conteúdo é formado ou apresentado para o separar do próprio texto. Isto faz com que seja simples aplicar estilos alternativos para o mesmo texto, por exemplo, de forma a exibir o mesmo conteúdo tanto num navegador convencional como num dispositivo pequeno de mão.

Este princípio é particularmente útil para a localização, porque as escritas diferentes têm necessidades tipográficas diferentes. Por exemplo, devido à complexidade de caracteres Japoneses, pode ser preferível evidenciar em páginas X/HTML Japonesas de outras formas que não negrito ou itálico. É muito mais fácil aplicar tais mudanças se a apresentação for descrita com CSS, e a markup é muito mais limpa e mais gerível se o texto for correcta e inequivocamente etiquetado como "evidenciado" em vez de apenas "negrito".


Poderá poupar tempo e esforço considerável durante a localização para trabalhar com ficheiros CSS em vez de ter de mudar a markup, porque quaisquer alterações necessárias podem ser efectuadas num local único para todas as páginas, e o tradutor pode-se focar no conteúdo em vez de na apresentação.

De acordo com as técnicas, é aconselhado colocar os estilos de uma página HTML em folhas de estilo, pois torna a manutenção e possíveis alterações muito mais fáceis e rápidas. Além de separar o que é conteúdo e o que é utilizado para estilizar o conteúdo ( apresentação da página). Como um exemplo, podemos evitar o uso da tag <b> e aplicar uma classe no css, assim permite que a formatação possa ser retirada, se necessária, ou utilizada para mais conteúdos.


Outro exemplo é ilustrado abaixo um método em JavaScript  que mistura tanto a lógica do método de criar uma lista  dentro de uma div. Porém na primeira figura é mostrar com a cor azul e a cor laranja representa o estilo tornando o código de dificil entendimento.



Para solucionar esse problema criamos uma regra CSS em uma folha de estilo externa, mostrado em azul. Separando o conteúdo da regras de apresentação da página.





IMAGENS, ANIMAÇÕES & EXEMPLOS

Verifique se é traduzível e se tem um desvio cultural inapropriado.

Se desejar que o seu conteúdo comunique realmente com pessoas, necessita falar o seu idioma, não apenas através do texto, mas também através de imagens locais, cores, objetos e preocupações. É fácil ignorar a natureza específica cultural do simbolismo, comportamento, conceitos, linguagem corporal, humor, etc. Deverá obter retorno na adequabilidade e relevância das suas imagens, clips de vídeo, e exemplos de utilizadores de dentro do país.


Deverá também ter cuidado quando incorporar texto em gráficos quando o conteúdo for traduzido. Texto em fundos complexos ou espaços restritos podem provocar problemas consideráveis para o tradutor. Deverá fornecer gráficos para o grupo de localização que tem o texto numa camada separada e deverá ter em mente que o texto em idiomas como o Inglês e o Chinês irá certamente expandir-se na tradução.


FORMULÁRIOS

Utilize uma codificação apropriada em ambos os formulários e servidores. Suporta formatos locais de nomes/endereços, horas/datas, etc.

A codificação usada para uma página HTML que contém um formulário deverá suportar todos os caracteres necessários para introduzir dados nesse formulário. Isto é particularmente importante se o mais provável consistir no facto de os utilizadores introduzirem a informação em vários idiomas.

As bases de dados e escritas que recebem dados de formulários em páginas em vários idiomas devem também conseguir suportar os caracteres para todos aqueles idiomas em simultâneo.

A forma mais simples de ativar isto é usar o Unicode para ambas as páginas que contenham formulários e todo o processamento por trás e armazenamento. Nesse cenário o utilizador pode preencher os dados em que língua e escrita necessitar.

Deverá também tentar evitar fazer suposições que coisas como o nome do utilizador e endereço seguirão as mesmas regras de formatação que o seu. Pergunte-se a si mesmo quanto detalhe necessita realmente de partir em campos separados para coisas como endereços. Tenha em mente que nalgumas culturas não há nomes de ruas, noutras o número da casa segue o nome da rua, algumas pessoas necessitam mais do que uma linha para a parte do endereço que precede o nome da vila ou cidade, etc. De facto, nalguns locais o endereço é de cima para baixo desde o mais geral para o mais específico, o que implica uma estratégia de layout muito diferente.

Tenha cuidado quando efetuar rotinas de validação com suposições incorrectas sobre comprimentos de códigos de áreas ou de números de telefone. Reconheça que a etiquetagem cuidadosa é necessária para como introduzir datas numéricas, porque há convenções diferentes para a ordenação de dia, mês e ano.


Se estiver a reunir informação de pessoas em mais do que um país, é importante desenvolver uma estratégia para endereçamento dos formatos diferentes que as pessoas esperam poder usar. Não é apenas importante para o desenho de formulários que cria, mas também tem um impacto em como irá armazenar tal informação em bases de dados.



AUTORIZAÇÃO DE TEXTOS

Utilize texto simples e conciso. Tenha cuidado quando escrever as frases de vários conjuntos de palavras. Texto simples e conciso é mais fácil de traduzir. É também mais fácil para ler caso o texto não esteja no seu idioma principal.

Deverá ter um cuidado considerável ao compor mensagens de várias sub-conjuntos de palavras, ou quando inserir textos variáveis em conjuntos de palavras. Por exemplo, suponha que o seu site utiliza escrita JSP e que decide compor certas mensagens seguidas. Poderá criar mensagens juntando sub-conjuntos de palavras separados, como por exemplo "Apenas" ou "Não", "devolva resultados em ", e "qualquer formato" ou "HTML". Porque a ordem do texto nas frases de outros idiomas pode ser muito diferente, a sua tradução poderá apresentar grandes dificuldades.


De forma semelhante, é importante evitar fixar as posições de variáveis no texto como "Página 1 de 10". A sintaxe de outros idiomas poderá necessitar que os números sejam revertidos para fazer sentido. Se usar PHP, isto irá significar a utilização de um conjunto de palavras de formatação como "Página %1\$d de %2\$d.", em vez do mais simples "Página %d de %d.". Este último não é traduzível nalguns idiomas.



NAVEGAÇÃO

Inclua em cada página uma navegação claramente visível para páginas ou sites localizados, com o idioma de destino.

Onde tiver versões de uma página ou site num idioma diferente, ou para um país ou região diferente, deverá fornecer uma forma para o utilizador ver a versão que prefere. Isto deverá estar disponível a partir de qualquer página no seu site onde exista uma alternativa.


Quando fornecer ligações a páginas noutros idiomas, use o nome do idioma de destino no idioma e escrita nativos. Não assuma que o utilizador possa ler Inglês. Por exemplo, numa ligação a uma página Francesa, "Francês" seria escrito "français". Isto também se aplica se estiver a orientar o utilizador a uma página específica do país ou região ou site, ex. "Alemanha" deverá ser "Deutschland".


TEXTO DA DIREITA PARA A ESQUERDA

Para XHTML, adicione dir="etl" à etiqueta html. Utilize-o apenas para mudar a direcção base.

Texto em idiomas como o Árabe, Hebraico, Persa e Urdu é lido da direita para a esquerda. Esta ordem de leitura leva tipicamente ao texto alinhado à direita e a imagens de espelho de coisas como configuração de páginas e tabelas. Pode definir o alinhamento padrão e ordenação do conteúdo da página da direita para a esquerda incluindo simplesmente dir='rtl" numa etiqueta html.

A direção definida na etiqueta html define a direção base para o documento que alinha a descer através de todos os elementos da página. Não é necessário repetir o atributo nos elementos de nível inferiores a não ser que deseje mudar explicitamente o fluxo direcional.


Texto embebido em, por exemplo, escrita em Latim ainda corre da esquerda para a direita dentro do fluxo geral da direita para a esquerda. Tam como os números. Se estiver a trabalhar com idiomas da direita para a esquerda, deverá familiarizar-se com o básico do algoritmo bi-direcional Unicode. Este algoritmo cuida de muito do texto bi-direcional sem a necessidade de intervenção do autor. Existem algumas circunstâncias, porém, onde os caracteres de controlo Unicode ou markup são necessários para assegurar o efeito correto.

LINK 1: http://www.w3.org/International/quicktips/Overview.pt.php
LINK 2: http://warau.nied.unicamp.br/warauv2/?q=node/14
LINK 3: http://www.w3.org/International/quicktips/Overview.pt.php#encoding
LINK 4: http://www.w3.org/2007/Talks/0706-atmedia/slides/Slide0350.html

MICROFORMATOS

PPSI 2

01 - DEFINIÇÃO DE WEB SEMÂNTICA
A Web Semântica é uma Web de dados - de datas e os títulos e números de peça e as propriedades químicas e quaisquer outros dados se poderia conceber. A coleção de tecnologias de Web Semântica (RDF, OWL, SKOS, SPARQL, etc) fornece um ambiente onde a aplicação pode consultar esses dados, tirar conclusões usando vocabulários, etc. Ela propõe ajudar os computadores a "ler" e usar a internet. A grande idéia é bem simples - metadados adicionados a páginas Web podem tornar a máquina existente da World Wide Web legível. Isto não vai conceder inteligência artificial aos computadores, ou torná-los auto-conscientes, mas dará às máquinas ferramentas para encontrar, trocar e, dentro de um certo limite, interpretar as informações. É uma extensão, e não uma substituição, da World Wide Web.

LINK: http://informatica.hsw.uol.com.br/web-semantica.htm

02 - DEFINIÇÃO DE MICROFORMATOS
Microformato é um conjunto de formatos abertos projetados para adicionar semântica em qualquer documento XML, especialmente HTML e XHTML.
Isso é feito usando atributos do HTML específicos: class, rel, rev.

Aplicações, como buscadores, podem extrair informações específicas de páginas que usam microformatos, como informações de contato, evento, licença, etc.

03 - DEFINIÇÃO DOS MICROFORMATOS HCARD E HCALENDAR

hCard (Cartão de visita)
É um microformat para publicar os detalhes de contato (que pode não ser mais do que o nome) de pessoas, empresas, organizações e lugares, em (X)HTML, Atom, RSS, ou arbitrário XML. O hCard microformat faz isso usando um 1:1 representação de vCard (RFC 2426) propriedades e valores, identificado usando HTML classes e rel attributes. Ele permite analisar as ferramentas (por exemplo outros websites, ou do Operador de extensão Firefox) para extrair os detalhes, e exibi-las, utilizando alguns outros websites ou ferramentas de mapeamento, índice ou pesquisá-los, ou para carregá-los em um programa, livro de endereços.

Exemplo de um hCard:
<div id="hcard-Gustavo-Martins">

<span>

<span class="given-name">Gustavo</span>

<span class="additional-name">Martins</span>

<span class="family-name"></span>

</span>

<div class="org">S2i</div>

<div>

<div class="street-address">Rua X</div>

<span>São Paulo</span>

 </div>

<p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>

</div>
<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal; font-size: 13px;">
</span>


O elemento root é o vcard. Tudo que estiver dentro deste elemento é considerado como um hCard.

fn - Classe para dar semântica ao nome. No exemplo acima “fn” veio acompanhada da classe “n” e isso sinaliza que o nome é complexo, ou seja, possui sobrenome, segundo nome.
given-name - Sinaliza o primeiro nome ;
additional-name -  Sinaliza  o segundo nome;
family-name - Sinaliza o sobrenome;
org - Sinaliza uma instituição;
adr - Sinaliza um bloco de endereço que pode conter, rua (street-address), cidade (locality), etc.


04 - APLICAR MICROFORMATS PARA MARCAÇÃO DE CONTATO (HCARD) E INFORMAÇÕES SOBRE EVENTO (HCALENDAR)

Exemplo de codificação HTML utilizando o microformato hCalendar:

<div class="vevent">
  <h3 class="summary">Campus Party Brasil</h3>
  <p class="description">Campus Party é considerado o maior evento de entretenimento eletrônico em rede do mundo. Um encontro anual realizado desde 1997, que reúne, durante sete dias, milhares de participantes com seus computadores procedentes de toda a Espanha e de outras nações, com a finalidade de compartilhar curiosidades, trocar experiências e realizar todo o tipo de atividades relacionadas a computadores, as comunicações 
e as novas tecnologias*.</p>
  <p>Será realizado de <abbr class="dtstart" 
title="2008-02-11">11</abbr> a <abbr class="dtend" 
title="2008-02-17">17 de fevereiro de 2008</abbr></p>
  <p>Local: <span class="location">
Bienal, São Paulo, SP</span></p>
  <a class="url" href="http://www.campus-party.com.br/">

http://www.campus-party.com.br/</a>


</div>

Observe que ao atribuir a classe “description” à tag <p>, rotula a informação da tag, deixando claro que seu conteúdo é a descrição do evento. Logicamente essa classe só tem valor semântico se estiver dentro de uma tag com a classe “vevent”. Além do atributo classe, o atributo “title” também é usado para informar conteúdo, como acontece com “dtstart”. Note que em “title” o formato da data está em ISSO 8601, que é um formato de fácil leitura para um robô de busca. Já o conteúdo da tag apresenta um valor humanizado, que será apresentado pelo navegador.

Exemplo da utilização do microformato hCard:

<div class="vcard">
   <span class="fn n">Josiah Bartlet</span>
   <div class="org">White Hose</div>
   <div class="adr">
     <div class="street-adress">1600 Pennsylvania Avenue NW</div>
     <span class="locality">Washington</span>
     <span class="region">DC</span>
     <span class="postal-code">20500</span>
   </div> 
 </div>

O microformato hCard confere a você um modo de apresentar informações para contato, incluindo pessoas, organizações e locais, utilizando atributos de classe XHTML. É um dos muitos padrões detalhados no Microformats Project (consulte http://microformats.org/), cuja meta é fornecer um padrão para codificação de informações que sejam legíveis por máquinas, em páginas web utilizando HTML semântico. Assim como um padrão de design, um hCard padroniza a forma pela qual a informação é representada, permitindo que softwares de terceiros coletem a informação e façam dela bom uso.


05 - PASSO A PASSO: COMO UTILIZAR UMA FERRAMENTA DE TRADUÇÃO  MICROFORMATS PARA CRIAR UM LINK QUE PERMITA OS USUÁRIOS BAIXAR OU MOVER O CONTEÚDO PARA OUTRO LOCAL

Utilizando o H2VX, que é uma implantação de produção do X2V hCard e transforma conversão hCalendar.
Ele converte hCard contatos e hCalendar eventos em páginas da web para. vcf e. ics, respectivamente, para uso em desktops e outras aplicações de software cliente.

Exemplo: Se você criar um contato utilizando hCard é quiser que este contato seja baixado para máquina do usuário em um formato .vcf, para que ele possa adicionar ao seu catálogo de endereços, para criar um link para link para o serviço de conversão H2VX, assim:

<a  href = "http://h2vx.com/vcf/YOURURLHERE" > Download vCard </ a>

LINKS:
http://microformats.org/wiki/hcard-examples-in-wild
http://www.slideshare.net/elciof/microformats-a-web-semntica-com-letra-minscula
http://www.novateceditora.com.br/livros/csscookbook/capitulo9788575222300.pdf

terça-feira, 28 de maio de 2013

TUTORIAL CSS

PPSI 1

COMO GERAR UMA VERSÃO PARA IMPRESSÃO E OUTRA PARA VISUALIZAÇÃO DE UMA MESMA PÁGINA HTML


Às vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.

Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.


Com CSS pode-se definir estilos em um documento externo, desta maneira:

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

Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.


De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:

<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print">

O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.

Exemplo de duas folhas CSS distintas para impressão e visualização

Agora vejamos um exemplo de página web que tem duas folhas de estilo diferentes, uma para quando se está no navegador e outra quando vai se imprimir.


Temos um HTML que inclui duas folhas de estilos e dispõe de várias camadas, que logo construiremos ou posicionaremos com CSS:

<html>
<head>
   <title>informe super quebra-cabeça</title>
   <link rel="STYLESHEET" type="text/css" href="estilo.css">
   <link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print">
</head>
<body>
<div id="container">
    <div id="cabecalho">
      Super quebra-cabeça
    </div>
   <div id="logo">
       <img src="logo.gif">
   </div>
   <div id="corpo">
    <div id="lateral">
    <ul>
       <li><a href="#">Link 1</a>
       <li><a href="#">Vínculo 2</a>
    </ul>
    </div>
    <div id="direita">
       <div id="principal">
Conteúdo de um possível informe
       </div>
    </div>
   </div>
    <div id="rodape">
    © 2007 CriarWeb.com
    </div>
</div>
</body>

</html>

Como pode ser visto no HTML anterior, foram incluídos dois arquivos CSS com estilos. O primeiro é estilo.css, que é o estilo que se utilizará ao visualizar a página no navegador. O segundo link com uma folha de estilos CSS é estilo_imprimir.css, que definirá o aspecto da página ao imprimi-la (observe o atributo media="print" da etiqueta).

Os códigos CSS são muito parecidos, simplesmente fizemos duas mudanças para ilustrar o que vínhamos dizendo. Na visualização da página não se mostrará a camada com id="logo". Por sua parte, ao imprimir a página não se mostrará a barra de navegação da esquerda e os conteúdos centrais se mostrarão em toda a largura do espaço de impressão. Também não se mostrará a camada id="cabecalho".


O código CSS de visualização no navegador:

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#container{
text-align: left;
width: 770px;
margin: auto;
}
#cabecalho{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}

#logo{
visibility:hidden;
display: none;
}

#corpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #d0d0ff;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffff;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}

#rodape{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}

#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 580px;
float: left;
}

#principal table{
background-color: #ffffff;
width: 580px;
border: 2px solid #cccccc;
font-size:10pt;

}

O código CSS que se utilizará para a impressão da página:

BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 10 0 10 0px;
   text-align: center;
    background-color: #ffffff;
}
#container{
    text-align: left;
    width: 600px;
    margin: auto;
}
#cabecalho{
   visibility:hidden;
   display: none;
}

#logo{
   visibility:visible;
   display: block;
   margin-left: 20px;
}

#corpo{
    margin: 10 0 10 0px;
}
#lateral{
   visibility:hidden;
   display: none;
}

#rodape{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
   clear: both;
}

#principal{
    background-color: #ffffff;
    padding: 0 0 0 20px;
    width: 600px;
    float: left;
}

#principal table{
   background-color: #ffffff;
    width: 600px;
   border: 2px solid #cccccc;
   font-size:10pt;

}

Nota: Se quisermos ver como se imprimiria a página, porém sem a necessidade de utilizar a impressora (para não gastar papel nem tinta ou se não tivermos impressora), podemos acessar ao menu Arquivo, clicando em Visualizar impressão).

LINK: http://www.htmlstaff.org/ver.php?id=7926

segunda-feira, 27 de maio de 2013

CSS AVANÇADO

PPSI 1

01 - EFEITO CASCATA

É o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento.

Também é controlado pela especificidade e pela herança das propriedades. 
Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.


A prioridade para o efeito cascata em ordem crescente é a seguinte:
  1. folha de estilo padrão do navegador do usuário;
  2. folha de estilo do usuário;
  3. folha de estilo do desenvolvedor;
  4. estilo externo (importado ou linkado).
  5. estilo incorporado (definido na seção head do documento);
  6. estilo inline (dentro de um elemento HTML);
  7. declarações do desenvolvedor com !important;
  8. declarações do usuário com !important;
Assim, uma declaração de estilo com !important definido pelo usuário prevalece sobre todas as demais, é a de mais alta prioridade. Entre as folhas de estilo definidas pelo desenvolvedor do site, os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, isto é, prevalecerá sobre a folha de estilo definida na seção head, e, esta prevalecerá sobre uma folha de estilo externa. A prioridade mais baixa é para estilos padrão do navegador.

HERANÇA
Existem algumas propriedades do CSS que quando aplicadas aos “elementos pais”, os “elementos filhos” herdam a característica aplicada no pai. Um exemplo disso é a propriedade color. Quando aplicamos a propriedade color em um elemento div, o texto dos elementos contidos no div são coloridos de acordo com a propriedade.

[cc lang="css" line="1"]
div {
color: green;
}
[/cc]

O texto que há dentro deste div irá ter a cor verde, independente se este texto está “solto” dentro do div ou se ele está dentro de um parágrafo, por exemplo. Ou seja, os filhos herdaram o resultado desta propriedade. A mesma coisa acontece para, por exemplo, a propriedade font-size.

Há também as propriedades não herdadas pelos “filhos”. Estas propriedades geralmente são propriedades referentes a formatação da caixa, como por exemplo a propriedade width, height, margin, padding e assim por diante.

Essa herança é responsável por uma parte da cascata. É aí que está uma das primeiras vantagens de se utilizar o CSS no desenvolvimento com padrões. A vantagem da herança é exatamente podermos modificar poucas linhas do CSS para fazer alterações no site inteiro, sem ter que caçar elemento por elemento e modificando suas propriedades.

A herança é largamente utilizada em frameworks de CSS ou até mesmo em técnicas para que a customização de layouts seja explorada de forma automática ou manual pelo cliente, como homes de portais, e-commerce etc. Assim, o controle fica mais genérico, e é aí que entra a especificidade do CSS para controlar o detalhe.

VALOR INHERIT
O valor inherit é utilizada em propriedades destinadas aos elementos filhos. Suponha que você tem um elemento div. Este elemento div tem uma borda e você quer que seus filhos tenham a mesma borda. Veja o código:

[cc lang="css" line="1"]
um filho
outro filho
[/cc]

No CSS, o normal seria fazer isso:


[cc lang="css" line="1"]

div#pai {

border: 2px solid black;
}

div#pai div {
border: 2px solid black;
}
[/cc]

Se você quisesse modificar a borda do pai e mesmo assim manter a borda do filho, teria que fazer das alterações no código. O valor inherit serve para que o filho sempre herde um determinado valor de uma determinada propriedade do pai. Quando o valor do pai muda, o valor do filho também. Veja o código abaixo:

[
cc lang="css" line="1"]
div#pai {
border: 2px solid black;
}

div#pai div {
border: inherit;
}
[/cc]

Veja o resultado do código acima.


ESPECIFICIDADE
A especificidade define os detalhes. Quando você define no body as propriedades font-family, font-size, essas propriedades são herdadas por toda árvore de elementos do documento. Isso tráz uma uniformidade para o texto, mas nem todos os elementos terão esse valor genérico de font, logo você terá que ser mais específico e definir valores diferentes de font para estes elementos. É aí que a mágica acontece.

Observe o trecho de documento HTML abaixo:
...
<head>
...
<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 9px;
}
#conteudo p.nivelc {
color: #0f0; /* Cor verde */

#conteudo p {
color: #00f; /* Cor azul */
font-size: 18px;

p {
color: #f00; /* Cor vermelha */
font-size: 26px;

</style> 
</head>
<body>
<div id="conteudo">
    <p class="nivelc">
    Texto do primeiro parágrafo, blá...blá..
    </p>
    <p> 
    Texto do segundo parágrafo, blá...blá...
    </p>
</div>
<p> 
Texto do terceiro parágrafo, blá...blá...
</p>
</body>
</html>


O documento é rederizado e apresentado na tela como mostrado abaixo.
Tres textos em tamanhos e cores diferentes

Note que foram declaradas 03 (três) regras CSS, todas elas, aplicáveis ao elemento p.

- o primeiro parágrafo está dentro da div conteudo e lhe foi atribuida a classe nivelc;-
- o segundo parágrafo está dentro da div conteudo;
- o terceiro parágrafo está fora da div conteudo dentro da tag <body>

Diz-se que para aplicação no parágrafo, a regra #conteudo p.nivelc {... é mais específica que p.nivelc {... que por sua vez é mais específica que p {....

O VALOR IMPORTANT
A especificidade apresenta muitos problemas quando a equipe é grande e o código CSS está gigante. Você tenta fazer uma alteração em um determinado objeto, e nada funciona. Isso acontece porque alguém já definiu um seletor mais específico que o seu e definiu um valor diferente para sua propriedade, e isso te impede de fazer a alteração que precisa. Essa seria uma cena clássica, mas há outros cenários cujo o uso do valor !important.
O !important indica que aquela propriedade sempre será a principal, e que nunca será substituída mesmo que o seletor seja mais complexo. Veja:

[cc lang="css" line="1"]
p {
color: black;
}

div p {
color: red;
}

[/cc]

No código acima, o parágrafo terá a cor vermelha por conta do seletor div p ser mais específico.

[cc lang="css" line="1"]
p {
color: black !important;
}

div p {
color: red;
}

[/cc]

Agora, mesmo o seletor div p sendo mais específico, ele não controlará o elemento. O !important está jogando toda a relevancia para o color: black;.

Use com cuidado. Se você colocar muitos !important no seu código, a utilidade deste valor se perderá. Veja o exemplo.

LINK 1: http://maujor.com/tutorial/especificidade.php

LINK 2: http://tableless.com.br/efeito-cascata-e-especificidade-do-css/#.UaOgJ9KThBE

sexta-feira, 3 de maio de 2013

PROPRIEDADES CSS

PPSI 1 - POST II

I) BORDAS As propriedades para as bordas definem as características (os valores na regra CSS) das quatro bordas. Elas permitem o controle do estilo, da cor e da espessura das bordas de um elemento HTML. Também podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.

DEFINIÇÕES
01) border: Atalho para largura, estilo e cor das quatro bordas.
a) border-top: Maneira abreviada para todas as propriedades da borda superior.
b) border-right: Maneira abreviada para todas as propriedades da borda direita.
c) border-bottom: Maneira abreviada para todas as propriedades da borda inferior.
d) border-left: Maneira abreviada para todas as propriedades da borda esquerda.

02) border-color: Definição de uma só vez das cores de bordas para todos os lados.
Os valores são expressos em código ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow" .

Cores

a) border-top-color: Cor da borda superior.
b) border-right-color: Cor da borda direita.
c) border-bottom-color: Cor da borda inferior.
d) border-left-color: Cor da borda esquerda.

03) border-width: Definição de uma só vez larguras ou espessuras de bordas para todos os lados. Ela assume os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas:
Exemplo de espessuras de bordas
a) border-top-width: Largura da borda superior.
b) border-right-width: Largura da borda direita.
c) border-bottom-widht: Largura da borda inferior.
d) border-left-widht: Largura da borda esquerda.

04) border-style: Atalho para definir de uma só vez estilos de bordas para todos os
lados.
Existem vários tipos de bordas disponíveis para escolha. A seguir, eis aqui 8 tipos diferentes de bordas. Todos os exemplos são mostrados na cor "gold" e com espessura "thick", mas você pode usar qualquer cor e espessura ao seu gosto. 

Os valores none ou hidden podem ser usados 
quando não se deseja a existência de bordas.


Diferentes tipos de bordas


a) border-top-style: Estilo da borda superior.
b) border-right-style: Estilo da borda direita.
c) border-bottom-style: Estilo da borda inferior.
d) border-left-style: Estilo da borda esquerda.


EXEMPLOS DE DEFINIÇÃO DE BORDAS
As três propriedades explicadas acima podem ser definidas juntas para cada elemento e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul><p>. O resultado pode não ser uma obra prima, mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas:


h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}

p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

ul {
border-width: thin;
border-style: solid;
border-color: orange;
}


Veja como ficou o exemplo no link a seguir:
Obs: Representação do código somente até a quarta borda.
http://pt-br.html.net/tutorials/css/lesson11_ex1.php

É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:

h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}


Veja como ficou a representação do código acima:

Diferentes cores de bordas


Assim como para muitas outras propriedades, você pode usar uma declaração abreviada para bordas. Vamos a um exemplo:
    p {
        border-width: 1px;
border-style: solid;
border-color: blue;
       }
Pode ser abreviada assim:

    p {
border: 1px solid blue;
       }

II) MARGENS
A propriedade para margens, define um valor para espessura das margens dos elementos HTML. Vamos começar com um exemplo mostrando como definir margins para o documento. A ilustração a seguir mostra como serão as margens da página.
Exemplos de margens
As CSS são mostradas abaixo:

   body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Sintaxe resumida:
         body {
margin: 100px 40px 10px 70px;

         }
Representação: http://pt-br.html.net/tutorials/css/lesson10_ex1.php

As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:

   body {
        margin: 100px 40px 10px 70px;
}
   p {
        margin: 5px 50px 5px 50px;
        }

DEFINIÇÕES
01) margin: Define de uma só vez o tamanho da margem para todos os lados.
02) margin-top: Define a margem superior.
03) margin-right: Define a margem direita
04) margin-bottom: Define a margem inferior
05) margin-left: Define a margem esquerda.

06) padding: Pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento.

Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:

h1 {
background: yellow;
}
h2 {
background: orange;
}

Representação: http://pt-br.html.net/tutorials/css/lesson10_ex3.php

Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:

        h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

   h2 {
background: orange;
padding-left:120px;
}

Representação: http://pt-br.html.net/tutorials/css/lesson10_ex4.php

07) padding-top: Define o espaçamento superior.
08) padding-right: Define o espaçamento à direita.
09) padding-bottom: Define o espaçamento inferior.
10) padding-left: Define o espaçamento à esquerda.

III) CORES E FUNDO

01) color: Define a cor do primeiro plano de um elemento.


02) background: A propriedade background define as características do fundo dos elementos HTML. Com ela você declara várias propriedades de modo abreviado, economizando digitação e alguns bites, além de tornar a folha de estilo mais fácil de se ler e entender.

Ex: 

   background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right bottom;


Usando background você consegue o mesmo resultado, abreviando como mostrado abaixo:
background: #FFCC66 url("butterfly.gif") no-repeat fixed right
bottom;

A declaração abreviada deve seguir a seguinte ordem:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Se uma das propriedades não for declarada ela assume automaticamente o seu valor default. Por exemplo, a propriedade background-attachment e background-position não foram declaradas no código mostrado a seguir:

background: #FFCC66 url("butterfly.gif") no-repeat;




As duas propriedades não declaradas assumirão o valor default que como você já sabe são: a imagem rola na tela e será posicionada no canto superior esquerdo (que são os valores default para as propriedades não declaradas).

03) background-color: Define a cor do fundo de um elemento. Você pode aplicar cores de fundo para outros elementos, inclusive para cabeçalhos e textos. No exemplo abaixo foram aplicadas diferentes cores de fundo para os elementos <body> e <h1>.


body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex2.php
Notar que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vírgula.

04) background-image: Define a imagem de fundo.


Eis aqui uma imagem de uma borboleta para exemplificar a aplicação de imagens de fundo. Você pode fazer o download da imagem mostrada abaixo e usá-la nos seus experimentos (clique com o botão direito do mouse sobre a imagem e escolha "salvar imagem como") ou você poderá usar uma outra imagem qualquer ao seu gosto.
Borboleta
Para inserir uma imagem de fundo na página basta aplicar a propriedade background-image ao elemento <body> e especificar o caminho para onde está gravada a imagem.

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}

h1 {
color: #990000;
background-color: #FC9804;
}


Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex3.php


05) background-repeat: Define se e como a imagem de fundo utilizada se repetirá.


No exemplo anterior você observou que a imagem da borboleta repetiu tanto na vertical como na horizontal cobrindo toda a tela? A propriedade background-repeat controla o comportamento de repetição da imagem de fundo.

Agora vejamos os quatro diferentes valores para background-repeat.

01) background-repeat: repeat-x (A imagem se repete na horizontal).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex4.php
02) background-repeat: repeat-y (A imagem se repete na vertical).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex5.php
03) background-repeat: repeat    (A imagem se repete em ambas posições).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex6.php
04) background-repeat: no-repeat (A imagem não se repete).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex7.php

Por exemplo, o código mostrado a seguir é para que a imagem não se repita na tela:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex7.php

06) background-attachment: Define se a imagem de fundo utilizada será fixa ou com rolagem. Uma imagem de fundo fixa permanece no mesmo lugar e não rola com a tela ao contrário da imagem que não é fixa e rola acompanhando o conteúdo da tela.

A tabela a seguir mostra os quatro diferentes valores para background-attachment. Veja os exemplos para constatar a diferença entre imagem fixa e imegem que rola.

01) background-attachment: scroll (A imagem rola com a página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex8.php
02) background-attachment: fixed  (A imagem é fixa).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex9.php

Por exemplo, o código abaixo fixa a imagem na tela.

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

h1 {
color: #990000;
background-color: #FC9804;
}

Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex9.php

07) background-position: Define a posição do fundo. 

Existem várias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador.

As coordenadas podem ser expressas em percentagem da largura da janeja, em unidades fixas (pixels, centímetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. A figura a seguir ilustra o modelo de coordenadas:


Alguns exemplos:

01) background-position: 2cm 2cm 
(A imagem é posicionada a 2 cm da esquerda e 2 cm para baixo na página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex10.php
02) background-position: 50% 25%
(A imagem é centrada na horizontal e a um quarto (25%) para baixo na página).
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex11.php
03) background-position: top right
(A imagem é posicionada no canto superior direito da página)
Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex12.php

No exemplo de código a seguir a imagem é posicionada no canto inferior direito da página:

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}

Resultado: http://pt-br.html.net/tutorials/css/lesson3_ex13.php


IV) FONTES TIPOGRÁFICAS
As propriedades para as fontes, definem as características das letras que constituem os textos dentro dos elementos HTML.

01) font: Atalho para definir de uma só vez todas as propriedades de fonte.


02) font-family: Define a(s) família(s) da fonte.


Existem dois tipos de nomes para definir fontes: nomes para famílias de fontes e nomes para famílias genéricas. Os dois são explicados a seguir:

NOME PARA FAMÍLIAS DE FONTES: 
Exemplos para este tipo (normalmente conhecidas como "font") são "Arial", "Times New Roman" ou "Tahoma".

NOME PARA FAMÍLIAS GENÉRICAS: 
Famílias genéricas são fontes que pertencem a um grupo com aparência uniforme. Um exemplo são as fontes sans-serif que


englobam 

a coleção de fontes que "não têm pé".

A diferença está mostrada na figura a seguir:
Tres exemplos de familias de fontes genericas e alguns de seus membros


Ao listar fontes para seu website, comece com aquela preferida, seguindo-se algumas alternativas para ela. É recomendável encerrar a listagem das fontes com uma fonte genérica. Assim fazendo, em último caso a página será renderizada com fonte da mesma família das que foram especificadas quando todas as demais estiverem indisponíveis na máquina do usuário.

A seguir, um exemplo de listagem de fontes:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}



Cabeçalhos <h1> serão renderizados com fonte "Arial". Se o usuário não tiver a font Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.

Obs: Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.


03) font-style: Define o estilo utilizado da fonte. O estilo pode ser normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos <h2> serão em itálico.

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}


Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex2.php

04) font-variant: Exibe o texto em pequena caixa-alta (versalete) ou fonte normal. É usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos.

Exemplos:
Quatro exemplos de fontes em small caps

Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.


h1 {font-variant: small-caps;}
h2 {font-variant: normal;}


Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex3.php

05) font-weight: Define o peso da fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.
Ex:

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}


Resultado: http://pt-br.html.net/tutorials/css/lesson4_ex4.php


06) font-size: Tamanho da fonte.

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}


V) TEXTO
As propriedades para textos, definem as características dos textos inseridos dentro dos elementos HTML.

01) text-indent: Permite a aplicação de um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos marcados com <p>:

     p {
text-indent: 30px;
       }

02) text-align: 
A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.

No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:
        th {
        text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

03) text-decoration: A propriedade text-decoration possibilita adicionar "efeitos" ou "decoração" em textos. Você pode por rexemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.

        h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

04) letter-spacing: O espaçamento entre os caracteres de um texto é controlado pela propriedade letter-spacing. O valor desta propriedade define o espaço entre os caracteres. Por exemplo, se você deseja um espaço de 3px entre as letras do texto de um parágrafo <p> e de 6px entre as letras do texto de um cabeçalho <h1> o código a seguir deverá ser usado.
        h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}

05) word-spacing: Como o nome sugere, essa propriedade define o espaçamento entre as palavras de um texto.
Código:
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Propriedade word-spacing em CSS</title>
  </head>
  <body>
    <h3>Exemplos da propriedade word-spacing.</h3>
    <p>
      Nesta página vemos a propriedade
      <strong>word-spacing</strong>,
      que manipula o espaçamento entre as palavras.
    </p>
    <p style="word-spacing: 7px;">
      Este parágrafo está definido com a propriedade
      <strong>word-spacing: 7px</strong>;
    </p>
    <p style="word-spacing: 10px;">
       Este outro parágrafo foi definido
      <strong>word-spacing: 10px</strong>;
    </p>
  </body>
</html>

Resultado:
word-spacing com CSS


06) text-transform: 
A propriedade text-transform controla a capitalização (tornar maiúscula) do texto. Você pode escolher capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no código HTML.


Como exemplo tomamos a palavra "cabeçalho" que pode ser apresentada ao usuário como "CABEÇALHO" ou "Cabeçalho". São quatro os valores possíveis para text-transform:


capitalize: Capitaliza a primeira letra de cada palavra. Por exemplo: "john doe" transforma-se para "John Doe".
uppercase: 
Converte todas as letras para maiúscula. Por exemplo: "john doe" transforma-se para"JOHN DOE".

lowercase :
Converte todas as letras para minúscula. Por exemplo: "JOHN DOE" transforma-se para"john doe".

none: 
Sem trasformações - o texto é apresentado como foi escrito no código HTML.



Para exemplificar vamos usar uma lista de nomes. Os nomes estão marcados com o elemento <li> (item de lista). Vamos supor que desejamos os nomes capitalizados e os cabeçalhos em letras maiúsculas.

Ao consultar o exemplo sugerido para este código dê uma olhada no HTML da página e observe que os textos no código foram escritos com todas as letras em minúsculas


        h1 {
text-transform: uppercase;
}

li {
text-transform: capitalize;
}

VI) MODELO DE FORMATAÇÃO VISUAL

01) float: Posicionamento adjacente à esquerda ou à direita do elemento.
left: o elemento será posicionado flutuando à esquerda. O fluxo do conteúdo não integrante do elemento será posicionado à direita a partir do 'top' do elemento que recebe a propriedade 'float'

right: similar à 'left', mas com o elemento flutuando à direita
none: o elemento não flutua

Exemplo: 
e {float: right;}


02) clear: 
Controle para os posicionamentos float.

none: nenhum controle de limpeza de flutuação será executado
left: limpeza de flutuação à esquerda: o elemento será posicionado abaixo da borda inferior do elemento flutuante à esquerda
right: limpeza de flutuação à direita: o elemento será posicionado abaixo da borda inferior do elemento flutuante à direita
both: o elemento será posicionado abaixo da borda inferior de qualquer elemento flutuante, seja à direita ou à esquerda

Exemplo: e { clear: both;}

03) widht: 
Largura.

Exemplo: 

e {width: 25%;}

04) height: 
Altura.

Exemplo: 
e {height: 250px;}

05) line-height: 
Distância entre as linhas de um texto.

Exemplo: 
e {line-height: 1.2em;}

06) vertical-align: 
Alinhamento vertical do texto.

baseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base no elemento, será considerado sua margem inferior.
sub - A linha de base do elemento será alinhada com a linha de base de conteúdo subscrito do elemento superior.
super - A linha de base do elemento será alinhada com a linha de base de conteúdo superescrito do elemento superior.
top - Alinha o topo do elemento com a linha de topo do elemento superior
text-top - A base superior do elemento será alinhada com a linha superior do conteúdo de textos do elemento-pai.
middle - A linha central do elemento e de seu elemento superior serão consideradas para alinhamento. (linha central do elemento superior = ponto central da altura da letra 'x')
bottom - Alinha o rodapé do elemento com o rodapé do elemento superior
text-bottom - A base inferior do elemento será alinhada com a linha inferior do conteúdo de textos do elemento-pai.

Exemplo:
e {vertical-align: sub;}


VII) LISTAS
A propriedade list define as características das listas HTML. Aceita de 1 a 3 valores.
Valores: list-style-type | list-style-position | list-style-image.

01) list-style: Maneira abreviada para todas as propriedades.

02) list-style-type: Define o tipo de marcador de item da lista.

Ex: Definir os marcadores de listas não ordenadas

<html>
<head>
<style type="text/css">
ul.none {
list-style-type: none;
}
ul.disc {
list-style-type: disc;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}
</style>
</head>
<body>
<ul class="none">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="disc">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="circle">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
<ul class="square">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>


Resultado:

  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres
  • Item um
  • Item dois
  • Item tres



Este exemplo demonstra como definir os marcadores de listas ordenadas.

<html>
<head>
<style type="text/css">
ol.decimal {
list-style-type: decimal;
}
ol.lroman {
list-style-type: lower-roman;
}
ol.uroman {
list-style-type: upper-roman;
}
ol.lalpha {
list-style-type: lower-alpha;
}
ol.ualpha {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ol class="decimal">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="uroman">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="lalpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
<ol class="ualpha">
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ol>
</body>
</html>

Resultado:

  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres
  1. Item um
  2. Item dois
  3. Item tres


03) list-style-image: Define a imagem a ser utilizada como marcador de item da lista.

Ex:
<html>
<head>
<style type="text/css">
ul {
list-style-image: url("seta.gif");
}
</style>
</head>
<body>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>

Resultado:
  • Item um
  • Item dois
  • Item tres


04) list-style-position: Define a posição do marcador de item da lista.
Ex:
<html>
<head>
<style type="text/css">
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
</style>
</head>
<body>
<ul class="inside">
<li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para  fixar o valor:"inside" dosmarcadores de listas.</li>
</ul>
<ul class="outside">
<li>Este texto destina-se a demonstrar o  valor: "outside" dos marcadores de listas.</li>
<li>E aqui continuamos com mais texto para  fixar o valor:"outside" dos marcadores de listas.</li>
</ul>
</body>
</html>



Resultado:

  • Este texto destina-se a demonstrar o valor: "inside" dos marcadores
  • E aqui continuamos com mais texto para fixar o valor:"inside" dos marcadores de listas.
  • Este texto destina-se a demonstrar o valor: "outside" dos marcadores
  • E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.



             http://www.maujor.com/index.php