Полезно: HTML, CSS, создание сайтов
Подчеркивание текста
Как мы привыкли видеть ссылку? Единогласно все в один голос бы сказали подчеркнутым, так и есть. Например я считаю подчеркиванием обычного текста не правильно, нелогично давайте не будем этого делать, хотя бы ради того, что бы не вводить посетителей сайта в заблуждение. Подчеркивание можно делать абсолютно разным пунктирным, обычным и т.д. Давайте я вам на примере покажу, что к чему.
Создание пунктирного подчеркивания для ссылок
Ну вот как бы с подчеркиванием ссылок разобрались, есть все таки случае где текст нужно по той или иной причине подчекрнуть. Тут принцип тот же.
Если все таки нужен пунктирное подчеркивание для текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подчеркивание</title>
<style type="text/css">
.underline {
border-bottom: 1px dashed blue; /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>
<p><span class="underline">Данный сайт verstay.ru</span> в настоящие время посвящен языку HTML, CSS и процессу создания сайтов.</p>
</body>
</html>
Ну вот теперь вы знаете как делать подчеркивание для ссылок, текста, конечно есть еще способ сделать подчеркивание с помощью свойства background, ну суть я думаю все поняли а дальше только практика практика.
Создание пунктирного подчеркивания для ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8UTF-8windows-1251">
<title>Ссылки</title>
<style type="text/css">
A {
color: #f00; /* Цвет ссылок */
}
A:visited {
color: #666; /* Цвет посещенных ссылок */
}
A:hover {
text-decoration: none; /* Убираем обычное подчеркивание */
border-bottom: 1px dashed blue; /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>
<p><a href="1.html">Подчеркнутая ссылка</a></p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8UTF-8windows-1251">
<title>Ссылки</title>
<style type="text/css">
A {
color: #f00; /* Цвет ссылок */
}
A:visited {
color: #666; /* Цвет посещенных ссылок */
}
A:hover {
text-decoration: none; /* Убираем обычное подчеркивание */
border-bottom: 1px dashed blue; /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>
<p><a href="1.html">Подчеркнутая ссылка</a></p>
</body>
</html>
Так теперь у нас выглядит обычная ссылка:
А вот что получается при наведение:
Ну вот как бы с подчеркиванием ссылок разобрались, есть все таки случае где текст нужно по той или иной причине подчекрнуть. Тут принцип тот же.
Если все таки нужен пунктирное подчеркивание для текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подчеркивание</title>
<style type="text/css">
.underline {
border-bottom: 1px dashed blue; /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>
<p><span class="underline">Данный сайт verstay.ru</span> в настоящие время посвящен языку HTML, CSS и процессу создания сайтов.</p>
</body>
</html>
Подчеркнутый текст
Ну вот теперь вы знаете как делать подчеркивание для ссылок, текста, конечно есть еще способ сделать подчеркивание с помощью свойства background, ну суть я думаю все поняли а дальше только практика практика.