e Fala jovem Thiago Matos aqui se você acompanhou aí aula passada Com certeza você se perguntou e Class Style como é que eu faço esse mais um você embora comigo e cara vamos aqui para mais um exemplo você não vou remover esse verbais aqui porque eu falei que não ia utilizar mais essa sintáxi vamos lá vamos supor que eu tenho um aqui vou colocar um título sei lá curso bio3 certo e aqui tem uma classe tá beleza show de bola deixa eu criar uma caixa aqui normal tá então é o Size né size plus size
o hotsite do peixes: ó Tá bom coisa sempre aqui com subiu três aí a gente pode fazer a mesma coisa aqui do verbais certo ver Boys 2 pontos ou só: beleza e aqui eu passo uma uma variável Então vou colocar aqui ó é classe vá E aí eu tenho que declarar esse cara obviamente aqui no meu data e aí eu passo aqui agora tá então valor beleza e show de bola funcionou aqui normalmente só para gente identificar realmente que funcionou vou colocar esse aqui vazio e ele não pegou mais respeito Então esse é um modo
de se fazer isso tá certo normal como a gente fez é o baile nos outros atributos só que aqui cara tem um pulo do gato aqui você pode utilizar objeto Ah tá certo você pode utilizar a Rê de itens Ah e ainda passar objeto aqui dessa então vamos lá eu posso passar objeto da seguinte forma a classe que eu tô passando pai e dizer se ela é tua falso certo se for outro aqui aí ele vai aplicar essa classe se for falsa ele não vai aplicar essa calça não salvei aqui obviamente ele aplicou classe e
se eu colocar falsa aí ele não aplicou a classe tão veja que isso aqui é muito dinâmico certo então esse tua força aqui pode vir de um outro local que você quer habilitar ou não aquele aquela classe aquele atributo ou qualquer coisa que seja Tá certo então você pode passar uma lista aqui de classes né eu vou colocar aqui ó Taison tô na home sim olha aqui então vamos fazer esse daqui ó na home sintam is Home e é isso home pro Toys home aqui eu vou a declarar aqui ó posso onça porque se for
o título da home né eu coloco Python on se você tiver arrumei peixe o meu o meu font-size vai ser maior 40 pixels certo e a cor vai ser quem Ah beleza então salvei aqui esse home atualizar Opa é isso mesmo não funcionou porque tá falsa você coloca a chuva aqui ó bom tô na home agora ele funcionou não posso passar múltiplos Campos aqui né E sempre retornando que o falso não é o primeiro o primeiro aquilo a verdade é o nome da classe que você está utilizando e aqui a sua declaração e tem que
retornar a sua falsa e aí o vídeo você vai dar um Pai ensina essa classe aqui essa é a primeira forma vou deixar aqui para vocês e aí vou criar um parágrafo aqui lipson vou criar um parágrafo aqui beleza tá aqui no nosso parágrafo e vou aqui adicionar com a classe com a rei né eu vou o par que me dá um beijo na classe e agora cara eu vou fazer o seguinte ó é precoce é para gente identificar eu vou colocar aqui ó para ela deixa eu ver que ter o teste para ficar mais
simples teste eu vou criar uma calça aqui Tec aí vou dizer que meu texto tem a cor e o obreiro obreiro e aqui eu passo o que passo o primeiro eu vou fazer isso aqui né passo Grey direto Pois é mas como ela já tá vai correr ele não vai funcionar a não passa o texto Tiago me confundi aqui galera muito muito muito muito muita coisa na cabeça aí a gente passa aqui ó beleza oh Grace também não ficou tão legal deixa eu coloco aqui ela e ela pronto não dá nem para ler mas sem
entender o espírito da coisa então posso passar aqui uma lista de itens e esse visitas vão ser aplicado essa classe inclusive vou passar título aqui para ficar logo loucão né o tamanho aqui e aí você a gente inspecionar cara os agentes personagem vai ver essas classes sendo aplicadas Então posso utilizar Rei Inclusive eu posso utilizar a rei e aqui eu posso passar um objeto e dentro do objeto posso passar também a mesma filosofia do que a gente fez aqui em cima ou seja aí tô home não é Skol só vou aplicar aqui diretamente só para
gente testar Tá certo então eu tenho uma Rei Essas caixas daqui que vem unicamente com você sempre aplicadas aqui dentro do objeto o meu DS vai aplicar aquelas classes né que elas quis que Retornam aqui tu tá certo então se eu tiver na rua Olha lá já ampliou mais ainda o texto né o nosso parágrafo se a gente for observar aí eu tenho Titan home no parágrafo então eu posso utilizar esse daqui então vai deixar mais organizado eu vou colocar teste home Oi e aí Tec home vai ser cor não substitui a cor para esses
desde ontem já apareceu aqui para mim certo então se eu tiver na home eu quero que o texto seja diferente até que se home é um modificador Olha lá já modifiquei se agora home for falso aí ele vai alterar tudo inclusive no título e no no parágrafo sacou então revisando aqui porque eu sei que isso é um pouco complicado a gente pode passar um objeto perfeito as 15 do objeto são as classes beleza e o valor do objeto o valor dessa dessa aqui é o que determina essa calça vai ser aplicada ou não você pode
passar uma Rei beleza E esse Array pode ser de itens todos os itens vão ser aplicados e também você pode passar um objeto aqui dentro e essa objeto vai seguir a mesma lógica daqui de cima e Inclusive a gente pode extrair conhecido aqui fica o cara a gente pode estar isso daqui colocar o pé classe por isso que eu criei lá no início esse cara aqui ó e classe e aí eu coloco meu meu rei né daqui eu vou até tirar esse sonho porque esse daqui já vai entrar outro assunto que eu não quero abordar
no momento então eu vou colocar aqui o tex home beleza e salvar aí ele vai aplicar esses dois caras aqui dentro do do do nosso parágrafo perfeito cara muito show de bola então da mesma forma que a gente está criando a classe aqui tá certo via objeto ou Array os simplesmente mais firme a gente pode fazer isso também ou Style eu vou criar aqui Lipson Beleza tá aqui embaixo e nem separaram parágrafo galera a gente vai colocar o Styles eu posso simplesmente pegar o Estar saiu aqui a cola cola deixa eu ver se ele aparece
outra cor aqui agora olha lá eles chegarem para ler mas tudo bem sem entender o espírito da coisa que a gente só tá brincando não se importe com design Porque aqui não ela de design é desculpa do cara que tá fazendo besteira aqui na tela Vamos que vamos então coloquei o estágio aqui beleza também eu posso fazer um ver baixo aqui galera e nesse caso dessa cor quer que eu vou fazer eu vou passar um objeto aqui do meu objeto vai ser e a propriedade do CSS perfeito e o valor nesse caso aqui vai ser
o valor que eu quero agora água e aí água no aquário e aí ele vai aplicar novamente Então vou colocar Black aqui ó ele vai aplicar lá Black e se a gente for no código galera se a gente for um código O código tá aqui color Black posso também utilizar qualquer atributo do CSS né só colocar aqui ó background escola como eu coloquei Black e deixa eu colocar o arco de volta e aqui vou colocar o black aí dá para ficar mais interessante eu acredito vamos ver olha lá com mais interessante Então background-color Black Então
beleza aqui a gente fez o baile de lá na classe no na classe não no Style o e Passamos o objeto e aqui também galera você também poderia fazer o seguinte remover esse cara aqui é uma variável Style was normal e passa aqui ó Style Class A Oi beleza Beleza vai dar no mesmo ele vai funcionar e mais uma coisa para gente fechar aqui galera quanto chave de ouro a gente viu aqui já um montão de coisa como faz né O data-base aqui nos atributos do HTML incluindo IV classe e Styles que a gente chama
de classe Style by and of course Então o que a gente pode fazer aqui se você não quiser utilizar essa notação aqui entre entre "Já pensei está montando isso daqui programaticamente você pode fazer o seguinte você pode remover isso daqui e aí você utiliza essa notação aqui ó certo primeira palavra em minúsculo e as outras palavras é com letra maiúscula Não é a primeira maiúscula chamada de que me Ok é isso é então você pode fazer isso aqui também porque eu vi o dia Cê vai reconhecer isso olha como ele inteligente ele vai reconhecer aí
você transformar né não nos atributos do CSS eu salvar aqui tudo tá rodando Como manda um Ah tá certo então tanto faz essa forma como você passar vou botar colocar Fontes aqui deixar os dois exemplos para você pode sais Vou colocar aqui 20 peixes acerta o pouquinho de peixes tem que estar entre entre "tava com esse trem aí ele já pegou 20 peixes a gente tem os dois exemplos aqui tá certo do background color é que é um aqui realmente e aqui Uma Estranha perfeito Então galera Class Style Style bind no BIOS muito simples e
aí eu deixo para vocês brincarem à vontade porque isso aí vai muito da sua criatividade de necessidade do projeto você tem dúvida já sabe deixa o comentário aqui embaixo e eu pessoalmente vou te responder ou vai lá no meu Instagram daí manda uma mensagem no privado né de outro modo cara eu te vejo aí na próxima aula foi o E aí E aí [Música] E aí