É uma forma de usar Css para personalizar tags Html, bom para área de blogs onde você só tem permissão de usar aquelas tags, não pode colocar nada mais do que elas e texto.
A principal finalidade é dar um destaque a mais para uma regra no comentário, eu mesmo me vi Você pode aproveitar e mudar Aparência de comentário do autor no Blogger, já que terá que aprender um pouco de Css, dessa forma memoriza melhor e faz duas coisas interessantes para seu blog.
- Configurar e criar a regra de comentário do blogger(veja como aqui) e entender como usar as tags Html dos comentários ou regras dele(veja abaixo).
- Colocar uma regra de estilo no Css do blogger(veja como aqui) e entender como usar ou mudar o estilo de uma frase na regra, com Css(veja abaixo).
Para o estilo funcionar será necessário dois procedimentos(etapas):
1. Entenda as tags Html
O fato é que, ao criar a regra de configuração de comentário do blogger e no comentário, você só tem opções de usar essas tags Html:
<b> para negrito
<i> para itálico
<a> para link.
Mas, com o uso do Css no Html do
Exemplo do uso das tags Html
Observe com atenção como faz para deixar uma frase em negrito:
<b> sua frase aqui </b>
Perceba acima, que, você começa a sua frase com a tag <b> e termina com a mesma tag usando quase a mesma tag com esse caracter /
Outro exemplo, frase em itálico:
<i> sua frase aqui </i>
Isso é um pouco de Html e geralmente tudo funciona de forma parecida no Html, quase toda tag tem um começo, algo dentro e um fim /
Uso das tags para o efeito
O uso das tags para o efeito funcionar vai ser um pouco diferente, vai ser utilizado os 2 tipos de tags juntas em uma frase.
A- Veja os códigos de exemplo:
<i><b> Sua frase aqui </b></i>Resultado do código:
Sua frase aqui
B- Agora veja quase o mesmo código de exemplo, porém, com a localização das tags alteradas:
<b><i> Sua outra frase aqui </i></b>Resultado do código:
Sua outra frase aqui
Nos dois exemplos de códigos acima, observe também a ordem das tags, quanto ao resultado do estilo dos exemplos, é o mesmo, uma frase em itálico/negrito. Abaixo vou mostrar como usar o Css para criar um estilo especial para o exemplo A de códigos acima.
2. Usar Css para criar um estilo para as tags
Para criar um estilo Css de cor de fonte vermelha para quando as tags <i><b> estiverem juntas(como no exemplo A, acima) ficaria assim:
i b {color:red;}Esse código acima no Css bastaria para deixar a frase com fonte vermelha, mas ainda ficaria em itálico/negrito, e, para impedir o itálico ficaria assim:
i b {color:red;
font-style: normal;}Se quiser que a fonte fique verde, impedir itálico e maior, ficaria assim:
i b {color:green;
font-style: normal;
font-size: 120%;}De certa forma é isso, porém, você deve saber onde adiciona esse estilo Css no blogger para por em prática, e, você pode usar color para mudar a cor da fonte junto com nomes básicos em inglês, ou usar um código que substitui o nome da cor e também usar outros estilos e tipos de fonte Css.
Usando a estilização Css acima fará com que, toda vez que for adicionado as tags <i><b>e uma frase</b></i> dessa forma no seu blog ficará do estilo que você determinar, mas, e se alguém comentar usando essas tags dessa forma também ficará no estilo determinado no Css, e, para impedir isso você pode fazer com que isso se aplique só para a área dos comentários do autor ou/e para a área das regras de comentários.
Restringir estilo Css a uma área do BlogSpot
Com esse estilo acima qualquer pessoa que comentasse no seu blog poderia fazer ter um efeito especial em uma palavra, bastaria usar as tags na sequencia correta, e, se você quer impedir isso basta restringir o estilo para a área das regras de comentários que se chama .comment-form e a área dos comentários do autor do blog .blog-author-comment
Muitos locais dentro da página de um BlogSpot tem um "nome", e, pode criar um estilo Css independente para as tags Html desse local.
Estilo Css apenas para tags nas Regras de comentário:
.comment-form i b {color:blue;
font-style: normal;}Esse código deixaria as <i><b>frases com essas tags</b></i> com cor de fonte azul e sem Itálico, mas, apenas no local/área .comment-form
Estilo Css apenas para tags nos comentários do autor do blog:
.blog-author-comment i b {color:orange;
font-style: normal;}Esse código deixaria as <i><b>frases com essas tags</b></i> com cor de fonte laranja e sem Itálico, mas, apenas no local/área .blog-author-comment
Estilo Css para tags nas Regras de comentário e comentários do autor do blog:
Finalizando, você pode querer estilos iguais para essas duas áreas anteriores, e, em vez de adicionar 2 partes de códigos Css como indicado logo acima, você pode reduzir um pouco o código de seu Css, desta maneira:
.comment-form i b, .blog-author-comment i b {color:#cccccc;
font-style: normal;}Entre os caracteres chaves{} estão os estilos, mas, antes deles estão as áreas a que deve se aplicar e a que tags, e perceba que logo após .comment-form i b tem uma vírgula, essa separa os nomes e significa que o estilo que está entre chaves deve ser aplicado para .comment-form i b mas também para .blog-author-comment i b e veja que agora coloquei esse código #cccccc que substitui/significa cor cinza, mais cores.
Muito obrigado. Consegui ajustar o que queria.
ResponderExcluirComo sempre, voltarei diariamente - mais de uma vez, claro - para visitá-lo...