Мегаобучалка Главная | О нас | Обратная связь


Свойство letter-spacing



2015-12-15 462 Обсуждений (0)
Свойство letter-spacing 0.00 из 5.00 0 оценок




Интервал между буквами текста можно специфицировать свойством 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-12-15 462 Обсуждений (0)
Свойство letter-spacing 0.00 из 5.00 0 оценок









Обсуждение в статье: Свойство letter-spacing

Обсуждений еще не было, будьте первым... ↓↓↓

Отправить сообщение

Популярное:
Организация как механизм и форма жизни коллектива: Организация не сможет достичь поставленных целей без соответствующей внутренней...
Как выбрать специалиста по управлению гостиницей: Понятно, что управление гостиницей невозможно без специальных знаний. Соответственно, важна квалификация...



©2015-2020 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (462)

Почему 1285321 студент выбрали МегаОбучалку...

Система поиска информации

Мобильная версия сайта

Удобная навигация

Нет шокирующей рекламы



(0.008 сек.)