4
respostas

Codigo Repetido

Se eu nao repetir o codigo abaixo, o estilo nao funciona.

.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    position: absolute;
}

.eficiencia {
    top: 20%;
    left: 75%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
}
... demais
4 respostas

Alexandre, sempre quando utilizamos classes para estilizar nossos elementos é necessário declarar todos os estilos de determinadas classes, mesmo que o código repita, mas em vez de repetirmos da maneira como você fez podemos fazer da seguinte maneira:

.palavra-home, .eficiencia {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
}

.eficiencia {
    top: 20%;
    left: 75%;
}

Repare que juntei todas as regras iguais em uma unica declaração e o que é especifico de cada uma eu declarei separado.

Se preferir pode usar orientação a objetos no CSS, para utilizar tal recurso basta criar uma classe onde sera representado o objeto:

.objeto {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
}

E em seguida declare as regras especificas de casa classe:

.eficiencia {
    top: 20%;
    left: 75%;
}

Ai no seu HTML os dois elementos terão a classe objeto e suas classes específicas:

<div class="objeto eficiencia"></div>
<div class="objeto palavra-home"></div>

Espero ter ajudado.

Oii Alexandre,

você pode fazer assim como o Matheus sugeriu, ou você também pode usar a herança em cascata da CSS a seu favor. Por exemplo, colocando os estilos de texto no elemento pai (se houverem o mesmo elemento pai).

Se o seu html for algo como por exemplo:

<div class="banner-home">
    <div class="palavra-home"></div>
    <div class="eficiencia"></div>
</div>

Sua CSS pode ser algo como:

 .banner-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
}

.eficiencia {
    top: 20%;
    left: 75%;
}

Veja se isso te ajuda também! :)

abraços

meu codigo só funciona assim, repetindo tudo.

 <ul>
            <li class="palavra-home eficiencia">Eficiência</li>
            <li class="palavra-home boas-praticas">Boas práticas</li>
            <li class="palavra-home codigo-limpo">Código limpo</li>
            <li class="palavra-home css3">CSS3</li>
            <li class="palavra-home html5">HTML5</li>
            <li class="palavra-home javascript">JavaScript</li>
            <li class="palavra-home acessibilidade">Acessibilidade</li>
            <li class="palavra-home responsivo">Responsivo</li>
            <li class="palavra-home otimizacoes">Otimizações</li>
            <li class="palavra-home agilidade">Agilidade</li>
            <li class="palavra-home design">Design</li>
        </ul>
.palavra-home {
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    position: absolute;
}

.eficiencia {
    top: 20%;
    left: 75%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(10deg);
}

.boas-praticas {
    top: 80%;
    left: 15%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(-8deg);
}

.codigo-limpo {
    top: 45%;
    left: 10%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(5deg);
}

.css3 {
    top: 70%;
    left: 5%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(-5deg);
}

.html5 {
    top: 40%;
    left: 80%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(7deg);
}

.javascript {
    top: 10%;
    left: 62%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    -webkit-transform:rotate(-7deg);
    font-weight: bold;
    color: #D5447E;
}

.acessibilidade {
    top: 30%;
    left: 25%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(-10deg);
}

.responsivo {
    top: 15%;
    left: 15%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(8deg);
    transform:rotate(8deg);
}

.otimizacoes {
    top: 70%;
    left: 80%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(8deg);
}

.agilidade {
    top: 10%;
    left: 30%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(-5deg);
}

.design {
    top: 35%;
    left: 65%;
    position: absolute;
    font-family: "Shadows Into Light", cursive;
    font-weight: bold;
    color: #D5447E;
    -webkit-transform:rotate(-5deg);
}

Junte as classes onde as regras são iguais da forma que eu lhe falei, vai resolver o problema e evitar a repetição de códigos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software