Please enable JavaScript.
Coggle requires JavaScript to display documents.
Modulo 08 html e css - Coggle Diagram
-
Aula 07
Selecionando, atributos pelos links, <a href=""> do html
-
-
Como e dificil diferenciar um link do outro, usamos a[href*=""] para selecionar palavras dos links, para localiza-los...
-
-
-
se vc colocar a propriedade a[href=https] {background-color:red;] e logo depois a[href=http] {background-color:green;} o ultimo não cai funcionar, pois o de cima tem as mesma orderm http + s
-
Aula 08
Posso criar divs e deixa-las vazias no css, porem posso edita para que elas possam aparecer, o site...
foi criada varias das divs com o mesmo nome, porem uma delas estava vazia, caso eu queira dar um tamanho para cada uma delas, a que estava vazia agora tera espaço, caso eu queira que esse espaço suma posso fazer div:empty {display:none;}
-
Aula 10
Em algum momento sera necessario editar a primeira e a ultima div, de um grupo inteiro, para isso usa-se:
div:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; } arredondando a primeira div
div:last-child {border-top-left-radius: 20px; border-top-right-radius: 20px; } arredondando a ultima div
Aula 11
Seletor Negativo, usado não deixar itens selecionados, ou seja, vc marca as propriedades q não seram aplicados os efeitos, e edita o efeito...
::not(p) {background-color: red;} - tudo ficara vermelho, menos o p.
-
Aula 12
<section> <div></div><div></div><div></div> </section> Imagine, aqui tem 3 propridades de div, mas eu quero selecionar apenas uma, oque fazer?
com div:nth-child (2) {background...} seleciono a segunda div, funciona como seguencia...
-
Aula 13
Com o css posso inserir, conteudos no html com :after e :before
Imagine que no html eu edite uma <spam> no css, posso colocar conteudo, antes ou depois de qualquer elemento que esteja dentro de spab...
spam::before {content:"<--"; width:20px; height:20px; display:inline-block;height:20px; width:20px;}
-
caso queira criar um quadrado as info acima são essenciais, porque precisa-se do display:inline-block;
-
-
Aula 15
-
-
-
background-color; rgb(0, 0, 0); r de red, g de green, b de black, os numeros q os seguem são seguenciais de cada uma dessas cores...
Caso eu queira adicionar uma transparencia, deve-se adicionar o background-RGBA( 0, 0, 0, 0.5)
E super necessario, adicionar o A, depois do RGB, para que a transparecia apareça!
Aula 16
-
-
transforme:scale(1, 2) distorce a tela
-
-
Aula 17
transforme:rotate(90deg) diferente do scale() o rotate, roda a div no sentido horario e anti-horario, de -180deg á 180deg
-
transforme:skew(30deg, 30deg) como no exemplo acima, dessa forma posso fazer com que o skew x e o y estão juntos nas configuraçoes...
Aula 18
box-sizing:border-box; corrige erros de tamanhos, exemplo quando vc dentro de uma div, especifica um tamanho para ela, ela e depois adiciona bordas e padding dentro dela, ela vai juntar todos esses tamnhos e alterar o tamanho maximo que vc deu. com o box-sizing:border-box; ele vai enquadra tudo dentro do tamanho maximo que vc deu.
-
box-sizing:content-box; para desfazer um item apenas, quando tudo estiver ja selecionado como o * {... }
Aula 19
-
coloco uma class por exemplo vai ser, .input, edito no css .input::placeholder { color:red } pronto, agora o placeholder na caixinha de textos vai ser vemelho...
-