2020-04-12
94
1. Стиль автора документа обладает самым высоким приоритетом. Этот стиль задает сам разработчик сайта.
2. Стиль, заданный пользователем в настройках браузера. Стиль CSS может задать конечный пользователь этого сайта, если подключит свой собственный файл стилей. Этот источник является менее приоритетным.
3. Стиль самого браузера, т.е. тот стиль, который определен в настройках самого браузера. Это источник обладает самым низким приоритетом.
Приоритеты стилей автора
Рассмотрим приоритеты стилей автора проекта. Самым важным свойством является то, у которого после значения свойства установлена директива!important.
| h1 { color: black!important; } h1 { color: green; } |
Добавим свойству первого параграфа из предыдущего примера директиву!important, теперь в этом случае у всех параграфов цвет текста будет черным, несмотря на то, что это объявление свойства стоит первым. Если эту директиву применит пользователь в своём собственном файле стилей, то тогда этот стиль становиться важнее стиля автора. Это нужно для того, чтобы люди с ограниченными возможностями смогли устанавливать свои стили, которые будут важнее всех.
|
|
|
Вторым по приоритетности является стиль, объявленный в атрибуте style любого тега.
| html | css | |
| <h1 style=”color: red;”> Заголовок первого уровня </h1> | h1 { } | color: green; |
В данном примере цвет текста заголовка первого уровня будет красным, так как этот стиль переопределен в атрибуте style.
Следующий уровень, это уровень приоритета селекторов. Существует такое понятие, как специфичность. Смысл его в том, что браузер будет начислять определенное количество баллов за разные типы селекторов, а также их количество. И больший приоритет получают те стили, которые набирают большее количество баллов.
● Селекторы тегов и псевдоэлементы — по 1 баллу (0, 0, 0, 1);
● Селекторы атрибутов, классы и псевдоклассы — по 10 баллов (0, 0, 1, 0);
● Идентификаторы — по 100 баллов (0, 1, 0, 0);
● Атрибут style – 1000 баллов (1, 0, 0, 0).
Пример начисления баллов за специфичность:
● p { } 1 балл (селектор тегов);
● p:firstletter { } 2 балла (1 селектор тегов и 1 псевдоэлемент);
● input[type=“submit"] { } 11 баллов (по 1 селектору тегов и атрибутов);
● div.head.new { } 21 балл (2 класса и 1 селектор тегов);
● #header a:hover { } 111 баллов (идентификатор, селектор тегов и псевдокласс).
Следующие по приоритетности стили указанны в порядке убывания:
● Стили, заданные в разделе <head>;
● Стили, подключаемы из внешних файлах;
● Наследуемые стили от предков.
Практика
Создание стилей для меню сайта
|
|
|
| <! Меню> <ul class=”menu”> <li>Главная</li> <li><a href="catalog.html">Каталог</a></li> <li><a href="contacts.html">Контакты</a></li> </ul> | body { backgroundcolor: #f8f8f8; } .menu li { fontstyle: italic; fontsize: 20px; liststyletype: none; } .menu li a { color: #8B00FF; } |
Задание
В этом задании вы будете дорабатывать задание второго урока, придавая ему стили CSS.
1. Создать файл style.css, в котором будут храниться все стили вашей работы. Подключить этот файл ко всем страницам.
2. Установить фон на страницах.
3. Меню сайта:
a. Для всех ссылок меню задать определённый стиль. (Цвет текста, размер шрифта, начертание шрифта и т.д.)
b. Убрать маркеры списка.
i. *установите в качестве маркеров произвольные изображения
4. Странице “Контакты”:
a. Задать значения ширины и высоты для полей ввода.
b. Задать стили для текста, внутри полей input. (Цвет текста, размер шрифта и т.д.).
c. Следите за тем, чтобы на странице всё выглядело гармонично, не выбирайте слишком резких цветов.
5. *Для изображений, размещенных на странице задать рамку произвольным цветом.
6. *Приветствуются самостоятельные дополнения ваших работ в пределах пройденной темы.
Дополнительные материалы
1. Статья про добавление стилей на страницу
2. Интересная статься про селекторы
3. 30 CSSселекторов, о которых полезно помнить
4. Вложенность селекторов
5. Группировка и вложенность селекторов
Используемая литература
Для подготовки данного методического пособия были использованы следующие ресурсы:
1. http://htmlbook.ru/samcss/sposobydobavleniyastileynastranitsu
2. http://htmlbook.ru/samcss/dochernieselektory
3. https://learn.javascript.ru/cssselectors
4. https://learn.javascript.ru/cssunits
5. http://technologyweb.org/%D0%B3%D1%80%D1%83%D0%BF%D0%BF%D0%B8%D1%80%D0%BE
%D0%B2%D0%BA%D0%B0%D0%B8%D0%B2%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D
0%BD%D0%BE%D1%81%D1%82%D1%8C/
