Свойство letter-spacing
Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина. Например, если вам необходимо 3px между буквами в параграфах <p> и 6px - в заголовках <h1>, то используется такой код:
Задание 9.14 Default9_14.htm:
<html> <html> <head> <title> Работа с текстом </title> <style type="text/css"> h1 { letter-spacing: 6px; }
p { letter-spacing: 3px; } </style> </head> <body> <h1>Примеры использования Сss</h1> <p>CSS это язык стилей, определяющий отображение HTML-документов. Например,CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого. </p> <h2> Примеры использования Сss</h2> <p> Нормальная форма отображения </p> <h3>заголовок 3</h3> <p> Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление. </p>
</body> </html> Свойство text-transform Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде. Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform: capitalize-Капитализирует каждое слово. Например: "john doe" станет "John Doe". uppercase-Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE". lowercase-Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe". none-Трансформации нет - текст отображается так же, как в HTML-коде. В использован список имён. Все имена выделены с помощью <li> (list-item). Капитализируем все имена и отобразим все заголовки верхним регистром. Видите, HTML-код в этом примере в действительности записан в нижнем регистре.
Задание 9.15 Измените содержание выше созданных файлов сохраните их под новыми именами и просмотрите результат в браузере Default9_15.htm:
<html> <html> <head> <title> Работа с текстом </title> <style type="text/css"> h1 { text-transform: uppercase; } li { text-transform: capitalize; } </style> </head> <body> <h1>Список имен</h1> <li>вера</li> <li>надежда</li> <li>любовь</li> </body> </html> Раздел 3. Ссылки Всё рассмотренное в предыдущих работа можно применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на web-сайт. Для этого используются так псевдоклассы. Псевдокласс позволяет учитывать различные условия или события при определении свойств HTM-тэга. Рассмотрим пример. Ссылки специфицируются в HTML тэгом <a>. В CSS также можем использовать a в качестве селектора:
a { color: blue; }
Ссылка может иметь разные состояния. Используйте a:link и a:visited для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой. Мы рассмотрим каждый их четырёх псевдоклассов на примерах и с объяснениями. В примере кода непосещённые ссылки – синие, посещённые ссылки – фиолетовые, активные ссылки имеют , ссылки становятся оранжевыми и курсивными при прохождении указателя над ними,. Задание 9.16 Измените содержание выше созданных файлов, сохраните их под новыми именами и просмотрите результат в браузере Default9_16.htm:
<html> <head> <title>Работа с ссылками</title> <style type="text/css"> a:link { color: #6699CC; } a:visited { color: #660099; } a:active { background-color: #FFFF00; } a:hover { color: orange; font-style: italic; } </style> </head> <body> <p>Примеры изменения стиля текста:</p> <ul> <li><a href="default31.htm"> свойство text-ident</a></li> <li><a href=" default32.htm "> свойство text-align </a></li> <li><a href=" default33.htm "> свойство text-decoration </a></li> <li><a href=" default34.htm "> свойство text-spacing </a></li> <li><a href=" default35.htm "> свойство text-transform </a></li> </ul> </body> </html> Пример 1: Эффект при нахождении указателя над ссылкой Рассмотрим несколько дополнительных примеров для псевдокласса :hover. Расстояние между буквами Расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки: Задание 9.17 Измените содержание выше созданного файла, сохраните под новым именем и просмотрите результат в браузере Default9_17.htm:
<html> <head> <title>Работа с ссылками</title> <style type="text/css"> a:link { color: #6699CC; } a:visited { color: #660099; } a:active { background-color: #FFFF00; } a:hover { letter-spacing: 10px; font-weight:bold; color:red; } </style> </head> <body> <p>Примеры изменения стиля текста:</p> <ul> <li><a href="default31.htm"> свойство text-ident</a></li> <li><a href=" default32.htm "> свойство text-align </a></li> <li><a href=" default33.htm "> свойство text-decoration </a></li> <li><a href=" default34.htm "> свойство text-spacing </a></li> <li><a href=" default35.htm "> свойство text-transform </a></li>
</ul> </body> </html>
UPPERCASE и lowercase Свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке: Задание 9.18 Измените содержание выше созданного файла, сохраните под новым именем и просмотрите результат в браузере Default9_18.htm:
<html> <head> <title>Работа с ссылками</title> <style type="text/css"> a:link { color: #6699CC; } a:visited { color: #660099; } a:active { background-color: #FFFF00; } a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
</style> </head> <body> <p>Примеры изменения стиля текста:</p> <ul> <li><a href="default9_1.htm"> свойство text-ident</a></li> <li><a href=" default9_2.htm "> свойство text-align </a></li> <li><a href=" default9_3.htm "> свойство text-decoration </a></li> <li><a href=" default9_4.htm "> свойство text-spacing </a></li> <li><a href=" default9_5.htm "> свойство text-transform </a></li> </ul> </body> </html> Удаление подчёркивания ссылок Свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.
a { text-decoration:none; } Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов. Задание 9.19 Измените содержание выше созданного файла, сохраните под новым именем и просмотрите результат в браузере Default9_19.htm:
<html> <head> <title>Работа с ссылками</title> <style type="text/css"> a:link { color: blue; text-decoration:none; }
a:visited { color: purple; text-decoration:none; }
a:active { background-color: yellow; text-decoration:none; }
a:hover { color:red; text-decoration:none; }
</style> </head> <body> <p>Примеры изменения стиля текста:</p> <ul> <li><a href="default9_1.htm"> свойство text-ident</a></li> <li><a href=" default9_2.htm "> свойство text-align </a></li> <li><a href=" default9_3.htm "> свойство text-decoration </a></li> <li><a href=" default9_4.htm "> свойство text-spacing </a></li> <li><a href=" default9_5.htm "> свойство text-transform </a></li>
</ul> </body> </html>
Задание для самостоятельного выполнения: Создайте документ, содержащий ссылки на четыре рисунка. Используйте псевдоклассы и рассмотренные ранее свойства элементов для создания собственных эффектов.
Контрольные вопросы: Работа с шрифтами: основные операции. Работа с ссылками: основные операции. Лабораторная работа№10 (class и id) Группирование элементов (span и div) Цель работы:получить навыки создания идентифицированных элементов и группировка элементов. Задачи: · научиться создавать идентифицированные элементы; · научиться производить группировку элементов.
Популярное: Организация как механизм и форма жизни коллектива: Организация не сможет достичь поставленных целей без соответствующей внутренней... Как выбрать специалиста по управлению гостиницей: Понятно, что управление гостиницей невозможно без специальных знаний. Соответственно, важна квалификация... ©2015-2020 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (462)
|
Почему 1285321 студент выбрали МегаОбучалку... Система поиска информации Мобильная версия сайта Удобная навигация Нет шокирующей рекламы |