API tools faq
paste
Advertisement
Jvsierra

HTML LAB II - FONTES

Jvsierra
Aug 28th, 2018
108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.     <head>
  4.     <meta charset="UTF-8" />
  5.    
  6.     <title>Elementos CSS - Texto</title>
  7.    
  8.     <link rel="stylesheet" href="style.css" type="text/css" />
  9.     </head>
  10.     <body>
  11.         <div class="cabecalho fundo-verde borda-solida-branca" id="topo">
  12.             <h1 class="titulo alinha-centro cinza-claro sem-serifa">Laboratório de Informática II</h1>
  13.             <p class="alinha-centro cinza-claro sem-serifa">Elementos de fonte</p>
  14.         </div>
  15.        
  16.         <div class="menu fundo-verde borda-solida-branca alinha-centro">
  17.             <span class="fonte-pequena margem-esquerda "><a href="#tamanho-fonte">Tamanho</a></span>
  18.             <span class="fonte-pequena margem-esquerda "><a href="#familia-fonte">Família </a></span>
  19.             <span class="fonte-pequena margem-esquerda "><a href="#inclinacao-fonte">Inclinação </a></span>
  20.             <span class="fonte-pequena margem-esquerda "><a href="#negrito-fonte">Negrito</a></span>
  21.             <span class="fonte-pequena margem-esquerda "><a href="#alinhacao-fonte">Alinhamento</a></span>
  22.             <span class="fonte-pequena margem-esquerda "><a href="#decoracao-fonte">Decoração</a></span>
  23.             <span class="fonte-pequena margem-esquerda "><a href="#transformacao-fonte">Transformação</a></span>
  24.             <span class="fonte-pequena margem-esquerda "><a href="#sombra-fonte">Sombra</a></span>
  25.         </div>
  26.        
  27.         <div class="corpo-texto fundo-verde borda-solida-branca margem-topo">
  28.             <h1 class="titulo sem-serifa alinha-centro sem-serifa laranja" id="tamanho-fonte">Tamanho da fonte</h1>
  29.             <p class="branco margem-esquerda margem-direita paragrafo-tamanho-maior justifica">No CSS, o tamanho da fonte é determinada pela propriedade font-size.
  30.             É possível definir o tamanho da fonte com valores absolutos (centímetro, polegadas, milímetros, etc.) ou valores relativos (px, em e ex). Exemplos:
  31.             </p>
  32.            
  33.             <ul>
  34.                 <li><h3 class="sem-serifa laranja" style="font-size: 35px">35px</h1></li>
  35.                 <li><h3 class="sem-serifa laranja" style="font-size: 3em">3em</h1></li>
  36.                 <li><h3 class="sem-serifa laranja" style="font-size: 2ex">2ex</h1></li>
  37.             </ul>
  38.            
  39.             <hr class="margem-direita margem-esquerda branco"/>
  40.            
  41.             <h1 class="titulo sem-serifa alinha-centro sem-serifa laranja" id="tamanho-fonte">Família de fontes</h1>
  42.             <p class="branco margem-esquerda margem-direita paragrafo-tamanho-maior justifica">A família da fonte pode ser definida pela propriedade
  43.             <em>font-family</em>:</p>
  44.            
  45.             <ul>
  46.                 <li><h3 class="sem-serifa laranja" style="font-family: Verdana;">Fonte Verdana</h1></li>
  47.                 <li><h3 class="sem-serifa laranja" style="font-family:serif;">Fonte Serif (padrão)</h1></li>
  48.             </ul>
  49.            
  50.             <hr class="margem-direita margem-esquerda branco"/>
  51.            
  52.             <h1 class="titulo sem-serifa alinha-centro sem-serifa laranja" id="inclinacao-fonte">Inclinação da fonte</h1>
  53.             <p class="branco margem-esquerda margem-direita paragrafo-tamanho-maior justifica">
  54.             No CSS, a inclinação da fonte é definida pela propriedade <em>font-style</em>.Exemplos:
  55.             </p>
  56.            
  57.             <ul>
  58.                 <li><p class="sem-serifa laranja" style="font-style:italic;">Itálico</p></li>
  59.                 <li><p class="sem-serifa laranja" style="font-style: oblique;">Oblíquo</p></li>
  60.                 <li><p class="sem-serifa laranja" style="font-style: normal;">Padrão</p></li>
  61.             </ul>
  62.             <hr class="margem-direita margem-esquerda branco"/>
  63.            
  64.             <h1 class="titulo alinha-centro sem-serifa laranja" id="negrito-fonte">Negrito</h1>
  65.             <p class="branco margem-esquerda margem-direita paragrafo-tamanho-maior justifica">
  66.                 Definido pela propriedade <em></em>font-weight.
  67.                
  68.                 <p class="sem-serifa laranja margem-esquerda" style="font-weight: 800;">Texto com negrito = 800</p>
  69.  
  70.             </p>
  71.             <hr class="margem-direita margem-esquerda branco"/>
  72.            
  73.             <h1 class="titulo sem-serifa alinha-centro sem-serifa laranja" id="alinhacao-fonte">Alinhamento</h1>
  74.            
  75.            
  76.             <p class="branco margem-esquerda sem-serifa margem-direita paragrafo-tamanho-maior justifica">No CSS o texto é alinhado com a propriedade <em>text-align</em>,
  77.             que pode ter os valores <em>left</em>, <em>right</em>, <em>center</em> e <em>justify</em>. Exemplos:</p>
  78.             <ul>
  79.                 <li><p class="sem-serifa laranja alinha-esquerda">Texto à esquerda</p></li>
  80.                 <li><p class="sem-serifa laranja alinha-direita margem-direita">Texto à direita</p></li>
  81.             </ul><hr class="margem-direita margem-esquerda branco"/>
  82.            
  83.            
  84.             <h1 class="titulo alinha-centro sem-serifa laranja" id="decoracao-fonte">Decoração</h1>
  85.            
  86.             <p class="branco margem-esquerda sem-serifa margem-direita paragrafo-tamanho-maior justifica">
  87.                 Possibilita a adição de efeitos especiais no texto.</p>
  88.                
  89.                 <ul>
  90.                     <li><p class="sem-serifa laranja" style="text-decoration:overline;">Risco em cima</p></li>
  91.                     <li><p class="sem-serifa laranja " style="text-decoration: underline;">Risco embaixo</p></li>
  92.                     <li><p class="sem-serifa laranja " style="text-decoration:line-through;">Risco no meio</p></li>
  93.                     <li><p class="sem-serifa laranja " style="text-decoration: none;">Sem decoração</p></li>
  94.                 </ul>
  95.             </p>
  96.            
  97.             <hr class="margem-direita margem-esquerda branco"/>
  98.            
  99.             <h1 class="titulo alinha-centro sem-serifa laranja" id="transformacao-fonte">Transformação</h1>
  100.            
  101.             <p class="branco margem-esquerda sem-serifa margem-direita paragrafo-tamanho-maior justifica">Transforma a caixa das letras do texto.</p>
  102.             <ul>
  103.            
  104.             <li><p class="sem-serifa laranja "  style="text-transform:capitalize;">letra inicial maiúscula</p></li>
  105.             <li><p class="sem-serifa laranja "  style="text-transform:uppercase;">todas as letras maiúsculas</p></li>
  106.             <li><p class="sem-serifa laranja "  style="text-transform:lowercase;">TODAS AS LETRAS MINÚSCULAS</p></li>
  107.            
  108.             </ul>
  109.            
  110.             <hr class="margem-direita margem-esquerda branco"/>
  111.            
  112.             <h1 class="titulo alinha-centro sem-serifa laranja" id="sombra-fonte">Sombra</h1>
  113.            
  114.             <p class="branco margem-esquerda margem-direita paragrafo-tamanho-maior justifica">A sombra do texto é definida no CSS pela propriedade
  115.             <em>text-shadow</em>, que tem 4 parâmetros: posição horizontal, posição vertical, distância da sombra e cor. Exemplo:</p>
  116.             <h1 class="alinha-centro sem-serifa branco" style="text-shadow:5px 5px 2px red;">Texto com sombra</h1>
  117.             <hr class="margem-direita margem-esquerda branco"/>
  118.         </div>
  119.    
  120.         <div class="rodape fundo-verde borda-solida-branca margem-topo alinha-centro">
  121.             <a href="#topo" class="sem-serifa">Voltar ao topo</a>
  122.         </div>
  123.  
  124.     </body>
  125. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!