-
Um dos elementos do framework
é justamente trabalhar com o CSS.
-
Da mesma forma que nós podemos
manipular a informação ou modificar,
-
nós podemos, através do framework,
trabalhar com a alteração dos elementos.
-
Podemos colocar cores, textos, ou seja,
-
através do o framework
podemos trabalhar com CSS.
-
Vamos ver como colocar isso em prática.
-
A primeira coisa que iremos
fazer é colocar o documento
-
informando que ele já foi carregado.
-
Esse aqui é o nosso código
básico para nós começarmos.
-
Vamos fazer o seguinte, vamos pegar aqui
-
a tag "p", "Teste de conteúdo".
-
Vamos ver como é que
vai ficar esse resultado.
-
Observem que ele tem aqui o parágrafo,
-
vou aumentar um pouquinho para vocês
verem, isso aqui é o formato padrão.
-
Se eu colocar o tamanho correto,
-
no 100% é esse tamanho
que vocês estão vendo aqui.
-
Com o CSS, nós podemos modificar isso.
-
Então, eu vou falar assim para ele:
-
O meu elemento "p" vai
receber uma informação.
-
O que ele precisa fazer?
-
Eu tenho dois elementos
para nós podermos trabalhar.
-
Observem agora que a minha
tag "p", está recebendo o CSS.
-
Observem que a minha função CSS
-
tem dois elementos
que eu coloquei entre aspas.
-
O primeiro é o atributo
e o depois é o valor.
-
O que eu estou
querendo dizer com isso?
-
O framework foi programado de
uma tal forma que, ao utilizar o CSS,
-
eu consigo dinamicamente falar assim:
-
Aquele atributo vai receber
um determinado valor.
-
Então, eu estou modificando o meu estilo.
-
Por exemplo, vocês viram que na
hora que nós carregamos a página,
-
a letra estava muito pequena.
-
Então, agora, através do CSS, utilizando
o framework, eu vou aumentar aquele texto.
-
Vamos lá!
-
"font-size", "35px".
-
Vamos executar.
-
Olhe só que interessante.
-
A mesma página, só para
vocês verem, continua com 100%.
-
A mesma página,
só que agora o conteúdo está maior.
-
O que nós fizemos aqui?
-
Simplesmente falamos: Meu conteúdo,
-
eu vou acessar
a minha tag "p" através do framework.
-
Então, o jQuery representado pelo cifrão
-
vai trabalhar em cima da minha tag "p".
-
Eu estou chamando a função CSS,
passando duas informações para ele.
-
O primeiro é o tipo,
-
e aqui, qual é o valor daquele tipo.
-
E se eu precisa passar
mais de um conteúdo?
-
Eu venho aqui e repito.
-
Então, agora eu vou falar assim para ele:
-
"Background-color", "yellow"
-
Observem que eu coloquei dois elementos,
-
duas formatações de CSS
para o mesmo elemento.
-
Vou executar, ele aplicou.
-
Existe uma outra forma de nós trabalharmos
com mais de um elemento dentro do CSS.
-
Vamos fazer agora.
-
Vou colocar o meu
componente, minha tag "p", ".css"
-
Observem que agora,
como eu tenho mais de uma informação,
-
nós vamos utilizar as chaves.
-
Aí, eu vou fazer o seguinte,
-
vou transcrever o código,
-
aonde eu teria a vírgula
eu vou colocar dois pontos, virgula,
-
vou colocar o outro elemento.
-
Então, dessa forma, eu consigo
trabalhar com vários elementos do CSS
-
utilizando um único elemento do CSS.
-
Vamos colocar mais um aqui.
-
Dois pontos, ":center".
-
Agora vamos testar.
-
Vejam que...
Vamos pegar o código fonte.
-
Vejam que eu não tenho nenhuma formatação,
-
simplesmente o meu elemento do framework.
-
Ele aumentou o tamanho da letra,
-
colocou a cor de fundo amarelo,
e centralizou meu texto.
-
Então, eu utilizei três elementos,
-
tamanho do texto, cor de fundo,
e alinhamento do meu texto.
-
Para qual tag?
-
Para minha tag "p".
-
E se eu tivesse vários elementos?
-
Ou eu coloco cerquilha
para representar um id,
-
ou o ponto para representar o meu class.
-
Então, essa é uma das formas.
-
Isso que vocês viram
agora é criando o CSS.
-
E se eu já tenho um estilo criado
-
e eu quero aplicar o estilo
que foi criado dentro de um elemento?
-
É possível fazer isso?
-
Sim.
-
Como o que nós fazemos?
-
Vamos lá.
-
Primeira coisa, vamos imaginar o seguinte:
-
Que eu tenho aqui um
"style", que é um estilo.
-
Vamos falar que eu vou criar aqui,
-
um estilo chamado ".fiap", por exemplo.
-
Então, esse aqui é o meu estilo.
-
O que ele tem, esse meu estilo?
-
Vamos colocar a cor de fundo,
vamos colocar a cor do texto,
-
"color:".
-
Vamos colocar aqui mais um elemento.
-
"text-align".
-
Vamos centralizar esse texto.
-
"center".
-
Muito simples.
-
Se eu tivesse que pegar isso daqui
e aplicar, vou comentar o meu código.
-
Como que nós faríamos?
-
Vem aqui, "id="...
-
Não é um "id" porque
nós estamos usando ponto.
-
Então, é um "class="fiap"".
-
Vamos ver o resultado disso.
-
Lembrem: Vermelho e centralizado.
-
Quem?
-
O meu parágrafo.
-
Vamos testar.
-
Centralizado, está muito
pequeno, ele está com 100%.
-
Só para vocês verem,
ele está como default.
-
Então, ele aplicou.
-
E se eu quero, através do...
-
Se eu não tivesse isso, e eu,
através do meu componente do framework,
-
falar: Vamos aplicar esses elementos.
-
Como que nós programamos isso?
-
Bem simples também.
-
Vou utilizar aqui
o framework, a chamada,
-
vou colocar o meu elemento.
-
Quem é o meu elemento? O "p".
-
E aí, eu vou falar o que para ele?
-
Vou falar: Olhe, vamos adicionar.
-
Então, eu vou dar um "addClass".
-
E o que eu vou fazer nesse "addClass"?
-
O nome da minha classe que
está criada é o que eu vou aplicar.
-
Então, eu posso, dessa forma,
falar assim para ele:
-
Dinamicamente, eu quero aplicar
esse estilo nesse elemento.
-
Vou colocar mais um aqui.
-
"Teste1".
-
"Teste2".
-
".tit1".
-
Vamos colocar "font-size:"
-
"35px".
-
"Color: blue".
-
Nós vamos tirar isso
aqui, vou deixar só o "color".
-
No ".tit2"
-
eu vou colocar
o tamanho "35" e o color "green".
-
Então, observem que eu tenho
-
uma classe "fiap",
uma classe "tit1", e uma classe "titt2".
-
Eu tenho esse elemento,
eu tenho esse elemento, esse elemento.
-
Observem que eu não tenho nada...
-
Vou comentar isso aqui para vocês verem.
-
Observem que eu não tenho nada formatado.
-
Esse é o original,
-
esse aqui é o teste 1,
é o tamanho que foi definido pelo W3C,
-
para o h1, e esse aqui para o h2.
-
Agora vamos começar
a mandar ele inserir a minha classe.
-
Então, na minha tag "p",
nós vamos adicionar a classe "fiap",
-
que é cor vermelha
e texto centralizado.
-
Cor vermelha, texto centralizado.
-
O h1 e o h2 continuam
aqui sem alteração nenhuma.
-
Eu quero aplicar o tit1 no h1.
-
Mesma coisa.
-
Então, eu venho aqui,
-
"(h1).addClass()", e vou colocar
o nome da minha classe, "tit1".
-
Executo.
-
Não teve efeito.
-
Vamos ver o que digitamos de errado.
-
"tit1"... Faltou as aspas.
-
Então, aqui dentro
da minha tag "h1", "addClass", "tit1".
-
Mesmo nome, mesmo nome.
-
Observem que o tit1 recebeu a cor azul.
-
Agora eu vou fazer
a mesma coisa, só que para o h2.
-
Vou aplicar o "tit2".
-
Vocês viram que no resultado do h2
o texto ficou maior que o h1,
-
porque nós alteramos aqui o "font-size"
-
O que eu quero
mostrar para vocês aqui?
-
Que através desse framework
nós conseguimos manipular texto
-
utilizando um JavaScript, que,
na verdade, ele é o próprio framework.
-
Então, os eventos,
os métodos que já estão prontos,
-
fazem com que nós
possamos consumir esse recurso.
-
Através do framework nós também
podemos manipular através do CSS.
-
Ou seja, o framework é completo.
-
Para nós ganharmos
em tempo de desenvolvimento
-
utilizando um framework
igual a esse, é muito bem-vindo
-
e faz com que o dev ganhe em
performance no desenvolvimento.
-
Então, pessoal,
utilize desse framework.
-
Quanto mais você
se aprofundar no framework,
-
mais coisas você vai
conseguir abstrair desse pacote.
-
Isso é extremamente importante
para um bom desenvolvimento.
