При проверке на вкладке “Результат” картинка не совпадает с тем, что есть в верхнем окне. Соответственно, “Различия” показывают отклонения от “Образца”.
На верхней картинке видны зеленые радио- и чек-боксы. И так должно быть в конечном результате.
На верхней картинке видны зеленые радио- и чек-боксы. И так должно быть в конечном результате.
Ваш код текстом, пожалуйста.
Инешка, теперь уже только вечером. Уехала от компа…
Включила комп… а там - в окне результатов зеленые радио- и чек-боксы. И прогресс задания уже не 97, а 99%. То есть, проблема решилась перезагрузкой, то ли компа, то ли браузера… Вот:
Но текст в лейблах зеленым становиться не хочет. И тут уже у меня где-то влезла ошибка. Посмотрите код, пожалуйста…
Отправьте код текстом, пожалуйста.
1 лайк
body {
width: 550px;
}
form {
width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px #cccccc;
}
fieldset {
padding: 10px;
border: 1px solid #34495e;
border-radius: 5px;
}
fieldset legend {
color: #34495e;
}
.half-width {
display: inline-block;
width: 50%;
margin-right: -4px;
}
label {
display: block;
margin-bottom: 5px;
margin-top: 10px;
}
input[type=“radio”],
input[type=“checkbox”] {
display: none;
}
input[type=“radio”]:enabled + label,
input[type=“checkbox”]:enabled + label {
vertical-align: middle;
color: #7f8c8d;
}
input[type=“checkbox”] + label::before,
input[type=“radio”] + label::before {
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;
box-shadow: 0 0 0 3px #bdc3c7;
}
input[type=“radio”] + label::before {
border-radius: 50%;
}
input:checked + label::before {
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}
input:checked + label {
color: #1abc9c;
}
input[type=“checkbox”]:disabled + label::before,
input[type=“radio”]:disabled + label::before{
box-shadow: 0 0 0 3px #ecf0f1;
}
input[type=“checkbox”]:disabled + label,
input[type=“radio”]:disabled + label {
color: #ecf0f1;
}
input[type=“text”] {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000;
border: 2px solid #bdc3c7;
border-radius: 5px;
vertical-align: middle;
}
input[type=“text”]:required {
border-color: #e74c3c;
}
input[type=“text”]:disabled {
color: #bdc3c7;
background: #f5f5f5;
border-color: #ecf0f1;
}
input[type=“text”]:invalid {
color: #c0392b;
background: #f2a097;
border-color: #e74c3c;
}
input[type="checkbox"]:checked + label, input[type="radio"]:checked + label {
color: #1abc9c;
}
Селектор длиннее нужен в этом правиле, иначе конфликтуют стили с правилом:
1 лайк
Спасибо большое! Теперь получилось 100%!!!
Я сначала так и писала (длинно и подробно), и текст в лейблах был зелененький, потом решила оптимизировать, где можно, то есть сократить лишние повторы. Но не догадалась, что это так отразится на результате. Получается, что в принципе, в коде не было ошибки? А чтобы, как Вы написали, не конфликтовали стили с правилами, нужен опыт. Пока мне еще такие моменты не видны… Но ведь Ваши курсы меня научат?)))))
Курсы HTMLАкадемии научат. Изучите DevTools в браузере, вкладка “Инспектор” поможет вам быстро разбираться в стилях и их наследовании.
Спасибо.
Скажите, а как я могу воспользоваться этим инструментом DevTools, выполняя задания? Даже хотя бы в этом конкретном случае. Файл HTML закрыт, но я его могу скопировать и запустить в браузере, файл CSS, который получаю, выполняя задание, тоже есть. А тот файл, что подключается в начале разметки (/assets/course58/exam.css), мне не виден.
Попробуйте сочетание клавиш Shift+Ctrl+C.
Еще раз спасибо! Действительно, в Инспекторе сразу видно, что цвет текста в label переопределился правилом input:enabled…
Почему так происходит, я пока не очень понимаю. Из-за веса селекторов? В таких сложных конструкциях посчитать вес не так уж и легко. Поэтому буду пользоваться Инспектором, чтобы меньше ошибаться.
1 лайк
input+label {
vertical-align: middle;
color: #7f8c8d;
}
вместо
input[type="radio"]:enabled + label,
input[type="checkbox"]:enabled + label {
vertical-align: middle;
color: #7f8c8d;
}А вобще сидение в отладчике говорит о плохой архитектуре кода. ЧТобы не мучиться и не пытаться разобраться в специфичности селекторов, лучше для каждого модуля организовывать свое простнаство имен и далее присваивать имена классам в этом пространстве. ТОгда все будет однозначно, понятно будет что где искать и кто за что отвечает.
Следует добиваться минимального количества цепочек селекторов, а так же никогда не изпользовать селекторы типов и идентификаторов. ИНаче все это потом аукнется на гибкости.
конечно в этом испытании мы не имеем доступа к разметке, для тренировки в целом полезно поработать без пронстранств имен.
ПОэтому то что я написал выше это грубая ошибка в свете гибкости и масштабируемости кода, но удобный костыль для выполнения этого испытания.
как бы сделал я
https://gist.github.com/muzimka/96f62c124ee1ec688098ad0fe0bb6e99
https://gist.github.com/muzimka/6b6a7474c836a1ba3a12e81560c32026
теперь у каждого элемента есть свое имя и модуль cn. надо будет создать второую форму? создаем те же самые элементы но уже для модуля например cf . и так далее. Когда надо б удет изменить стили у какого -то одного модуля, с легкостью переподключаем стили для этого модуля. Поскольку у каждого модуля свое пространство имен, подключение других стилей не затронет стили в других модулях у аналогичных элементов. Можно также каждый модуль хранить в отедльном файле и структуре папок отртажающих общую схему сайта. Эта общая схема сайта реализованная в папках поможет человеку со стороны быстро понять структуру сайта, а вам освежить в памяти.
Вставлю свои “5 копеек”. Использование @import считается плохой практикой:
<style>
@import url("chb.css") all;
</style>
И подобное именование классов тоже:
class="cn-Wrapper-halfWidth"
class=“cn-Checkbox”
на счет импорта - я его всталяю для краткости, мне он нравится так как его быстро писать, акцент я не на нем в данном примере хотел сделать. А вобще я придерживаюсь такого правила, что надо писать код как хочется, а дальше если возникают непрохождения по каким то показателям, например быстродействия, уже запускать профилировщик, искать узкие места и заниматься оптимизацией этих узких мест. Иначе оптимизации не будет конца, всему должны быть свои пределы, которые определяеются требованиями заказчика и его тестами(если .они есть)
На счет стиля кода Академии, у каждого свой стиль. Мне ближе подход Endure CSS. Для CSS НЕТ единых соглашений по поводу его написаний. Кому-то BEM нравится, кому то объектно ориентированный подход к CSS, есть куча других подходов. Течений много. как всегда правда лежит на пересечении всех их вместе взятых.
Будем рассматривать code conventions HTML Академии как корпоративные правила ну скажем, работодателя, которые сформировались исходя из предпочтений начальства и специфики заказов поступающих фирме. По крайней мере пока о них w3c не напишет в свое спецификации дальше коропоративных они свет не увидят. Например правило о том что Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). это можно лишь объяснить предпочтением начальства. Я же считаю что надо использовать и дефис и нижнее подчеркивание, чтобы подчеркивать тот или иной смысл. Это облегачает чтение, ЕСЛИ придерживаться системы. Но в любом случае согласен с тем, что в каждой среде должны быть свои правила и своя система, иначе все разбредутся, кто куда.
link не намного длиннее.
На счет остального, каждый по-своему прав.
вот сейчас задумался чем мне на самом деле импорт нравится. Вот что обнаружил:
- нет лишних type="" который уже убрали из html5 и нет лишнего rel=“stylesheet”
- любовь к знаку @ он мне напоминает аннотации Джавы, а само слово import мне понятней как и слово include
и т.п. слова, чем слово link - не надо вспоминать что там href или src все просто как в бекграунд имейдж - url и собственно сам url.
поэтому для меня директива импорт является в наивысшей степени самодокументруемой и простой. хотя возможно по длине она и такая же )
Если писать с включенным расширением Emmet, то достаточно просто помнить, что подключаешь:
link:css
Остальные аргументы - это дело вкуса)
я пока ручками все пишу. без всяких препроцессоров в учебных целях. ) Хочу восполнить пробелы во фронт-енде. Даже WebStorm не использую и другие замечательные продукты Intelij Idea. А так по большому счету хорошая среда разработки конечно сама вспомнит многие вещи и заполнит и даже без препроцессоров.
но щас для меня существует только Notepad++