Испытание: взломанный котопрофайл [18/18]

Maximillian · 29.Май.2017 17:33:32

Решил по своему, но не уверен в корректности с точки зрения правильности написания кода. Подскажите, уважаемые, мой вариант на сколько актуален/верен?

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e !important;
border-radius: 4px;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

.fact {
padding: 10px;
background: white !important;
}

.fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d !important;
}

.fact .value {
margin-left: 140px;
color: #34495e !important;
}

.fact:nth-child(odd) {
background: #ecf0f1 !important;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.albums {
margin-top: 5px;
}

.albums img:last-child {
margin-right: 0;
}

.albums img, #miska {
float: left;
margin-right: 5px;
}

.button {
display: block;
height: 30px !important;
margin: 5px 0 !important;
line-height: 30px;
text-align: center !important;
color: #ffffff;
border-radius: 4px;
}

.stroke {
background: #3498db !important;
}

.feed {
background: #2ecc71 !important;
}

.startle {
background: #e74c3c !important;
}

Писал не наугад, а обдуманно. Но смущает то что у некоторых всего 2-3 !important’а.
Буду благодарен за конструктивную критику.

Ineska · 29.Май.2017 18:01:10

Только два !important действительно необходимо в этом задании.

Killua · 09.Июнь.2017 12:12:55

Правильно ли я понял, что <style> в HTML документе имеет высший приоритет, но всё, что внутри <style></style> по значению одинаково с кодом в CSS? Пример по кнопкам под фото кота (Погладить, Покормить, Напугать):

Кусок из <style> в <head> HTML документа

#info-title,
.profile .button {
background: #4dfe15;
}

И кусок из CSS документа:

.photo .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

Так как у нас идёт конструкция .profile .button в <style> и в .photo .button CSS документе, и у них одинаковый приоритет (два класса), то запись в CSS идёт “ниже” и, следовательно, имеет больший приоритет. Поэтому свойства из неё и используются (вид кнопок, расположение, цвет текста и так далее)

Ineska · 09.Июнь.2017 15:55:13

Атрибут style в html-коде имеет высший приоритет. В остальном вы всё правильно поняли.

MariaGlueck · 19.Июнь.2017 18:35:51

Пожалуйста, помогите с кодом! Просмотрела все коды выше, но если начинаю ставить !Important, то все только хуже становится… Все как в образце, только надпись альбомы не становится, куда нужно…Где я ошиблась?
Вот мой код:

html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile {
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info{
float: left;
width: 368px;
margin-left: 10px;
}

.info #info-title,
.info h2 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px; !Important
}

.fact div {
padding: 10px;
background: white;
}

.fact:nth-child(odd) div {
background: #ecf0f1;
}

.fact::after {
content: “”;
display: table;
clear: both;
}

.info .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.info .fact .value {
margin-left: 140px;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img,
.albums {
float: left;
margin-right: 5px;
}
.albums #miska,
.albums img:last-child {
margin-right: 0;
}

body .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.button.stroke {
background: #3498db;
}

.button.feed {
background: #2ecc71;
}

.button.startle {
background: #e74c3c;
}

Ineska · 19.Июнь.2017 18:40:53

!important пишется до точки с запятой, а не после.
Почитайте эту тему еще: Подскажите 18/18

MariaGlueck · 19.Июнь.2017 18:56:03

надо быть внимательнее… спасибо огромное, Ineska!!!

Grace · 20.Июнь.2017 14:53:01

Я так понимаю, что то что определяется в <style> </style> мы в оконцовке переопределяем (те п.3. порядок исходного кода или п.2 добавляем специфичности)

а вот атрибут style="..." имеет а=1 и требует !important

Maksim_Kozlov · 22.Июнь.2017 14:32:50

Вот мой код - дает 100%, но не уверен, что правильно.
html,
body {
margin: 0;
padding: 0;
}

body {
width: 550px;
height: 300px;
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}

.profile{
padding: 5px 10px;
}

.profile img {
display: block;
padding: 10px;
border: 2px solid #34495e;
border-radius: 8px;
}

.profile .photo {
float: left;
width: 152px;
}

.profile .info {
float: left;
width: 368px;
margin-left: 10px;
}

#info-title, .info h2 {
margin: 0 !important;
padding: 10px !important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

.info div.fact {
padding: 10px;
background: white;
}

.profile .fact:nth-child(odd) {
background: #ecf0f1;
}

.profile .fact::after {
content: “”;
display: table;
clear: both;
}

.profile .fact .title {
float: left;
width: 120px;
text-align: right;
color: #7f8c8d;
}

.info .fact .value {
margin-left: 140px !important;
color: #34495e;
}

.albums {
margin-top: 5px;
}

.albums img , #miska {
float: left;
margin-right: 5px !important;
}

.albums img:last-child {
margin-right: 0 !important;
}

.profile .button {
display: block;
height: 30px;
margin: 5px 0;
line-height: 30px;
text-align: center;
color: #ffffff;
border-radius: 4px;
}

.photo .stroke {
background: #3498db;
}

.photo .feed {
background: #2ecc71;
}

.photo .startle {
background: #e74c3c;
}

Ineska · 22.Июнь.2017 19:08:26

Только два !important должно остаться.

vic4884 · 23.Июнь.2017 13:18:45

Пожалуйста, кто научился хорошо считать, взгляните на подсчет, все ли верно? Это подсчет данных в блоке html <style></style> Заранее спасибо!
1,2,3 - это я для себя порядок сделал, считал по формуле

vic4884 · 23.Июнь.2017 14:13:09

Прошу взглянуть на код, по системе проходит, везде !important тоже проходит, но меня не устраивал такой вариант, решил без них попробовать, ниже мой код[details=Summary] html,
body {
margin: 0;
padding: 0;
}

body {
    width: 550px;
    height: 300px;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif;
}

.profile {
    padding: 5px 10px;
}

.profile img {
    display: block;
    padding: 10px;
    border: 2px solid #34495e;
    border-radius: 8px;
}

.profile .photo {
    float: left;
    width: 152px;
}

.profile .info {
    float: left;
    width: 368px;
    margin-left: 10px;
}

.info h2, #info-title{
    margin: 0 !important;
    padding: 10px !important;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    background: #34495e;
    border-radius: 4px;
}

.profile div .fact {
    padding: 10px;
    background: white;
}

.profile div .fact:nth-child(odd) {
    background: #ecf0f1;
}

.fact::after {
    content: "";
    display: table;
    clear: both;
}

.info .fact .title {
    float: left;
    width: 120px;
    text-align: right;
    color: #7f8c8d;
}

.info .fact .value {
    margin-left: 140px;
    color: #34495e;
}

.profile .info .albums {
    margin-top: 5px;
}

.info .albums img, #miska {
    float: left;
    margin-right: 5px;
}

.info .albums img:last-child {
    margin-right: 0;
}

.profile .button {
    display: block;
    height: 30px;
    margin: 5px 0;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
}

.profile .stroke {
    background: #3498db;
}

.profile .feed {
    background: #2ecc71;
}

.profile .startle {
    background: #e74c3c;
}

Ineska · 23.Июнь.2017 14:19:14

Расскажите, почему нужно дважды использовать !important в этом задании?

vic4884 · 23.Июнь.2017 14:23:34

я не нашел способа , как увеличить вес значению из-за заданных параметров в атирибутах через style <h2 **style="margin-top:-50px;padding:0**;">Альбомы</h2>. Поэтому воспользовался !important. Может быть мое упущение, и я чего то пропустил.

Ineska · 23.Июнь.2017 14:26:15

Вы всё правильно сделали. Просто хотелось проверить, насколько вы понимаете то, что делаете.

vic4884 · 23.Июнь.2017 14:27:12

это нормально =) иногда делаю методом тыка, если не понимаю, как ни странно потом доходит и делаю нормально

vic4884 · 23.Июнь.2017 15:03:05

а то что выше таблицы, в подсчетах ошибок нет?

Ineska · 23.Июнь.2017 15:15:13

Ошибок нет.

vic4884 · 23.Июнь.2017 18:15:25

Спасибо, из-за своей не внимательности приходится просить перепроверять)

Astralysterious · 01.Июль.2017 17:12:13

Здравствуйте. Зачем нужно это правило?

.fact::after {
    content: "";
    display: table;
    clear: both;
}

И без него все ок. Удалял - все равно 100% и верстка не меняется.

CSS

html, body {
    margin: 0;
    padding: 0;
}

body {
    width: 550px;
    height: 300px;
    font-size: 12px;
    font-family: Tahoma, Arial, sans-serif;
}

.profile {
    padding: 5px 10px;
}

.profile img {
    display: block;
    padding: 10px;
    border: 2px solid #34495e;
    border-radius: 8px;
}

.profile .photo {
    float: left;
    width: 152px;
}

.profile .button {
    display: block;
    height: 30px;
    margin: 5px 0;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
}

.profile .stroke {
    background: #3498db;
}

.profile .feed {
    background: #2ecc71;
}

.profile .startle {
    background: #e74c3c;
}

.info {
    float: left;
    width: 368px;
    margin-left: 10px;
}

.info h2 {
    margin: 0 !important;
    padding: 10px !important;
    font-weight: normal;
    font-size: 12px;
    color: #ffffff;
    background: #34495e;
    border-radius: 4px;
}

#info-title {
    background: #34495e;
}

.info div.fact {
    padding: 10px;
    background: white;
}

div.fact:nth-child(odd) {
    background: #ecf0f1;
}

div.fact .title {
    float: left;
    width: 120px;
    text-align: right;
    color: #7f8c8d;
}

div.fact .value {
    margin-left: 140px;
    color: #34495e;
}

.fact::after {
    content: "";
    display: table;
    clear: both;
}

.albums {
    margin-top: 5px;
}

.albums img {
    float: left;
    margin-right: 5px;
}

#miska {
    margin-right: 5px;
}

.albums img:last-child {
    margin-right: 0;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Испытание: взломанный котопрофайл</title>
        <meta charset="utf-8">
        <style>
        /* Будешь знать, как сувать лапы, куда не надо,
           шерстяной неудачник! */

            #info-title,
            .profile .button {
                background: #4dfe15;
            }

            .profile div.fact {
                background: #ff00dc;
            }

            .profile .fact div {
                color: #02f801;
            }

            .photo span {
                margin: 0;
                height: 20px;
                text-align: right;
            }

            #miska {
                margin-right: 50px;
            }
        </style>
    </head>
    <body>
        <div class="profile">
            <div class="photo">
                <img src="/assets/course66/cat_walk.png" alt="">
                <span class="button stroke">Погладить</span>
                <span class="button feed">Накормить</span>
                <span class="button startle">Напугать</span>
            </div>
            <div class="info">
                <h2 id="info-title">Общая информация</h2>
                <div class="fact">
                    <div class="title">Имя</div>
                    <div class="value">Феликс</div>
                </div>
                <div class="fact">
                    <div class="title">Позывные</div>
                    <div class="value">Кто в тапки нассал?</div>
                </div>
                <div class="fact">
                    <div class="title">Вероисповедание</div>
                    <div class="value">Верю в холодильник</div>
                </div>
                <div class="fact">
                    <div class="title">Политические</div>
                    <div class="value">Продам все за еду</div>
                </div>
                <h2 style="margin-top:-50px;padding:0;">Альбомы</h2>
                <div class="albums">
                    <img src="/assets/course66/cat_drink.png" alt="">
                    <img id="miska" src="/assets/course66/cat_hungry.png" alt="">
                    <img src="/assets/course66/cat_sing.png" alt="">
                    <img src="/assets/course66/cat_pirate.png" alt="">
                </div>
            </div>
        </div>
    </body>
</html>