Совет 1: Как сделать нижнее подчеркивание

В языке разметки гипертекста (HTML - HyperText Markup Language), который используют для создания веб-страниц, предусмотрены средства для выделения подчеркиванием части текста. Часто для этого же используют и язык описания каскадных стилей (CSS - Cascading Style Sheets).
Инструкция
1
В языке HTML есть специальный тег, предназначенный для подчеркивания текста, размещенного между его открывающей (<u>) и закрывающей (</u>) половинами. В самом простом варианте часть кода страницы, использующего этот способ подчеркивания, может выглядеть так:<u>это подчеркнутый текст</u>
2
Кроме того, в любом теге строчного или блочного элемента страницы можно указать атрибут с именем style и поместить в него описание стиля содержимого. В числе других стилевых описаний есть и выделение текста подчеркиванием. На языке css описание подчеркнутого текста выглядит так:text-decoration: underline;Например, тег параграфа текста с таким указанием может выглядеть так:<p style="text-decoration: underline">Целый параграф подчеркнутого текста</p>
3
Однако описание стилей редко помещают внутрь HTML-тегов, обычно их выносят в отдельные блоки описаний. Такие блоки размещают в заголовочной части веб-документов (между тегами <head> и </head>) или сохраняют во внешних файлах стилей с расширением css. Чтобы весь текст в странице был подчеркнут, это описание надо поместить внутрь селектора HTML:<style type="text/css">
html {text-decoration: underline;}
</style>Но такое редко бывает нужно, поэтому чаще в качестве селектора указывают имя какого либо класса. Например:<style type="text/css">
.und {text-decoration: underline; color: Red}
</style>Здесь объявлено, что текст внутри каждого тега, которому присвоен класс und, должен быть покрашен в красный цвет и подчеркнут. Чаще всего классы для разных манипуляций с текстом используются совместно с тегом span. Например, HTML-код параграфа текста, часть которого выделена подчеркиванием, может выглядеть так:<p>Текст параграфа с кусочком <span class="und">подчеркнутого красного</span></p>

Совет 2: Как сделать подчеркивание в тексте

Подчеркивание служит для выделения какой-либо буквы, слова или фрагмента текста и относится к элементам форматирования. Некоторые текстовые редакторы и форматы файлов не могут работать с форматированием - например, стандартный Блокнот Windows и формат txt. В остальных случаях выделение фрагмента текста с помощью подчеркивания - одна из простейших операций.
Инструкция
1
Запустите текстовый редактор, который имеет функции форматирования текста - например, Microsoft Office Word. Загрузите в него документ, в котором требуется выделить подчеркиванием букву, слово или любую часть текста - для вызова соответствующего диалога можно использовать сочетание клавиш ctrl + o. Найдите в тексте нужный фрагмент и выделите его. Затем на вкладке «Основные» щелкните по пиктограмме подчеркивания - на ней изображена подчеркнутая буква «Ч». Если нужен какой-либо нестандартный вариант подчеркивания, то щелкните выделенный фрагмент правой кнопкой мыши и выберите в контекстном меню пункт «Шрифт». В открывшемся окне есть выпадающий список «Подчеркивание» - выберите в нем любой из 17 вариантов, а затем нажмите кнопку «OK».
2
Если требуется подчеркнуть текст в HTML-документе, то в его код надо добавить соответствующие теги. Перед первым знаком фрагмента, который требуется подчеркнуть, должен стоять открывающий тег <u>, а после последнего подчеркнутого знака надо вставить закрывающий тег </u>. Например:
<p>Это параграф с <u>подчеркнутым</u> текстом.</p>
При использовании для редактирования страниц системы управления сайтом нужные теги вставляются автоматически, если редактирование производить в визуальном режиме (режиме WYSIWYG). В этом случае достаточно выделить нужный фрагмент и щелкнуть по кнопке подчеркивания на панели редактора.
3
Если подчеркнуть слова или буквы надо в сообщении, отправляемом на какой-либо форум или в чат, то найдите соответствующую кнопку на панели редактирования сообщения. Иногда она присутствует только в расширенной форме редактирования. Как правило, на пиктограмме изображена английская буква U с подчеркиванием - щелкните по ней, выделив нужный фрагмент текста.
Источники:
  • как подчеркнуть и выделить текст

Совет 3: Как сделать блоки в CSS

CSS - это каскадные таблицы стилей, представляющие собой язык описания внешнего вида веб-страниц. Одно из главных преимуществ CSS - это возможность замены табличной верстки на блочную.
Вам понадобится
  • Редактор HTML кода
Инструкция
1
Создайте первый блок. В виде HTML кода он будет выглядеть, как тег div с id ’block01’. Здесь идентификатор block01 указывает на то, что в CSS описании все свойства данного блока указаны для селектора #block01.
2
Опишите блок в CSS. В стилях CSS укажите название идентификатора (#block01) и в фигурных скобках опишите его параметры - ширину, позиционирование, смещение, цвет фона и т.д. Например, это может выглядеть так: #block01 {width: 150px; height: 150px; position: absolute; top:0px; left:0px; background-color: pink}. Данное описание подразумевает, что блок будет иметь в длину и ширину 150 пикселей, он будет жестко размещен в верхнем левом углу документа, а его задний фон будет окрашен в розовый цвет.
3
Задайте блоку относительное позиционирование. Если в описании CSS использовать не абсолютное, а относительное позиционирование, то вы сможете размещать блоки не с жесткой привязкой к сетке координат, а относительно других, уже существующих блоков. Для этого поменяйте код position: absolute; top:0px; left:0px на position:relative; top:200px; left:100px.
4
Задайте блоку скругление. В CSS за это отвечает инструкция border-radius. Допишите в таблице стилей следующий код: border-radius: 8px. Теперь блок будет иметь закругленные углы. Если вы хотите скруглить только некоторые углы, опишите радиус отдельно для каждого из них: border-radius: 8px 8px 0px 0px.
5
Задайте блоку обводку. Чтобы выделить контуры блока тонкой линией, добавьте в его CSS описание следующий код: border-top: 1px dashed black. Эта инструкция означает, что граница блока будет черного цвета и будет иметь один пиксель в толщину. При этом сама линия контура будет отображаться пунктиром (dashed - пунктиром, dotted - точками, solid - сплошной линией).
6
Задайте оставшиеся свойства блока. Укажите в CSS описании, какую гарнитуру нужно использовать для текста внутри блока, каким должен быть размер шрифта, его выравнивание и отступ от краев блока. Эти свойства описываются в определениях font-family, font-size, text-align и padding.
7
Чтобы настроить обтекание одного блока другими, можно использовать свойство float. Если выставить его значением “left”, то остальные элементы будут обтекать блок слева, а “right” - справа. Если выставить значение float, как “none” - выравнивание блока не будет задано. Свойство clear в CSS запрещает обтекание блока с правой, левой или обеих сторон и отменяет инструкцию float.
Видео по теме

Совет 4: Как убрать подчеркивание ссылок

Редактировать способ отображения ссылок на сайте хотят многие веб-мастеры, однако со знанием одних лишь тегов HTML это не представляется возможным. Если вы хотите, чтобы у ссылок исчезало подчеркивание, HTML не поможет – потребуется использовать коды CSS, для многих представляющие из себя значительную трудность.

Исчезновение или проявление черты при наведении на ссылку курсора добавляет вашему сайту необычности и привлекает пользователей, поэтому, если вы – владелец сайта и веб-мастер, возможно вам будет полезным научиться несложному процессу ликвидации подчеркивания в ссылках.
Инструкция
1
Возьмите в качестве примера любую строчку текста, которую вы хотите сделать ссылкой. Для работы вам потребуется параметр text-decoration: none. Если его добавить в код страницы в определенном месте, подчеркивание ссылки исчезнет.

Найдите следующий код, и после литеры «А» вводите указанный выше стилевой параметр текста.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

A {

text-decoration: none

}
2
Изменив код таким образом, вы убрали подчеркивание ссылки. Теперь, если вы хотите сделать так, чтобы подчеркивание снова появлялось только при наведении на ссылку курсора, а ее цвет при наведении менялся, скажем, на красный, дополните код следующими параметрами:

A:hover {

text-decoration: underline;

color: red

}

Здесь, как видите, появился снова параметр подчеркивания и параметр цвета.
3
Здесь, как видите, появился снова параметр подчеркивания и параметр цвета.

Добавьте к описанным выше частям кода последнюю третью часть, она будет завершающей, и в ней вы введете непосредственно сам текст ссылки, на которой можно будет проверить получившийся эффект.
</style>

</head>

<body>

<a href="link.html">Проверочный текст ссылки

</body>

</html>
Источники:
  • нижнее подчеркивание word
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500