View
49
Download
1
Category
Preview:
Citation preview
CSSCASCADING STYLE SHEETS
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
CSS? CSS é utilizado na estilização de páginas.
Foi desenvolvido no intuito de tirar a grande quantidade de tags que eram utilizadas no HTML para estilização, assim pode se montar padrões de estilos.
Håkon Wium Lie e Bert Bos.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Adicionando CSS a página Existem 3 formas de aplicar um estilo a sua página, sendo elas:
◦ Dentro da próprio documento com a tag <style>◦ Arquivo .css externo, através da tag <link>◦ Dentro de um elemento com o atributo style.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
<style>
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
<link>
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
<elemento style=“”>
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Box-Model Os objetos do HTML são constituídos por uma “caixa”
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Content Content “Conteúdo” é o “núcleo” da
caixa, onde fica concentrado o que será apresentado, como a tradução já diz.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Padding Padding “Preenchimento” é parte
entre o conteúdo e a borda, esta área é transparente.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Border Border “Borda” é como o próprio
nome já diz, a borda do elemento, pode ser modificada e ter estilos diferentes.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Margin Margin “Margem” é a camada mais
externa da box server para criar os espaços ao redor do elemento em si.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Seletores Os seletores servem para selecionar elementos do HTML.
Exemplo de seletores:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Tipo Exemplo Descrição
elemento body {} Seleciona todo elemento body
.class .top {} Seleciona um elemento com class “top”
#id #paragrafoTal {} Seleciona um elemento com id “paragrafoTal”
Elemento, elemento div, p {} Seleciona todos os elementos div e p.
Elemento elemento div p {} Seleciona os elementos p dentro dos elementos div
Classes Classes são elementos que tem como
atributo o class=“”, são utilizadas junto ao css quando queremos adicionar estilos a um certo grupo de elementos:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Id’s Ids é o atributo id=“” é utilizando
quando queremos que um elemento tenha uma identificação única.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Seletores
p {
color: blue;
}
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Seletor
Propriedade
Valor
Declaração por elementos.
Seletores
.class {
color: blue;
}
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Seletor
Propriedade
Valor
Declaração por classe.
Seletores
#id {
color: blue;
}
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Seletor
Propriedade
Valor
Declaração por id.
Pseudo Elementos Pseudos elementos são utilizados quando precisamos de elementos de “mentira”, quando adicionamos elementos com nenhum valor, para criarmos detalhes, então ao invés de adicionar tags vazias no nosso html, usamos os pseudo elementos.
Ex:◦ Adicionar uma tag <p> vazia apenas para acrescentar detalhes.
Ao invés de sempre utilizarmos tags sem necessidades, utilizamos os pseudo elementos:
p::before { content: “ –”; }
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Pseudo Elementos Alguns pseudos elemento:
◦ ::after◦ ::before◦ ::first-line◦ ::first-letter◦ ::selection
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Pseudo Classes Pseudo classes são utilizadas quando queremos adicionar estados especiais para algum seletor.
Obs. São Classes que já são reservadas da linguagem.
◦ :hover◦ :active◦ :visited◦ :focus
Lembrando que: Classes utilizam apenas “:” após a declaração do elemento e pseudo elementos utilizam “::” para diferenciar.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Questão rápida Qual declaração seria certa para selecionar apenas as tags <p> no documento?
a) p {}
b) .p {}
c) #p{}
d) div, p {}
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Propriedades Vamos utilizar as propriedades para modificar os elementos da box-model.
1. Padding
2. Margin
3. Border
4. Content
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Content Para modificarmos o content:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
h1{content: “”;
}
Content O content apenas trabalha com os pseudos elementos: [::before] e [::after]
Para modificarmos o content:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
h1::before{content: “- ”;
}
Content Alguns valores de contente:
◦ count()◦ attr()◦ url()
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Padding Para modificarmos o padding:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
h1{padding: 5px;
}
Border Para modificarmos a border:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
h1{border: 2px
solid;}
Margin Para modificarmos o padding basta escolhermos o seletor que queremos e então:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
h1{margin: 0;
}
Praticando Vamos criar uma div com um id único e com bordas de 3px sólidas , que tenha um espaçamento interno de 20px e uma margem de 5px, e no interior desta div tenhamos um conteúdo com link e que logo afrente deste link tenha seu respectivo endereço.
Obs. CSS interno.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Lembrando que...
Cada uma das propriedades do box tem especificação de orientação (direita, esquerda, cima e baixo) por exemplo:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Seletores Complexos Seletores complexos são utilizados quando queremos especificar ainda mais o que se quer modificar.
Problemática Imagine que você controla um site, e este site que faz um sistema de cadastro com vários inputs de tipos diferentes (radio, submit, text...) e, que queremos selecionar apenas os inputs que sejam do tipo texto.
Problemática Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do tipo texto.
Soluções:
Problemática Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
Problemática Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
Problemática Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
oUtilizar Seletores Complexos
Problemática Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
oUtilizar Seletores Complexos
Seletores Complexos
Cores Os elementos do Documento HTML podem ser estilizado através de cores.
Essas cores podem ser definidas por nomes: “blue”, “red” “green”◦ Hexadecimais: #FF0000◦ RGB: (255, 0 ,0)◦ RGBA: (255,0,0,0.5)
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Float É utilizado para definir onde um certo elemento irá “Flutuar”.
Utilização:◦ Float: right;◦ Float: center:◦ Float: left;
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Estilo da Borda
Estilo da Borda
p {
Border-style: dotted;
}
Estilo Outline
Estilo da Outline
Estilo da Outline
p {
outline-style: dotted;
}
Altura e Largura Para alterar a largura e altura de um box, utilizamos as propriedades:
Height e Width.
Height: Altura.
Width: Largura
Podem ser dimensionados em ‘px’, ‘pt’, ‘em’ ou em porcentagens.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Estilo de listaPropriedade Descrição
List-style Define tudo em apenas uma declaração
List-style-image Especifica a imagem para marcar cada item
List-style-position Define se o marcador será dentro ou fora do box-contente
List-style-type Define o tipo de marcador da lista
Formatação de TextosPropriedade Descrição
Color Configura a cor do texto
Direction Especifica a direção do texto
Letter-spacing Modifica o espaçamento entre letras
Line-heigh Configura a altura da linha
Text-align Faz o alinhamento horizontal de acordo com valor “left | right | center”
Word-spacing Configura o espaçamento entre as palavras
Text-decoration Especifica uma decoração para o texto
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Estilização das fontesPropriedades Descrição
Font-Family Define a família da fonte
Font-size Define o tamanho da fonte
Font-style Define o estilo da fonte
Font-variant Define a variação da fonte
Estilo de fonte p { font-style: normal;}
p { font-style: italic;}
p { font-style: oblique;}
backgroundPropriedade Descrição
Backgroud-color Define a cor do fundo
Background-repeat Define como a imagem vai se repetir no fundo
Background-attachment Define como a imagem irá ser apresentada
Background-position Define onde é colocada a imagem de fundo
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Herança O CSS que é estilo cascata, por motivos de herança de propriedades, quando se dar um valor a um certo seletor, os seus “filhos” receberão a mesma propriedade valorada.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Especificidade No CSS é possível selecionar um elemento de varias formas, por exemplo:
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Especificidade Cada elemento de seleção tem uma certa pontuação
◦ nome de elemento: 1◦ pseudo elemento: 1◦ id: 100◦ Classes Pseudo-Classes: 10
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Interface de Login Agora iremos desenvolver como exemplo uma interface de login.
MAT
HEU
S SO
ARES
- IF
CE –
CAM
PUS
CRAT
O
Bootstrap Framework
O que é framework?
E bootstrap?
BootstrapEstilo visual base pra maioria das tags
Ícones
Grids prontos pra uso
Componentes CSS
Plugins JavaScript
Tudo responsivo e mobile-first
Mobile-First?
Vamos adicionar o bootstrap ao nosso projeto
Passos1. Clique em “Download Bootstrap”
Passos1. Copie o arquivo .zip para pasta em que irar trabalhar
Passos1. Extraia os arquivos no local
Passos1. Para facilitar a navegar até os arquivos do bootstrap renomeie sua pasta
Vamos agora, baixar o jQuery1. Acesse http://jquery.com/download/
Adicionando jQuery1. Copie o arquivo baixado pra sua pasta do projeto
2. Crie uma pasta “lib” e mova o jQuery para dentro da mesma.
Adicionando jQuery1. Para melhor navegação, renomeie o nome do arquivo para apenas jquery.
Ambiente de trabalho pronto Vamos criar um documento HTML e adicionar algumas tags para utilizarmos o bootstrap.
Ambiente de trabalho pronto Vamos criar um documento HTML e adicionar algumas tags para utilizarmos o bootstrap.
◦ <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Ambiente de trabalho pronto Vamos criar um documento HTML e adicionar algumas tags para utilizarmos o bootstrap.
◦ <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
◦ UTILIZEM ESSAS META TAGS!!
Grids Grids é uma das grandes “sacadas” do bootstrap, pois ele oferece um sistema de criação de designers responsivos com poucos código.
Grid que traduzindo significa grade, então utilizaremos Linhas e Colunas para construir nossos Layouts.
Row Row é a linha da nossa grid.
Columns Columns é as colunas da nossa grid:
Tamanhos
Grids
Agora vem a parte fácil Componentes do Bootstrap:
◦ http://getbootstrap.com.br/components/
Vamos trabalha-los
Recommended