03. Подключение CSS и 3 базовых селектора.
Отметим, что можно не только подключать один файл *.css к разным файлам *.html, справедливо также обратное утверждение. К одному определенному файлу *.html можно подключить несколько файлов *.css примерно следующим образом:
В общем случае каждый стиль состоит из двух элементов: селектор и пара свойство:значение
Селектор - в переводе с английского означает "выбранный". В роли "выбранного" или "селектора" может выступать любой элемент веб страницы: список, абзац, блок и т.д.
Селектор - это тэг или группа тэгов, которым будут назначены некие свойства и которые будут изменяться в соответствии с этими назначенными свойствами.
Пара свойство:значение - это правило отображения и размещения для выбранного тэга или группы тэгов.
Рассмотрим три основных вида подключения Селектора.
Селектор Тэгов
Этот селектор позволяет отобрать со всей веб страницы тэги одного плана. Например, нам захотелось, чтобы весь контент в тэгах <p> (т.е. во всех абзацах) стал серого цвета (например, #909090). Код данного подключения будет таким:
Селектор ID Часто бывает необходимо изменить цвет (или другие свойства) не всех однотипных элементов, а только одного конкретного элемента. В таких случаях элементу необходимо добавить тэг id, который должен иметь уникальное значение среди других элементов на странице.
В данном случае содержание элемента у которого тэг id="header1" примет красный цвет (точнее, цвет #C32017).
Селектор Классов
Этот тип селекторов является, пожалуй, самым популярным. Для нужных элементов (можно нескольким, можно одному) создаются специальные атрибуты class, которым присваивается имя класса. А свойства данного класса определяются в файле *.css. Имя класса может быть любым, лишь бы оно состояло из латинских букв и цифр, начинаться должно только с буквы.
Наши тестовые учебные примеры после данного урока:
css_003_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_003_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание, что изученные на данном уроке селекторы являются наиболее часто употребимыми. Существуют и другие типы селекторов, но они используются гораздо реже.
Поскольку с цветом бы будем работать много, в виде домашнего задания для этого урока я предлагаю вам сходить на сайт с адресом:
и скачать там бесплатную маленькую и очень удобную программу под названием ColorMania. С помощью данной программы можно легко получить код цвета на любом участке экрана (нажав на пипетку и не отпуская мышь указать пипеткой на нужную точку экрана).
Кстати, указывать цвета в CSS можно не только с помощью кодов, но и при помощи названий цветов (на английском языке), а также и другими более экзотическими способами. Но в целях повышения стандартизованности и улучшения взаимопонимания, давайте, договоримся всегда использовать только коды, как мы и делали в учебных примерах выше.
... <head> ... <link rel="stylesheet" href="style_001.css" type="text/css" /> <link rel="stylesheet" href="style_002.css" type="text/css" /> ... <link rel="stylesheet" href="style_999.css" type="text/css" /> ... </head> ...
Селектор {
свойство1:значение;
свойство2:значение;
...
свойствоN:значение;
}
свойство1:значение;
свойство2:значение;
...
свойствоN:значение;
}
Селектор - в переводе с английского означает "выбранный". В роли "выбранного" или "селектора" может выступать любой элемент веб страницы: список, абзац, блок и т.д.
Селектор - это тэг или группа тэгов, которым будут назначены некие свойства и которые будут изменяться в соответствии с этими назначенными свойствами.
Пара свойство:значение - это правило отображения и размещения для выбранного тэга или группы тэгов.
Рассмотрим три основных вида подключения Селектора.
Селектор Тэгов
Этот селектор позволяет отобрать со всей веб страницы тэги одного плана. Например, нам захотелось, чтобы весь контент в тэгах <p> (т.е. во всех абзацах) стал серого цвета (например, #909090). Код данного подключения будет таким:
p {
color: #909090;
}
color: #909090;
}
Селектор ID Часто бывает необходимо изменить цвет (или другие свойства) не всех однотипных элементов, а только одного конкретного элемента. В таких случаях элементу необходимо добавить тэг id, который должен иметь уникальное значение среди других элементов на странице.
#header1 {
color: #C32017;
}
color: #C32017;
}
В данном случае содержание элемента у которого тэг id="header1" примет красный цвет (точнее, цвет #C32017).
Селектор Классов
Этот тип селекторов является, пожалуй, самым популярным. Для нужных элементов (можно нескольким, можно одному) создаются специальные атрибуты class, которым присваивается имя класса. А свойства данного класса определяются в файле *.css. Имя класса может быть любым, лишь бы оно состояло из латинских букв и цифр, начинаться должно только с буквы.
.new1 {
color: #6BC5E3;
}
color: #6BC5E3;
}
Наши тестовые учебные примеры после данного урока:
css_003_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_003_001.zip ← скачайте пример, чтобы установить на свой сайт...
Обратите внимание, что изученные на данном уроке селекторы являются наиболее часто употребимыми. Существуют и другие типы селекторов, но они используются гораздо реже.
Поскольку с цветом бы будем работать много, в виде домашнего задания для этого урока я предлагаю вам сходить на сайт с адресом:
и скачать там бесплатную маленькую и очень удобную программу под названием ColorMania. С помощью данной программы можно легко получить код цвета на любом участке экрана (нажав на пипетку и не отпуская мышь указать пипеткой на нужную точку экрана).
Кстати, указывать цвета в CSS можно не только с помощью кодов, но и при помощи названий цветов (на английском языке), а также и другими более экзотическими способами. Но в целях повышения стандартизованности и улучшения взаимопонимания, давайте, договоримся всегда использовать только коды, как мы и делали в учебных примерах выше.
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
