O que é?
CSS é uma sigla para "Cascading Style Sheets" (Folha de Estilo em Cascata), o CSS é a dupla dinâmica do HTML.
Enquanto o HTML cuida da parte do conteúdo, o CSS cuida do comportamento estético dos elementos da sua página.
CSS Inline
Quando trabalhamos com css inline, quando colocamos os comandos nos próprios elementos, ou seja, quando colocamos
uma propriedade "style" dentro de uma tag. Ela só vai funcionar para dentro daquela tag HTML.
Outra
propriedade que podemos usar, é o "font-size" para mudar o tamanho da fonte.
CSS Externo
Podemos trabalhar com o css externo também, como ele funciona? Nós criamos uma nova pasta "css" e dentro dela
criamos um novo arquivo.css com todas as especificações que queremos para nosso site.
Para encorporarmos esse
arquivo na nossa página, dentro da tag "head" nós adicionamos mais uma tag "link" e referênciando o local do
arquivo.
Dessa forma conseguimos organizar nossa página, contendo um arquivo que pode ser usados diversas
vezes para outras páginas. Podemos separar ainda mais eles, podendo fazer um arquivo para estilo só dos títulos,
outro só para os textos...
Prioridades do CSS
Dentro do CSS temos uma hierarquia para que seja aplicado o estilo, sendo ela: inline(direto na tag) > interno(no
head do arquivo) > externo(de um outro arquivo)
Seletores
O que é?
Um "seletor" é a maneira de dizer para o CSS qual é o elemento HTML que queremos trabalhar, ou seja, como o CSS
vai encontrar ou selecionar o elemento HTML que queremos estilizar.
A primeira forma de fazermos isso é indo direto no arquivo CSS e colocando qual tag queremos trabalhar. Outra
forma que é bem utilizada, é referênciando uma class e por essa classe dizermos em qual queremos estilizar (no
caso toda tag que darmos essa mesma classe, vai ser estilizada também), para sitar ela no nosso arquivo CSS,
basta colocar um "." antes do nome dela (.nome_classe)
Se quisermos sitar uma tag que possui um ID conseguimos referenciar ela no nosso arquivo CSS usar "#" e em
seguida o nome dela (#id_tag)
Caso queira aplicar um estilo para todos os itens da página, usa-se um coriga, no topo do arquivo CSS, usamos o
"*{}" dessa forma ele vai aplicar aquele estilo em todo site.
Para economizarmos código, caso 2 ou mais elementos tenham a mesma propriedade podemos colocar dessa forma por
exemplo (h1, p{color: white})
Propriedades
Color
A propriedade "Color" serve para colorirmos um texto.
Um computador não consegue compreender o que é cada
cor, para isso é utilizado códigos para definir cada tom. Podemos ver isso pesquisando no Google por "Color Picker".
Background
Nós podemos usar ela tanto pra definir uma cor de fundo ou uma imagem.
No caso de imagens, nós devemos
usar a
propriedade "background-image: url("")" e adicionarmos um link relativo ou absoluto dentro dele.
Background-Size
Dentro do "Background" nós temos a opção de escolher o tamanho dele (background-size), tendo duas opções
(contain
e cover)
- Contain: Ele vai repetir a imagem caso ela não seja proporcional a tela.
- Cover: Ele vai ajustar a imagem dentro o espaço (dando zoom por exemplo).
Background-repeat
Com essa função podemos ativar/desativar a opção de repetir a imagem caso ela não preencha o espaço todo.
Caso não queiramos que repita, usamos a opção "background-repeat: no-repeat". Dessa forma ele vai preencher
o restante com a cor de fundo.
Dentro dela também podemos selecionar qual direção queremos repetir,
sendo ela:
- background-repeat: repeat-x (para repetir a imagem na horizontal)
- background-repeat: repeat-y (para repetir a imagem na vertical)
Background-position
Com ela podemos determinar qual posição da imagem quer que seja mostrada, para isso usamos
"background-position:(posição)"
Podemos fazer tudo isso usando apenas 1 linha. Dessa forma: background: (cor)red
(url).../imagens/ (repeat)no-repeat (posição)center
Única coisa que colocariamos depois é o "background-size"
Border
Como o próprio nome já diz, é uma borda que vamos usar. Para isso, usamos a propriedade "border".
Nela podemos especificar algumas coisa: tamanho(em pixel), estilo(ex: solid), cor(black).
Temos uma variedade de tipos de bordas, sendo elas:
- Solid: é a mais comum
- Dotted: é uma linha pontilhada
- Dashed: é uma linha com tracinhos
- Double: fica com duas bordas
- Groove: fica um efeito 3D
- Ridge: (ele não explica)
- Inset: por dentro
- Outset: por fora
- None: nenhuma
- Hidden: oculta
Nós podemos definir onde queremos que fique a borda, usando "border_(direção: left...)". Também conseguimos
colocar várias bordas em um lugar só, dando diferentes propriedades.
Teste de Borda
Podemos colocar bordas arredondadas também com "border-radius"
Borda Redonda
Margin
A "margin" ou margem serve para dar um espaço em branco em umas das direções do elemento, em relação a parte
de cima, da esquerda, de baixo ou da direita. Para isso usamos o atributo "margin-(direção): (valor em
pixel/porcentagem)".
Para referênciar qual direção queremos, usamos as seguintes:
top(cima) / bottom(baixo) / left(esquerda) / right(direita)
Também podemos usar em um "atalho" (chamamos isso de shortrange, quando fazemos tudo isso em apenas uma
declaração).
Para isso usamos apenas o atributo "margin" da seguinte forma e ordem (margin:
(top)->(right)->(bottom)->(left)
Exemplo:
Padding
O "Padding" é bem parecido com o "Margin", com a diferença que ele vai mexer com o espaçamento de dentro de
uma div.
A sintaxe dele funciona da mesma forma que o "Margin". Podemos atribuir separadamente um
valor para cada direção ou podemos atribuir tudo em uma declaração só, seguindo aquelas regras: (padding:
(top)px -> (right)px -> (bottom)px -> (left)px.
Caso queiramos que um valor seja o padrão para
todos os lados, colocamos somente um valor dentro da tag.
Exemplo
Isso é bem utilizado para fazer botões. EX:
Voltar para Principal
Aproveitando o assunto de botão, podemos adicionar um efeito quando colocamos o mouse em cima dele. Para isso
usamos a propriedade "hover" da seguinte forma (.classe/id:hover{o efeito que quer}
Width e Height
Width e Height, também conehcido como altura e largura. Podemos determinar ambos pra qualquer elemento, como
podemos observar a seguir:
Este paragráfo vai ter 300px de largura e 1500px de altura
Também temos a um atributo que faz com que o tamanho creça até um determinado valor.
Para isso usamos o "max-width", ele se adapta automáticamente com o tamanho da tela, é bem utilizado quando
está sendo feito para dispoditivos móveis.
Text
Existem diversas propriedades que podemos usar para edição de texto no CSS, como:
- text-align:... (a posição) - Vai definir onde o texto vai ficar.
- direction:... (a direção, ex: rtl(rigth to left)) - Vai definir para que lado o texto vai ir.
- unicode-bid:... (como quer, ex: de trás pra frente...) - Vai definir como você quer as palavras
(ao
contrária/embaralhada...).
- text-decoration:... (o estilo que quer, ex: undeline/overline...) - É bem utilizado para links,
ele vai
fazer a decoração do texto com linhas.
- text-transform:... (vai transformar as letras, ex: uppercase/lowercase/capitalize
- text-indent:... (VALORpx) - Vai adicionar um parágrafo no começo do texto no qual o valor
colocado, vai definir o tamanho do espaço.
- letter-spacing:... (VALORpx) - Vai definir o espaçamento entre cada letra do texto.
- line-height:... (o valor geralmente é colocado em casas decimais: 0.8/0.5) - Como o próprio nome
fala, é o espaçamento entre as linhas.
- word-spacing:... (VALORpx) - Vai definir o espaçamento entre cada palavra.
Font
Através do uso de fontes bem escolhidas, podemos deixar as nossas letras mais destacadas e o site com aspecto
mais bonito. (Lembrando que as fonts tem direitos autorais e pode dar problema caso use uma com
copyright)
Para conseguirmos mudar todo o estilo de fonte de uma parte, podemos usar o seguinte atributo:
font-family:(escolher a font)
Dessa forma ela irá mudar todo o estilo daquela parte para aquela
font. Como podemos ver a seguir:
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Vero necessitatibus saepe beatae iusto recusandae ex, cumque soluta voluptates,
blanditiis, quis officia sit incidunt. Quod, at! Atque deserunt quibusdam corporis consequatur.
Podemos também aumentar o tamanho da font, utilizando o font-size: (valorpx)
Como podemos ver:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus pariatur rerum
veritatis. Placeat nulla itaque accusamus quas, aut quasi! Quas, eaque! Obcaecati ipsum minima consectetur a
ad eligendi assumenda rerum?
Podemos importar fonts externas também, apenas indo em: Google Fonts
Após isso nós devemos escolher uma font e clicar em
"select do lado de um dos styles". Depois disso clicamos em "@import" e copiar o que está dentro da tag
style, colamos no arquivo CSS no começo da página.
Para usar a font dentro da página, nós demos copiar o
que está dentro do "CSS rules to specify families"
Teste font externa
Outra que podemos colocar, é o font-style:(selecionar)
Ela pode deixar a letra em Itálico,
negrito...
Teste Font-Style
Por último podemos alterar a grossura da font, usando: font-weight: (valor)
Teste Font-Weight
Estilização de Links
Aqui vamos aprender a estilizar botões com links, fazendo diversas variações com o que aprendemos até agora.
Para isso vou encaminhar para uma nova página:
Estilos de Botões
Display
A propriedade "Display" é uma das propriedades mais importantes do CSS.
Ela serve para controlarmos o nosso layout, ela determina como e se um elemento vai ser exibido.
Para isso vamos criar uma nova página para ficar melhor a compreensão
Sobre Display