Negrito, Itálico, Riscado e Sublinhado com background

Ohayoo!!! Vendo os comentários de duas postagens atrás um leitor deu uma ideia bem legal, de fazer uma maratona de tutoriais. Achei super legal e decidi fazer, claro que ainda farei o Big Tutorial de como criar um layout avançado, mas estou fazendo cada postagem com paciência. Mas muito obrigada pela ideia Guh de Britto, achei mega legal! Nessa maratona farei 20 postagens, e, para começar trago um tutorial com o nome comprido e comum colocando cor no Negrito, Itálico, Riscado e Sublinhado só que com background, simplificando colocar as letras ativadas como negrito, itálico, riscado e sublinhado com fundo de cor. Esse tutorial até estava na listinha de pedidos, então decidi começar com ela.  É super fácil, vamos lá?

Vai ficar exatamente assim, vocês podem personalizar como desejarem, colocando efeito de profundidade na letra, sombra ou estilo overlay, podem colocar uma bordinha saliente como fiz no Sublinhado (no hover). Uffa... ou seja podem fazer bastante coisa em vez de só deixar o fundo e cor.

1. Para começar vá até a pagina Modelo e então clique em Editar HTML e procure por ]]</b:skin> e acima cole:

Códigos

b {
color: #787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-transition-duration: .90s;}
b:hover {
color: #dacee0;background:#787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;border-radius: 5px;-webkit-transition-duration: 1.70s;}
i {
color: #e68ea6;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-transition-duration: .90s;}
i:hover {
color: #f2eeeb;background:#787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;border-radius: 5px;-webkit-transition-duration: 1.70s;}
u {
color: #e68ea5;border-bottom: 1px dotted #787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-transition-duration: .90s;}
u:hover {
color: #e68ea6;background:#787878;border-bottom: 1px solid #e68ea5;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;border-radius: 5px;-webkit-transition-duration: 1.70s;}
s, strike {
color: #c4b9c9;padding: 2px 4px 2px 4px;cursor: default;-webkit-transition-duration: .90s;}
s, strike:hover {
color: #f2eeeb;background:#787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-border-radius: 5px;-webkit-border-top-left-radius: 0;-moz-border-radius: 5px;-moz-border-radius-topleft: 0;border-radius: 5px;border-top-left-radius: 0;-webkit-transition-duration: 1.70s;}

O código é meio grandinho, mas nada complicado de entender. Agora vamos as explicações:

Vermelho: Cor da fonte

Verde: Cor de fundo

Laranja: Espaço interno. Se quiser deixar o espaço maior é só aumentar o valor. Aconselhável sempre deixar um valor mesmo que seja apenas 1px.

Azul: Texto sem decoração, é para não ficar aquela linha em abaixo das palavras, só há exerção no sublinhado.

Rosa (ou quase isso): Tempo de transição; transformar o efeito.

Esqueci o nome dessa cor: Tipo de cursor.

Verde folha: Raio de fronteira (bordas arredondadas).

Roxo: Borda de baixo, exemplo.

 Agora é só salvar!