Henrique: agosto 2020

30/08/2020

Propriedades CSS

Posições dos elementos usando CSS em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position CSS</title>
    <style>
        div{
            font-size: 60px;
            padding: 30px;
            border: solid 5px #222;
            color: red;
        }
        /* classes específicas */
        .static{
            top: 100px;
            left: 100px;
            background-color: steelblue;
        }
        .fixed{
            position: fixed;
            bottom: 30px;
            right: 0px;
        }
        .relative1{
            position: relative;
            left: 50px;
            top: 5px;/*5 pixel acima do elmento acima*/
            background-color: seagreen;
        }
        .absolute1{
            position: absolute;
            left: 350px;
            top: 120px;
            background-color: violet;
        }
        .relative2{
            position: relative;
            left: 250;
            top: 2000px;
            width: 200px;
            height: 200px;
            background-color: salmon;
        }
        .absolute2{
            position: absolute;
            left: 10px;
            top: 10px;
            width: 20px;
            height: 20px;
            background-color: greenyellow;
        }
        .sticky{
            position: -webkit-sticky;/*safari*/
            position: sticky;
            background-color: #777;
            top: 10px;
        }
    </style>
</head>
<body>
    <!-- Classes -->
    <div class="static">Static (Padrão)</div>
    <div class="fixed">Fixed</div>
    <div class="relativel">Relative</div>
    <div class="absolute1">Absolute</div>

    <div class="relative2">
        <div class="absolute2"></div>
    </div>

    <div class="sticky">Sticky</div>
    <p style="padding-bottom: 2000px;">Opa</p>
</body>
</html>

28/08/2020

Texto e suas propriedades em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Texto</title>
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
    <style>
        *{
            margin: 0;
        }
        html{
            font: 28px;
        }
        body{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        p{
            /* valores padrões */
            font-size: 1em;
            font-size: 100%;
            font-size: 16px;
            font-size: 12pt;

            /* unidades absolutas */
            font-size: 100px;/*tamanho do pixel*/
            font-size: 72pt;/*pontos */
            font-size: lin;/*polegada */

            /* unidades relativas */
            font-size: 2.2em;
            font-size: 2.2rem;
            font-size: 50vh;
            font-size: 10vw;/*unidades em view port, 10% da largura*/

            font-family: monospace;
            font-family: Georgia, serif;
            font-family: Verdana, sans-serif;
            font-size: 'Indie Flower', cursive;/*aponta para referência do link*/

            font-weight: 100;/*peso da fonte*/
            font-style: italic;
            text-transform: uppercase;/*coloca todas as letras em ministula*/
            /* text-decoration: overline underline line-through; */
            word-spacing: 60px;
            letter-spacing: 20px;/*altura da linha*/
            line-height: 2.5em;/*largura da linha*/
            text-align: center;/*alinha o texto no meio*/
        }
        /* classe botão */
        .botao{
            font-size: 28px;
            text-decoration: none;
            padding: 10px 30px;
            border-radius: 25px;
        }
        /* classe destaque */
        .destaque{
            color: #fff;
            background: tomato;
            box-shadow: 2px 2px 1px #000;
        }
        /* pseudo classe, tem uma especificidade maior que destaque */
        .destaque:active{
            box-shadow: none;
        }
    </style>
</head>
<body>
    <div>
        <p>
            Que texto <br>Legal !!!
        </p>
    </div>
    <!-- classe 'botao' e classe 'destaque' -->
    <a href="https://google.com" class="botao destaque">Google</a>
</body>
</html>

26/08/2020

Organização de divs em HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <title>LP3</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #top {
      width: 100%;
      height: 200px;
      border: 1px solid red;
      position: fixed;
      top: 0;
    }

    #baixo {
      width: 100%;
      height: 100px;
      border: 1px solid blue;
      float: left;
      position: fixed;
      bottom: 0;
    }

    #main {
      margin-top: 200px;
    }

    #meio {
      width: 50%;
      float: left;
      margin-left: 25%;
    }

    .meio1 {
      height: 150px;
      border: 1px solid green;
    }

    #esquerda {
      width: 25%;
      float: left;
      position: fixed;
      top: 200px;
    }

    .esquerda1 {
      height: 200px;
      border: 1px solid blue;
    }

    #direita {
      width: 25%;
      float: right;
      position: fixed;
      top: 200px;
      left: 75%;
    }

    .direita1 {
      height: 150px;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <div id="top">
    Top
  </div>

  <div id="main">
    <div id="esquerda">
      <div class="esquerda1">
        Left1
      </div>
      <div class="esquerda1">
        Left2
      </div>
    </div>

    <div id="meio">
      <div class="meio1">
        Center1
      </div>
      <div class="meio1">
        Center2
      </div>
      <div class="meio1">
        Center3
      </div>
      <div class="meio1">
        Center4
      </div>
      <div class="meio1">
        Center5
      </div>
      <div class="meio1">
        Center6
      </div>
      <div class="meio1">
        Center7
      </div>
      <div class="meio1">
        Center8
      </div>
      <div class="meio1">
        Center9
      </div>
      <div class="meio1">
        Center10
      </div>
    </div>

    <div id="direita">
      <div class="direita1">
        Right1
      </div>
      <div class="direita1">
        Right2
      </div>
      <div class="direita1">
        Right3
      </div>
    </div>
  </div>

  <div id="baixo">
    Footer
  </div>
</body>

</html>

Créditos para: Luis Fernando - IFMT

19/08/2020

Função para verificar CPF em Javascript

Objetivo: Averiguar se os dados digitados corresponde a um formato de CPF ( xxx.xxx.xxx-xx ):

Exemplo: 111.222.333-44, Ok !

Caso contrário está incorreto

function verificar(cpf) {
    //1° condição para verificar os dígitos e tamanho
    if (cpf.charAt(3) == '.' && cpf.charAt(7) == '.' && cpf.charAt(11) == '-' && cpf.length == 14) {
        var aux = '';
        aux += cpf.charAt(0);
        aux += cpf.charAt(1);
        aux += cpf.charAt(2);
        aux += cpf.charAt(4);
        aux += cpf.charAt(5);
        aux += cpf.charAt(6);
        aux += cpf.charAt(8);
        aux += cpf.charAt(9);
        aux += cpf.charAt(10);

        return checarNumero(aux);//verifica se o resto é apenas número inteiro
    }
    //caso contrário é falso
    return false;
}

//Método1 para chegar se todos os valores são apenas números: 
//exemplo: 22)8999/*,,,
function checarNumero(valor) {
    var regra = /^[0-9]+$/;
    if (valor.match(regra)) {
        return true;
    }

    return false;
}
//Método2 para chegar se todos os valores são apenas números: 
//exemplo: 22)8999/*,,,
function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

console.log(verificar('112.456.777-99'));//ok
console.log(verificar('112.45.6.777-9,9'));//falso
console.log(verificar('555.777.077-12'));//ok
console.log(verificar('555.777-12'));//falso
console.log(verificar('555.777.077-12.780.777'));//falso

14/08/2020

Overflow em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow</title>
    <style>
        div{
            font-size: 40px;
            height: 100px;
            width: 260px;
            border: solid 3px;
            overflow: hidden;
            /*overflow: scroll;overflow nos 2 sentidos*/
            overflow-x: scroll;/*só faz a rolagem na horizontal*/
            overflow-y: scroll;/*só faz a rolagem na vertical*/
            
        }
    </style>
</head>
<body>
    <div>
        TudoFuncionouMuitoBemEmCSS!!!
        Texto muito grande para caber nessa div.
        Já pensou qual será o comportamento padrão ?
    </div>
</body>
</html>

Propriedade Display em HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Display</title>
    <style>
        body {
            font-size: 40px;
            color: #fff;/*cor do texto*/
            background-color: coral;/*cor do plano de fundo*/
        }

        ul{padding: 0;}
        div{background-color: seagreen;}/*cor de fundo da div*/
        span{ background-color: red;}
        li{ background-color: purple;}

        div, span, li{ 
            width: 50%; /*largura*/
            width: 200px;
            height: 80px;/*altura*/
            padding-top: 30px;
            text-align: center;/*texto centralizado*/
            /*display: block;/*blocos*/
            /*display: inline;/*linhas*/
            display: inline-block;

        }
    </style>
</head>

<body>
    <div>Texto 1</div>
    <span>Texto 2</span>
    <span>Texto 3</span>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>

</html>

Modelo de box 02 em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <style>
        /*  */
        body{ font-size: 80px; margin: 0;}
        .c1{background-color: orange;}
        .c2{background-color: yellow;}
        .c3{background-color: tomato;}

        div{
            float: left;/*elementos à esquerda*/
            padding-top: 100px;
            padding: 10px 50px 100px 150px;/*largura*/
            padding: 100px 50px;/*comprimento*/
            padding: 50px;
            margin: 0px 20px;/*margem apenas na horizontal*/
            border: solid 15px black;/*borda tamanho 15 cor preta*/
        }

    </style>
</head>
<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
</body>
</html>

Modelo de box 01 em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Herança</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <style>
        body{
            font-family: 'Oswald', sans-serif;
            font-size: 20px;/* tamanho da fonte*/
            border: solid 3px red;
            margin: 10px 100x 150px;/*10 em cima/baixo e 100 nas laterais*/
        }

        div{
            border: inherit;
            padding: inherit;
        }
    </style>
</head>
<body>
    <h1 style="font-size: 3em">Herança</h1>
    <div>Estou herdando
        <span><p>
            teste
        </p></span>
    </div>
</body>
</html>

Herança em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Herança</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <style>
        body{
            font-family: 'Oswald', sans-serif;
            font-size: 20px;/* tamanho da fonte*/
            border: solid 3px red;
        }

        div{
            border: inherit;
            padding: inherit;
        }
    </style>
</head>
<body>
    <h1 style="font-size: 3em">Herança</h1>
    <div>Estou herdando
        <span><p>
            teste
        </p></span>
    </div>
</body>
</html>

Espeficidade 2 em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Especificidade CSS</title>
    <!-- https://specificity.keegan.st -->
    <style>
        body{
            font-size: 40px;
        }
        /* selecionando todas as div */
        div{
            background-color: blue;
        }
        /* selecionando as div wm-cor */
        div[wm-cor]{
            background-color: darksalmon;
        }

        /* só vai funcionar antes do div:hover */
        div.estilo{ background-color: purple; }

        /* ao passar o mouse irá mostrar a cor */
        div:hover{ background-color: #00b; color: orangered; }

        /*  */
        #unico1, #unico2{background-color:yellow;}

    </style>
</head>
<body>
    <div id = "unicol" class="estilo" style="background-color: red;"><!--esse style irá passar por cima dos outros-->
        #unico1 vs .estilo vs inline
    </div>
    <div id="unico2" class="estilo"> #unico2 vs .estilo</div>
    <div class="estilo" wm-cor>.estilo vs wb-cor</div>
    <div wm-cor>wm-cor</div>
    <div class="estilo">.estilo</div>
    <div>elemento</div>
</body>
</html>

Especificidade 1 em HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Especificidade CSS</title>
    <style>
        /* https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity */
        /*
            Em linhas gerais...
            1. regra com !important
            2. seletores mais específicos
            3. última regra processada (empate)
        */

        /* definindo a propriedade do paragráfo */
        p {
            background-color: orange;
        }
        /* definindo propriedade da classe observação */
        .observacao{
            background-color: #5f5;
            border: dashed 5px;
            padding: 20px;
            font-size: 40px;
            width: 300px;/*comprimento*/
        }
        
        p.observacao{
            padding: 2px;
            background: linear-gradient(to right, red, yellow);
        }

        
    </style>
</head>

<body>
    <p class='observacao'>Olha essa observação!!!!</p>
</body>

</html>

Pesquisar neste blog