Títulos

Existem 6 níveis de cabeçalho no texto, onde cada nível representa um nível

de importância:
● <h1> até <h6>.
Régua Horizontal:

Serve para separar conteúdos em uma página HTML;

● É um elemento vazio e é representado pela tag <hr>;

Listas
Lista ordenada
1.
2.
3.
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>

Lista não ordenada

●
●
●
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>

Negrito:
● Quando se quer dá importância à palavra ou frase, usa-se o elemento
<strong>;

Itálico:
● Quando se quer dá importância à palavra ou frase, usa-se o elemento
<em>;
Outros elementos de formatação de texto:
<mark>: destaca o texto;
<small>: Reduz a fonte de parte do texto.;
<del>: Destaca parte do texto que foi adicionado Removido.
<ins>: Destaca a parte do texto que foi adicionada;
<sub>: Destaca a parte do texto que fica abaixo do nível normal
<sup>: Destaca a parte do texto que fica acima do nível normal

Hyperlink:
Hyperlink permite interligar diversas páginas na Web;
● <a href=”url”> Conteudo </a>

Para abrir um link em uma nova aba, apenas defina o atributo target como _blank:

● <a href="url" target="_blank"> Conteúdo </a>

Imagem:
● <img src= “endereco.jpg” alt=”Descrição da imagem”>
Tabela:

<table>
<tr>
<th> </th>
</tr>

<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Ligação entre CSS e HTML:
<link rel=”stylesheet” href=”css/estilo.css”/>

Seletor por tag

Este seletor básico escolhe todos os elementos que correspondem ao nome
fornecido. Sintaxe: nome-da-tag Exemplo: input corresponderá a qualquer elemento
<input>.

Seletor por classe

Este seletor básico escolhe elementos baseados no valor de seu atributo classe.
Sintaxe: .nome-da-classe Exemplo: .index irá corresponder a qualquer elemento que
tenha o índice de classe (provavelmente definido por um atributo class="index", ou
similar).

Seletor por ID
Este seletor básico escolhe nós baseados no valor do atributo id. Deve existir
apenas um elemento com o mesmo ID no mesmo documento. Sintaxe: #nome-do-id
Exemplo: #toc irá corresponder ao elemento que possuir o id=toc (definido por um
atributo id="toc", ou similar).

Cor de Fundo:
background-color: cor;
Cor do Texto:
color: cor;
Alinhamento do Texto

A propriedade text-align para definir o alinhamento do texto quanto a sua posição

horizontal:

Alinhado a esquerda:
 text-align: left;
Alinhamento centralizado:
text-align: center;
Alinhamento a direita:
text-align: right;
Alinhamento justificado:
Text-align: justify;

Decoração do texto:

Para alterar a decoração do texto, utiliza-se a propriedade text-decoration:

Underline: decoração abaixo do texto;

Overline: decoração acima do texto;

Line-through: decoração através do texto;

None: sem decoração.

Transformação do texto:
LETRAS MAIÚSCULAS: text-transform: uppercase;

letras minúsculas: text-transform: lowercase;

Letras Iniciais Maiúsculas : text-transform:capitalize;

Indentação:
recuo da primeira linha do parágrafo;
● text-indent:
Fonte:
As fontes podem ser classificadas em um grupo genérico de famílias:

Fontes serifadas; serif;

Fontes sem serifas: sans-serif;

Fontes monoespaçadas: monospace;

Família das fontes:

A propriedade utilizada para modificar a família de fontes é a font-Family;

Tamanho da fonte:
Propriedade font-size:

Espaçamento entre letras:

letter-spacing: normal;

Espaçamento entre palavras:

word-spacing: normal;

Espaçamento entre linhas:

line-height: normal;

Bordas:
A propriedade border-style especifica o tipo de borda será exibida.

pontilhada: dotted;
tracejada: dashed;
sólida: solid;
duplicada: double;
sulco: groove;
cume: ridge;
inserir: inset;
início: outset;

Largura da borda:

A propriedade border-width especifica a largura da borda de um elemento.

Cor da borda:

A propriedade border-color define a cor da borda;

Modificando apenas uma das bordas:
Top, para a borda superior;
Left, para a borda esquerda;
Right, para a borda direita;
Bottom, para a borda inferior.

Estilização da borda com comando curto:

border: tipo largura cor;

Borda arredondada:
Para arredondar uma borda, utiliza-se a propriedade border-radius.

Margem:
Propriedade margin;
margin; cima direita baixo esquerda;

O valor auto:
Com o valor auto, as margens laterais serão ajustadas automaticamente. Pode ser
utilizado para centralizar horizontalmente elementos que estão dentro de um
container.

Preenchimento
É definido a partir da propriedade padding.

box-sizing
content-box

Essa é o estilo padrão. As propriedades width e height são medidas

incluindo não só o conteúdo, mas o padding, border ou margin, ou seja,
padding, border e margin serão acrescidos ao tamanho do elemento.

Exemplo.: Se o elemento tiver {width: 350px}, então se aplicar uma

propriedade {border: 10px solid black;} o resultado renderizado no
navegador será elemento {width: 370px;}

border-box

As propriedades width e height incluem o tamanho do padding e a

propriedade border, mas não incluem a propriedade margin.

Exemplo.: Se o elemento tiver {width: 350px}, então se aplicar uma

propriedade {border: 10px solid black;} e {margin: 10px}, o resultado
renderizado no navegador será elemento {width: 370px;}.