Классы и идентификаторы.

2019-10-11

232

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 Следующая ⇒

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

Предположим, вам необходимо задать свойства для тэга P, но каждый абзац должен быть отличным от предыдущего. Достигнуть данной цели известными нам способами невозможно, вот тут-то и приходят на помощь классы. Давайте посмотрим на очередной листинг:

<HTML>

<HEAD>

<!--

p.one {background-color: #D6D2DD; font-style: regular; font-size: 15;}

p.two {background-color: #D1DED7; font-style: bold; font-size: 20;}

p.three {background-color: #DDD8D2; font-style: italic; font-size: 25;}

-->

</STYLE>

</HEAD>

<BODY>

<P class="one">CSS имеет очень простой синтаксис, но открывает нам новые грани, недоступные при стандартной HTML-верстке.

<P class="two">Зная CSS, вы сможете создать по-настоящему красивый сайт, надеюсь, что моя книга поможет вам в обучении.

<P class="three"> Не забывайте просматривать исходники других сайтов, разбор которых поможет вам приобрести необходимый опыт.

</BODY>

</HTML>

Прежде чем детально разобрать изложенное, посмотрите, что из этого получилось:

Как видите, в данном случае описываемый элемент разделен на 2 сектора: тэг.имя-класса. У каждого класса есть свои свойства, которые вы задаете в фигурных скобках. Для того чтобы CSS вступили в действие, необходимо вызвать класс в тэге, который вы описывали. Делается это с помощью атрибута class=”имя-класса”. Это очень удобный способ, который применяется почти повсеместно.

Иногда возникают случаи, когда требуется создать класс, не привязанный к определенному тэгу. В предыдущем случае имя .one принадлежало элементу P, но такая ситуация не всегда приемлема. В этих случаях определение тэга нужно опустить. Взгляните на пример:

<STYLE>

.one {color: green;}

.two {color: blue;}

</STYLE>

После объявления стилей, их необходимо вызвать. В нашем случае, классы становятся очень гибкими, и вызывать их можно в любом тэге с атрибутом class=”…”. К примеру:

<HTML>

<HEAD>

.one {color: green;}

.two {color: blue;}

</STYLE>

</HEAD>

<BODY>

<Div class="one">Текст, написанный зеленым цветом.

<P class="two">Абзац, написанный синим цветом.

</BODY>

</HTML>

А вот и скрин того, что у меня получилось:

На этом с классами покончено (в хорошем смысле слова). Плавно переходим к идентификаторам…

Объект нашего разбора применяется не столь часто, как изученные выше классы, однако пренебрегать им не стоит. Любой идентификатор начинается с префикса #id. Ну, например:

---

#idFontArial {font-family: Arial;}

---

Затем вызываем идентификатор:

---

<P id=idFontArial>Шрифт с гарнитурой Arial</P>

---

Теперь можно сделать глубокий выдох – мы изучили все способы определения стилей!

Свободное позиционирование.

В данном уроке мы поговорим о позиционировании элементов. Если в HTML Web-мастер не имеет возможности тыкать текст, куда угодно (без применения таблиц), то CSS решает проблему и делает это весьма эффективно. Существует специальный параметр, имя которому Position. Он может принимать 2 значения, а именно: absolute и relative. В первом случае мы задаем абсолютное положение элемента, а во втором – его место относительно начального. Кто-то из вас уже орет: «ты ваще сам понял, что сказал?», но другими словами выразиться непросто. Предлагаю вам рассмотреть один достаточно примитивный листинг и поэкспериментировать с ним:

<HTML>

<HEAD>

<Style>

.1 {position: absolute; top: 37; left:17;}

.2 {position: absolute; top: 40; left:20; color: red;}

</Style>

</HEAD>

<BODY>

<H1 class="1">Это заглавие.</H1>

<H1 class="2">Это заглавие.</H1>

</BODY>

</HTML>

И результат:

Работа со шрифтами.

CSS предоставляет нам широкие возможности для работы со шрифтами. Первое свойство, с которым вам предстоит познакомиться – это font-size. Вы могли заметить, что данный параметр нам уже встречался, однако мы не имели чести познакомиться со значениями оного. Давайте исправим обидный ляпсус:

Large – крупный.

X-large – крупнее.

XX-large – самый крупный.

Medium – средний.

Small – маленький.

X-small – меньше.

XX-small – самый маленький.

Кроме того, никто не мешает нам применять относительные значения. Всего их два: larger и smaller. Они изменяют размер текста относительно базового.

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

---

{font-family: шрифт1, шрифт2, …}

---

Следующий параметр текущего урока:

---

{font-style: стиль;}

---

Ну а значения его таковы:

Italic – курсив.

Normal – обычный.

Ну и последний параметр:

---

{font-weight: стиль;}

---

И значения:

Bold – жирный.

Bolder – жирнее.

Lighter – тоньше.

2019-10-11

232

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 123 Следующая ⇒

Обсуждение в статье: Классы и идентификаторы.

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