Como anular o estilo definido pelas tags Font
Mesmo trabalhando somente dentro dos padroes web, algumas vezes chega um ou outro HTML feito nos moldes antigos para trabalhar o layout. E nas situacoes mais criticas, esses codigos estao tao sujos que fica impossivel controlar os estilos usando um CSS de fora.
Boa parte das propriedades CSS tem uma definicao chamada Inherit, que e nada menos que pedir que o objeto absorva as propriedades do pai, ou seja, pegue as caracteristicas da tag de cima por heranca.
p { color: inherit; } /* tag p herdara as cores do objeto de nivel maior */
Tentaremos agora anular as caracteristicas que todas as tags font usam para alterar layout de dentro do HTML.
Exemplo de codigo HTML: <font size="1" color="black" face="verdana"> Lorem Ipsum Sit Dolor Amet </font>
Em um mundo perfeito e dentro dos padroes, bastaria colocar este css para anular as tags font em todos os browsers:
font { color: inherit; font-family: inherit; font: inherit; /* fix para Opera, que nao aceita font-family inherit */ }
Mas como trabalhamos com browsers AND Internet Explorers, nosso trabalho tem que continuar ate que todos estejam felizes.
As CSS expressions foram inseridas a partir do IE 5.0 e permitem controlar (no IE) propriedades CSS atraves de JavaScript. Vamos ver entao como ficara o codigo para IE:
font { color: expression(this.parentNode.currentStyle['color']); font-family: expression(this.parentNode.currentStyle['fontFamily']); }
Para padronizar o tamanho da font, gracas a deus todos os browsers aceitam o font-size: 100% e nao teremos problemas com isso.
Entao nosso fix esta pronto! Veja como ficou:
font { color: inherit; font-family: inherit; font: inherit; /* fix para Opera, que nao aceita font-family inherit */ color: expression(this.parentNode.currentStyle['color']); font-family: expression(this.parentNode.currentStyle['fontFamily']); font-size: 100%; }
Prontinho. Agora temos liberdade completa para dar estilo as tags font do codigo! =)
ze
Amigo, estou com problema no meu blogue.
Quero mostrar código como e outros mas sempre que coloco no poste ele faz disso código e não mostra.
Sabe como conseguir isso?
estou usando blogger!
Agradeço!
ze
*como DIV
Deniw
Olá, achei muito e interessante as suas dicas, principalmente sobre processos relativamente simples, que as vezes passam por despercebidos, e em muitas situações os iniciantes aprendem coisas até mais complexas mas acabam esbarrando nas simples… gostaria de ver aqui um post explicando como trabalhar com parágrafos (espaçamento entre títulos e textos, para ser mais específico), Houve uma situação comico onde eu não conseguia diminuir a distí¢ncia de um título do restante do texto, acabei fazendo o título como imagem, pra resolver… E ainda houve aquele espaço no final da div depois da última linha de texto que não saia! Poderia exclarecer essas pequenas dúvidas… obrigado!!
Vitor Melo
Adorei esse tutorial, era outra questão que sempre eu batia, conseguia herdar quase todas as fontes do seletor “body”, algumas como as do seletor “textarea” e “input[type=”text”] nunca herdavam o elemento body ou até mesmo do *. Mas com essa técnica funcionou.
Por que alguns atributos de fontes mesmo sendo de origem geral *, não são herdados no text-area?