Transcrições
1. Pré-visualização do curso: Olá e bem-vindos a esta aula. E esta classe, vamos guiá-lo rapidamente para se tornar um designer de interface do usuário tailwind. Este curso é financiado, esta classe é amigável para fazer isso. Você não sabe nada sobre J1 CSS. À medida que começamos por ensinar os conceitos básicos e ainda elementos, vamos primeiro explicar completamente os tópicos e conceitos essenciais e crescer através da documentação
CSS necessária para ensinar-lhe os fundamentos para esta aula. Então este curso vai ser principalmente o lado teórico dos rostos das crianças. E depois deste curso temos glicose é baixa. As outras classes vão ser o lado prático de Tilman CSS onde nós realmente mergulhar em projetos e implementa alguns sites agradáveis usando até um CSS.
2. 1 grupo de cursos em fundo: Ok, então antes de fazermos os projetos neste curso, queremos passar por diferentes seções para, digamos, um CSS. Então neste vídeo vamos discutir
as seções de fundo para as classes e diz que eu quero CSS. Então vamos em frente e começar com a seção de cor de fundo. Agora, há muitas cores diferentes que você pode usar. Então, para usar a classe de fundo, você só tem que escrever bg e, em seguida, seguido pela cor que você deseja. Por exemplo, bloco BGO nos dará a cor preta. Serei Julho, Agosto, na cor branca. E também se você quiser ter um tom dessa cor, você pode usar o traço 5000100, o e você pode fazer transparência BG ou para torná-lo transparente. Então, novamente, é muito fácil usar as cores com o fundo. Tudo que você tem que fazer é apenas BG para indicar que é uma cor de fundo. E então a cor que você quer, e então a sombra é tudo se você quiser. Então, quanto maior o número, mais escura é a sombra. Ok, então agora vamos passar a usar o que, como você pode ver aqui, nós temos verde. Podemos mudá-lo para azul, por exemplo, e então vamos transformá-lo em um botão azul. Agora vamos descer e falar sobre a opacidade. Então, é muito simples login. Você só tem que usar obesidade BG. E quanto maior a obesidade, mais escura é basicamente mais escura. E quanto menos a oportunidade, mais transparências. É muito auto-explicativo. E vamos descer agora. Temos a responsabilidade pelo Tailwind. Tudo o que temos que fazer é usar os diferentes fatos. Por exemplo, se quisermos usar uma cor específica para dispositivos médios com apenas seu MD. E então escrevemos a cor que queremos para dispositivos grandes, LG para dispositivos pequenos,
SM, assim por diante e assim por diante. Agora temos o efeito de pairar. Para usar o pairar, eu só tenho que ter um pairar na frente do carro que queremos. E então quando passarmos o mouse sobre ele e a cor mudará para o que ele quer. Por exemplo, aqui estamos usando várias centenas, então o, o tom de vermelho será maior, então será mais escuro. E vamos nos concentrar agora. Então, quando clicarmos
nisso, ele ficará branco. Como você pode ver, a cor de fundo é cinza com uma sombra de 200. E quando clicarmos nele, ele ficará branco. Obesidade de fundo é muito simples também. Você apenas coloca o VG, que é de fundo, e então você gira a opacidade e, em seguida,
o número da obesidade , quanto maior é, quanto mais Piketty e menos é, mais transparente é auto-explicativo. Agora, vamos passar para a origem de fundo. Então, para ter esse efeito agradável, assim como, como um carimbo postal, ele tem aquele efeito legal em torno dele para dar-lhe aquela origem e aquela autenticidade. Você pode usar borda de origem de fundo, e então podemos usar preenchimento de origem de fundo. Então, para dar é mais preenchimento como você pode ver no número 2. E se você quiser dar um pouco, se você quiser torná-lo um conteúdo de fusível, então ele vai aparecer. A folga é como mostra um número três. E também, vamos ao específico que não vamos reutilizar que vale a pena cobri-lo. Agora posição de fundo. Então, é muito simples. Quero dizer, isso é muito bom senso. Como você pode ver se você vai para baixo na seção de uso, podemos ver se você faz BG LefTop it, quem vai furar o fundo para a esquerda e para o topo. Se você apenas fazer o topo, isso era para chegar ao topo da conta seu tópico ou pular para o canto superior direito. Assim por diante, assim por diante. Então agora vamos para as repetições de fundo. Assim, com repetições de fundo, você pode ter um plano de fundo que basicamente continua repetindo até que ele preencha toda a tela. Ou você não pode ter repetições, o que basicamente faz isso uma vez. Basta escolher os de fundo. Como você pode ver aqui. Você pode ter repetir horizontalmente é também que ele é distribuído horizontalmente. Novamente é uma coisa muito simples. Você pode apenas querer documentação e qualquer coisa que você quiser, você quer entrar em detalhes. Você pode ir e vê-lo por aqui. Você tem repetições verticalmente novamente, apenas vesícula repete. Então você seria apenas GIPHY e eu vi Peter na vertical. Ok, agora vamos passar para o seu tamanho de fundo. Então, que tamanho de fundo? Ok, então tamanhos de fundo é bastante auto-explicativo como 0, 0, 2 faz. Basicamente, ele mostra automaticamente seu tamanho padrão. Então, sobre os tamanhos de imagem vai mostrá-lo como ele é. Nós cobrimos. Agora, se você usar bg cover, se ele vai fazer, ele vai basicamente cobrir toda a área, toda a cena. Então isso é basicamente não há espaços em branco. Se descermos agora, temos contido, contido irá basicamente fazer a imagem
como, tão grande quanto ela pode ser
sem, sem modificar a proporção e também sem cortá-la. Temos responsivo também. Então responsável, basicamente, torná-lo responsivo. E então agora há imagem de fundo ido. Imagem de fundo. Podemos usar BGN em para fazer a imagem de fundo nenhum. Então não há imagem de fundo e podemos usar as diferentes classes como você pode ver aqui, nós podemos ter. Gradientes, tão básicos. Então é implementa os gradientes de baixo para cima. Temos dois na parte superior direita. Então, basicamente, ele faz um gradiente para cima direita, de baixo para cima direita e assim por diante e assim por diante. Assim como diz lá, temos gradientes lineares também. E assim ele dá um elemento e ingrediente fundo. Então você pode usar como a direção que você quer ir, como eu expliquei. E então você pode nas cores que você quer. Então, por exemplo, de 400 a VI, leia, 500 para mostrar basicamente você colocou na faculdade e então faremos o gradiente para você. Então temos paradas de cor gradiente. Então, novamente, como eu expliquei, mas a cor pára. Então, basicamente, você pode ter uma cor inicial e vai de basicamente uma cor inicial para branco para branco. E podemos ter de uma cor a uma cor. Então, a partir de uma cultura inicial e em cores. E também podemos ter três cores. Então, de uma cor para outra cor para outra cor. Então basicamente suporta de uma a três cores. Basicamente resume as classes de fundo para este vídeo. Novamente, eu poderia ter faltado algumas aulas porque algumas delas eram desnecessárias e você realmente não usá-las apenas em circunstâncias específicas. Então, isso deve dar-lhe uma boa compreensão das cores de fundo que estaremos usando em nossos projetos. Certo, pessoal, agora que discutimos o grupo de cláusulas de fundo, vamos implementar algumas
dessas classes para ver como elas ficam em ação. Ok, primeiro de tudo, vamos fazer uma nova div e vamos dar-lhe uma cor de fundo. Então dê-lhe uma cor de fundo azul com uma folha de 300. E vamos fazer a altura dele na altura da tela. Como você pode ver, temos essa cor de fundo. Agora vamos aumentar a folha para torná-la mais escura. Como você pode ver, tornou-se mais escuro. Se quisermos torná-lo uma certa cor
para, por exemplo, dispositivos grandes,
podemos fazer isso usando LG e, em seguida, ponto e vírgula, basicamente com o que queremos, sem ponto-e-vírgula, dois pontos. E então podemos colorir o que quisermos. Por exemplo, você está em 600. Então, agora, se a largura se torna permite dispositivo,
em seguida, a cor de fundo mudar para ele. Agora vamos também fazer a obesidade. Então, por exemplo, não faria o oposto aqui para grandes dispositivos. Então podemos ter, quando o dispositivo é grande, podemos fazer obesidade BG 50. E então isso deve basicamente torná-lo mais transparente. Como você pode ver, o vermelho agora é mais transparente. E agora vamos falar sobre o efeito de pairar. Se quisermos passar o mouse sobre isso, podemos torná-lo como uma cor Zola por exemplo, pairar sobre Vg, verde e eu vou fazer como um 100. Então agora, sempre que eu passar
o mouse, a div fica verde. Agora vamos também cobrir a imagem de fundo. Faz outra coisa importante que vamos usar em nossos projetos. Mais uma vez, estou tentando cobrir as coisas mais importantes porque há milhares de suavizar certas CSS e há muitas coisas desnecessárias. Então, vou cobrir principalmente as coisas da fundação. Se você quiser entrar em detalhes, você sempre pode entrar e dizer um site CSS e você pode basicamente encontrar qualquer coisa que você quiser. As sonatas têm um novo div. E isso dá uma imagem de fundo usando estilo, por exemplo. Então vamos fazer a imagem de fundo. Você encontra o URL, então tudo bem. Apenas um logotipo tailwind e eu ainda imagino. Certo, vamos ver este por exemplo. E agora vamos estilizá-lo. Então algumas aulas, vamos usar a altura mínima da tela. Na verdade, não, vamos remover isso. Por agora. Vamos usar bg. Sem repetições, top VEGF. Então agora deixe-me parar para que a imagem se repita. E VEGF derrubado basicamente alinhá-lo todo o caminho para o canto superior esquerdo. E também como dar esta altura, mas isso nos dá a altura da tela. Então, será basicamente todos ocupam a altura total da tela. E como você pode ver sua cabeça, se nós a tornarmos maior, se fizermos este painel maior. Então você pode ver que as ações com o canto superior esquerdo de nós mudamos para o topo. Então, tipo “Leftop”. Nós vamos apenas para BG, que top, basicamente centro e torná-lo top stocks no topo dele, você e Watson. Watson, Watson basicamente vai para essa posição. Fala-se também sobre o tamanho do fundo. Então, há algumas classes de
dimensionamento, dimensionamento que podemos usar para alterar a imagem de fundo, o tamanho dela. Primeiro de tudo, vamos mudar a imagem porque queremos algo que você possa gostar, algo com um fundo em nosso próximo perfeito, porque ele tem um bom fundo para que possamos ver o quanto é basicamente cobrindo na div. Então vamos mudar essa imagem. E agora se nós, se usarmos o Vigenere repete BG, por exemplo, BG tampa tracejado basicamente coberto toda a tela com a imagem. Então Vg capa, como você pode ver agora, toda a imagem. Toda a div é coberta com a imagem. Se o fizermos, nós contemos, então ele basicamente não iria cortar a imagem. Então é basicamente você tentar e obter toda a imagem dentro desta div. E se fizermos BGO dois, então ele realmente obteria as dimensões reais da imagem e ele será exibido dentro da div. Ok? Então, como você pode ver, a razão pela qual eu queria me tornar, tornou-se tão grande porque há uma dimensão desta imagem. Então, para as cores de gradiente, há na verdade três tipos de cruzes que podemos usar. Então você pode ter apenas uma cor inicial que eventualmente se torna transparente. Então vamos em frente e fazer isso. Vamos fazer uma div, e vamos dar uma cor. Então vamos, vamos realmente dar-lhe um gradiente de gradientes de praia para R. Então ele vai para a direita. E vamos usar tudo parou o gradiente de, por exemplo, azul com a sombra de 500. E nós vamos apenas deixá-lo, como você pode ver, torna-se do YouTube, que você deve transparente. E então agora vamos fazer o outro onde você pode ter de cor para outra cor. Então podemos ter outra cor basicamente que é dois, por exemplo, roxo. Ou vamos mudar a cor. Vamos fazer de, do luto, um 100, dois 600 azuis. E temos 100 a 600. Como você pode ver agora temos um gradiente usando duas cores, três cores. Você também pode fazer isso usando uma cor do meio. Então nós também podemos colocá-los dentro dele, que é neste caso vai ser azul. E podemos fazer, podemos fazer através da graça, como podem ver agora temos o vermelho. Então agora você tem gradientes verdes, azuis e vermelhos, cópias
oficiais que basicamente cobrem nossos gradientes. Então, se quisermos mudar a direção do gradiente, podemos fazer isso a partir da classe. Então temos BG gradiente para o nosso neste caso está indo basicamente para a direita. Então, da esquerda para a direita, fazemos 22 cr. Então, na parte superior direita, isso vai fazer a direção de basicamente a direção será para a parte superior direita do que fazemos, por exemplo, GB vai ser, desculpe, você
seria o nosso canto inferior direito? Então depende da direção que você quer. Você pode basicamente escolher a direção
do gradiente e basicamente irá implementar essa direção para você. Então isso abrange praticamente este aspecto prático das aulas de grupo de fundo. Não cobri tudo o que fizemos na teoria. Principalmente, eu acho que eu só perdi a origem de fundo porque basicamente nós estamos apenas
tentando cobrir as coisas mais importantes que nós realmente vamos estar usando e as coisas que são realmente práticas. Então, se você quiser entrar em detalhes, você sempre pode passar por até um CSS e você pode experimentar essas classes primeiro.
3. 2 grupos de cursos de borda: Então agora vamos cobrir os grupos de raio de fronteira. Este grupo de aulas vai ser projetos
muito importantes que vamos implementar. Então vamos cobri-los. Então não temos arredondado nenhum. Isso basicamente não tem nenhum raio de fronteira para as águas do elemento que estamos usando. Temos SM arredondado. Isso basicamente lhe dá um pequeno raio de borda de 0,125 REM. E temos arredondado, o que basicamente lhe dá um raio de borda mais de 0,25 RAM, RAM. E à medida que descemos, o raio da fronteira torna-se mais, mais eficaz. E ele se torna, ele lhe dá mais alto raio de fronteira basicamente. E se quisermos ter como, por exemplo, também
podemos especificar a madeira real é que queremos atingir. Então, se quisermos fazer completo, quisermos, por exemplo, fazer apenas o raio da borda superior, você pode fazer isso, você pode t. Então nós podemos basicamente especificar as palavras exatas que eu quero usar de querer o caminho certo que poderíamos fazer são queridos na parte inferior, você poderia fazer B, e nós também podemos especificar o tamanho dele. Então, sim, é muito fácil de usar. Então, agora, se
rolarmos para baixo, podemos basicamente olhar para esses exemplos. Então, como você pode ver, você arredondou, suaviza a água, é muito mínimo. E se você tem como nós temos arredondado eles, tem MD e algas. Algas, como você pode ver
, tem o raio de fronteira mais alto. Então temos pílulas e círculos também. Então podemos correr isto para nos dar um círculo. E você pode ter, então como você pode ver, a água é realmente forte com a volta por enquanto. E nós também temos arredondado não-self. Já temos um raio de fronteira para uma cláusula específica. Podemos remover que escolher arredondado não como você pode ver que o cabeçalho, a água desapareceu. E também podemos especificar um específico um raio fronteira específico a partir dos elementos selecionar superior ou direita ou inferior border-raio e podemos basicamente um controlá-los. E a pessoa que coloca as cerâmicas exatas, eu quero a largura. Como você pode ver, é muito fácil, auto-explicativo. Você não acabou de colocar na fronteira e então você colocou o número. Quanto maior o número, mais largura o modelo terá. E se você quiser atingir uma sombra específica, você pode fazer isso usando quadro preto que ela para, quais são os nossos G54 top são 48 L para a esquerda, assim por diante e assim por diante. E como podem ver aqui, temos a fronteira diferente, largura, a altura, a largura, mais elite acha que devemos, como podem ver. O mesmo com sons individuais, como explicamos. Basicamente segmentado usando o site específico. Então T para cima ou fluoretos antes de comprar algum alfa esquerda. Como você pode ver, podemos realmente falar, há água teria um div e menos basicamente dar-lhe algum raio de fronteira usando,
por exemplo, SM arredondado. Então vamos dar uma altura de 12, 10, 12, e ficar vermelho. E, em seguida, este dois arredondado SM. Como você pode ver, temos um radius muito pequeno. Vamos aumentar esse LG arredondado não utilizado. E como podem ver, temos um raio de fronteira muito mais forte. Agora, vamos também usar arredondado procurado para fazer um círculo completo. Como você pode ver agora círculo. E agora, após esta rodada e comida é fazer arredondado nenhum para torná-lo para remover seu próprio raio. Como você pode ver, isso funciona. E agora vamos mirar no topo da água que está. Vamos apenas dar-lhe um registro, executar o informante, e vamos fazer três Excel. Então, como você pode ver, o raio da borda superior é realmente forte e não há borda é na parte inferior. Então agora, OK, então agora vamos dar-lhe alguma largura de borda, que é que você tem que fazer como bordas, sua carteira, você, por exemplo, que lhe dá o que a largura, como você pode ver. Agora, como a fronteira, o lado direito, queremos dar-lhe apenas para que possamos fazer fronteira lado direito 8. E isso basicamente deve nos dar apenas a água do lado direito. E agora vamos fazer, por exemplo, fronteira índigo 600. E isso deve te dar um colorismo. Então o lado direito agora é colorido com a cor índigo e uma sombra de 600. Então, basicamente, você pode basicamente mudar isso usando, por exemplo, borda, topo, esquerda, inferior. Você pode mirar a água específica que você quer. E isso cobre basicamente tudo o que é importante no que diz respeito às fronteiras.
4. 3 grupo de cursos Flexbox e grid.: Agora vamos cobrir a flexbox e a grade de glucoses. Isso é muito importante porque usamos isso muito em outros projetos. E esta é uma das classes fundamentais, uma das classes de grupo fundamentais que você sempre estará usando quando você, quando estiver trabalhando com Telemachus nós. Então, primeiro de tudo, vamos começar com direção flexível. Como podem ver aqui, temos quatro aulas, palestra, que é basicamente como elementos. Dentro dos elementos que você deseja adicionar dentro de uma div, uma linha. E se você fizer reverter ou basicamente virar e basicamente colocá-lo da direita para a esquerda em vez de restaurantes. E flex Coase que basicamente nos elementos dentro de uma coluna div, ele irá adicionar sua de forma vertical. E o núcleo de fluxo reverte basicamente,
basicamente reverterá os elementos. Então, começando de baixo para cima em vez de de cima para baixo. Aqui temos a fila. Assim como eu expliquei, quando você usa flexor, quando você tem esses três itens aqui, quando você tem div queria 23. Agora, o adicionado de forma horizontal, então eles são adicionados à direita de cada um. E quando você, quando você aplicar reverso flexível, ele basicamente irá aplicar o 0, adicioná-los todo o caminho para a direita e para o átomo esquerdo, basicamente um por um para a esquerda. E quando você está usando carvão de fluxo para adicioná-los de uma forma vertical, como você pode ver bem ali. E quando você estiver usando flex, flex coluna reversa, isso irá adicioná-los de baixo para cima para torná-lo responsivo. Novamente, assim como explicamos, o outro grupo cruza, só
temos que especificar a tela do dispositivo. E então você pode basicamente adicionar as classes que você quer uma ordem para vender isso se de forma responsável. Flex wrap. Isso também é muito importante para os projetos que usamos muito. Então o que isso faz é que, à medida que você avança daqui, temos três tipos. Você tem flex wrap, flex wrap reverse e flex Europa. Portanto, não queremos o seu aplicativo, então você pode aplicar o Flexner. E o que isso vai fazer é que mesmo quando temos um suave que é menor do que o nosso conteúdo, o último elemento era estar lá não seria basicamente embrulhado e incerteza na próxima linha. Basicamente, ele permanecerá na mesma linha. E quando você está usando envoltório flexível, como você pode ver onde usamos envoltório flexível, temos três elementos dentro desta div principal, que é, que usa o extra. Agora, o terceiro elemento é basicamente anexado na segunda linha em vez de continuar na mesma linha porque a largura, porque ele não pode caber em um e confiante que ele será basicamente inserido na próxima linha. E quando temos invertido rapidamente, o que isso faz é basicamente ele adiciona os elementos de baixo para cima ou da esquerda para a direita, basicamente neste caso. E novamente, para torná-lo responsivo, nós apenas especificar o nome do dispositivo específico e podemos colocar
nas classes flex wrap específicas. Então vamos começar com flex um. Assim, isso permite que um item flexível cresça e encolha conforme necessário e ignora o mesmo lado inicial. Então, basicamente, se temos, digamos que temos um elemento, um desenvolvimento que usa flex, três elementos que tem flex um. Então vamos ver, temos três elementos. Cada elemento vai basicamente ocupar metade do espaço desse desenvolvimento é fluxo. Então, se nós temos três, então Israel iria ocupar ACE2, assim como explicamos antes com o, com a especificação de um peso específico, como por exemplo com a terceira metade. Neste caso, você tem que fazer isso. Podemos apenas dizer flex one e é automaticamente colocado lá com para nós. Por assim dizer, neste caso, descobrimos este exemplo. Por aqui. Temos três elementos, que é flex um, e eles compartilham um terço dos elementos pai. Então eles compartilham um terço do currículo e dois, porque eles eram difíceis para
eles, eles pegariam CO2,
então automaticamente, apenas, então vamos lá e parece que nenhum comprimento de onda, assim também faz, nos permite integral e bebida tendo em conta não é o tamanho do sapato. Então ele vai basicamente ver quanto conteúdo há para esse item. E ele irá ajustar o tamanho de x de acordo com o lado do conteúdo. Tamanho, que é basicamente o tamanho inicial. Para o Flex One. Se houver um flex, então ele basicamente o removerá. Você vê que você tem usando preto, por exemplo. Você tem muitas aulas. Eu só quero remover o Flexner, especialmente você muito útil quando você quer fazer isso. Por exemplo, depurar algo ou gostar, certifique-se de que funciona. Você pode facilmente fazer isso usando flexível como você não terá que remover o outro processo para fazer um responsivo novamente, assim como eu expliquei antes com o outro processo de grupo, você pode apenas especificar a largura da tela específica. Então MD, SM, LG, e depois colocar as classes flexíveis
que você quer, dessa forma será responsivo. E isso resume praticamente o flex. Então agora vamos passar para a tripulação flexível. Então temos flex desenhou euro e grupo flex. Então, se usarmos aqueles porque ele irá impedir que o item realmente cresça com a largura da tela. Então nós temos pernas cresceram, então ele vai basicamente
ocupar o máximo de espécies que pode disponível basicamente. Não cresça tão bem. Você novamente, como eu expliquei, temos este exemplo. Veja os elementos que tem um bloqueio, o elemento do meio. Este está usando acessórios você, como você pode ver no código. E agora, se o fizermos maior ou menor, as chamas crescerem, você sempre estará trancado e não crescerá. E outros elementos usa fixo crescer. Então ele realmente crescerá, crescerá e crescerá. E ele vai realmente basicamente aumentar e todos ocupam
qualquer, qualquer tamanho disponível e ele será executado. Ele basicamente aumenta, estabelece em conformidade. Agora, e temos duas cláusulas, descarga 0 e correção encolhe, encolhe, não deixa o item encolher. E encolher, permite que ele encolher. Isso é praticamente tudo. A menos que cubra apenas sobre o conteúdo. Estes vão ser alguns grupos importantes de classes. Então justifica ensinado, é tudo basicamente. Então, uma vez que temos um elemento que usa, apenas se eu começar, os elementos dentro, ele será aplicado de uma forma da esquerda para a direita. Então, se tivermos, por exemplo, uma coluna, então será de cima para baixo. E se tivermos basicamente uma linha, então ela será aplicada da esquerda para a direita. Justificar fim vai basicamente agir como se tivéssemos uma linha inversa. Então, se temos uma linha e estamos usando linha reversa para justificar e basicamente vai fazer isso. Então, ele irá adicionar os itens para usar uma linha. Em seguida, para adicionar os itens da direita para a esquerda e coluna dois outros de baixo para cima. Justificar centro será basicamente centrado para ter uma coluna centrada no meio da tela como vertical, vertical Santa Anna, para usar o crescimento irá basicamente torná-lo centro horizontal, justificar entre ele vai basicamente dar um espaço entre os elementos acordo com a quantidade de espaço disponível que existe ao redor também. Novamente, estes especialmente entre árvores ao redor e especialmente vilosidades. Portanto, estes são muito semelhantes em funcionalidade. Assim, as diferenças entre apenas dá igual espaço entre os elementos. Somente os elementos gira em torno, realmente se preocupa com o torno dos itens, não entre os itens. Então digamos que temos elementos dentro de uma div. Apenas o primeiro e o último que vamos ser basicamente têm uma quantidade igual de espaço, então entre um e o div real. Então, no lado esquerdo do um, ele terá igual espaço entre apenas três e o lado direito dele. Então estes 21 e o lado esquerdo terão margens iguais, gostaria apenas de três e o lado direito, que é baseado naqueles entre os lados. Então basicamente dá espaço igual entre os elementos e os elementos em torno. Então, basicamente, o pai é também, o recipiente pai terá também a margem entre o elemento eo recipiente
será o mesmo que a margem entre os elementos e os elementos. Então, sim, é bastante confuso. Eu recomendo que você basicamente verificar isso na documentação e brincar com ele para que você possa basicamente entender, mas basicamente alternar entre é principalmente o que
vamos estar usando descontroladamente vai estar usando discurso em torno de um Pronto, vamos usar isso. Ok, então agora vamos ver os exemplos mostrados aqui. Então temos justificar começar. Basicamente, adiciona-o da esquerda para a direita. Justifique o centro. Os elementos serão adicionados no centro. Temos apenas que terminar, isso será adicionado ao lado direito. Eu acho que eu cometi o erro dela antes porque eu disse que
sugeri por n vai ser o mesmo que usar flexor invertido, mas na verdade não é porque flexível, ado reversível, basicamente um no primeiro elemento será adicionado como um, e então o segundo será adicionado. Então é um pouco diferente, basicamente justificar e alinhar os itens à direita. Enquanto fluxo, fluxo através reverso basicamente invertê-los como também será 1, 2, 3 será 321. Só queria esclarecer isso antes de continuar. Então o espaço entre o que isso faz, ele se preocupa com o espaçamento entre os elementos e ele irá definir sua igualmente, igualmente entre eles. Então 123 terá entre eles, o espaçamento entre eles seria igual. Enquanto o espaço ao redor, nós realmente não nos importamos com o específico, bem, nós nos preocupamos com o espaçamento entre os elementos, mas as quantidades iguais serão entre um e o recipiente e três no continuum. Então o espaçamento entre um e o lado esquerdo, que é o espaçamento entre o contêiner e um, será o mesmo que o espaçamento entre três e o contêiner no lado direito. Então esse espaçamento, espaçamento em torno desses elementos serão iguais. E por favor uniformemente, É basicamente dá espaçamento igual entre, entre tudo, assim entre os elementos e entre o, entre os elementos também. Então isso cobre o conteúdo justify. Agora, vamos seguir em frente para justificar os itens. Ok, então agora vamos cobrir justificar itens que na verdade nós realmente não precisamos cobrir isso porque é basicamente como justificar. Assim como justificar o conteúdo. A única diferença é que isso é usado com grades. Então, quero dizer, a única coisa que é realmente,
realmente alongar sua classe, cláusula de estiramento de item
sugestivo. Isso é diferente. Quero dizer, isso dá a ele que vai ser exatamente como o grupo flex foi permitir que o item para assumir tanto específico para a justificação. Justificar conteúdo é que justificar itens não usar espaço uniformemente espaço ao redor e espaço entre. Não tem discursos e depende de bens. Então, sim, é basicamente isso. Então agora podemos ir em frente e passar para a próxima seção. Então alinhe o conteúdo. Eu não vou cobrir isso e vai cobrir isso brevemente. As principais diferenças entre o conteúdo justificar e justificar itens são muito simples. A diferença é que ele fornece utilitários para controlar como as linhas são posicionadas em vários anos flex e contêineres de grade. Então você tem esses cursos enquanto consome conteúdo, centra o pensamento consciente, exatamente como nós abordamos, e eles justificam o conteúdo justificado e justificam os itens. Então concursos e misturar o conteúdo. Centralizá-lo e começa basicamente fazê-lo começar da esquerda para a direita e alinhá-lo ao fim. Coisas específicas que queremos e são diferenças é que ele controla como ROS oxigênio e maduro flex recipientes irritados. Grupo de classes são itens alinhados. Então, alinhamos itens fornece utilitários para controlar como itens
Flex e grade são posicionados ao longo de um eixo cruzado contínuo. Então, basicamente, ele permite posicionar os itens virtualmente. Então, temos pensamentos sobre itens. Vamos começar com os itens pensamentos. Como você pode ver, todos os itens são basicamente parou o estoque para o topo. E nós enviamos para fora se eles estão realmente alinhados no meio. E nós temos terminar com um. Então, basicamente, eles estão presos ao fundo. E temos a linha de base. Baseline é basicamente quando eles são, quando o conteúdo deles é centrado. Então agora vamos também cobrir a sociedade. Também temos alongamento, que não cobrimos. Esticar basicamente estica a altura deve estar combinando com o recipiente. Então, será esticado. Então, isso cobre praticamente os itens alinhados agora. Então isso resume nosso grupo flexível e grade de classes. Como você pode ver de todas as seções que cobrimos. Espero que seja basicamente se você precisar alguma coisa e você quer basicamente aprender sobre isso mais detalhadamente, basta ir em frente e dizer quando a documentação eu recomendo porque explica tudo em detalhes, mas basicamente cobre todo o modelo de caixa flexível flexível e sistema de grade.
5. 4 grupos de cursos de layout: Potente grupo de classes é as classes de contêiner. E então vai ser basicamente uma aula. Esta é outra tarefa importante que usamos em nossos projetos e você estará usando muito em seu futuro. Tons usa projetos. Então temos um cruzado com o seu recipiente e podemos usá-lo para basicamente podemos ter como MMD LG para os pontos de interrupção. Então basicamente permite, basicamente contém itens e conteúdos. Então você basicamente colocar em seus itens em um recipiente e, em seguida, dá com
ele, ele irá ajustar automaticamente a largura máxima de modo que, como sua tela me recebe dois dispositivos diferentes terão largura diferente. Então, basicamente, verifique a largura e ele terá uma largura máxima para esse dispositivo atual. Então vamos mostrar-lhe um exemplo. Então, torna-se nuclear. Então, como você pode compartilhá-lo agora, nós temos, nossa largura de dispositivo é 446. Se formos aumentar
isso, basicamente aumentará com ele e até que você obtenha 640. Então vamos voltar para a documentação é explicar. Então temos dispositivos SM não são dispositivos. Então o contêiner não teria, se tivermos uma tela com mais de 640 pixels, ele terá basicamente uma largura máxima de 640 pixels. Então agora estamos no 640. Como você pode ver, a largura máxima é 10. Então agora a largura máxima é de dois ou 640, mesmo que nosso dispositivo tenha 744 pixels. Por quê? Porque vamos voltar para a comutação. Como você pode ver, o próximo é MD. Md requer que a tela esteja acima de 768 pixels. Um está acima disso, então ele irá definir a largura máxima para o 768. Então eu queria basicamente chegar que, assim que recebemos centenas excede os aumentos de largura máxima. Então temos esses pontos de interrupção. Assim, um contêiner ajustará automaticamente a largura máxima para que o conteúdo não vá ao mar. E não parece a menos que você goste de uma classe específica que permite que você transborde seu conteúdo. E, em seguida, ele não gostaria se você usar flex wrap none, então ele permitiria que o conteúdo permanecesse na tela. Mas, caso contrário, ele basicamente permitirá que você mantenha o conteúdo dentro da tela e o usuário não teria que rolar. Então eu sei que a coisa é o primeiro, o primeiro ponto de interrupção. Vamos para a documentação. O primeiro ponto de interrupção tem uma largura máxima de 100. E isso seria aplicado quando seus
dispositivos de tela abaixo de seiscentos e seiscentos e quarenta pixels. Então, isso resume o recipiente e como ele basicamente mantém o seu contém os itens e como ele, como ele mantém responsivo. Agora vamos cobrir o posicionamento,
o grupo de posições das classes. Estes são muito importantes ao posicionar seus elementos, quando você está usando em sua posição eles. Então, o que vamos cobrir principalmente o posicionamento absoluto ou relativo, porque estes são os que vamos usar ao longo do projeto. E você vai usá-los como papel nos projetos futuros. Então vamos cobrir a posição absoluta. Primeiro de tudo, eu vou realmente descobrir os graus relativos. Isso é o que queremos dizer usar para posição
relativa permite posições e elementos de acordo com o fluxo normal do documento. Então, se você não tiver elementos antes dele, e então você adicionar o próximo elemento depois dele no código, então ele será realmente posicionado logo após ele. Então, logo após o outro terminar, este será posicionado. Então, como você pode ver, um pais muito publicitários e você tem um filho absoluto. Então, quando temos o, temos, por exemplo, o div pai alelo parágrafo depois que ele será, será basicamente inserido logo após seu pai relativo. Posicionamento absoluto. Assim, com o posicionamento absoluto permite posicionar um elemento fora do fluxo normal do documento, fazendo com que os elementos vizinhos atuem como se o elemento não existisse. Então o anterior não afetaria o elemento atual. Então vamos dizer que temos no código que temos uma div,
e, em seguida, o próximo passo depois que ele está absolutamente posicionado. Agora, o primeiro elemento antes de ele é relativamente posicionado sobre o posicionamento que
ele usa, ele não afetaria o após ele. Então não seria inserido logo depois, como não poderia ser com o parente. Então, neste caso, como podem ver aqui, temos um grito absoluto. Então, como você pode ver, quando estamos usando posicionamento estático e o
primeiro e o Secundário usando posicionamento absoluto. Como você pode ver, a criança absoluta é estática. Tiro estático é basicamente fixo Tente de sua estática musicalmente e realmente gritar, tem seu próprio estilo, não se importa com todas as outras células. Vai até estar em cima deles. Quer, dependendo de como você
posicionou e como você basicamente alinhou ele também. Então essa é a diferença entre absoluto e relativo, que é o que basicamente queremos dizer. Use.
6. 5 grupos de cursos de dimensionamento: Certo, pessoal, então agora vamos falar sobre as classes de grupo de dimensionamento. Primeiro de tudo, temos a largura. Então, como você pode ver aqui, nós temos as diferentes classes para isso. E isso os torna com seus pixels. Temos com Px, o que me dá exatamente um pixel. Com os seus 25. Dá-te cinco. Como você pode ver, cada classe tem suas medidas exatas. Nós também temos esses peixes crescem com metade. Dá a porcentagem de 52. Será exatamente 50% da largura da tela. Terceiro vai basicamente fazer o terceiro da tela. Se você quiser descobrir os detalhes, você pode basicamente ir para a documentação no CSS do presidente. Nós também temos largura automática. Assim, com 0 para ajustar a largura divs em
conformidade, de acordo com o elemento, para o conteúdo dessa div. Nós também temos a largura da tela. Então W tela seria basicamente o que vamos encontrar a largura da tela. E ele iria definir os divs com de acordo com a tela onde ternos que preencheram a largura do que da largura será basicamente que é toda a largura da tela. Nós também temos largura fixa. Então você pode basicamente ajustar a largura específica do usuário semelhante. Então, como você pode ver aqui, nós temos oito e você pode ver o tamanho diferente. E respeito aos números mostrados. Nós também temos largura de fluido. Agora com através dele. Como você pode ver, se tivermos metade dos dois tipos, podemos ter dois elementos teria, e eles vão ocupar toda a seção. Ou podemos ter três de terços, três, três terços, ou podemos ter, por exemplo, divisões. Um terço e dois terços permite que você tenha uma dinâmica muito agradável com exatamente como temos com flexão Bouchra basicamente. Nós também temos cheio, que basicamente também como com tela e tipo
da mesma coisa e ocupa toda a área. Neste caso, escolha a largura responsiva, você pode selecionar o estilo diferente com base nas telas, o programa de tamanho de tela para dispositivos médios, podemos ter acostumado com classe e para dispositivos pequenos, podemos ter um classe de cliente e dessa forma será responsivo para o bem. E agora temos estes, na verdade. Agora essa glutamina com isso descobriu o principal material que era tão importante quanto outras coisas são muito detalhadas sobre ela só iria usá-los em circunstâncias específicas. Considerando que só vamos cobrir as coisas que você vai usar principalmente. Para largura mínima. Podemos ter, podemos especificar uma largura mínima para que quando o, por exemplo, como quando temos elementos, não
seria menor do que a largura mínima. Como você pode ver neste caso, colocamos seus sapatos e serão 0 pixels. Mas se especificarmos um número diferente do que ele obviamente deve respeitar esse número. Mínimo estava cheio para ser basicamente um 100 por cento. Então, agora vamos passar para outras cláusulas importantes. Temos responsivo novamente para a responsividade. Novamente, assim como explicamos antes, podemos ter especificado a largura mínima com base no tamanho da tela e massa será basicamente ajustado de acordo com o tamanho da tela e largura máxima. Novamente, é praticamente a mesma coisa. Só tenho que saber. Usa duas condições sempre que você quiser acusar coisas específicas. Mas, além disso, outra vez, a mesma coisa. Então nós temos largura máxima, euro é torna a largura máxima de 0 pixels, basicamente 0, neste caso. E se você tem máximo, nenhum, isso fará a largura máxima como você faria se você tivesse, se você tivesse a largura máxima, iria basicamente removê-lo. E largura máxima extra suave. Basicamente ele vai fazê-lo em fazê-lo seria definido para 20 RAM para largura máxima. Novamente, essas aulas, você pode conferi-las se quiser. Você mostra Djibouti, mas sim. Então, o Mar desce mais. Vamos rever o uso disso. Então, neste caso, temos a largura máxima mg, que é basicamente misturado o máximo com o meio. Se subirmos, podemos ver que a largura máxima e
máxima será definida para 20 REM para o máximo. Então, como você pode ver bem aqui, nós demos a ele um monte de tela. A largura da tela é muito da equipe dele. Thermic é motor. Podemos ver que se continuarmos e eu estava ficando menor, mas só ficar maior, ele mantém o jogo. Vamos, vamos fazer isso devagar, na verdade. Então vamos mais suave e vamos porque lentamente, como você pode ver é jogo novamente começou a ele, que é um axônio com então foi tão Gâmbia. Então agora podemos descer. Vamos para a altura agora. Então vamos rever a importância de uma altura. Então, novamente, sobre a altura de 0 pixels, novamente, é exatamente o mesmo que as outras classes que eu expliquei. Hp x dará uma altura de um pixel. E você tem todas essas outras classes personalizadas também que você pode usar O2. Então, basicamente, eu só fiz de
acordo, de acordo com o que a altura do botão será, definido de acordo com o conteúdo dele. Então o O2, como você pode ver, vai
demorar tentado. Tentarei ajustar a altura de acordo com o conteúdo desse orçamento. Então, se descermos, temos essa altura de tela. Hey, tela vai basicamente verificar o mais alto a tela da velocidade que você está usando. E ele vai preencher, vai ocupar toda a altura de que muito o tamanho da tela, basicamente. Temos altura fixa. Temos, novamente, assim como fizemos com uma largura fixa, temos todos esses números que permitirão que você especifique uma altura específica. Temos alturas completas, e este caso, vai dar o para corresponder às alturas dos pais. Então, sobre os pais dessa divisão, ele vai coincidir com a mesma altura. Para torná-lo responsivo novamente, podemos usar diferente. Então, se quisermos torná-lo responsivo, podemos usar os diferentes nomes de dispositivos. Então md para dispositivos médios como N para dispositivos pequenos, LG e tudo. E então podemos especificar as classes de altura exatas. E então isso fará com que a altura responda. E de acordo com a largura da tela, sinto muito, no curso do tamanho da tela. Vamos ter com eles com pressa agora. Novamente, assim como min-width, temos essas classes específicas para controlar a altura mínima do, os elementos de elementos. Assim, altura mínima de 0 fará com que 0 pixels, mínimo, e altura mínima de queda fará com que seja um mínimo de 100 por cento. Uma tela de altura mínima fará com que seja de acordo com as alturas das telas. Então, como você pode ver, você tem um dois, a altura mínima é realmente definido como cheio. E nós temos essa ilustração de um que basicamente mostra isso. E você torná-lo responsivo novamente, podemos especificar as cláusulas específicas para diferentes dispositivos de tela. Macs Heights. Então agora a partir de óxidos contra ela vai ser como largura máxima. Você tem esses cursos para a altura máxima. E você pode especificamente praticamente o mesmo que para a altura e largura. E você tem esses exemplos como você pode sobrecarregar exatamente como eu expliquei antes. E sim. Então, isso resume o que praticamente resume o tamanho do tamanho das classes de grupo. Então agora vamos ao editor e vamos tentar implementar esses cursos que acabamos de falar. Vamos ver a largura da tela. Então vamos usar algumas das aulas aqui. Primeiro de tudo é fazer cobertura 12 W. Então, basicamente, vai levar uma altura de 12. Vamos ter uma largura completa. E agora vamos dar a isso uma cor de fundo de azul, sombra de 500. Como você pode ver, ele está realmente pegando as palavras completas. Ele vai ter WE sem pele é, por exemplo, W oito. Isso basicamente nos dará uma largura fixa de oito. Agora, mesmo que tenhamos uma dimensão maior de nós temos diferentes tamanhos de tela lá com manos sempre será largura fixa de 12, por exemplo, neste caso, eu quero fazer um grande aberto 24, e isso basicamente vai fazer ainda maior. Agora vamos nos mover fluidamente. Então agora vamos ter uma div ou temos que, dentro dela que quem tem cada um terá sua própria largura. Então vamos usar flicks. E então dentro disso vamos ter W0, W1 sobre 23. Então, isso vai levar metade. E outro também vai ocupar outra metade. Ou vamos fazer mais dois bons, dois quartos, um quarto, 1 sobre 4. E então teremos outro, 1 sobre 4 desta base comum. E isso dá uma cor de fundo. Então vamos fazer este verde usando vg verde com uma folha de 100. E este, Vamos fazer com que seja VGB com ovelhas de 600. E este tem que ser 600. E agora vamos realmente ver isso em ação. Para o componente principal é o hidrogel. Então vamos dar-lhe uma altura fixa de pente. Como podem ver, temos a primeira div. Levará metade para, basicamente, tomar metade da tela. E então os outros dois, você terá uma cota cada um. Então, se fôssemos, por exemplo, fazer cada um o terceiro. Se fôssemos mudar a largura e torná-la um terço para cada um, então cada um tomará basicamente um terço
da proporção da largura da tela. Agora, podemos ver, Vamos experimentar este novo responsivo para saber. Para dispositivos médios que podemos especificar, podemos fazer este é um 4.5 e quais dispositivos
tomaremos um terceiro estabelecido para fazer dispositivos ou o que seja, 3.5º três. Sei que para outros dispositivos votam por um terço. Então, se fôssemos mudar a largura como você persegue para o que você tem dispositivos diferentes. Então agora ele vai ocupar um terço do caminho. Se você fizer um maior, ele vai ocupar metade. Agora, vamos cobrir a largura mínima. Então vamos ter uma div com uma largura de 20 para uma largura fixa de 24. E vamos torná-lo azul, BW para a sombra de 200. E vamos também dar-lhe uma altura de 2024. E como você pode ver, temos este aumento as folhas você um 100 para torná-lo mais claro. E como você pode ver, agora, se usássemos largura mínima de, por exemplo, cair como você esteve e onde está cheio. Isso os faria querer estar cheio. Como você pode ver, ele foi definido como 24, largura fixa de 24. Mas quando temos largura mínima para
isso, sempre será formado mínimo. Então agora vamos cobrir as glucoses e vamos começar com altura fixa. Então vamos sair com 24 e vamos dar a cor de fundo. Como é que vamos dar uma altura de 12? E como você pode ver, essencialmente 124024. Novamente, como foi com a mesma coisa. E agora vamos cobrir a altura total usando tela. E isso irá basicamente verificar a altura das telas e, em seguida, ele irá combiná-lo. E novamente, assim como as outras classes. Então, para a altura vai ser o mesmo que o material de largura que eu já expliquei. As únicas diferenças que é basicamente aplicá-lo à altura e largura. Então, não há muito sentido de realmente cobri-lo. Novamente, isso resume praticamente as classes de grupo de dimensionamento. Então agora podemos passar para o outro processo de grupo.
7. 6 grupos de cursos de espaçamento: Então, agora vamos passar para o envio de classes de grupo. Primeiro de tudo, vamos começar com o preenchimento. Isso é muito importante porque nós o usamos muito em nossas previsões. Então vai ser bem simples, antigo
quanto você pode ver a partir da permutação p 0, vamos dar-lhe um preenchimento de 0 pixels ao redor. Então todos fazem o PPE X superior esquerdo, direito e inferior com exatamente um pixels. E como você pode ver, todas as outras propriedades, como você pode ver na documentação, é bastante claro. Então, quanto maior colocar o basicamente mais preenchimento ou revisá-lo. E você também pode especificar descobertas específicas também. Então você pode usar também px e py. Px basicamente dá o seu preenchimento horizontal e Puyi dá-lhe preenchimento vertical. Então ele só vai fazer esquerda e direita se você fizer horizontal e ele vai fazer filtragem superior e inferior. Vertical, então px vertical é horizontal. Você também pode especificar que o lado específico que você deseja obter financiamento
para, por exemplo, preenchimento top six, que irá dar-lhe basicamente um top de preenchimento de 1.50.5 REM. E você pode fazer notas de preenchimento e preenchimento, preenchimento
esquerdo Watson basicamente especificar o site específico que você deseja adicionar preenchimento. Então agora vamos passar para Xi. Bem, ok, então nós temos, então estes são alguns exemplos dela. Nós temos, como você pode ver, estofamento top seis, você pode ver que aquela área que foi destacada com aquelas listras que mostra o preenchimento bem ali. Então, estofamento top seis, você pode ver que há um estofamento adicionado ao topo. Acolchoamento direito, dá-lhe algum preenchimento à direita. E, no entanto, auto-explicativo basicamente. Agora podemos ver os exemplos de preenchimento. Preenchimento horizontal PXE. Então isso basicamente dá-lhe um preenchimento de h em ambos os lados horizontais, assim esquerda ou direita. E você tem preenchimento vertical, que como você pode ver, é apenas para cima e para baixo. Portanto, um preenchimento normal, como você pode ver na ilustração, o preenchimento é realmente aplicado a todos os mesmos,
apesar de usar o preenchimento e, em seguida, o número que você deseja adicionar. E fazer um responsivo é muito simples. Nós só temos que especificar
a tela específica do dispositivo e então podemos adicionar o preenchimento para ele. Então podemos ter vários codons para diferentes dispositivos. Certo, então agora vamos para a margem. Margem é também este grupo de gases são muito importantes, bem como porque usamos muito agora projetos e você vai usá-lo muito dentro de suas futuras crianças prevê. Então, novamente, vai ser praticamente como o estofamento. Então não há nenhum ponto estão cobrindo get. Quero dizer, cada classe tem suas propriedades sobre os direitos. Especificamente, muito bem explicado. Você pode verificar se a comutação se dissolve. Você quer verificar se você quer ver os detalhes disso. Mas de qualquer forma, podemos passar a usar esses marginais basicamente. Então a diferença entre os módulos, novamente, tudo é praticamente vai ser o mesmo que muito semelhante a colocar. As únicas diferenças. O preenchimento é aplicado a isso dentro dos elementos, e Morgan é aplicado aos inimigos externos. Assim, a margem seria basicamente dado observando entre os elementos correntes e os elementos. Basicamente é por aí. Então, qualquer inimigo está perto de nós ou basicamente coloca em modelos entre eles. Considerando que o preenchimento será realmente aplicado
ao próprio elemento e será realmente acolchoado dentro. O elemento será realmente paladar. Então, sim, é praticamente a mesma coisa. Então, se descermos a estas são as margens para um único site. Podemos basicamente usar mth, como você pode ver, se aplica querendo para a margem superior, certo? Vamos dar-lhe moderado, relativamente auto-explicativo. Não adianta discutir os detalhes. Quero dizer, é muito auto-explicativo. E você pode ter margem horizontal novamente, dá-lhe apenas se aplica aos lados esquerdo e direito. Dá-lhe uma multinomial na margem esquerda e direita Vertical, você
está para a parte superior e inferior? E sim, é praticamente incapacitado. E se você quiser fazer um responsivo, você pode especificar a tela do dispositivo. E então você também pode adicionar nos módulos específicos que você deseja usar. O importante para as margens também é que você pode ter margens negativas. Então há um, há muita margem entre dois elementos ou vamos ver, os outros elementos têm muita margem e isso faz com que o elemento atual fique mais longe dele. Podemos realmente aplicar valores negativos. E isso nos permitirá basicamente mudar seus elementos atuais e torná-lo mais perto dos outros elementos, removendo algumas das mercadorias realmente aplicadas. Então é muito simples, basta
especificar um negativo antes do real. Então, se tivéssemos módulo, próximo módulo está no 272. Neste caso, podemos fazer menos antes do, antes da classe real. E isso basicamente aplicará seu inverso. Então ele realmente remove a margem, não absoluta. Então vamos também aplicar alguns desses gases que acabamos de falar. Então vamos fazer uma nova div e vamos dar-lhe uma classe de fundo, cor. Cor de fundo, vermelho, a folha de 500. E vamos colocar um texto só para ver como tudo parece. Ok? E então vamos ter um pouco de H1 com olá. E agora vamos dar-lhe alguma margem. Então você pode ver que com o Olá vai ter algum módulo. Então vamos dar-lhe uma margem do Módulo 12. E como você pode ver, o H1 real agora tem uma margem à esquerda, no topo, na direita e na parte inferior. E há realmente ter outro cada um. Então, podemos basicamente ver que temos dois H 1s e disse esta div, só para ver esta margem. Como você pode ver agora, nós temos, o primeiro módulo, tem os três primeiros elementos, tem módulos no segundo não tem. E como você pode ver, o total remover a margem dos primeiros elementos que serão basicamente presos juntos. E se adicionarmos margem, horizontal, por exemplo,
então, para o primeiro elemento usando MX, por exemplo, 12. E como você pode ver, a margem é aplicada apenas horizontalmente. E se fizermos MY, ele será aplicado verticalmente. E se você quiser aplicá-lo em todos os lados, basta fazer M Cohan, para todos os lados basicamente. Veja, queremos reduzir a margem do enorme e mudou para cima. Podemos aplicar margem negativa. Margem. Então podemos fazer menos margem superior e podemos fazer 12. E isso vai basicamente mudar para cima e vai fazê-lo no mesmo nível. Então isso é se você quiser aplicar módulos negativos. Agora vamos aplicar um pouco de preenchimento. Então vamos dar a este um preenchimento de, por exemplo, adicionando seis. E isso deve basicamente dar-lhe algum preenchimento. E esse tipo de margem superior isso faz preenchimento 12. Como você pode ver, não temos, Porque antes quando usamos margem, a margem estava sendo aplicada aos elementos externos. Então é por isso que tínhamos o espaço em branco. Mas agora, neste caso, está sendo aplicado dentro do elemento. E é por isso que não há mais espaço em branco e o preenchimento real é aplicado em vez do módulo. Isso resume o preenchimento e a margem de glucoses. Agora podemos continuar para a próxima seção.
8. Curso de grupo de tipografia: Certo, pessoal, então agora vamos cobrir o grupo de classes da família de fontes. Assim, as aulas de família de fontes são principalmente três. Então temos a fonte sans, serif e fórmula. E você tem essas predefinições padrão que você pode usar. E, claro, você pode usar seus clientes se quiser, mas esses já estão disponíveis com Tim e CSS. Judeus, por exemplo, san-serif, você só tem que fazer quatro filhos como um pano. E você serve em serviço de uniforme. E ter que usar fonte monoespacial em um. E que eu deveria aplicar essas fontes. E vamos cobrir o tamanho da fonte é muito simples, como você pode ver na classe. Então você tem acesso que é extra pequeno. Teremos montagem que é muito pequena, que é mais basicamente. E então você tem base e você tem grande. À medida que você desce, o telefone fica maior. E vamos para baixo para o uso. Mostra isto. À medida que descemos, as aulas ficam maiores. E sim, você pode torná-lo responsivo é tudo para aplicando diferentes fontes para diferentes dispositivos, para diferentes dispositivos de tela compartilhar. Então agora vamos cobrir o peso da fonte. Novamente, é muito simples. Como você pode ver pelas classes que temos Fontan, que lhe dá um peso de fonte de um 100 para um direito extra porque itera de quantidades de 200. E à medida que descemos esta lista, o peso da fonte aumenta. E o que isso faz é torná-lo mais negrito misturar as fontes mais grossas. Então, como você pode ver a partir do uso vai para baixo para o uso. Então isso controla a maneira diferente de um elemento usando o peso da fonte para, como o peso aumenta, basicamente se torna móvel, cobrir as alturas da linha. Novamente, isso é muito simples, medida que aumentamos
a liderança, a altura da linha também aumenta assim, por exemplo, se estamos usando o sono dentro do parágrafo e temos como, por exemplo, levando relaxado, então o espaçamento entre as linhas será maior. Então teríamos mais espaço entre as linhas. Então a última peça que você quer usar entre o nitrogênio e a linha de uso enganosa, ensino médio, você terá. Então, como você pode ver, se nós
descermos, nós podemos ver a partir de diferentes necessidades. Então você tem bons atos de liderança, snowmobiling, normais. À medida que descemos, a liderança aumenta e, em seguida, mais espaçamento existe entre as linhas. Então isso cobre que para o, que cobre tudo para a altura da linha. Vamos cobrir o tipo de estilo para listas. Então essas classes de grupo permitem que você basicamente venda a lista. Então, se nós temos lista nenhuma, então o que isso faz é basicamente ele irá remover os marcadores da lista. E como você pode ver aqui, também, se quisermos ter pontos azuis, então podemos usar o disco de lista. E isso vai, isso basicamente nos dará pontos de bala para cada item da lista. E se queremos ter números e vamos usar este decimal e que nos dará como 1,
2, 3, 4, cada item da lista que irá numerá-lo, grupo de alinhamento de
texto de classes. Estes são muito importantes porque nós usá-los perdidos
nos Projetos e Recursos cobertos isso. Então ainda temos mensagens. Isso é basicamente alianças aplicativos da esquerda para a direita. Srilanka texto da Austrália e textos em, alinha o centro de texto. É trânsito extra da direita para a esquerda e diz justificar que basicamente faz com que seja em um bloco. Então, como você pode ver, se vamos ao exemplo, este é um bom exemplo de quando você entende o que eu quero dizer com textura até agora. Assim, para o texto à esquerda, como você pode ver, o texto está indo da esquerda para a direita. E CentOS sendo centrado e gravado está sendo, está sendo alinhado da direita para a esquerda. E leva justify, como você pode ver, é um bloco, então ele vai esfriar espaçamento e tudo nas linhas para que ele é basicamente tem uma estrutura de bloco, estrutura quadrada. Então agora vamos passar pela cor dos carrapatos. Mais uma vez, isso é muito importante para usar isso muito nos projetos. Então temos texto transparente para tornar os cheques transparentes e textos correntes para dar a colagem que você pode ver aqui, o tipo de bloco de texto preto claro basicamente vai torná-lo preto. E como você pode ver, cada, cada cor faria basicamente a
cor do texto e a folha conforme você aumenta o documento do aluno do que quanto mais escura será a cor. Então, como você pode ver, ele excreta 500 e então você tem que excretar um 100100 é muito mais escuro do que 500 educação através de que praticamente resume, vamos descer. Então, em termos de usar esses estudiosos texto simples e a cor que você quer, e então você pode apresentar a folha do que você quer e aplicá-lo como ir através de textos. Obesidade. Então, a obesidade é basicamente o número mais high-end. Então usaríamos a obesidade como texto para o neurônio de forma oposta. E então você coloca o número de eficiência, o nível de basicamente, quanto maior o nível de obesidade, mais opaco será, e quanto menos nível de obesidade, mais transparente será. Se descermos aos exemplos, como podem ver, temos, temos estes textos e o primeiro tem opacidade de 100,
muito opaco e não ser transparente e perdido. Um tem uma densidade de 0 e como você pode ver, ele está parecendo bastante transparente. Então você vai ver as cores por trás dele ou se você tem algo por trás dele. Ok. Isso basicamente resume tudo. Decoração de texto de capa. Então nós temos essas três causas linhas subjacentes. Nós não somos sublinhados, tão praticamente auto-explicativos. Então subjacentes, estados subjacentes, como você pode ver no exemplo, tachado basicamente faz com que ele fora e nenhum sublinhado remove o sublinhado. Então, se você tem sublinhando a retina on-line e é forma de telefone fixo para você, praticamente resume a seção de tipografia. Espero que tudo esteja muito claro. Então, isso basicamente resume essas aulas.
Mohammad Rada
