Otimizando o código

[~Thiago Lara 0]

Pessoal,

É o seguinte, não entendo ABSOLUTAMENTE NADA sobre CSS porém gostaria da ajuda de vocês, para que eu consiga otimizar meu código e não fique tão grande como está atualmente. (

 

Em um dos meus site estou usando na íntegra 5 tipos de fontes, para que se o cara deseje aumentar, ele consiga via javascript, mas a dúvida é,

eu preciso realmente ter 5 class?

 

Atualmente faço assim:

 

.conteudo_noticia_1 { font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 10px; text-decoration: none; font-weight: 50px; color: #666666}
.conteudo_noticia_1:visited { color: #666666; font-size: 10px; text-decoration: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica}
.conteudo_noticia_1:hover { text-decoration: none; font-weight: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 10px; color: #666666}

.conteudo_noticia_2 { font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 12px; text-decoration: none; font-weight: 50px; color: #666666}
.conteudo_noticia_2:visited { color: #666666; font-size: 12px; text-decoration: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica}
.conteudo_noticia_2:hover { text-decoration: none; font-weight: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 12px; color: #666666}

.conteudo_noticia_3 { font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 14px; text-decoration: none; font-weight: 50px; color: #666666}
.conteudo_noticia_3:visited { color: #666666; font-size: 14px; text-decoration: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica}
.conteudo_noticia_3:hover { text-decoration: none; font-weight: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 14px; color: #666666}

.conteudo_noticia_4 { font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 16px; text-decoration: none; font-weight: 50px; color: #666666}
.conteudo_noticia_4:visited { color: #666666; font-size: 16px; text-decoration: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica}
.conteudo_noticia_4:hover { text-decoration: none; font-weight: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 16px; color: #666666}

.conteudo_noticia_5 { font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 18px; text-decoration: none; font-weight: 50px; color: #666666}
.conteudo_noticia_5:visited { color: #666666; font-size: 18px; text-decoration: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica}
.conteudo_noticia_5:hover { text-decoration: none; font-weight: none; font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica; font-size: 18px; color: #666666}

 

É possível ficar menor ou melhorar para trocar apenas os tamanhos da fonte??

Abraços

[Thiago Retondar 18]

Cara,

 

creio que da para estilizar pelo próprio JavaScript, sem a criação de classes.

 

Tópico movido:

 

Webstandards: CSS / XML / XHTML / HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript / DHTML

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[William Bruno 1501]

http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

Moveram bem na hora que eu ia responder..

 

a {
	font-family: Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica;
	text-decoration: none;
	font-weight: 50px; color: #666666
}
a:hover {
	color: #666666;
	text-decoration: none;
	font-weight: none; 
}
.conteudo_noticia_1 { font-size: 10px; }
.conteudo_noticia_2 { font-size: 12px; }
.conteudo_noticia_3 { font-size: 14px; }
.conteudo_noticia_4 { font-size: 16px; }
.conteudo_noticia_5 { font-size: 18px; }

e sim, dá pra mudar com javascript, sem precisar de classes.

Acesse diretamente a propriedade fontSize dos elementos que você quer alterar, em vez de ficar fazendo troca de classes.

[Eliseu M. 2]

Olha um código básico em JS:

 

var min=8;
var max=18;
function FonteMais() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function FonteMenos() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}

E no HTML (os links):

 

<a href="javascript:FonteMais()">A+</a>  
<a href="javascript:FonteMenos()">a-</a>

Fonte: http://www.white-hat-web-design.co.uk/articles/js-fontsize.php

 

Observe que esse script só altera o tamanho da fonte de parágrafos (P), bem de acordo com a semântica e a usabilidade, na minha opinião.

Espero ter ajudado, falou!