«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Как Вы уже наверное поняли, синтаксис CSS отличен от формы записи тегов HTML и имеет следующую структуру:

Селектор {свойство: значение; свойство: значение;...}

Селектор это своего рода метка, по которой браузер понимает к каким элементам страницы и где применить стиль, описанный в фигурных скобках - в так называемом блоке объявления стилей.

В блоке объявления стилей указаны свойства CSS и их значения. Значение следует за свойством после двоеточия, свойства указаны через точку с запятой. После значения последнего свойства точку с запятой можно опустить.

Для некоторых свойств CSS можно задать несколько значений, которые должны быть указаны через пробел.



Синтаксис CSS

Фрагмент кода из файла со стилями

H2 {border:#339999 solid 2px; color:#CC0000; padding:5px}

Результат

Для заголовка второго уровня установлен стиль границы: цвет, толщина и тип линии, а также задан цвет текста и поля величиной 5 пикселей.

Селектор по элементу

В данном примере, в качестве селектора был указан заголовок второго уровня - тег <h2>. Затем в фигурных скобках - в блоке объявления стилей, было описано стилевое оформление, которое будет характерно для всех заголовков второго уровня текущего документа, если стилевое оформление задается II способом; или указанное оформление будет применено ко всем тегам <h2>, встречающихся на тех страницах, для которых стилевое оформление задано III способом.

Но и в том и в другом случае, для любого заголовка второго уровня оформление может быть изменено и задано индивидуально I способом.

Мы сейчас работали с селектором, в качестве которого используется имя какого-либо тега HTML. И именно к указанному тегу (или тегам) применяется описанный стиль. Такой селектор получил название Селектор по элементу.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Селектор по элементу </title>

<style type="text/css">
p {font-size:large; font-style:italic; color:#339999;}
h1 {
color:#CC3300; text-transform:capitalize}
</style>

</head>
<body>

<p>
Все просто. </p>
<p>
Задаем стиль для абзацев. </p>
<h1>
И для заголовков </h1>
<h1>
Первого уровня данного документа! </h1>

</body>
</html>

Результат

Все просто.

Задаем стиль для абзацев.

И для заголовков

Первого уровня данного документа!

Использование селектора по элементу, бесспорно, имеет свои плюсы - отпадает необходимость каждый раз задавать стиль одним и тем же тегам текущего документа; но есть и минусы - что если необходимо задать иное оформление, отличное от установленного? Например, нужно выделить один абзац из множества - задать для него свой стиль.

Такая возможность есть и для этого существует селектор по классу.

Селектор по классу

Селектор по классу характерен тем, что для идентификации стиля используется имя.

Использование селектора по классу добавляет в синтаксис небольшие изменения. Если в случае с селектором по элементу указывается имя какого-либо тега HTML, к которому будет применено оформление, то здесь сначала ставится точка, а затем подходящее, выбранное Вами имя.

.имя {свойство: значение; свойство: значение;...}

Затем с помощью параметра class ссылаются на указанное имя, задавая данное стилевое оформление тегам HTML.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Селектор по классу </title>

<style type="text/css">
p {border:#3366CC solid 2px; color:#00FF99; padding:5px}
.end {
border:#00CC99 solid 1px; color:#FF3300; font-size:22px; padding:5px}
</style>

</head>
<body>

<p>
Все абзацы оформлены одинаково </p>
<p>
Все абзацы оформлены одинаково </p>
<p>
Все абзацы оформлены одинаково </p>
<p class=
"end"> Кроме одного </p>
<h2>
Заголовок второго уровня не оформлен. </h2>
<h2 class=
"end"> Этот заголовок оформлен в том же стиле, что и последний абзац. </h2>

</body>
</html>

Результат

Все абзацы оформлены одинаково

Все абзацы оформлены одинаково

Все абзацы оформлены одинаково

Кроме одного

Заголовок второго уровня не оформлен.

Этот заголовок оформлен в том же стиле, что и последний абзац.

В этом примере, с помощью селектора по элементу, задан стиль для абзацев - в качестве селектора указан тег <p>. Этот стиль автоматически применяется ко всем абзацам текущего документа.

Затем создали новый стиль и присвоили ему имя .end (не забывайте о точке перед именем) - идентифицировали его. И применили этот стиль с помощью параметра class к последнему абзацу, оформив его индивидуально.

Этот же стиль можно применить к любым элементам, на которые он может повлиять. Что мы и сделали, применив его к одному из заголовков второго уровня.

Еще о селекторе по классу

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

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Селектор по классу </title>

<style type="text/css">
p {border:#3366CC solid 2px; color:#00FF99; padding:5px}
p.end {
border:#00CC99 solid 1px; color:#FF3300; font-size:22px; padding:5px}
</style>

</head>
<body>

<p>
Все абзацы оформлены одинаково </p>
<p>
Все абзацы оформлены одинаково </p>
<p>
Все абзацы оформлены одинаково </p>
<p class=
"end"> Кроме одного </p>
<h2>
Заголовок второго уровня не оформлен. </h2>
<h2 class=
"end"> Стиль применим только к абзацам! </h2>

</body>
</html>

Результат

Все абзацы оформлены одинаково

Все абзацы оформлены одинаково

Все абзацы оформлены одинаково

Кроме одного

Заголовок второго уровня не оформлен.

Стиль применим только к абзацам!

Если сравнивать приведенный пример с предыдущим, то теперь стиль .end, который ранее можно было применять к любым элементам, применим только к абзацам (и только к тем, для которых делается ссылка на стиль с указанием его имени при помощи параметра class).

Селектор по id

Селектор по id - это разновидность селектора по классу, с той лишь разницей, что здесь вместо точки перед именем используется символ #. А для ссылки на идентификатор (имя стиля) вместо параметра class применяется параметр id.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title> Селектор по id </title>

<style type="text/css">
#end{color:#FF3333; font-size:24px; background-color:#CCCCCC; text-align:center}
</style>

</head>
<body>

<p>
Все абзацы в этом документе одинаковые </p>
<p>
Все абзацы в этом документе одинаковые </p>
<p>
Все абзацы в этом документе одинаковые </p>
<p id=
"end"> Кроме одного </p>
<table width="700" border="1">
<tr>
<td>
Этот же стиль можно применить, например, к... </td>
<td id=
"end"> Ячейке таблицы </td>
</tr>
</table>


</body>
</html>

Результат

Изначально селектор по id использовался, если возникала необходимость выделить один единственный элемент в документе, отличный от всех остальных, то есть мог быть только один тег с данным идентификатором.

Но, как правило, браузеры это правило игнорируют и позволяют применять стиль, идентифицированный с помощью селектора по id к нескольким элементам. Поэтому по сути селектор по id ничем не отличается от селектора по классу.

Контекстный селектор

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

Использование контекстного селектора вносит в синтаксис небольшие изменения.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title> Контекстный селектор </title>

<style type="text/css">
p strong, .context{color:teal; font-size:18px; font-style:italic;}
</style>

</head>
<body>

<p>
Внутри абзацев для слов, выделенных <strong> жирным шрифтом </strong>, </p>
<p>
зададим дополнительное оформление, используя <strong> контекстный селектор! </strong> </p>
<p>
Это же стилевое оформление применимо к элементам внутри абзацев, </p>
<p>
для которых <span class="context"> параметру class присвоено имя context! </span> </p>

</body>
</html>

Результат

Внутри абзацев для слов, выделенных жирным шрифтом ,

зададим дополнительное оформление, используя контекстный селектор!

Это же стилевое оформление применимо к элементам внутри абзацев,

для которых параметру class присвоено имя context!

Как Вы уже, я надеюсь, поняли - в приведенном примере описанный стиль применим к тегам <strong> и к элементам, для которых установлен класс с именем context (class="context"), при условии что они являются вложенными: расположены внутри абзаца (тега <p>).

Во всех вышеприведенных примерах применялись глобальные стили, т.е. стили были описаны в голове документа при помощи тега <style>.

Но точно такое же оформление могло быть указано в файле с расширением .css и применено к элементам тех страниц, с которыми была бы установлена связь при помощи тега <link>. Таким образом такой же синтаксис CSS селекторов используется при работе с внешними стилями.

Итак, теперь Вы немного знакомы с технологией CSS: Вы знаете что такое стили и селектор CSS; познакомились со способами применения стилей и видами селектора. Далее переходим к первым шагам в изучении свойств CSS.

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта