-
-
Save nikolai-shabalin/ffc8cc6caefe1bfde199104167632f63 to your computer and use it in GitHub Desktop.
Мне понятно, почему селектор p.title специфичнее селектора .title, ведь параграфов с классом title меньше или равно, чем всех элементов с классом title. Но мне не понятно, почему селектор .title специфичнее селектора p? Ведь как раз наоборот, класс title может быть указан не только у всех параграфов, но и у всех остальных элементов.
@Stanislav-Kazankov
"Чем меньше тегов может найти селектор, тем он более специфичен" - это достаточно абстрактная подсказка, которая помогает на простых примерах.
В целом, специфичность работает по строгим правилам - селектор по классу всегда специфичнее селектора по тегу, а чтобы понять почему, нужно понять как CSS рассчитывает "вес" селектора.
Для этого можно пройти курс или в блоге Yoksel
Зачем задавать правило html { box-sizing: border-box; } (из критерия Д25)? Ведь значение "content-box"
"Основывается на стандартах CSS" (http://htmlbook.ru/css/box-sizing)! Да и это привычнее, считать, что width и height - это ширина и высота контентной области элемента. Получается, мы отступаем от стандартов?
Как устанавливать шрифты в формате woff, куда именно они устанавливаются - в ОС или в браузер?
@Stanislav-Kazankov
Зачем задавать правило html { box-sizing: border-box; } (из критерия Д25)? Ведь значение "content-box"
"Основывается на стандартах CSS" (http://htmlbook.ru/css/box-sizing
)! Да и это привычнее, считать, что width и height - это ширина и высота контентной области элемента. Получается, мы отступаем от стандартов?
Стандарты развиваются, но значение по умолчанию нужно оставить для обратной совместимости со "старыми" браузерами.
content-box подразумевает, что если вы хотите блок с полями по 25px и шириной 100px, то из 100 нужно вычесть 75, чтобы размер действительно был 100px. Сам механизм content-box подразумевает постоянный ручной подсчёт размеров блоков.
border-box - уменьшает количество таких подсчётов, то есть блок шириной 100px и полями по 25px не нуждается в ручном пересчёте, ведь он сразу будет 100px.
Как устанавливать шрифты в формате woff, куда именно они устанавливаются - в ОС или в браузер?
Шрифты с форматом woff и woff2 не установить в ОС. Для этого вам нужно установить шрифт в формате ttf. Есть в каждом проекте Академии. Они все расположены в архиве (.zip) в папке fonts/.
Установка .ttf происходит в ОС. В windows C:\Windows\Fonts, но можно найти в поиске fonts settings.
В MacOS в программе "Шрифты". Finder -> Установить шрифты
- Подскажите, как правильнее задать имя, например, для класса, именующего input range для задания цены в каталоге "Техномарта"? "price-range" или просто "price" или просто "range"?
- Как правильнее задать значение атрибута name этого input range'a? Есть мнение, что лучше задать значение атрибута name= просто "range" для того, чтобы не пришлось исправлять имя при использовании этого же input range'а в других проектах, где он будет указывать уже не цену, а какую-нибудь другую характеристику. Насколько такой подход верен?
- Если значение атрибута name для input range будет совпадать с именем класса, именующего этот range это хорошо?
Если селекторы по тегу запрещены, то разрешены ли такие селекторы: .some-class p, .some-class img, .some-class li? Или же параграфу и изображению и элементу списка сначала нужно задать классы, а потом уже обращаться к ним через селекторы типа: .some-class .class4p, .some-class .class4img, .some-class .class4li?
Как бы Вы порекомендовали уменьшить вложенность в следующем случае: на главной "Техномарта" есть section с заголовком "ПОПУЛЯРНЫЕ ТОВАРЫ:", внутри этого section есть список товаров ul, внутри ul, естественно - li, а внутри каждого элемента списка есть ссылка "Купить", обернутая в div вместе со ссылкой "В корзину" для упрощения совместной стилизации? Это при всем при том, что по идее, карточку товара хорошо бы завернуть в section, так как это отдельный смысловой блок? Итого: вложенность минимум 5, максимум 6. Как уменьшить ее до 2?
@Stanislav-Kazankov, вам не нужно уменьшать вложенность HTML до 2, только вложенность CSS-селекторов. А карточка товара — это самостоятельная единица контента, поэтому это <article>.
@Stanislav-Kazankov, вам не нужно уменьшать вложенность HTML до 2, только вложенность CSS-селекторов. А карточка товара — это самостоятельная единица контента, поэтому это
<article>.
Но ведь на карточке товара (в случае "Техномарта") указана цена, которая может не быть такой же в других интернет-магазинах. То есть, мне кажется, карточка товара логически привязана ценой именно к Техномарту, и является немножко зависимым блоком, и если просто взять и перенести ее на аналогичный интернет магазин - то информация о цене уже не будет соответствовать действительности.
@Stanislav-Kazankov, это не логическая секция (часть) чего-то, это самостоятельная единица контента, то есть <article>.
Как будет вычисляться максимальная ширина изображения в img { maxwidth: 100%} при html { box-sizing: border-box; } - будет браться 100% от ширины контентной области родителя или от ширины контентной области родителя вместе с паддингами и границей?
А можно дописывать стили для нормализации не в свой html-файл, а прямо в Normalize.css? Или это нарушает авторские права автора этого Normalize.css?
@Stanislav-Kazankov
А можно дописывать стили для нормализации не в свой html-файл, а прямо в Normalize.css? Или это нарушает авторские права автора этого Normalize.css?
Можно, но не нужно. Если появится новая версия этой библиотеки, то захочется просто изменить файл normalize.css на новый и всё. В вашем случае может, что-то сломаться. Поэтому есть строгое правило не изменять исходный код внешних библиотек.
Мне не совсем понятно, если я подключил WOFF-шрифт в проекте, нужно ли, чтобы на стороне пользователя он тоже был установлен? Или файлы шрифтов передаются по http вместе с разметкой? Да, и кстати, css тоже передается по http? И что означает статистика использования шрифтов на Dan's tools? Она показывает у скольки процентов пользователей установлен конкретный шрифт? Какая статистика имеется в виду в лекции, когда лектор говорит, что нужно открыть статистику нашего пользователя и посмотреть, если 100% использует Виндоус, то... - имеется в виду статистика, которую мы узнаем из посещений нашего сайта или все та же статистика на Dan's tools? Что значит фраза "... бывают такие продукты, которые написаны исключительно для Виндоуса..." - имеются в виду сайты разработчиков программных продуктов, например microsoft.com?
@Stanislav-Kazankov
Мне не совсем понятно, если я подключил WOFF-шрифт в проекте, нужно ли, чтобы на стороне пользователя он тоже был установлен? Или файлы шрифтов передаются по http вместе с разметкой? Да, и кстати, css тоже передается по http?
Как и в случае с картинками, а точнее тегом <img>, атрибут src указывает путь до ресурса. В случае с шрифтом, мы в директиве @font-face тоже указываем src с путями до шрифтовых файлов.
Веб-шрифты никуда устанавливать не нужно. Они просто закачиваются на машину вашего пользователя и всё. И уже браузер начинает отрисовку шрифта.
Если описать простую схему, то
- Браузер видит
srcв@font-face - Принимает решение скачивать шрифт или нет
- Скачивает шрифт на pc пользователя
- Отрисовывает шрифт
И что означает статистика использования шрифтов на Dan's tools? Она показывает у скольки процентов пользователей установлен конкретный шрифт?
На первом этапе мы должны понять, а стандартный ли шрифт мы хотим подключить. Что значит стандартный? По умолчанию в каждой операционной системе установлены шрифты, иначе мы бы вообще текст не видели. Поэтому для шрифта "Dan's tools" мы узнаем на каких операционных системах он установлен по умолчанию.
Какая статистика имеется в виду в лекции, когда лектор говорит, что нужно открыть статистику нашего пользователя и посмотреть, если 100% использует Виндоус, то... - имеется в виду статистика, которую мы узнаем из посещений нашего сайта или все та же статистика на Dan's tools?
Имеется ввиду статистика посещения вашего сайта.
Что значит фраза "... бывают такие продукты, которые написаны исключительно для Виндоуса..." - имеются в виду сайты разработчиков программных продуктов, например microsoft.com?
Например, корпоративный заказчик (банк, завод, внутренний продукт кофешопов), которые сами регламентируют с каких браузеров будут заходить их пользователи. Они устанавливают своим работникам компьютеры и говорят, что можно пользоваться только Internet Explorer. В этом случае разработчик в праве не учитывать наличие стандартного шрифта в MacOS, так как 100% все будут в Windows.
-
Почему в лекции удалось изменить ссылок меню навигации только с третьего раза? Ведь Вы задали color: #ffffff; в:
1)body (цвет оставался синим);
2)main-navigation (цвет оставался синим);
3)site-navigation, user-navigation (только здесь цвет изменился на белый).
Досмотрел и понял почему с первых 2 раз не удалось изменить. Но теперь не понятно, зачем Вы для main-navigation color указывали, ведь непосредственно в main-navigation нет никакого текста? -
Почему в лекции Вы задали правила, используя вложенные селекторы по тегу, которых нет в разделе "Верно" критерия Д25:
.feature-item h3, .index-columns-h2, .news-item time? Последний селектор еще понятно, т. к., возможно, контент-менеджер будет редактировать дату новости, но вот первые два - непонятно. -
Почему в Лекции Вы использовали для стилизации button сокращенное наименование свойства: font: inherit;?
-
Зачем Вы задали для
<body>margin: 0;, если это правило уже есть в normalize.css?
Здравствуйте! Как понять в каждом случае активный пункт в меню, в сортировке, в хлебных крошках должен меняться при hover и focus, cursor pointer. Нужно ли активному пункту в сортировке href="#" ? Спасибо!
Разделение стилей по блокам
Такой подход будет сильно связывать вам руки. Как во время создания, так и во время поддержки сайта, вы чаще всего работаете над отдельными его блоками. Поэтому бегать по разным частям файла или отдельным файлам, занимаясь одним делом, будет крайне неудобно и неэффективно. Не размазывайте стили блока, держите их вместе.