Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboraï¿½ï¿½o.

Tutoriais CSS - 5
Como Sublinhar Textos em CSS

A propriedade text-decoration ï¿½ usada para decorar o conteï¿½do do texto. Ela pode adicio-nar linhas acima, abaixo e ao longo do texto. Esta propriedade decora o texto com vï¿½rios tipos de linhas. ï¿½ a abreviaï¿½ï¿½o de text-decoration-line, text-decoration-color e text-decoration-style.
A propriedade text-decoration-line ï¿½ usada para sublinhar o texto. Esta propriedade possui trï¿½s valores que sï¿½o overline, underline ou line-through. Portanto, o valor underline ï¿½ usado para sublinhar o texto. Este valor desenha o sublinhado abaixo do texto inline.
Exemplo:
<!DOCTYPE html> <html> <head> <title>text-decoration</title> <style> h1 { color: blue; } body { text-align: center; } p{ font-size: 20px; } #p1 { text-decoration: underline; text-decoration-color: blue; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Bemvindo ao nosso Site</h1> <div> <p id="p1"> Olï¿½, bem vindo ao nosso site. Ele foi desenvolvido para que os alunos possam aprender facilmente tecnologias relacionadas ï¿½ ciï¿½ncia da computaï¿½ï¿½o. Este site estï¿½ sempre oferecendo um tutorial fï¿½cil e detalhado sobre vï¿½rias tecnologias. Ninguï¿½m ï¿½ perfeito neste mundo e nada ï¿½ eternamente melhor. Mas podemos tentar ser melhores. </p> </div> </body> </html>
Resultado:

*****
Nï¿½o hï¿½ propriedade CSS para aplicar um sublinhado apenas a palavras individuais em uma frase ou um elemento com vï¿½rias palavras. Portanto, a melhor maneira de fazer isso ï¿½ envol-ver as palavras sublinhadas em um elemento span e, em seguida, aplicar o sublinhado a esses spans.
Vamos ver como sublinhar algumas palavras selecionadas usando o exemplo a seguir.
Exemplo:
Neste exemplo, tambï¿½m estamos usando a propriedade text-decoration-style, que fornece estilo para o sublinhado do texto selecionado. Estamos usando o valor double desta propriedade.
Aqui, existem dois elementos <span> que contï¿½m o texto a ser sublinhado.
<!DOCTYPE html> <html> <head> <title>text-decoration</title> <style> h1 { color: red; } body { text-align: center; } p{ font-size: 25px; } span { text-decoration: underline; text-decoration-color: red; text-decoration-style: double; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <h1>Bemvindo ao <span> nosso Site<span></h1> <div> <p id="p1"> Olï¿½, bem vindo ao nosso site. Ele foi desenvolvido para que os alunos possam apren-der facilmente tecnologias <span> relacionadas ï¿½ ciï¿½ncia da computaï¿½ï¿½o. Este site estï¿½ sempre oferecendo um tutorial fï¿½cil e detalhado sobre </span> vï¿½rias tecnologias. Ninguï¿½m ï¿½ perfeito neste mundo e nada ï¿½ eternamente melhor. Mas podemos tentar ser melhores. </p> </div> </body> </html>
Resultado:

*****

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino