Simplificando as coisas no CSS

[Apenas Eu 13]

Olá!

Eu tenho umas algumas divs que são bem semelhantes umas das outras, estão nas mesmas páginas. Única coisa que diferencia uma das outras são as cores.

 

Eu acho que pela folha de estilo é possível deixar as inf´s estruturais padrão e depois um outro "comando" apenas para mudar as cores. É possível né?

 

Do jeito que fiz, tem sido meio complicado mexer na folha. Notem que os quadr1 e 2 tem a mesma estrutura básica e os quadr3 a 5 são menores, mas entre eles mudam só as cores também. Eu quero simplificar isso para facilitar o uso e deixar a página mais leve. Abaixo eu vou postar como ficou meu css dos quadros:

Muito obrigado :)

 

.quadr1 {
height: 199px; width: 407px;
border: solid 1px; border-color: #E7E7E7;
margin: 17px 6px 7px 17px;
padding: 10px; float:left; display:inline;
}
.quadr1 h1  {
color:#996699; 
letter-spacing:2px; 
margin-left:20px
}
.quadr1 p  {
color: #666666; 
font-size:16px; 
font-family: Calibri; 
line-height:25px; 
text-align:left;  
}
.quadr1 img {
padding:9px 20px 270px 0
}
.quadr1 a {
background:#996699; 
color:#FFF9F9; 
font-size:16px;
font-weight:bold; 
float:right; 
padding: 10px 25px 10px 25px; 
text-decoration:none; 
margin: -30px -30px 10px 10px;
}
.quadr1 a:hover {
background:#91617A
}

.quadr2 {
border: solid 1px; 
border-color: #E7E7E7;
float:right;
height: 199px; width: 407px;
margin: 17px 17px 7px 6px;
padding: 10px; 
}
.quadr2 h1  {
color:#4B8C9C; 
letter-spacing:2px; 
margin-left:20px; 
text-align:left;
}
.quadr2 p  {
color: #666666; 
font-family: Calibri; 
font-size:16px; 
line-height:25px; 
text-align:left; 
}
.quadr2 img {
padding:9px 20px 270px 0;
}
.quadr2 a {
background:#4B8C9C; 
color:#FFF9F9; 
font-size:16px; 
padding: 10px 25px 10px 25px; 
text-decoration:none; 
font-weight:bold; 
float:right; 
margin:4px -30px 10px 10px
}
.quadr2 a:hover { 
background:#447C8A
}
.quadr3 {
border: solid 1px; 
border-color: #E7E7E7;
float:left;
height: 183px; width: 259px;
margin: 7px 6px 7px 17px;
padding: 8px; 
}
.quadr3 h1  {
color:#999933; 
letter-spacing:2px; 
margin-left:20px
}
.quadr3 p  {
color: #666666; 
font-size:16px; 
font-family: Calibri; 
line-height:25px; 
text-align:left;  
}
.quadr3 img {
padding:5px 5px 265px 0;
}
.quadr3 a {
background:#999933; 
color:#FFF9F9; 
float:right;
font-size:16px;
font-weight:bold; 
margin: 21px -27px 20px 20px;
padding: 10px 25px 10px 25px;
text-decoration:none; 
}
.quadr3 a:hover {
 background:#AD9A2B
 }
.quadr4 {
border: solid 1px; 
border-color: #E7E7E7;
float:left;
height: 183px; width: 259px;
margin: 7px 6px 17px 17px;
padding: 8px; 
}
.quadr4 h1  {
color:#FF6666; 
margin-left:20px
}
.quadr4 p  {
color: #666666; 
font-family: Calibri; 
font-size:16px; 
line-height:25px; 
text-align:left;  
}
.quadr4 img {
padding:5px 5px 265px 0;
}
.quadr4 a {
background:#FF6666; 
color:#FFF9F9; 
float:right; 
font-size:16px;
font-weight:bold; 
margin: 21px -27px 20px 20px;
padding: 10px 25px 10px 25px; 
text-decoration:none; 
}
.quadr4 a:hover {
background:#990000
}
.quadr5 {
border: solid 1px; 
border-color: #E7E7E7;
float:left;
height: 183px; width: 259px;
margin: 7px 6px 17px 17px;
padding: 8px; 
}
.quadr5 h1  {
color:#CC6633; 
margin-left:20px;
letter-spacing:2px; 
}
.quadr5 p  {
color: #666666; 
font-family: Calibri; 
font-size:16px;
line-height:25px; 
text-align:left;  
}
.quadr5 img {
padding:5px 5px 265px 0;
}
.quadr5 a {
background:#CC6633; 
color:#FFF9F9; 
float:right; 
font-size:16px;
font-weight:bold;
margin: 21px -27px 20px 20px; 
padding: 10px 25px 10px 25px; 
text-decoration:none; 
}
.quadr5 a:hover 
{
background:#A64A0D
} 

[Public2004 79]

Você pode criar uma classe com a formatação padrão e classes individuais com estilo único. Ao criar o elemento, defina a classe padrão + a classe única para este elemento, ex: <div class="padrao unico">.

 

Att.

[bruno_mosciatti 22]

Explicando com exemplo é mais fácil:

 

HTML

<div class="caixa vermelha"><p>Aqui vai a caixa Vermelha</p>

<div class ="caixa azul"><p>Sou uma caixa azulada</p>

 

CSS

div.caixa {float:left; height:50px;width:50px;margin:10px}

div.vermelha {background:red;}

div.azul {background:blue}

[Apenas Eu 13]

Opa....muito obrigado Bruno e Publico!

Mas por acaso precisa conter o nome "div. ..." né? Ou pode ser "QualquerCoisa. ..."

[bruno_mosciatti 22]

Opa....muito obrigado Bruno e Publico!

 

Mas por acaso precisa conter o nome "div. ..." né? Ou pode ser "QualquerCoisa. ..."

 

No HTML usamos <div> para criar as "caixas", mas XML você pode criar sua tag tipo <Caixa></Caixa>

[EduardoAugustoPHP 27]

Amigão, uma dica boa pra se trabalhar com estruturas padrões no CSS é utilizar os IDS e Classes.

 

Exemplo:

 

#padrao { //ID

width: 200px;

height: 250px;

}

 

.azul {background:: blue;} //Classe

.vermelha {background: red;} //Classe

 

No html ficaria assim:

<div id="padrao" class="azul">Conteudo</div>

<div id="padroa" class="vermelha">Conteúdo</div>

 

Abraço!

[Apenas Eu 13]

Olá! A dica de todos foram muito valiosas!! Conseguimos reduzir 80 linhas :O

 

Mas por exemplo, na caixa 1 e 2 temos ainda comandos semelhantes (sem ser as cores), como o <p> <h1> e algumas coisas do <a>. Será que podemos simplificar mais ainda?

 

Por enquanto o nosso cód. ficou assim:

#caixa {
border: solid 1px; 
border-color: #E7E7E7;
float:left;
display:inline; 
height: 199px; width: 407px;
margin: 17px 6px 7px 17px;
padding: 10px; 
}
#caixa h1 {
letter-spacing:2px; 
margin-left:20px
}
#caixa p {
color: #666666; 
font-size:16px; 
font-family: Calibri; 
line-height:25px; 
text-align:left; 
}

#caixa a {
color:#FFF9F9; 
font-size:16px;
font-weight:bold; 
float:right; 
padding: 10px 25px 10px 25px; 
text-decoration:none; 
margin: -6px -30px 10px 10px;
}
.roxo h1 {
color:#996699; 
}
.roxo a {
background:#996699; 
}
.roxo a:hover {
background:#91617A; 
}
.azul h1 {
color:#4B8C9C; 
}
.azul a {
background:#4B8C9C; 
}
.azul a:hover {
background:#447C8A;
}
#caixa2 {
border: solid 1px; 
border-color: #E7E7E7;
float:left;
height: 183px; width: 259px;
margin: 7px 6px 7px 17px;
padding: 8px; 
}
#caixa2 h1{
letter-spacing:2px; 
margin-left:20px
}
#caixa2 p {
color: #666666; 
font-size:16px; 
font-family: Calibri; 
line-height:25px; 
text-align:left; 
}
#caixa2 a {
float:right;
font-size:16px;
font-weight:bold; 
margin: -20px -27px 0px 20px;
padding: 10px 25px 10px 25px;
text-decoration:none; 
}
.amarelo h1 {
color:#999933;
}
.amarelo a {
background:#999933; 
color:#FFF9F9; 
}
.amarelo a:hover {
background:#AD9A2B;
}
.vermelho h1 {
color:#FF6666;
}
.vermelho a {
background:#FF6666; 
color:#FFF9F9; 
}
.vermelho a:hover {
background:#990000;
}
.laranja h1 {
color:#CC6633; 
}
.laranja a {
background:#CC6633; 
color:#FFF9F9; 
}
.laranja a:hover {
background:#A64A0D;
}

[EduardoAugustoPHP 27]

Cria um padrão para todos os elementos da sua página!

 

Assim você consegue aplicar peculiaridades pra cada área do seu site especificamente.

 

Entende?

 

O princípio é o mesmo das div's que falei acima.

 

Padrão dos p's e h's depois aplica as classes neles. Assim vc muda cor, tamanho da fonte e tudo mais.

 

Abs

[Public2004 79]

<div id="padrao" class="azul">Conteudo</div>

<div id="padroa" class="vermelha">Conteúdo</div>

 

Isso não serviria para o caso, já que IDs são únicas e devem ser utilizadas apenas uma vez no documento.

 

Att.

[EduardoAugustoPHP 27]

Isso não serviria para o caso, já que IDs são únicas e devem ser utilizadas apenas uma vez no documento.

 

Att.

Não concordo.....mas respeito.

 

Pode me explicar porque eu não deveria fazer isso?

[Public2004 79]

Não concordo.....mas respeito.

 

Pode me explicar porque eu não deveria fazer isso?

 

Bom, seria uma regra básica para estruturação de um documento html:

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

 

- Cada elemento na página se preciso, pode ter apenas um ID;

- Cada página pode ter apenas um elemento com aquele ID;

- Com "class", você pode aplicar mais de uma no mesmo elemento: <div class="estilo1 estilo2 estilo3"> e ainda se necessário, repetir a mesma em outros elementos no mesmo documento.

 

Quando disse que a sua sugestão não serviria para o autor do tópico é porque o mesmo mencionou utilizar vários elementos semelhantes na mesma página, e como ele quer "simplificar", estilizar através dos IDs não seria o correto já que teria que repetir isso no documento.

 

Att.

[William Bruno 1501]

dá uma estudada em OOCSS e em SMACSS.

 

As suas classes css, tem q ser mais modulares.

ótima referência para estudo:

http://smacss.com/