Uma breve introdução a css e bootstrap

CSS
CASCADING STYLE SHEETS
MATHEUSSOARES-IFCE–CAMPUSCRATO

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.

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.

<style>

<link>

Box-Model
Os objetos do HTML são constituídos por uma “caixa”

Content
Content “Conteúdo” é o “núcleo” da
caixa, onde fica concentrado o que
será apresentado, como a tradução já
diz.

Padding
Padding “Preenchimento” é parte
entre o conteúdo e a borda, esta área
é transparente.

Border
Border “Borda” é como o próprio
nome já diz, a borda do elemento,
pode ser modificada e ter estilos
diferentes.

Margin
Margin “Margem” é a camada mais
externa da box server para criar os
espaços ao redor do elemento em si.

Seletores
Os seletores servem para selecionar elementos do HTML.
Exemplo de seletores:
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:

Id’s
Ids é o atributo id=“” é utilizando
quando queremos que um elemento
tenha uma identificação única.

Seletores
p {
color: blue;
}
Seletor
Propriedade
Valor
Declaração por elementos.

Seletores
.class {
color: blue;
}
Seletor
Propriedade
Valor
Declaração por classe.

Seletores
#id {
color: blue;
}
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: “ –”; }

Pseudo Elementos
Alguns pseudos elemento:
◦ ::after
◦ ::before
◦ ::first-line
◦ ::first-letter
◦ ::selection

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.

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 {}

Propriedades
Vamos utilizar as propriedades para modificar os elementos da box-model.
1. Padding
2. Margin
3. Border
4. Content

Content
Para modificarmos o content:
h1{
content: “”;
}

Content
O content apenas trabalha com os pseudos elementos: [::before] e [::after]
Para modificarmos o content:
h1::before{
content: “- ”;
}

Content
Alguns valores de contente:
◦ count()
◦ attr()
◦ url()

Padding
Para modificarmos o padding:
h1{
padding: 5px;
}

Border
Para modificarmos a border:
h1{
border: 2px solid;
}

Margin
Para modificarmos o padding basta escolhermos o seletor que queremos e entã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.

Lembrando
que...
Cada uma das propriedades do box
tem especificação de orientação
(direita, esquerda, cima e baixo) por
exemplo:

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
tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.

Problemática
tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
oUtilizar 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)

Float
É utilizado para definir onde um certo elemento irá “Flutuar”.
Utilização:
◦ Float: right;
◦ Float: center:
◦ Float: left;

Estilo da Borda
p {
Border-style: dotted;
}

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.

Estilo de lista
Propriedade 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 Textos
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

Estilização das fontes
Propriedades 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;
}

background
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

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.

Especificidade
No CSS é possível selecionar um elemento de varias formas, por exemplo:

Especificidade
Cada elemento de seleção tem uma certa pontuação
◦ nome de elemento: 1
◦ pseudo elemento: 1
◦ id: 100
◦ Classes Pseudo-Classes: 10

Interface de Login
Agora iremos desenvolver como exemplo uma interface de login.

Bootstrap
Estilo visual base pra maioria das tags
Ícones
Grids prontos pra uso
Componentes CSS
Plugins JavaScript
Tudo responsivo e mobile-first

Vamos adicionar o bootstrap ao nosso projeto

Passos
1. Acesse o site getbootstrap.com.

Passos
1. Clique em “Download Bootstrap”

Passos
1. Copie o arquivo .zip para pasta em que irar trabalhar

Passos
1. Extraia os arquivos no local

Passos
1. Para facilitar a navegar até os arquivos do bootstrap renomeie sua pasta

Vamos agora, baixar o jQuery
1. Acesse http://jquery.com/download/

Adicionando jQuery
1. Copie o arquivo baixado pra sua pasta do projeto
2. Crie uma pasta “lib” e mova o jQuery para dentro da mesma.

Adicionando jQuery
1. 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:

Agora vem a parte fácil
Componentes do Bootstrap:
◦ http://getbootstrap.com.br/components/
Vamos trabalha-los

Uma breve introdução a css e bootstrap

Mais conteúdo relacionado

Semelhante a Uma breve introdução a css e bootstrap

Uma breve introdução a css e bootstrap