Манекен вернулся с простым вопросом о CSS

[artmichurinsk]

Хорошо! Время перерыва закончилось. РЖУ НЕ МОГУ

Итак, последние пару дней я читал о CSS и играл с кодом, с которым мне помог Deathshadow, и столкнулся с проблемой, которую не могу понять.

Я читал и экспериментировал с использованием градиента разными способами. Я пытался применить его к фону, чтобы увидеть, как это работает, и кое-что из того, что я читал, казалось ужасно сложным. Я также нашел что-то, что предлагало что-то вроде:

тело{
высота: 100%;
фон: линейный градиент (0 градусов, желтый, синий 80%), без повтора;}

это должно быть применено к телу. Я также читал, что это следует применить и к html.

В любом случае, я попробовал описанный выше метод (после изменения его с простого черного на белый) как в теле, так и в HTML-коде Deathshadows, и, похоже, он не хочет работать с этим конкретным кодом, и мне было интересно, используется ли метод, который я использовал. Я пытаюсь, это слишком просто, или мне чего-то не хватает?

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

Я просмотрел @Media и не увидел ничего, что могло бы привести к изменению цвета фона, так что я снова в полном тупике.

Какие-либо предложения?

HTML-код:

 html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img { margin:0; padding:0;
}
img, fieldset { border:none;
}
hr { display:none; 
}

@media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}

@media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px)
{ html { font-size:200%; }
}
body { min-width:55em;  font:normal 85%/150% arial,helvetica,sans-serif; color:#FFF; background: linear-gradient(0deg, #FFF, #000 90%) no-repeat;
}
.heightWrapper { background:#000;
}
h1 { padding-left:2em; font-size:100%;  color: #FFF;
}
h1 a { position:relative;  display:block; padding:40px 0;  text-decoration:none; font:bold 60px/64px arial,helvetica,sans-serif; color:#FFF;
}
h1 span { position:absolute; top:0; left:0; width: 1275px; height: 130px; background:url(images/header5.jpg) center left no-repeat; border-bottom: 1px solid #990000;
}
h2 { padding-bottom:1.33em; text-align:center; font:bold 150%/120% arial,helvetica,sans-serif;
}
#contentWrapper { width:100%; float:left;
}
#content { padding:2em 0 1em 2em; margin-right:26em; 
}
#extras { float:left; width:22em; padding:2em 2em 1em; margin-left:-26em;  
}
video { display:block; width:100%; margin-bottom:1em;
}
p { max-width:56em;  margin:0 auto; padding-bottom: 5em; text-align:center;
}
.adverts { text-align:center;
}
.adverts img { display:block; max-width:100%; margin-bottom:10em;
}
#click { margin: 0 auto; max-width: 25em; background: #333; font-family: Noto Sans; text-align: center; font-size: 36px; font-weight: 700; line-height: 100%; padding: 1.25em 0 1.25em 0; -webkit-box-shadow: 0 0 2px 2px #000, 0 0 .5em 0.05em #CCC; box-shadow: 0 0 2px 2px #000, 0 0 .5em 0.05em #CCC; -webkit-border-radius: .5em; border-radius: .5em;
}
#click a { color: #CCC; text-decoration: underline;
}
#footer { padding-bottom: 3em; text-align:center;
}
#otherVideos { clear:both;  padding:2em 0 1em; margin:0 2em; border-top:2px solid #800;
}
#otherVideos ul { list-style:none; text-align:center; padding-bottom:1em;
}
#otherVideos li { display:inline; vertical-align:top;
}
#otherVideos a { width:266px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s;
}
#otherVideos a:active,
#otherVideos a:focus,
#otherVideos a:hover { background:#333;
}
#otherVideos img { display:block; margin:0 auto 0.5em; max-width:100%;
}
@media (max-width:50em) { body { min-width:192px;  } #contentWrapper, #extras { float:none; width:auto; } #content, #extras { margin:0; padding:1em 0.5em 0; } h2 { padding-bottom:0.66em; } .adverts { padding-top:1em; border-top:2px solid #400; } .adverts img { display:inline-block; max-width:49%; } #otherVideos { padding:1em 0 0; margin:0 0.5em; } #otherVideos a { padding:0.5em; }
}
@media (max-width:660px) { h1 { text-align:center; padding:0; } h1 a { padding:0.33em 0.167em; font:bold 300%/150% arial,helvetica,sans-serif; } h1 span { display:none; } .adverts img { display:block; max-width:100%; }
}
@media (max-width:340px) { #otherVideos a { width:auto; margin:0 auto; -webkit-box-sizing:padding-box; box-sizing:padding-box; }
}

Код (разметка): и CSS выглядит так:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1" > <link rel="stylesheet" href="screen2.css" media="screen,projection,tv" > <title> Sample Video Title - Site Title </title> </head><body> <h1> <a href="/"> Site Title <span><!-- image sandbag --></span> </a> </h1> <div class="heightWrapper"> <div id="contentWrapper"><div id="content"> <h2>Sample Video Title</h2><!-- or HR if text unwanted --> <video controls preload="metadata" poster="images/1.jpg" class="fullVideoPlate" > <source src="videos/test1.mpg" type="video/mp4"> <!-- Don't forget your other "required" source formats I'd probably also have a flash fallback here as well as a flash off fallback text. --> </video> <p> This is just some sample text for whatever purpose. This is just some sample text for whatever purpose. This is just some sample text for whatever purpose. This is just some sample text for whatever purpose. This is just some sample text for whatever purpose. This is just some sample text for whatever purpose. This is just some sample text for whatever purpose. This is just some sample text for whatever purpose. </p> <!-- #content, .contentWrapper --></div></div> <div id="extras"> <div class="adverts"> <h2>Advertisements</h2> <a href="#"> <img src="images/2.jpg" alt="Опишите объявление"> </a> <a href="#"> <img src="images/2.jpg" alt="Опишите объявление"> </a> <!-- .adverts --></div> <!-- #extras --></div> <div id="otherVideos"> <h2>Other Videos You May Enjoy</h2> <ul> <li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li><li> <a href="#"> <img src="images/3.jpg" alt="Опишите этот образ!"> Just some pure simple text describing what the video is all about </a> </li> </ul> <!-- #otherVideos --></div> <!-- .heightWrapper --></div> <div id="footer"> <hr> &copy; Whatever &bull; Rest of disclaimer here <!-- #footer --></div> </body></html>
Код (разметка):

 

[feory]

Привет! Угадай, что?

Я действительно кое-что придумал сам.

Кажется, я установил для фона .heightWrapper значение #000, как настоящий манекен. Итак, я изменил его с черного на градиент, и это сработало, так что вы можете просто игнорировать мой ОП, и все могут быть спокойны, что еще один мой кризис был предотвращен.

Спасибо и хорошего дня