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