MÓDULO 2

Trabalhando com fontes:

Os seguintes comandos podem ser usados para variar a letra em CSS3: "font-family", "font-size", "font-weight", "font-style", "text-decoration" etc. Quando trabalhamos com "font-size" é recomendável utilizar a medida "em"

Propriedade "shorthand":

            
            Ao invés de escrevermos:

            h1{
            font-style: normal;
            font-weight: bolder;
            font-size: 2.5em;
            font-family: Arial, Helvetica, sans-serif;
            }

            Podemos simplificar para:

            font: normal bolder 2.5em 'Arial', 'Helvetica', sans-serif 
        

A ordem sempre será: "font-style - font-weight - font-size - font-family"

Importando com Google Fonts:

Para importarmos fontes extenas ao nosso código, podemos utilizar o "Google Fonts" para buscar e adicinoar utulizando "@import" no código CSS. Como exemplo eu importei a fonte "Montserrat":

Exemplo: ARIAL

Exemplo: MONTSERRAT

Baixando fontes externas:

Podemos também baixar fontes em sites na web e adicioná-las ao nosso site por meio da regra "@font-face" no código CSS

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, excepturi.

Dentro da regra "@font-face" podemos adicionar "format{}" para indicar o formato do arquivo, logo que pode variar de acordo com a fonte instalada. Cada arquivo recebe um modo de ser declarado:

• opentype (.otf)
• truetype (.ttf)
• -embedded-opentype
• truetype-aat (Apple Advanced Typography)
• svg

Seletores personalizados:

Quando utilizamos, por exemplo, mais de uma "<h1>" em nosso site, para representar os títulos. mas queremos diferenciar um deles, por exemplo o primeiro, para ser o título principal, podemos adicionar o parâmetro "id" para diferenciarmos ele dos demais, mesmo que todos sejam "<h1>".

Em um exemplo onde utilizemos o id "main" para diferenciar (você pode decidir o id), dentro do código CSS utilizaremos o elemento a ser modificado (ex.: h2) + #id. No caso, você substituirá "#id" por # + o nome que você selecionou para diferenciar. Exemplo utilizando "<h2>":

ABC

<h2 id="main">ABC </h2> 

DEF

<h2>ABC </h2>

GHI

><h2>ABC </h2>

De acordo com a W3C, quando criamos uma id, devemos utilizar ela somente uma vez. Quando for necessário mais de um uso, devemos utilizar o parâmetro "class".

• "#" = id
• "." = calss
• ":" = pseudo-class
• "::" = pseudo-element
• ">" = children

Exemplo de pseudoclasse utilizando "<div>" e "hover"

Modelo de caixas:

Diagrama simples:

Tipo de caixa:

box-level: Quando criado, pulará uma linha do conteúdo para iniciar, e pulará mais uma linha para retornar o conteúdo. Exemplo:

_ _ _ _ _ _ _ _ _ _ _ _ _ _

_ _ _ _ _ _

[box]

_ _ _ _ _ _ _ _ _ _ _ _ _ _

inline-level: Quando criado, iniciará na mesma linha, independente de haver conteúdo ou não, e caso haja conteúdo depois, não pulará linha. Exemplo:

_ _ _ _ _ _ _ _ _ _ _ _ _ _

_ _ _ _ _ _ [box] _ _ _ _

Exemplos:

box-level: <div>, <p>, <h1> etc.

inline-level: <span>, <strong>, <a> etc.

Exercícios:

box-level

box-level