Uma breve introdução a css e bootstrap

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:


Soluções:

oBuscar em todo o documento HTML e adicionar uma classe para cada um.


Soluções:



Soluções:


oUtilizar Seletores Complexos


Soluções:


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. Acesse o site getbootstrap.com.

http://getbootstrap.com/

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.


◦ <meta http-equiv="X-UA-Compatible" content="IE=edge">

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


◦ <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

http://getbootstrap.com.br/components/

Internet

Uma breve introdução a css e bootstrap