Мини Курс Основы CSS Часть 2
Что такое CSS
Возможно, вы уже слышали о CSS, но не знаете, что это такое. В этом мини курсе вы узнаете, что такое CSS и что он может сделать для вас.
Вторая часть мини курса - Цель данного мини курса - дать Вам базовые знания CSS, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!.
Во вторую часть мини курса вошли уроки:
Урок 5: Ссылки в CSS
Урок 6: Идентификаторы(id) и классы(class) в CSS
Урок 5: Ссылки в CSS
Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти свойства можно определять по-разному, в зависимости от того, посетили уже ссылку, активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить интересные эффекты на ваш web-сайт. Для этого используются так называемые псевдоклассы.
Что такое псевдокласс?
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>. В CSS мы также можем использовать a в качестве селектора:
a {
color: blue;
}
color: blue;
}
Ссылка может иметь разные состояния. Например, её уже посетили/visited или ещё нет/link. Можно использовать псевдоклассы для установки разных стилей посещённых и непосещённых ссылок.
a:link {
color: blue;
}
a:visited {
color: red;
}
color: blue;
}
a:visited {
color: red;
}
Используйте a:link для непосещённых и a:visited для посещённых ссылок, соответственно. Активные ссылки(при наведении курсора на ссылку и нажатии левой кнопки мыши) имеют псевдокласс a:active, и a:hover, когда указатель - над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов.
Псевдокласс: link
Псевдокласс: link применяется к непосещенным ссылкам, т.е. ссылкам, на которые пользователь еще не нажимал. Браузер, причем, сохраняет историю посещений некоторое время, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход раньше.
В примере кода непосещённые ссылки - синие.
a:link {
color: #6699CC;
}
color: #6699CC;
}
Псевдокласс: visited
Псевдокласс: visited данный псевдокласс применяется к посещенным ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно В примере кода посещённые ссылки - фиолетовые.
a:visited {
color: #660099;
}
color: #660099;
}
Псевдокласс: active
Псевдокласс: active используется для активных ссылок, например, при наведении курсора на ссылку и нажатии левой кнопки мыши.
В примере активные ссылки имеют жёлтый фон.
a:active {
background-color: #FFFF00;
}
background-color: #FFFF00;
}
Псевдокласс: hover
Псевдокласс: hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
Это можно использовать для создания интересных эффектов. Например, если мы хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}
color: orange;
font-style: italic;
}
Пример 1: Эффект при нахождении указателя над ссылкой
Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса hover.
Пример 1a: Расстояние между буквами
Как вы помните из урока 4, расстояние между символами можно установить свойством letter-spacing. Это можно применить для ссылки:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Пример 1b: uppercase(все символы текста становятся прописными (верхний регистр)) и lowercase(все символы текста становятся строчными (нижний регистр))
В уроке 4 мы рассмотрели свойство text-transform, которое может переключать символы с верхнего на нижний регистр. Это также можно использовать для создания эффектов на ссылке:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Эти два примера показывают почти безграничные возможности комбинирования различных свойств. Вы можете создавать свои собственные эффекты - попробуйте!
Пример 2: Удаление подчёркивания ссылок
Обычный вопрос - как удалить подчёркивание ссылок?
Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.
Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из урока 4, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.
a {
text-decoration:none;
}
text-decoration:none;
}
Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.
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;
}
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;
}
Урок 6: Идентификаторы(id) и классы(class) в CSS
Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов.
Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.
Группирование элементов с помощью class
Предположим, у нас есть два списка сортов винограда - для белого и для красного вина. HTML-код может быть таким:
<p>Виноград для белого вина:</p>
<ul>
<li>Рислинг</li>
<li>Шардонэ</li>
<li>Пино Блан</li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li>Кабернэ Совиньон</li>
<li>Мерло</li>
<li>Пино Нуар</li>
</ul>
<ul>
<li>Рислинг</li>
<li>Шардонэ</li>
<li>Пино Блан</li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li>Кабернэ Совиньон</li>
<li>Мерло</li>
<li>Пино Нуар</li>
</ul>
В браузере будет выглядеть так:
Виноград для белого вина:
- Рислинг
- Шардонэ
- Пино Блан
Виноград для красного вина:
- Кабернэ Совиньон
- Мерло
- Пино Нуар
Далее, мы хотим, чтобы список белого вина был жёлтого цвета, а красного вина - красного, а остальные списки на этой же странице оставались синими.
Для достижения этой цели мы разделим списки на две категории с помощью присвоения класса каждому элементу списка атрибута class.
Попробуем установить классы для предыдущего примера:
<p>Виноград для белого вина:</p>
<ul>
<li class="whitewine">Рислинг</li>
<li class="whitewine">Шардонэ</li>
<li class="whitewine">Пино Блан</li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li class="redwine">Кабернэ Совиньон</li>
<li class="redwine">Мерло</li>
<li class="redwine">Пино Нуар</li>
</ul>
<ul>
<li class="whitewine">Рислинг</li>
<li class="whitewine">Шардонэ</li>
<li class="whitewine">Пино Блан</li>
</ul>
<p>Виноград для красного вина:</p>
<ul>
<li class="redwine">Кабернэ Совиньон</li>
<li class="redwine">Мерло</li>
<li class="redwine">Пино Нуар</li>
</ul>
Далее мы можем определить специальные свойства для элементов списков whitewine и redwine, соответственно.
li {
color: blue;
}
li.whitewine {
color: #FFBB00;
}
li.redwine {
color: #800000;
}
color: blue;
}
li.whitewine {
color: #FFBB00;
}
li.redwine {
color: #800000;
}
В браузере будет выглядеть так:
Виноград для белого вина:
- Рислинг
- Шардонэ
- Пино Блан
Виноград для красного вина:
- Кабернэ Совиньон
- Мерло
- Пино Нуар
Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.
Идентификация элемента с помощью id :
Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.
Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь посмотрим на пример использования id:
<h1>Глава 1</h1>
...
<h2>Глава 1.1</h2>
...
<h2>Глава 1.2</h2>
...
<h1>Глава 2</h1>
...
<h2>Глава 2.1</h2>
...
<h3>Глава 2.1.2</h3>
...
...
<h2>Глава 1.1</h2>
...
<h2>Глава 1.2</h2>
...
<h1>Глава 2</h1>
...
<h2>Глава 2.1</h2>
...
<h3>Глава 2.1.2</h3>
...
Это могут быть заголовки документа, разделённого на главы или параграфы. Можно назначить id каждой главе:
<h1 id="c1">Глава 1</h1>
...
<h2 id="c1-1">Глава 1.1</h2>
...
<h2 id="c1-2">Глава 1.2</h2>
...
<h1 id="c2">Глава 2</h1>
...
<h2 id="c2-1">Глава 2.1</h2>
...
<h3 id="c2-1-2">Глава 2.1.2</h3>
...
...
<h2 id="c1-1">Глава 1.1</h2>
...
<h2 id="c1-2">Глава 1.2</h2>
...
<h1 id="c2">Глава 2</h1>
...
<h2 id="c2-1">Глава 2.1</h2>
...
<h3 id="c2-1-2">Глава 2.1.2</h3>
...
Предположим, заголовок Глава 1.2, должен быть красным. Это делается в соответствии с CSS:
#c1-2 {
color: red;
}
color: red;
}
В браузере будет выглядеть так:
Глава 1
...
Глава 1.1
...
Глава 1.2
...
Глава 2
...
Глава 2.1
...
Глава 2.1.2
Как показано в предыдущем примере, вы можете определять свойства конкретного элемента с помощью #id в таблице стилей документа.
Статья в процессе написания, добавляются новые уроки.
Понравилась новость Мини Курс Основы CSS Часть 2 на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Мини Курс Основы CSS Часть 2 из категории Основы / CSS
- Основы / CSS ⋙ Текст с тенью css3 text-shadow примеры
- Меню навигации ⋙ CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Меню навигации ⋙ CSS3 увеличение картинки при наведении
- Меню навигации ⋙ Горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки
- Меню навигации ⋙ Простое готовое к использованию горизонтальное выпадающее CSS меню
- Основы / CSS ⋙ Мини Курс Основы CSS Часть 1
- Основы / HTML ⋙ Мини Курс Основы HTML Часть 2
- Основы / HTML ⋙ Мини Курс Основы HTML Часть 1
- Основы / XHTML ⋙ Краткий справочник XHTML тегов включая HTML5
- Основы / CSS ⋙ Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
