Capítulo 3

CSS Básico

Criado por: Malcon Toledo

Bordas e Espaçamento

Propriedades:

border: margin: padding:

border:


border:  <border-width> || <border-style> || <color> 

		border: 5px solid #000000;

border-width:

<lenght> valor em px, em, rem, vh e vw
thin equivalente a 1px
medium equivalente a 3px
thick equivalente a 5px

border-style:

dotted  
dashed  
solid  
double  

border-style:

ridge  
groove  
inset  
outset  

border-color:


border-color:  #ff0000; 


border-color:  rgb(255,0,0); 


border-color:  rgba(255,0,0,0.5);

border-radius:


border-radius:  15px 30px 20px 5px;
topo esquerdo=15px, topo direito=30px
canto inferior direito=20px, canto inferior esquerdo=5px

border-radius:  15px;
topos os cantos = 15px

border-radius:  15px 50px 30px;
topo esquerdo = 15px
topo direito e canto inferior esquerdo = 50px
canto inferior direito = 30px

border-radius:  15px 30px;
topo esquerdo e canto superior direito = 15px
topo direito e canto inferior esquerdo = 30px

Margin e Padding

Atenção

Quando setamos a altura ou a largura de um elemento em css , estamos, na verdade, definindo a altura e largura da área de conteúdo desse elemento.

Para calcuar o tamanho total do elemento temos que adicionar no cálculo o tamanho da "borda", do "padding" e da "margem"

Exemplo:


div {
	width: 320px;
	padding: 10px;
	border: 5px solid gray;
	margin: 0;
}

O tamanho total do elemento será:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Unidades de medida css

Unidades de Medida de tamanho absoluto

Essas unidades são fixas. Não irão variar de acordo com o tamanho, tipo, ou demais características do dispositivo.

in polegada: 2,54cm = 96px
px pixel: 1/96in
pt pixel: 1/72in

Precisamos ficar atentos, pois o pixel do CSS não é a mesma coisa do do pixel da tela do dispositivo

pixel CSS é 1/96in

esse tamanho será sempre a mesma coisa, independente do dispositivo

pixel de Hardware é o menor ponto que uma tela pode exibir fisicamente e geralmente é composta por subpixels vermelhos, verdes e azuis

A quantidade de pixels físicos varia de acordo com cada disposito.

Para saber qual é a largura do seu dispositivo acesse:

Largura do meu dispositivo

nesse link também é possível saber o tamanho de outros dispositovos

Resolução

em termos práticos, levando em consideração o escopo dessa obra, podemos dizer que resolução é a quantidade de pixels que cabe em um quadrado com 1 polegada de altura por 1 polegada de largura

Consequência prática para imagens

Dispositivos com alta resolução irão exigir imagens com maior resolução (mais pesadas)

mais pesada: significa dizer que a imagem terá uma quantidade maior de bytes, ocupando mais espaço do HD e consumindo mais banda.

Isso pode gerar um consumo de tráfego desnecessário quando o site é visto em dispositovos com resolução menor, visto que eles não precisam de imagens tão pesadas.

sites pesados, são penalizados no ranqueamento dos motores de busca

Solução 1

usar a tag <picture> com o atributo media



	
	logo

se a tela for maior que 1100px exiba a "logo_grande.jpg",
se for menor exiba a "logo_normal.jpg"

Solução 2

Fazer a imagem com resolução maior, porém com qualidade menor

Unidades de Medida de tamanho relativo

Essas unidades que irão variar de tamanho de acordo, por exemplo, como o tamanho da fonte do elemento pai ou o tamanho da viewport.

em muda em relação ao tamanho da fonte do elemento pai
rem muda em relação ao tamanho da fonte do elemento raiz do documento

Unidades de Medida de tamanho relativo

vw 1% da largura da viewport
vh 1% da altura da viewport

Unidades de Medida de tamanho relativo

vmin menor medida entre vw e vh
vmax maior medida entre vw e vb

50vmin é o 50% da largura ou altura da viewport, dependendo de qual for menor

Estilos para Texto

Propriedades:

font-size: font-family: font-weight: font-style: line-height: text-decoration: line-height: text-transform: text-ident:

font-size:

Define o tamanho da fonte

xx-small (equivale a 9px)
x-small (equivale a 10px)
small (equivale a 13px)
medium (equivale a 16px)
large (equivale a 18px)
x-large (equivale a 24px)
xx-large (equivale a 32px)

font-family:

Define qual a fonte que será utilizada no elemento.

Serifa

Na tipografia, as serifas são os pequenos traços e prolongamentos que ocorrem no fim das hastes das letras.

Fontes Sans-Serif

Arial Texto exemplo. G R T A Q X e 1 2 3 4 5
Helvetica Texto exemplo. G R T A Q X e 1 2 3 4 5
Gill Sans Texto exemplo. G R T A Q X e 1 2 3 4 5
Lucida Texto exemplo. G R T A Q X e 1 2 3 4 5
Segoe UI Texto exemplo. G R T A Q X e 1 2 3 4 5
Verdana Texto exemplo. G R T A Q X e 1 2 3 4 5

Fontes Serif

Times New Roman Texto exemplo. G R T A Q X e 1 2 3 4 5
Georgia Texto exemplo. G R T A Q X e 1 2 3 4 5
Cambria Texto exemplo. G R T A Q X e 1 2 3 4 5

Fontes Monospace

Courier New Texto exemplo. G R T A Q X e 1 2 3 4 5
Monospace Texto exemplo. G R T A Q X e 1 2 3 4 5
Cambria Texto exemplo. G R T A Q X e 1 2 3 4 5

font-weight:

Define como o negrito irá aparecer

normal sem negrigo - (Default)
bold com negrito
100
200
300
400
500
600
700
800
900
 400 equivale a "normal"
700 é o mesmo que "bold"

font-style:

Define a fonte como normal, italico ou obliquo

normal sem negrigo - (Default)
italic texto em italico
oblique texto obliquo

Italic X oblique

Itálicos apresentam designs complementares, com características únicas e, normalmente, larguras e espaçamentos diferentes do tipo romano

Italic X oblique

Oblíquos são simplesmente versões inclinadas dos tipos romanos, sem apresentar características diferentes, com largura e espaçamento similares do tipo romano

line-height:

define a altura da linha

text-decoration:

underline texto exemplo
overline texto exemplo
line-through texto exemplo
wavy texto exemplo
dotted texto exemplo
Exemplo do código para destacar tipo "wavy" 
text-decoration: red underline wavy;

text-transform:

Especifica como capitalizar um texto de um elemento

capitalize Inicial De Cada Palavra Em Maiúscula
uppercase TODO EM MAIÚSCULO
lowercase todas as letras ficam minúsculas

text-ident:

Especifica um espaço em branco antes do primeiro caracter da primeira linha do bloco

text-ident: 20x;

Estilos de fundo:

Proriedades:

background-image background-position background-repeat background-attachment background-orign background-clip background-size

background-image:

define a imagem de fundo


div {
  background: url(imagem.jpg);
 }

background-position:

permite o deslocamento da imagem de fundo


div {
  background-position: 50px 50px;
 }

background-color:

permite definir a cor de fundo do elemento


div {
  background-color: #ff0000;
 }

background-repeat:

define se a imagem de fundo irá ou não se repetir


div {
  background-repeat: repeat;
 }
repeat imagem irá se repetir no eixo x e também no eixo y
repeat-x imagem se repete no eixo x
repeat-y imagem se repete no eixo y
no-repeat imagem não se repete

background-attachment:

define define como o fundo irá se mover em relação ao viewport

background-attachment: scroll tem barra de rolagem?
descrição
sim, apenas no navegador
irá rolar junto com a rolagem da página
sim, no navegador e no elemento
irá acompanhar a rolagem da página. Ficará fixo na rolagem do elemento
background-attachment: fixed tem barra de rolagem?
descrição
sim, apenas no navegador
imagem de fundo ficará fixa em relação ao navegador
no navegador e no elemento
Ficará fixo em relação ao navegador e também ao elemento
background-attachment: local tem barra de rolagem?
descrição
sim, apenas no navegador
imagem irá rolar junto com a rolagem da página
no navegador e no elemento
irá rolar em relação á página e também ao elemento

background-origin:

define o X0 e Y0 do canto superior esquerdo onde irá começar a ser exibida a imagem de fundo

padding-box (Valor Default) O backfround começa junto com o "padding" do elemento
border-box O backfround começa junto com a borda do elemento
content-box O backfround começa junto "content" do elemento

background-clip:

especifica o que fundo de um elemento, seja cor ou imagem, irá irá preencher

padding-box O backfround irá preencher o 'padding' e o 'content'
border-box (Valor Default) O backfround irá preencheer a borda, o 'padding' e o 'content'
content-box O backfround irá preencher somente o 'content'

background-size

especifica o que fundo de um elemento, seja cor ou imagem, irá irá preencher

valor em px, %, ... O backfround ficará com o tamanho especificado
cover o background irá se ajustar para preencher todo o elemento
contain toda a imagem de fundo ficará contida dentro do elemento
fonte: css-tricks.com