Испытание: классики

Не у всех элементов li должен быть padding.

4 лайка

По-моему, я нашла правильный ответ!

body {
width: 500px;
padding: 0;
font-family: “Arial”, sans-serif;
font-size: 16px;
line-height: 26px;
color: #000000;
}

li {
margin: 10px;
}

.uppercase {
text-transform: uppercase;
}

.large-font {
font-size: 20px;
}

.bordered {
border: 2px solid #000000;
padding: 5px;
}

.border-rounded {
border-radius: 10px;
}

.white-colored {
color: white;
}

.dark-background {
background-color: #4470c4;
}

13 лайков

Спасибо, сам бы я не догадался! Ведь еще не обьяснили, что есть padding и margin и куда их сувать)

Разрешите глупый вопрос, почему нельзя писать код так:
09

чтобы занимал меньше места и визуально легче воспринимался?
Спасибо

Очень важно, чтобы люди хотя бы старались писать код в примерно одинаковом виде.
Чаще всего разработчики и верстальщики работают в команде. И могут возникнуть ситуации, в которых необходимо передать свой проект, доработать чужой, обратиться за помощью и так далее. В чужом коде и так непросто разобраться сходу, а тут ещё и непривычное форматирование. Это добавляет количество времени, требующееся на вникание в код, и уменьшает желание в нём разбираться :slight_smile:

1 лайк

“Общепринятый формат”,
спасибо за ответ

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

  • , чтобы не путаться, а оптом вытаскивал оттуда значения для классов.

    body {
    width: 500px;
    padding: 0;

    font-family: “Arial”, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    }

    .large-font {
    font-size: 20px;
    margin: 10px;
    }
    .bordered {border-radius: 1px;
    border: 2px solid #000000;
    }
    .dark-background {
    padding: 5px;
    margin: 10px;
    background-color: #4470c4;}

    .white-colored {
    color: white;
    }
    .uppercase {
    text-transform: uppercase;
    margin: 10px;
    }
    .border-rounded {
    padding: 5px;
    margin: 10px;
    border-radius: 10px;
    border: 2px solid #000000;
    }

    /{
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    padding: 5px;
    margin: 10px;
    border: 2px solid #000000;
    border-radius: 10px;
    background-color: #4470c4;
    }
    /

    Результат 99% я доволен ))

  • примерно час ушел на решение! но таки получилось
    body {width: 500px;
    padding: 0;
    font-family: “Arial”, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    }
    li {margin: 10px;
    }
    .large-font {font-size: 20px;}
    .dark-background {background-color: #4470c4; padding: 5px;
    margin: 10px;}
    .white-colored {color: white; font-size: 16px;}
    .bordered {border: 2px solid #000000;font-size: 16px; }
    .uppercase {text-transform: uppercase; }
    .border-rounded {border-radius: 10px; padding: 5px;
    margin: 10px;}

    100% вариант)

    body {
    width: 500px;
    padding: 0;

    font-family: “Arial”, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    }

    .large-font {
    font-size: 20px;
    margin: 10px;
    }

    .dark-background {
    color: white;
    border: 2px solid #000000;
    background-color: #4470c4;
    padding: 5px;
    }

    .uppercase {
    text-transform: uppercase;
    margin: 10px;
    }

    .bordered {
    border: 2px solid #000000;
    padding: 5px;
    margin: 10px;
    }

    .border-rounded {
    border-radius: 10px;
    }

    100% верно :blush: (пришлось, конечно! попсиховать, прежде, чем я смогла понять, что к чему)
    Проблема с отступами решается в селекторе .bordered .
    Свойство padding: 5px; добавленное в этот селектор .bordered, увеличивает отступ от текста внутри до границ рамок. Таким образом, отступы встают на место.

    li {
    margin: 10px;
    }

    .large-font {
    font-size: 20px;
    }

    .uppercase {
    text-transform: uppercase;
    }

    .bordered {
    border: 2px solid #000000;
    padding: 5px;
    }

    .white-colored {
    color: white;
    }

    .dark-background {
    background-color: #4470c4;
    }

    .border-rounded {
    border-radius: 10px;
    }

    3 лайка

    Моё решение-100%

    li{
    margin:10px;
    }

    .dark-background{
    background-color: #4470c4;
    }

    .white-colored{
    color:white;
    list-style:none;
    }

    .bordered{
    border:2px solid #000000;
    padding:5px;
    margin:10px;
    }

    .uppercase{
    text-transform: uppercase;
    font-size:16px;
    }

    .border-rounded{
    border-radius: 10px;

    }
    
    .large-font{
    

    font-size: 20px;
    }

    Я сделал так, закомментировал правило li, чтоб было видно все свойства и в новые правила для классов раскидывал свойства, можно сказать медотом тыка)))

    1 лайк

    Добрый день, прошел испытание только после того, как заглянул сюда - в форум. Оказалось, что margin надо использовать для всех элементов li, а padding только для bordered.
    Такого не должно быть, считаю это издевательством. Перед испытанием надо хотя бы оставить подсказку насчет этих тегов.

    4 лайка

    Суть задания именно в том, что нужно не “дописывать” свои правила, а раскидать готовые по нужным классам.

    Сводка

    .large-font {
    font-size: 20px;
    }

    .dark-background {
    background-color: #4470c4;
    }

    .white-colored {
    color: white;
    }

    .bordered {
    border: 2px solid #000000;
    padding: 5px;
    }

    .border-rounded {
    border-radius: 10px;
    }

    .uppercase {
    text-transform: uppercase;
    }

    li {
    margin: 10px;
    }

    Не знаю как, но получилось на 100%. Направление мысли подсмотрел на форуме частично. Мб кому поможет =)

    body {
    width: 500px;
    padding: 0;

    font-family: “Arial”, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    }

    li {
    margin: 10px;
    }
    .large-font {
    font-size: 20px;
    }

    .dark-background {
    background-color: #4470c4;
    padding: 5px;
    margin: 10px;
    }

    .bordered {
    border: 2px solid #000000;
    }
    .border-rounded {
    border: 2px solid #000000;
    border-radius: 10px;
    padding: 5px;
    }
    .white-colored {
    color: white;
    }
    .uppercase {
    text-transform: uppercase;
    }

    данный код прошел проверку на 100%.

    body {
    width: 500px;
    padding: 0;
    font-family: “Arial”, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000000;

    }
    li {
    margin: 10px;
    }

    .uppercase {
    text-transform: uppercase;

    }
    .border-rounded {
    border: 2px solid #000000;
    border-radius: 10px;
    padding: 5px;

    }

    .dark-background {
    color: white;
    border: 2px solid #000000;
    background-color: #4470c4;
    padding: 5px;
    }

    .large-font {
    font-size: 20px;
    }

    100% получилось
    body {
    width: 500px;
    padding: 0;
    font-family: “Arial”, sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
    }

    li {
    color: black;
    margin: 10px;
    }

    .large-font {
    color : black;
    font-size: 20px;
    }

    .uppercase {
    text-transform: uppercase;
    }

    .dark-background {
    background-color: #4470c4;
    }

    .white-colored {
    color: white;
    }

    .bordered {
    border: 2px solid #000000;
    padding: 5px;
    }

    .border-rounded {
    border-radius: 10px;

    }

    Если изменить .
    bordered {border-radius: 1px;
    border: 2px solid #000000;
    на
    .bordered {border-radius: 0px;
    border: 2px solid #000000;
    то будет 100%

    Просто безумный вариант решения. Не думаю что так вообще стоит делать. XD

    100%

    body {
    width: 500px;
    padding: 0;
    font-family: “Arial”, sans-serif;
    color: #000000;
    font-size: 16px;
    line-height: 26px;
    }

    li {
    margin: 10px;
    }

    .large-font {
    font-size: 20px;
    }

    .dark-background {
    background-color: #4470c4;
    }

    .white-colored {
    color: white;
    }

    .bordered {
    padding: 5px;
    margin: 10px;
    border: 2px solid #000000;
    }

    .border-rounded {
    border-radius: 10px;
    }

    .uppercase {
    text-transform: uppercase;
    }

    li {margin: 10px;}
    .large-font {font-size: 20px;}
    .dark-background {background-color: #4470c4;}
    .white-colored {color: white;}
    .uppercase {text-transform: uppercase;}
    .border-rounded {border-radius: 10px;}
    .bordered {
      border: 2px solid #000000;
      padding: 5px;  
    }
    

    100%