Fontes Padding, Margin, Tam

  • Fontes
  • Tamanhos
  • Espaços
  • Margens

Fontes

.ft-p = Font Principal;
.ft-s = Font Secundária;
.ft-d1 = Font Destaque 1;
.ft-d2 = Font Destaque 2;
.ft-d3 = Font Destaque 3;
.ft-d4 = Font Destaque 4;


Poppins,
Roboto,
Meow,
Alumni Sans,
Playwrite BR,
Dancing Script 

              
                
                    <div class="ft-p">Font Principal</div>
                    <div class="ft-s">Font Secundária</div>
                    <div class="ft-d1">Font Destaque 1</div>
                    <div class="ft-d2">Font Destaque 2</div>                  
                    <div class="ft-d3">Font Destaque 3</div>                  
                    <div class="ft-d4">Font Destaque 4</div>
Font Principal
Font Secundária
Font Destaque 1
Font Destaque 2
Font Destaque 3
Font Destaque 4

Negrito

.fwb = font-weight: bold;
.fwn = font-weight: normal;
.fwl = font-weight: lighter;
.fw1 = font-weight: 100;
.fw2 = font-weight: 200;
.fw3 = font-weight: 300;
.fw4 = font-weight: 400;
.fw5 = font-weight: 500;
.fw6 = font-weight: 600;
.fw7 = font-weight: 700;
.fw8 = font-weight: 800;
.fw9 = font-weight: 900;

              
                
                    <div class="fwb">font-weight:bold;</div>
                    <div class="fw5">font-weight:500;</div>

Estilo [ Style ]

.fsi = font-style: italic;
.fsu = text-decoration: underline;

Italico
Sublinhado
              
                
                    <div class="fsi">Italico</div>
                    <div class="fsu">Sublinhado</div>

Alinhamento [ Align ]

.E = text-align: left;
.D = text-align: right;
.C = text-align: center;
.J = text-align: justify;

Transformar [ Transform ]

.ftl = text-transform: lowercase; - Fonte Minúscula
.ftu = text-transform: uppercase; - Fonte Maiúscula
.ftc = text-transform: capitalize; - Fonte Capitalizada


Minúscula
Maiúscula
Capitalizada
              
                
                    <div class="ftl">Minúscula</div>
                    <div class="ftu">Maiúscula</div>
                    <div class="ftc">1º Letra Maiúscula</div>

Tamanhos

.f{5|200} = font-size


Tamanho 10
Tamanho 21
Tamanho 35
Tamanho 16
Tamanho 8
              
                
                    <div class="f14">Tamanho 14</div>
                    <div class="f22">Tamanho 22</div>
                    <div class="f5">Tamanho 5</div>
                    <div class="f20">Tamanho 20</div>

Altura da linha [ Line Height ]

.al{1|30} = line-height


Espaço 4

Espaço 10

Espaço 22
              
                
                    <div class="al10">Espaço 10</div>
                    <div class="al4">Espaço 4</div>

h1. Cabeçalho

h2. Cabeçalho

h3. Cabeçalho

h4. Cabeçalho

h5. Cabeçalho
h6. Cabeçalho
              
                
                    <h5>h5. Cabeçalho</h5>
                    <h6>h6. Cabeçalho</h6>
.h1 Cabeçalho
.h2 Cabeçalho
.h3 Cabeçalho
.h4 Cabeçalho
.h5 Cabeçalho
.h6 Cabeçalho
              
                
                    <div class="h1">.h1 Cabeçalho</div>
                    <div class="h2">.h2 Cabeçalho</div>

Espaços Padding

.e(e | d | t | f | x | y){1|20|meio acrescenta _} = padding;


[ e = esquerda, d = direita, t = topo, f = fim ];

Espaços 2 ( .e2 )
Espaços esqueda 5.5 ( .ee5_ )
Espaços esquerda e direita 1.5 ( .ex1_ )
Espaços fim e topo 3 ( .ey3 ) 
              
                
                    <div class="e4">
                        Espaços 4
                    </div>
                    <div class="ee2_">
                        Espaços esquerda 2.5
                    </div>
                    <div class="ex3_">
                        Espaços esquerda e direita 3.5
                    </div>
                    <div class="ey2">
                        Espaços final e topo 2
                    </div>

Margens

.m(e | d | t | f | x |y){1|20|meio acrescenta _} = margin [ Margens ];


[ e = esquerda, d = direita, t = topo, f = final ];


Margens 14
Margem esquerda 4, final 3
Margens esquerda e direita 4.5
Margens direita topo final 2 
              
                
                    <div class="m4">
                        Margens 4
                    </div>
                    <div class="me4_ mf3">
                        Margens esquerda 4.5, final 3
                    </div>
                    <div class="mx3">
                        Margens esquerda e direita 3
                    </div>
                    <div class="md3 mf3_">
                        Margens direita 3 e final 3.5
                    </div>

                    <!-- obs.: lembrar que top e final não funciona em linha (inline)-->