Основы CSS. Селекторы, свойства и значения

В видеоуроке освещены ответы на следующие вопросы:

  • Как привязать файл со стилями к html-документу?
  • Что такое селектор, свойство и значение в CSS?
  • Как задавать тегам классы и идентификаторы?
  • Как прописать комментарии в CSS?
  • Полезные советы при работе со стилями и другое.

Скачать материалы:
Скачать 3-ий видеоурок по CSS Размер: 20.53 MB, скачали: 576 раз.
Скачать исходники к 3 видеоуроку по CSS Размер: 28.37 kB, скачали: 613 раз.
Как запустить видеоурок:

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

Как я и обещал в прошлом уроке по CSS, в этом видеоуроке мы приступаем к практике. Теория — это конечно хорошо, но без практики далеко не уехать. Практика нужна, практика обязательна, и именно ей мы сейчас займемся.

Переходим на рабочий стол. Еще в прошлом видеоуроке я создал папку Site. Если вы ее не создали, то сделайте это сейчас. Заходим в эту папку. В ней у вас должна быть папка img и файл index.html. Скачать их вы сможете с нашего сайта во втором видеоуроке по CSS в дополнительных материалах.

Основы CSS

Итак, приступим. Для начала перейдем в редактор notepad. Создаем новый файл. Создать его можно, нажав на кнопку «новый». Теперь сохраним его. Для этого заходим Файл-> Сохранить как, выбираем нашу папку Site и сохраняем в нее файл под именем style.css. Теперь перейдем в папку, чтобы проверить. Документ style.css у нас имеется в наличии, но пока он нам не нужен. Сначала нужно разобраться с документом index.html. Для этого выбираем Edit with Notepad++, находим теги <head></head> и вставляем между ними тег <link> (в переводе с английского — ссылка, связка).

 <head>
 <title>Главная страница</title>
 <link >
 </head>
 

Связка HTML+CSS

Тег мы ввели, осталось разобраться с тем, что мы хотим связать с нашим документом. А связать мы хотим именно тот css-файл, который создали — style.css. Прописываем два атрибута: rel и type. Что же они задают и какие параметры имеют? Оба они задают тип. Атрибут rel задает тип отношения этого документа к нашему css-документу и принимает только два значения: stylesheet и alternate – второй нам не понадобится, применять мы будем только первый. Второй атрибут type задает, так называемые «майнтайпы», про которые можно вообще забыть, потому что вводить нам нужно всегда text/css. По сути, про оба этих атрибута можно забыть и просто копировать их при создании новых документов.

 <head>
 <title>Главная страница</title>
 <link rel="stylesheet" type="text/css">
 </head>
 

Есть и третий атрибут — href. С ним вы уже знакомы из курса по HTML. Он задает путь к нашему css-файлу. Так как наш css-файл лежит в корневой папке сайта, то прописываем просто название — style.css. Жмем «Сохранить».

 <head>
 <title>Главная страница</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 

Что мы сейчас сделали? Мы связали файл index.html с файлом style.css. Таким образом, все стили, которые мы создадим в файле style.css будут применяться в документе index.html.

Селекторы, свойства, значения

Перейдем в style.css. Сейчас мы начнем вводить стили, и вы увидите всю мощь этой технологии. Но сначала я расскажу о том, как их вводить. Давайте пропишем три строчки, а потом разберемся с ними по порядку.

 body { background: #ccffff;}
 .purple { color: #660066;}
 #bg_yellow { background: #ffff66;}
 

Написали. Наверняка вы заметили сходства. То, что подчеркнуто на видео красным: body, .purple, #bg_yellow – называются селекторами (от английского «select» – выделение). Подчеркнутое зеленым: background, color – называются свойствами. Например, свойство color задает цвет текста. Подчеркнутое синим:  #ccffff, #660066, #ffff66 – называются значениями. В HTML мы их приписывали к атрибутам, то есть у нас шел атрибут, например rel, а потом — значение, например stylesheet. У CSS именно такая форма записи.

Что такое класс и идентификатор в CSS?

Что же такое селектор? В качестве селектора могут применяться как теги, так и, непривычные для новичков названия — классы и идентификаторы. Классы и идентификаторы мы будем прописывать чуть позже, и вы с ними разберетесь.

После селектора следуют свойства. Это может быть как background, которое означает «фон», так и color – «цвет» и другие. Далее прописывается значение, которое придается свойству.

Практика CSS

Давайте просто сохраним наш документ, нажав на кнопочку «Сохранить» и проверим его в браузере — что у нас изменилось. Просто проверим. Как мы видим, изменился фон. Больше никаких изменений не произошло.

Что же мы сделали? Почему цвет фона поменялся? Как мы видим, мы присвоили тегу <body> background (фон) цветом ccffff. Таким образом, файл index.html занес тегу <body> свойство background со значением голубого цвета. Цвет мы могли ввести и так:

 body { background-color: #ccffff;}
 

Это бы означало только цвет фона. А вводя просто background, мы можем задать и путь к изображению, которое станет изображением фона, и в случае его отсутствия на сервере, будет применяться цвет, который написан у нас сейчас. Давайте пропишем изображение. В кавычках указывается путь к изображению. Так как изображение находится в папке img, мы прописываем путь через эту папку.

 body { background: url('img/info-line.png') #ccffff;}
 

Сохраняем. Переходим в браузер и обновляем страницу. Мы видим, что фоном нашей страницы стало изображение info- line.png.

Фон я выбрал, конечно, не самый лучший, и он смотрится у нас криво, поэтому давайте его заменим. Я специально прикладываю к этому видеоуроку изображение bg.jpg. Нам его нужно скопировать в папку Site. Открыв папку Site, скопировать в папку img. Теперь заходим в наш код css и прописываем путь к этому изображению.

 body { background: url('img/bg.jpg') #ccffff;}
 

Сохраняем. Проверим в браузере. Ну вот, так симпатичнее.

На свойстве background в этом видеоуроке я останавливаться не буду, так как он посвящен не свойствам, а основам их написания. Свойство background мы разберем в следующем видеоуроке.

На странице мы видим, как прописался наш фон. Больше ничего нового. Почему так? Класс мы задали, идентификатор — тоже, но класс и идентификатор нам нужно указать в файле index.html, а точнее, нам нужно присвоить их какому-нибудь тегу. Например, класс purple (в переводе с английского — «фиолетовый») задает цвет текста. Наверняка нам нужно присвоить его какому-нибудь абзацу. Как присвоить класс? Очень просто: прописываем class и в кавычках указываем этот класс, но без точки.

 <p>Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как создать свой сайт в этом
 

Это все. Давайте сохраним наш документ и перейдем в браузер. Обновим страницу и ищем абзац. Как мы видим, искомый абзац стал фиолетовым. Давайте зададим еще одному абзацу такой же цвет. Задаем класс purple, например, списку. Класс необязательно должен быть задан абзацу.

 <ol class="purple" type="I">
 <li>Вы со мной согласны.
 <li>Вы со мной не согласны.
 <li>Вы в замешательстве.
 </ol>
 

Сохраняем. Обновляем. Видим, что цвет списка стал фиолетовым.

Перейдем в style.css и разберемся с идентификатором. Обычно идентификаторы используются реже, чем классы, но без идентификаторов иногда не обойтись. Давайте пропишем идентификатор, например, к тегу <small>. Как прописывается идентификатор? Пишется id="значение". Нам также не нужно ставить здесь решетку. Ее мы ставим только в файле стилей.

 <br><small id="bg_yellow">Дааааа... Шли недели...</small></div>
 

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

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

 <br><small id="bg_yellow">Дааааа... Шли недели... </small></div>
 

Сохраним. Обновим документ. У нас ничего не изменилось. Не изменилось, потому что я неправильно прописал пробел. Пропишем пробел спецсимволами. Я про них рассказывал в курсе по HTML. Все они есть у нас на сайте.

 <br><small id="bg_yellow">Дааааа... Шли недели...&nbsp;</small></div>
 

Обновим и видим, как у нас пробел присвоил себе фон. Если поставить несколько таких пробелов, то все они присвоят этот фон, так как находятся в идентификаторе bg_yellow.

 <br><small id="bg_yellow">Дааааа... Шли недели...&nbsp;&nbsp;&nbsp;</small></div>
 

Применять это вы можете где угодно.
Идентификатор мы задали. Теперь перейдем в нашу таблицу стилей. Давайте попробуем нашему идентификатору добавить свойство color.

 #bg_yellow { background: #ffff66; color: #ffff00;}
 

Сохраним и пропишем в тег <small> наш класс purple.

 <br><small id="bg_yellow">Дааааа... Шли недели...&nbsp;&nbsp;&nbsp;</small></div>
 

Сохраним и проверим. Видим, что текст стал отображаться желтым. Я не совсем правильно подобрал цвет. Давайте поменяем его.

 #bg_yellow { background: #ffff66; color: #00ff00;}
 

Сохраняем. Проверим. Зеленый цвет на желтом фоне. Вопрос: почему не отображается фиолетовый цвет? Мы ведь задали класс тегу <small>. Все очень просто. Дело в том, что идентификаторы имеют более высокий приоритет, чем классы. Поэтому если свойство идентификатора совпадает со свойством класса, и они оба применяются к одному и тому же тегу, то за главного принимается свойство идентификатора.

Давайте проверим, что будет, если мы применим два класса к одному и тому же тегу с одинаковыми свойствами. Прописываем новый класс red. Задаем ему свойство color и указываем цвет. Некоторым известным цветам можно указывать цвет их названием, например, для красного это red.

 .red { color: red; }
 

Сохраняем. Переходим на вторую вкладку — index.html. Нам нужно добавить класс. Один класс мы уже добавили. Как добавить второй? Очень просто: жмем пробел после слова purple и вводим имя второго класса — red.

 <p>Я решил создать сайт про то, чему сам долго и упорно трудился, тому, как создать свой сайт в этом
 

Жмем «Сохранить» и обновляем нашу страницу. Смотрим, что получилось в нашем абзаце. Он приобрел красный цвет. Почему? Ведь у нас заданы как класс red, так и класс purple. Переходим в код style.css. Как мы видим, класс red задан ниже класса purple. В этом и есть вся причина. Попробуем их поменять.

 .red { color: red; }
 .purple { color: #660066;}
 

Сохраним. Обновим страницу. Как мы видим, цвет стал фиолетовым.

Перейдем к комментариям. Для чего они нужны? Нужны они только вам и только для удобства. Во всех своих исходниках, которые я буду прилагать к урокам, я буду приводить описание содержания селектора. Комментарии открываются символом «/*», а закрываются — «*/».

 /*
 Вы просматриваете бесплатный видеокурс по CSS от Олега Зубцова (http://info-line.net).
 */

Так же в плане удобства советую вам прописывать свойства так:

 #bg_yellow {
 background: #ffff66;
 color: #00ff00;
 }
 

Когда очень много классов, идентификаторов и в них очень много свойств, то такая запись значительно облегчает их поиск. Даже не то, что поиск, скорее облегчает их видимость. Все кажется проще и понятнее.

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

Я сохраняю наш файл и на этом заканчиваю третий видеоурок по курсу CSS. В следующем видеоуроке мы разберем два свойства: background и color, после чего вы получите свое первое домашнее задание. Приглашаю вас узнать, как задать цвет и фон страницы с помощью CSS.

Подпишись на info-line:

Получать новые уроки на e-mail:

18 комментариев на “Основы CSS. Селекторы, свойства и значения”

  1. Надежда 14 декабря 2011 в 13:55 #

    Олег, не могли бы Вы пояснить нюанс:

    1) в чем разница между классами и идентификаторами?

    2) для каких тегов используются классы, для каких идентификаторы (если есть разница?)

    • Олег Зубцов 14 декабря 2011 в 14:20 #

      1. Классы могут использоваться сколько угодно раз, а идентификатор — только один раз.

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

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

      Следуйте данному принципу:

      1. Если вы уверены, что селектор будет использоваться в html-коде только один раз, задавайте #идентификатор

      2. Если не уверены или знаете, что селектор будет использоваться в html-коде несколько раз, задавайте .класс

      В 10 и 11 видеоуроках мы будем писать страницы с использованием идентификаторов.

  2. Рахим 8 февраля 2012 в 8:02 #

    а вот что надо учить чтобб стать веб дизайном я уже выучил html css и ещё что надо учить скажи пожалуйста?

    • Олег Зубцов 8 февраля 2012 в 11:48 #

      Photoshop — это основа для веб-дизайнера. Ну а потом учиться верстать дизайн из фотошопа.

      Веб-дизайнер — это тот, кто рисует дизайн и продумывает структура сайта. То есть нужно знать только Photoshop (или другой серьезный графический редактор) и иметь фантазию, полет мыслей. Но многие дизайнеры, чтобы улучшить свое положение на рынке труда, изучают верстку. Если же ты научился работать с графическими редакторами и можешь нарисовать дизайн сайта, ты изучил уже как сверстать этот сайт, то можешь начинать изучать программирование, копирайтинг, SEO... Нет предела совершенству 😉

  3. Рахим 8 февраля 2012 в 12:33 #

    спасибо значит мне надо изучить фотошоп и ксс хтмл и php и всё я буду веб дизайнером мне теперь надо учить php и photoshop я правильно понял вас?

    • Олег Зубцов 8 февраля 2012 в 12:56 #

      Изучите Photoshop. Создайте 1-2 дизайна в photoshop'e. Потом сверстайте их. И после этого уже, приступайте к изучению PHP (пи-эйч-пи) или JavaScript (джява-скрипт).

      Почему говорю нарисовать и сверстать? — потому что это будет реальный очень ценный опыт. Мне знакомы люди, которые изучили десятки языков, но не в одном так сказать — не шарят, да и половину языков забыли уже 🙂 Чтобы такого не происходило — подкрепляйте свои знания практикой.

  4. Рахим 8 февраля 2012 в 14:02 #

    вот я тоже забываю мне тож теперь надо закреплять я щас выучу ксс мне немного осталось потом фотошоп потом попробую 2 3 дизайна зделать красивых и потом только php учить

  5. Дмитрий 3 июня 2012 в 15:33 #

    Олег, я не могу разобраться со спецсимволами, как ставить пробел? в таблице не нашел((

    • Олег Зубцов 23 октября 2012 в 3:31 #

      В разделе «практика CSS» данного видеоурока, я его уже использовал.

      Вот как он прописывается спецсимволами:

      &nbsp;

  6. Дмитрий 3 июня 2012 в 16:10 #

    Олег я написал так: class="purple red" а текст все равно фиолетовый, поменял местами red и purple, все равно фиолетовый @= вооюще убрал все, оставил только class="" и опять текст фиолетовый 😀

    • Олег Зубцов 23 октября 2012 в 3:34 #

      А в файле .css написали их в каком порядке?

      .red {}
      .purple {}
      

      Или наоборот:

      .purple {}
      .red {}
      

  7. Константин 13 декабря 2012 в 19:56 #

    Здравствуйте Олег, скажите, из-за чего может не работать CSS. У меня что с ним, что без него — одинаково. Ничего не могу понять. Проверил сто раз, прописано все правильно.

  8. Константин 13 декабря 2012 в 22:14 #

    Извините, Олег. Это я невнимательный. Никак не мог заметить недостающую букву «n» в свойстве «backgroud».

    • Олег Зубцов 14 декабря 2012 в 16:17 #

      Бывает 🙂 В notepad есть специальная подсветка, поэтому очень удобно находить ошибки, достаточно обратить внимание на цвета 🙂

  9. Константин 14 декабря 2012 в 20:13 #

    Спасибо большое за совет, Олег, я это понимаю, только я пользуюсь блокнотом пока. Недавно только купил свой первый компьютер, т. е. ноутбук, еще не сильно разбираюсь. Когда скачал notepad не смог его разархивировать — нет архиватора, пробовал скачать — ничего не получилось, устал и решил остановиться пока на блокноте. У меня просто windows7 starter (зато лицензионная :)).

Оставить ответ