Curso de Design Responsivo Aula 05 Criando topo CSS Reset e Clearfix

Nessa vídeo aula vamos criar o topo do nosso projeto, criar nosso CSS Reset e o Clearfix, estilos importantes e essenciais em nosso projeto.

O que é CSS Reset

Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia de Browser para Browser, não existe um padrão. Com isso você pode passar por vários problemas ao tentar desenvolver CSS para vários navegadores. Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, iniciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser.

CSS Reset desenvolvido na vídeo aula

* {
    margin: 0;
    padding: 0;
    font-family: 'Arial';
    font-size: 100%;
    text-decoration: none;
    text-align: center;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

O que é Clearfix

Clearfix é apenas uma maneira de fazer com que um elemento tenha, ele próprio, a propriedade clear, sem que seja necessário usar código extra. Clearfix não é uma propriedade CSS. É um nome comum de classe que caiu no gosto de programadores de interface.

Clearfix desenvolvido na vídeo aula

.limpa {
    clear: both;
    overflow: hidden;
    display: block
}

HTML do topo desenvolvido na vídeo aula

<header class="fundoVerdeFloresta limpa">
            <div class="conteudo">
                <div class="caixa-g-4">
                    <p>Formulario</p>
                </div>
                <div class="caixa-g-4">
                    <div class="logo">
                        <a href="./" title="Curso de Design Responsivo do Bobrinha.com">
                            <img src="imagens/logo.png" alt="Curso de Design Responsivo do Bobrinha.com" title="Curso de Design Responsivo do Bobrinha.com">
                        </a>
                    </div>
                </div>
                <div class="caixa-g-4">
                    <p>menu</p>
                </div>
            </div>
        </header>

CSS do topo desenvolvido na vídeo aula

img {
    width: 100%;
    height: 100%;
    border: 0
}
.logo {
    height: 90px;
    width: 320px;
    margin: 0 auto
}
header {
    padding-top: 40px;
    padding-bottom: 40px;
    border-bottom: 5px solid #009900
}
.fundoVerdeFloresta {
    color: #33CC33;
    background-color: #006634
}

 



Hospedagem Profissional de Sites