CSS é a abreviatura de Cascade Styling Sheet, que significa Folha de Estilo em Cascata, e é a linguagem utilizada para controlar a apresentação de elementos em documentos HTML. A apresentação destes é especificada por uma série de regras que podem ser atribuídas em linha através dos atributos do elemento style ou através de regras incluídas dentro das tags na secção head dos documentos HTML, ou através de folhas de estilo externas (Leia: Tutorial: Aprender o básico sobre CSS ). Cada regra de estilização selecciona os elementos e depois aplica as regras aos mesmos.

O CSS foi criado pelo W3C para recuperar o controlo da markup de documentos à medida que o HTML ia evoluíndo a partir das tags primárias que definiam os elementos estruturais de um documento, como os cabeçalhos, parágrafos, hiperligações e listagens. Neste artigo Programação CSS para iniciantes (Parte XIV) vamos mostrar como fazer a formatação de texto, aprendendo desde já como especificar tamanhos para os tipos de letra, escolher um tipo de letra ou definir o estilo da mesma, utilizando CSS.

CSS

Não perca os artigos anteriores desta série:

3. ALTERAR O ESTILO DOS TIPOS DE LETRA

A propriedade font-style pode fazer um pedido ao navegador para utilizar uma variante do tipo de letra ao especificar as palavras-chave italic ou oblique, que são ligeiramente diferentes. Quando é utilizada a palavra-chave italic, o navegador tenta localizar uma variante do estilo itálico do tipo de letra definido no seu banco de dados de tipos de letra. Isto é feito utilizando os tipos de letra standard que são utilizados pelos navegadores, e quando são utilizadas as palavras chave o objetivo é utilizar uma variante do tipo de letra que está a ser utilizado para criar por exemplo um destaque em uma parte do texto. Quando é utilizada a palavra chave oblique o navegador tenta localizar uma variante obliqua do tipo de letra que está a ser utilizado de momento no seu banco de dados de tipos de letra. Depois de localizada, o navegador irá utilizar a variante para o propósito que o desenvolvedor pretender. Na realidade, a utilização de italic ou oblique é praticamente o mesmo, pois são idênticos e por isso mesmo o resultado não difere muito. Também podem ser aplicados outros estilos ao tipo de letra, como small caps que faz com que o tipo de letra fique com o aspeto de letras maiúsculas mas de forma subtil e não agressiva. Para ver estes exemplos em ação, passamos a praticar:

  1. Crie um documento HTML e insira o seguinte código para criar os elementos com texto que iremos estilizar com CSS:
    <p id="par1">Este parágrafo está estilizado normalmente, mas pode conter um elemento com <span class="italic">italic</span> e outro com <span class=="oblique">oblique</span>.</p>
    
    <p id="italic">Este parágrafo está estilizado com italic mas pode <span class="norm">tornar-se normal.</span></p>
    
    <h2 class="scaps"> Este cabeçalho está estilizado com small caps.</h2>
  2. De seguida crie um documento CSS, linke-o ao documento HTML e insira o seguinte código para estilizar os elementos:
    p#par1{font-style: normal}
    p#italic{font-style: italic}
    
    span.italic{font-style:italic}
    span.norm{font-style:normal}
    span.oblique{font-style: oblique}
    
    h2.scaps{font-variant:small-caps}
  3.  Salve ambos os documentos e observe o resultado no seu navegador (De notar que este tipo de letra não suporta small caps para caracteres como o Ç ou acentos):
    Programação CSS para iniciantes (Parte XV)

4. ALINHAMENTO DE TEXTO

O alinhamento de texto num parágrafo é feito normalmente de forma horizontal, por defeito alinhado à esquerda, sendo este o comportamento standard adotado pelos navegadores quando fazem a execução do código. Adicionalmente o CSS fornece uma propriedade de alinhamento de texto que é a text-align, podendo desta forma especificar de forma direta como quer o seu texto alinhado em relação à caixa de conteúdo onde está inserido, utilizando as palavras chave left, center, right ou justify. Tal como poderá perceber pelas palavras chave, left irá alinhar o texto ao lado esquerdo do parágrafo, right irá alinhar o conteúdo ao lado direito do parágrafo, e center irá alinhar o conteúdo ao centro do parágrafo. Por fim, a palavra chave justify irá alinhar o contéudo tanto ao lado direito como ao lado esquerdo do parágrafo, ajustando também o espaçamento entre as palavras e os caracteres para que cada uma das linhas fique com o aspecto igual, de tamanho igual.

Ao fazer a renderização das linhas de texto, o navegador irá processar automaticamente a altura da linha para que corresponda ao tamanho do conteúdo – por defeito esta computação é feita utilizando 1.2x o tamanho do tipo de letra. De seguida o navegador irá apresentar o conteúdo centrado verticalmente em linhas invisíveis relacionadas com o tamanho da linha. A propriedade CSS vertical-align pode determinar especificamente como é que o texto deverá ser centrado em termos verticais, utilizando as palavras-chave baseline, sub e super. O valor baseline determina um alinhamento central na vertical, que é o comportamento standard. Os valores sub e super irão aumentar os limites da área de conteúdo exterior e irão fazer com que o texto suba ou desça dentro dos limites.

O conteúdo poderá ter o seu alinhamento igualmente alterado ao determinarmos valores positivos ou negativos à propriedade vertical-align. Poderão ser utilizados os valores top, middle ou bottom para determinar posicionamentos. Além disso, poderão ainda ser utilizadas as palavra schave text-top e text-bottom para alinhar o texto verticalmente. Para ver como funcionam estas propriedades, vamos passar a ação:

  1. Crie um documento HTML e insira o seguinte código para criar os elementos com texto que iremos alinhar e estilizar com CSS
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et sapien ac velit fermentum tristique. Duis rhoncus, sem quis tempus egestas, metus ante ornare purus, nec dignissim nulla diam ut massa. Suspendisse facilisis felis sed purus semper vel sagittis mauris commodo. Morbi tincidunt, enim a fermentum tempus, dui velit tincidunt dolor, ac viverra enim sapien non massa. Quisque sed arcu lectus.</p>
    
    <p id="just">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et sapien ac velit fermentum tristique. Duis rhoncus, sem quis tempus egestas, metus ante ornare purus, nec dignissim nulla diam ut massa. Suspendisse facilisis felis sed purus semper vel sagittis mauris commodo. </p>
    
    <p>Esta linha tem <span class="super">superscript</span>,<span class="sub">subscript</span> e <span class="top">top</span>.</p>
  2. Salve o documento HTML, crie um ficheiro CSS e linke-o ao documento HTML. De seguida insira as seguintes regras de estilização que irão alterar o alinhamento do texto nos parágrafos criados:
  3. p, span {font:medium monospace; background:#0FF; border: 2px solid green}
    p#just {text-align: justify}
    span.super{vertical-align:super}
    span.sub{vertical-align::sub}
    span.top{vertical-align:top}
  4.  Por último salve ambos os ficheiros e observe o resultado:
    Programação CSS para iniciantes (Parte XV)
    O primeiro parágrafo está estilizado de forma normal, sem alinhamento de texto. O segundo parágrafo está estilizado com o texto com alinhamento justificado e o terceiro tem aquilo que referenciámos anteriormente como alinhamento super, sub e top. Não perca o próximo artigo nesta saga CSS!

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz