Precisa de um freelancer, códigos-fonte e exemplos completos?
Bem-vindo(a) ao meu site. Além de realizar alguns serviços como freelancer eu tenho alguns códigos-fonte e exemplos completos de Java, Delphi, PHP, Python, C/C++, Hibernate, JPA, Spring, JSP, Servlets, Ruby, Ruby On Rails e muitas outras linguagens e frameworks. Veja como falar comigo clicando aqui.
 
Arquivo de Códigos - Página Inicial
Códigos-fonte
» Códigos-fonte e exemplos completos
Linguagens
» ActionScript
» Adobe AIR
» Adobe Flex
» AJAX
» C
» C#
» C++
» CSS
» Delphi
» DHTML - Dynamic HTML
» HTML/XHTML
» Java
» JavaFX
» JavaScript
» Java Servlets
» JSP - Java Server Pages
» Perl
» PHP
» PHP-GTK
» Python
» Ruby
» Tcl/Tk
» VB.NET
Bancos de Dados
» IBM DB2
» MySQL
Frameworks
» CodeIgniter
» jQuery
» JSF - Java Server Faces
» Qt
» Ruby On Rails
» Struts
» Struts 2
» wxWidgets
» Zend Framework
Container/Servidor
» Apache Tomcat
» Apache Web Server
Ferramentas
» Apache Ant
» iTextSharp (iText#)
Referências
» CSS1 e CSS2
» JavaScript
Serviços On-Line
» Qual é meu IP?
» Tabela Cores HTML I
» Tabela Cores HTML II
» Lista de Mime Types
» Códigos Teclas Virtuais
Usuários On-Line
Visitantes: 52
PHP
O que há de novo no PHP 5?
40 dicas e truques sobre como trabalhar com datas e horas em PHP
60 dicas e truques sobre como trabalhar com strings e caracteres em PHP
PHP e a Orientação a Objetos - POO (Curso Completo)

DHTML
Curso completo de DHTML para iniciantes

CSS
Como definir uma imagem de fundo fixa na página
Definindo uma imagem de fundo para botões HTML
Você está aqui: Inicio -> DHTML -> Curso Completo -> O pseudo-elemento :first-letter
O pseudo-elemento :first-letter
O pseudo-elemento :first-letter pode ser usado para aplicar o famoso efeito tipográfico dos jornais e revistas. A maioria dos artigos nestas publicações começa com a primeira letra do texto sendo ligeiramente maior que as outras. Com o uso do CSS você pode facilmente reproduzir tais efeitos. Veja em seguida um exemplo de uma página usando este pseudo-elemento:




Você pode visualizar este exemplo executando o arquivo lab1-15.htm na pasta de exemplos.

Veja em seguida o código CSS usado para fazer as declarações:

<style type="text/css">
<!--
  p {font-family: verdana; font-size: 80%; text-align: justify}
  p:first-letter {text-transform: uppercase; font-size: 200%}
  .diferente:first-letter {text-transform: uppercase;
        font-size: 300%; float: left; font-weight: bold; color: red}
//-->
</style>


Vamos fazer uma pausa e analisar este código?

1) Na primeira declaração nós definimos o estilo que será igual para todos os parágrafos: fonte verdana, tamanho 80% e texto justificado.

2)
Na segunda declaração nós definimos a formataçaõ para a primeira letra do parágrafo. Aqui nós definimos o tamanho da fonte como sendo 200% e transformamos a fonte em maiúscula para o caso de iniciarmos o parágrafo com letras minúsculas.

3) Para a terceira declaração nós fizemos uso de uma classe. Criamos uma classe de nome "diferente" e atribuímos a ela o pseudo-elemento. Aqui nós definimos o tamanho da fonte como sendo 300%, texto em negrito e cor vermelha. Gostaria de chamar sua atenção para o uso da propriedade float: left. Nós próximos capítulos do curso nós a estudaremos mais a fundo. Saiba por ora que o uso dela na última declaração fez com que a primeira letra flutuasse para a esquerda do texto, diferenciando-a daquela defininda para o primeiro parágrafo.

Veja em seguida o código completo para a página:

<html>
<head>
<title>Estudos CSS</title>

<style type="text/css">
<!--
  p {font-family: verdana; font-size: 80%; text-align: justify}
  p:first-letter {text-transform: uppercase; font-size: 200%}
  .diferente:first-letter {text-transform: uppercase;
      font-size: 300%; float: left; font-weight: bold; color: red}
//-->
</style>

</head>
<body>

<p>O levantamento concluiu que homens solteiros de até 35 anos têm risco de morte 50% maior do que um homem casado, da mesma idade. No caso das mulheres, as casadas têm menos probabilidade de desenvolver doenças crônicas do que as solteiras.</p>

<p class="diferente">Os dados mostram ainda que as crianças de pais casados que continuam a viver juntos, permanecem na escola, ou faculdade, por mais tempo - 78% das meninas e 69% dos meninos, em famílias de pais casados, permanecem como estudantes em tempo integral aos 17 anos.</p>

</body>
</html>


<< Início do curso | Primeiros passos >>
 
 
Arquivo de Códigos - Página Inicial
Veja dicas, truques e anotações de C++
Obtendo a quantidade máxima de caracteres que um objeto string pode armazenar
Aprenda a usar o tipo de dados int em C++
Como renomear um arquivo usando C++
Como substituir todas as ocorrências de uma substring em uma string
Como inserir itens em uma Listbox em tempo de execução
Controlando o acesso a membros de uma classe C++ usando o modificar public
Como ordenar os elementos de uma matriz usando a ordenação da bolha (Bubble Sort)
Como obter o índice do item selecionado em uma Listbox de seleção única
Entendendo a função WinMain das aplicações GUI usando a Windows API
Entendendo a atribuição de strings em C++
Veja dicas, truques e anotações de outras linguagens
PHP - Como verificar se uma variável é do tipo resource
Java - Definir a cor de fundo para um JTextArea
Java - Obtendo os índices dos itens selecionados em uma JList de seleção múltipla
Java - Criando um JComboBox editável
Java - Como renomear arquivos
VB.NET - O laço Do...While...Loop do VB.NET
Ruby - Como verificar se uma string está vazia (comprimento zero)
Python - Aprenda a usar a instrução break em Python
C - Aprenda a criar sua própria função substring() para obter uma substring a partir de uma string C
Java - Adicionando novos mapeamentos chave-valor a um HashMap

       

http://www.arquivodecodigos.net
:: Arquivo de Códigos - Softwares e Consultoria em Programação ::
Todo o conteúdo deste site, quando não devidamente observado, pertence a seus idealizadores e não
poderá ser usado para outras finalidades senão estudo e aprimoramento de técnicas de programação.
Certifique-se de ler as notas legais antes de proceder com o acesso e leitura do
conteúdo disponibilizado nestas páginas.

Fale Conosco: (62) 3261-7018 / (62) 8185-0734

Desenvolvedor Responsável: Osmar J. Silva

Página Inicial Contatos Pesquisar Mapa do Site