SP-Design

Seja bem-vindo ao SP-Design. Aqui, lhe ajudaremos com o tema de seu Fórum/Blog/site, vocês poderão solicitar e fornecer ajuda a outros usuários sobre o design e estrutura, tanto grafica, tanto em css e templantes.


Regulamento e informações:      
Equipe SP-Design
Regras do fórum
Como entrar na equipe Staff
Seções do fórum:
Pedidos Graficos
Pedidos de Códigos
SP-Design e você
Antes de postar uma dúvida:
Função busca
Perguntas e respostas frequêntes
Tutoriais, dicas e astúcias
Feliz ano novo para você!
Leia a carta de boas festas da equipe SPD.
Área Vip, os códigos mais inovadores
Obtenha os códigos mais inovadores de nosso fórum, atraves de pontos de Cash.
Leia as Regras do SP-Design
Acabou de chegar? Para se "enturmar" rapidamente leia as regras desse fórum.
Tutoriais e Dicas
Veja aqui nossos tutoriais inéditos, e muitos outros tutoriais sobre Design.
Publique no SPublicidade
Publique, peça opinião de pessoas experientes, divulgue o seu trabalho com o SPublicidade
Modifique o visual do seu fórum
Dúvidas sobre códigos HTML, CSS, BBCode e JQuery. Também, poderá tirar dúvidas sobre Templantes.
Faça Pedidos Gráficos para seu fórum
Este é um serviço gratuito para customização e criação de banners, logos, avatares, ícones...
Novo Administrador na comunidade
Pro Administradores adicionam novo administrador na equipe SPD.

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

Jose Hamizaki

Jose Hamizaki
Designer Grafico

Dom 27 Jan 2013, 7:44 am

Código:
p {
      text-indent: 30px;
   }

Exemplo

Alinhamento de textos [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 é alinhado à direita e os contidos nas células de dados são centrados. E, os textos normais em parágrafos são justificados:

Código:
th {
      text-align: right;
   }

   td {
      text-align: center;
   }

   p {
      text-align: justify;
   }

Exemplo

Decoração de textos [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

são sublinhados, os cabeçalhos

levam um linha em cima e os cabeçalhos

são cortados por uma linha.

Código:
h1 {
      text-decoration: underline;
   }

   h2 {
      text-decoration: overline;
   }

   h3 {
      text-decoration: line-through;
   }

Exemplo

Espaço entre letras [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

e de 6px entre as letras do texto de um cabeçalho

o código a seguir deverá ser usado.

Código:
h1 {
      letter-spacing: 6px;
   }

   p {
      letter-spacing: 3px;
   }
Exemplo

Transformação de textos [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
  • (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.

    Código:
    h1 {
          text-transform: uppercase;
       }

       li {
          text-transform: capitalize;
       }

    Exemplo">
  • [F]lames

    [F]lames
    Desenvolvedor Web

    Dom 27 Jan 2013, 8:34 am

    Olá,

    Este tutorial estará sendo movido, pois o mesmo está sendo aceito.

    Até mais.

    Tutorial aceito e movido para "Outros tutoriais, e recursos"

    Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

    Você não está conectado. Conecte-se ou registre-se



    Permissões neste sub-fórum
    Não podes responder a tópicos

    TiagoDJ-7.0, Seg 03 Mar 2014, 3:21 pm

    Tenma Hiraga, Dom 12 Jan 2014, 2:49 pm

    TiagoDJ-7.0, Ter 31 Dez 2013, 5:50 pm

    Crowley, Ter 31 Dez 2013, 8:42 am

    TiagoDJ-7.0, Sex 27 Dez 2013, 9:33 pm

    Ghost, Sex 27 Dez 2013, 6:37 pm

    Crowley, Sex 27 Dez 2013, 12:53 pm

    Crowley, Sex 27 Dez 2013, 12:46 pm

    Destaque do Fórum
    Destaque do Fórum

    Carregando avatar...
    Muito Obrigado
    Parabens para o Membro destaque do fórum, pela sua ótima competencia em nosso fórum, um agradecimento dos Usuários e de toda a equipe a você !! Muito Obrigado !!

    Quer um Widget igual a este ?
    peça o seu aqui >>>

     

    Atualizado com e-referrer
    Publicidade | SEJA NOSSO PARCEIRO
    Naruto Rpg FutureLes power infoMaster ExpShiftactifThe forum of Codes

    2012 © SP-Design - Ajuda na criação de códigos e na aparência de seu Fórum™ - Design de Cyllaz - Todos os direitos reservados ®