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

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

Почему вдруг с плюсом селекторы?

23

Что скажете по поводу этого кода?

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

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

.albums {
margin-top: 5px;
}

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

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

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

25

Ineska, это так называемые “соседние селекторы” - в данном задании я их использовал, просто как один из способов повышения специфичности.

{background: #2ecc71;} применяется к тегам с классом .feed, идущим только после тегов с тега с классом .stroke.
{ background: #e74c3c;} применяется к тегам с классом .startle, идущим только после тегов с тега с классом .feed.

А так они описаны в уроке 6/18 “Соседние селекторы”.

26

Да знаю я про соседние селекторы… Просто для первой кнопки вы обошлись без них. Вот и спросила, почему две следующие особенными стали.

1 лайк
28

Что не так с кодом, посмотрите пожалуйста

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

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

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

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

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

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

.albums {
margin-top: 5px;
}

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

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

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

29

Такой селектор не работает (из-за запятой).
Без !important это задание не решается.
Подсказка будет в этой теме.

30

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

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’а.
Буду благодарен за конструктивную критику.

31

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

32

Правильно ли я понял, что <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 идёт “ниже” и, следовательно, имеет больший приоритет. Поэтому свойства из неё и используются (вид кнопок, расположение, цвет текста и так далее)

33

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

34

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

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

35

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

1 лайк
36

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

37

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

Снимок.PNG691×99 3.41 KB

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

38

Вот мой код - дает 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;
}

39

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

40

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

41

Прошу взглянуть на код, по системе проходит, везде !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;
}
42

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

43

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