<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Texto</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<style>
*{
margin: 0;
}
html{
font: 28px;
}
body{
display: flex;
flex-direction: column;
align-items: center;
}
p{
/* valores padrões */
font-size: 1em;
font-size: 100%;
font-size: 16px;
font-size: 12pt;
/* unidades absolutas */
font-size: 100px;/*tamanho do pixel*/
font-size: 72pt;/*pontos */
font-size: lin;/*polegada */
/* unidades relativas */
font-size: 2.2em;
font-size: 2.2rem;
font-size: 50vh;
font-size: 10vw;/*unidades em view port, 10% da largura*/
font-family: monospace;
font-family: Georgia, serif;
font-family: Verdana, sans-serif;
font-size: 'Indie Flower', cursive;/*aponta para referência do link*/
font-weight: 100;/*peso da fonte*/
font-style: italic;
text-transform: uppercase;/*coloca todas as letras em ministula*/
/* text-decoration: overline underline line-through; */
word-spacing: 60px;
letter-spacing: 20px;/*altura da linha*/
line-height: 2.5em;/*largura da linha*/
text-align: center;/*alinha o texto no meio*/
}
/* classe botão */
.botao{
font-size: 28px;
text-decoration: none;
padding: 10px 30px;
border-radius: 25px;
}
/* classe destaque */
.destaque{
color: #fff;
background: tomato;
box-shadow: 2px 2px 1px #000;
}
/* pseudo classe, tem uma especificidade maior que destaque */
.destaque:active{
box-shadow: none;
}
</style>
</head>
<body>
<div>
<p>
Que texto <br>Legal !!!
</p>
</div>
<!-- classe 'botao' e classe 'destaque' -->
<a href="https://google.com" class="botao destaque">Google</a>
</body>
</html>
Nenhum comentário:
Postar um comentário