Испытание 18/18

Курсы §16. Наследование и каскадирование
1

Прошел испытание на 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;
}

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

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

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

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

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

.albums {
margin-top: 5px;
}

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

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

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

}

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

.startle {
background: #e74c3c !important;
}

2

Много !important оставили. Не хотите еще покопаться?

1 лайк
3

Чуть позже я обязательно этим займусь.
Я это выложил для тех кто совсем в ступоре и не понимает куда двигаться дальше. И на мой взгляд даже такое решение имеет место быть, поскольку в данной ситуации это простая таблица стилей, а когда там порядка сотни классов, селекторов и id? Будет уже проблематично отследить все корректировки которые вносились, а так сразу видно куда руку приложили. По крайней мере новичкам в этом деле.

4

Испытание супер, сначала прошёл на 99%, но не использовал important, пол дня убил(код показывать не буду, ибо он жуткий), зато получил огромное удовольствие). Прошёл 2й раз минут за 5 подставляя 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 h2 {
margin: 0!important;
padding: 10px!important;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e!important;
border-radius: 4px;
}

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

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

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

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

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

.albums {
margin-top: 5px;
}

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

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

.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;
}

5

Покажите тот, интересно же. А “жутким” я считала бы этот вариант.

6

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 {
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 12px;
color: #ffffff;
background: #34495e;
border-radius: 4px;
}

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

.fact:nth-child(odd) .title {
background: #ecf0f1;
margin: -10px 10px -10px -10px;
}
.fact:nth-child(odd) .value {
background: #ecf0f1;
margin: -10px -10px -10px 10px;
}

.fact:nth-child(even) .title {
margin: -10px 10px -10px -10px;
}

.fact:nth-child(even) .value {
margin: -10px -10px -10px 0px;
}

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

}

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

div.fact div.value {
border: 20px;
color: #34495e;
background: white;
padding: 10px;
text-align: left;
}

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

.albums {
margin-top: 5px;
}

.albums img {
float: left;
margin-right: 5px;
}
#miska {
margin-right: 5px;
}
img:nth-child(3) .albums {
margin: 0px 5px 0px 5px;
}

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

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

.button.stroke {

padding: 0px 47px 0px 0px;
margin: 5px 0;
background: #3498db;
height:inherit

}

.button.feed {
padding: 0px 46px 0px 0px;
background: #2ecc71;
height:inherit
}

.button.startle {
padding: 0px 51px 0px 0px;
margin: 5px 0;
background: #e74c3c;
height:inherit
}
:smiley:

7

Да, один другого краше :laughing:
Не хотите сделать по правилам, то есть без изменения самих свойств и с наименьшим количеством !important?

8

Я б с удовольствием, но боюсь опять надолго засяду, и времени много потрачу(

9

А разве эта тема не настолько важна, чтобы потратить на нее чуть больше времени?

10

Да, спс вы правы, оказалось не очень сложно. Отделался двумя !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 h2,
#info-title {
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;
}

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

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

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

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

div.albums {
margin-top: 5px;
}

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

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

div.profile .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;
}

11

Очень рада за вас)
Не бойтесь трудностей :slight_smile:

12

Скажите, пожалуйста, а наличие большого количества “!important” крайне нежелательно? А то у меня аж 18 штук.:neutral_face:

13

Крайне. В идеале должно остаться только два.

14

Понял, спасибо!