Scribd
Carregar
16 visualizações3 páginas

Anotações CSS

Enviado por

victordeoliveiratb
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd
16 visualizações3 páginas

Anotações CSS

Enviado por

victordeoliveiratb
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato TXT, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 3

########################################################################### CSS

Básico
################################################################################

margin distância do elemento pra fora


padding distância do elemento pra dentro

outline é uma propriedade que não interagem com o box model, e trabalha semelhante
ao border

box-sizing é utilizado para delimitar o tamanho do elemento

text-align serve para editar horizontalmente o alinhamento do texto, sendo seus


atributos: right (direita é o padrão) left (esquerda), center (centro), justify
(justificado).

text-transform edita a forma da letra, sendo os valores: caixa-alta (uppercase),


caixa baixa (lowercase), primeira letra de cada palavra maiúscula (capitalize).

text-ident: seria o espaçamento do início de um parágrafo que pode ser editado com
as unidades de medidas

text-decoration: sublinhado (underline), riscado (line-trought), linha em cima


(overline), os três podem ser utilizados simultaneamente.

letter-spacing: espaçamento entre as letras, editado com as unidades de medidas.

line-height: altura da linha, editado com as unidades de medidas

word-spacing: espaçamento entre palavras, " "


.

text-shadow edita o sombreamento, recebe 4 valores: deslocamento pra direita,


deslocamento pra baixo, raio do desfoque e cor da sombra.

Basicamente existem três grande famílias genéricas de fontes: com serifa, sem
serifa e monospace.
*A serifa consiste em um pequeno traço que está presente no fim das hastes das
letras.
*monospace é a fonte cujas letras e caracteres ocupam o mesmo espaço horizontal.
Isto contrasta com as fontes de largura-variável.

A propriedade font-family pode conter vários valores de fontes como um sistema de


"busca". Se o navegador não suportar a primeira fonte, ele tentará a próxima fonte.
cada valor adicionado é separado com vírgula.
*Se o nome de uma fonte contiver espaço em branco, ele deve ser colocado entre
aspas.

Existem dois tipos de família de fontes:


família-específica: o nome de uma família de fontes, como "times", "courier",
"arial".
família-genérica: O nome de uma família-genérica, como serif, sans-serif, cursiva,
monospace.

*a propriedade font-style permite a adição do valor pra tornar a fonte itálica.


*a propriedade font-weight permite editar a fonte para negrito, seja adicionando o
valor "bold" ou a numeração que varia de 100 a 900 (caminhando de 100 em 100)
*a propriedade ++font-variant:"small-caps"++ permite que todas as letras fiquem
maiúsculas porém respeitando a proporção original existentes entre minúsculas e
maiúsculas.

COMANDOS
crlt + shift + L seleciona e edita a palavra selecionada em todo código

ctrl + d = seleciona de um a um pra sobrescrever

crtl + ; comenta as linhas selecionadas automaticamente e se repetir o processo


ela tira o comentário

shift + alt + F = formata/ organiza o código html (indexa)

########################################################################### CSS
Intermediário
#########################################################################

-------------------------------------------------
<style type="text/css"></style> --> CSS direto no HTML
<link href="style.css" rel="stylesheet"/> --> CSS separado do HTML
-------------------------------------------------

fica ligado com o *display*:

flex:?????????????????????/

none: como se o elemento não estivesse na tela

block: elemento comporta toda linha. medidas ajustáveis. É preciso desse display
para usar o *margin-auto(centraliza o elemento)*

inline: o próximo elemento continua na mesma linha. medidas não ajustáveis

inline-block: continua na mesma linha. ajustável. É preciso desse display para usar
o *text-align*

**não se pode colocar elemento block em um parágrafo, pois isso quebra o fluxo
dentro desse elemento**

overflow: quando o conteúdo transborda o elemento, você pode delimitar a área do


conteúdo.

visible: o conteúdo apenas é visível "vazando" o container

scroll: add barra de rolagem x e y

auto: só na direção onde precisa

**pode-se ajustar apenas um eixo por vez (x ou y)**


**Eixo X = Horizontal. Eixo Y = Vertical.**

O position: absolute diferente do position: relative ele não tem seu posicionamento
relativo a sua posição inicial, é como se ele não ocupasse mais aquele lugar ou
estivesse uma camada a cima, com o poition: absolute, podemos definir as
propriedade "left rigth bottom top" e sua posição estará ligado ao seu pai desde
que o position pai seja diferente de static, caso contrário ele vai obedecer o
posicionamento no "body"
position: fixed, parece muito com o absolute, a diferença é que ele fica de fato
fixo na tela independente da rolagem ele sempre estará na posição colocada, o
posicionamento estará ligado ao viewport (O viewport é a tela do site, o que você
consegue enxergar), então para facilitar é como se o body da sua pagina ficasse por
trás do viewport que está uma camada acima, então ele position:fixed não estará
ligado a nenhum elemento pai.

position: sticky é uma posicionamento em que ele continua sendo referência para
outros elementos na pagina, porém quando ele chega na posição desejada, ele fica
fixo.

float: propriedade que tem a capacidade de fazer com que o elemento flutue
horizontalmente com os valores para o lado direito (right) ou esquerdo (left)

pode-se alterar a altura de um elemento por alguns caminhos:

line-height: da pra ajustar a altura e centralizar usando as unidades de medidas,


mas para um posicionamento específico é necessário saber as dimensões do pai

'position: absolute;' pode ser necessário usar o trasnform: no caso pode add o
translate dentro dessa propriedade pra terminar ajustar os eixos.

padding: só ajustar as dimensões com os diferentes tipos de unidade de medidas. A


desvantagem é que é mais dificil definir as medidas do elemento.

"<meta name="viewport" content="width=device-width, initial-scale=1.0">" sempre


coloque isso no head

"media queries"

nessa aula foi tratado sobre as dimensões do site em aparelhos com tamanhos
diferentes. geralmente usa-se algumas propriedades diferentes para rodar diferentes
dispositivos. desenvolve-se o site pra algum formato (desktop, mobile..) e coloca-
se ajustes para outros formatos na @media.

ajuste pode ser feito por meio da propriedade CSS:

@media screen and (max ou min -width X px){


}

aqui se trabalha com o numero de px da tela, onde a partir do valor definido as


propriedades se comportam da forma estabelecida dentro da propriedade.

*é possível utilizar mais de um no mesmo projeto


*o desenvolvimento padrão geralmente é mobile, dps desktop e outros formatos

Você também pode gostar