Всем привет,народ подскажите что я делаю не так,смотрю уроки по html5&css3,вообщем исходя из пояснений урока можно было скинуть все настройки браузеров,что бы страница везде выглядела одинаково в одном файле css и в ней работать далее над оформление,а можно было подключить сброс отдельно,собственно как я и поступил,но вот проблема,я подключил отдельным файлом сброс всех стилевых настроек от браузеров,в другом файле style.css я начал прописывать параметры шапки header,цвет текста и выравнивание работает,а вот картинка на фон не встает. Что я сделал не так? Заранее благодарен.(код ниже.
ОБСУЖДЕНИЕ
не ставится фон css url
Разметка index.html
Файл style.css
Файл reset.css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400|Raleway');
</style>
<title>Company name - home page</title>
</head>
<body>
<header>
<h1>If you like to Get Update, add yourself</h1>
<h3>this free smashingbuzz template for coorporate or new business will add new teaste</h3>
<div class="subscribe">
<form>
<input type="text" name="name" placeholder="enter your name">
<input type="email" name="email" placeholder="enter your email">
<input type="submit" value="add me now">
</form>
</div>
<p>* Lorem ipsum dolor sit amet, ex quot timeam mei.
Per aperiri impedit molestie at, privacy policy will be placed here.
</p>
</header>
<section>
<article>
<h1>Explore more about World best Service</h1>
<img src="images/phone.jpg" alt="">
<p>Probatus cotidieque mea ad, eu ornatus percipit sententiae usu. Ei pri velit aeque, ne quaeque vivendum praesent sea. Ea quo modo saperet reprimique, in sed oporteat splendide, an per causae nonumes sensibus. Vis ullamcorper instructior te. Tempor corpora definitiones ne mea, in cum tale summo bonorum. Ea duo quem quodsi animal, et brute quodsi euripidis usu. Ei pri velit aeque, ne quaeque vivendum praesent sea. Ea quo modo saperet reprimique, in sed oporteat splendide, an per causae nonumes sensibus. Ea quo modo saperet reprimique, in sed oporteat splendide, an per causae nonumes sensibus.</p>
<p>Probatus cotidieque mea ad, eu ornatus percipit sententiae usu. Ei pri velit aeque, ne quaeque vivendum praesent sea. Ea quo modo saperet reprimique, in sed oporteat splendide, an per causae nonumes sensibus. Vis ullamcorper instructior te. Tempor corpora definitiones ne mea, in cum tale summo bonorum. Ea duo quem quodsi animal, et brute quodsi euripidis usu. Ei pri velit aeque, ne quaeque vivendum praesent sea. Ea quo modo saperet reprimique, in sed oporteat splendide, an per causae nonumes sensibus. Ea quo modo saperet reprimique, in sed oporteat splendide, an per causae nonumes sensibus.</p>
<div class="subscribe">
<form>
<input type="text" name="name" placeholder="enter your name">
<input type="email" name="email" placeholder="enter your email">
<input type="submit" value="add me now">
</form>
</div>
</article>
</section>
</body>
</html>
Файл style.css
header {
background:url(images/header-bg.jpg) center center no-repeat; color: #fff; text-align: center;
}
Файл reset.css
/* --------------- reset.css --------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0; /* обнуляем отступы и убираем бордюры */
vertical-align: baseline; /* приводим все к одной базовой линии */
background: transparent; /* чтобы не проскакивали левые фоны, установленные по умолчанию */
font-size: 100%; /* размер шрифта всем одинаковый */
}
a { /* ссылка не в общем списке чтобы не сбрасывать outline по умолчанию */
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
outline:none;
}
table {/* устраняем отступы между ячейками таблицы */
border-collapse: collapse;
border-spacing: 0;
}
td, td img {
vertical-align: top;/* возвращаем привычное вертикальное выравнивание */
}
input, select, button, textarea {
margin: 0; /* убираем отступы по умолчанию для элементов форм (в частности для checkbox и radio) */
font-size: 100%; /* делаем размер шрифтов везде одинаковым */
outline: none;
}
input[type="text"], input[type="password"], textarea {
padding: 0; /* убираем внутренние отступы для текстовых полей */
}
input[type="checkbox"] { /* вертикальное выравнивание чекбоксов и радиобатонов относительно меток */
vertical-align: bottom;
}
input[type="radio"] {
vertical-align: text-bottom;
}
sub {
vertical-align: sub;
font-size: smaller;
}
sup {
vertical-align: super;
font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
nav ul {
list-style:none;
}
/* --------------- /reset.css --------------- */
/* --------------- базовые настройки ---------*/
html {
min-height:100%; /* всегда показываем вертикальную полосу прокрутки */
}
body {
color: #404040;
text-align: left;
font-size: 1em; /* используем безопасные шрифтовые CSS стеки */
min-height:100%;
background: #f9f9f9;
font-family: 'Open Sans', sans-serif;
}
a, a:visited { /* порядок правил для ссылок имеет значение */
color: #e6618c;
text-decoration: underline;
}
a:hover {
color: #fdf208;
text-decoration:none;
}
a:focus, a:active {
color: #c83867;
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
}
img{
max-width:100%;
}
.clr{
clear:both;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}
/* --------------- /базовые настройки ---------*/
нихуахуа тут коду.змея.
russalp, ну вот файл reset это как доп мат к работе от урока идет,и толком не поясняется что и как убирается и для чего.я еще со шрифтами парюсь как с ними работать грамотно,если делаю ресет подобный,то как поставить подключение поддержку юзеру нужные шрифты как я понял)
Kadet8, .facepalm я нехера все равно не понимаю
russalp, вообщем файл ресет идет для того что бы заставить страницу заставить отображатся во всех браузерах одинаково,а в файле style.css я пишу сам дизаин,так фот в шампе должна стоять картинка в виде фона под названием header-bg.jpg,но она не отображается,белый фон,но все остальные параметры цвет текста,выравнивание текста работает как и прописано.Короче картинка на фон не ставится.
russalp, судя по всему разобрался,я в шапке index.html ссылался на две таблице стилей,на одну в которой я делал само офрмление страниц,а на второй где скидывал настройки браузеров для оформления.кроссбраузерность как я понял.Обьеденил все в один файл,убрал один линк на вторую таблицу и все норм) Но чет не пойму исходя из теории допускается подключение нескольких таблиц стилей,и все должно работать)так что помогите если кто поимет меня)
Попробуй варианты :
1. Показать header как класс в style.css " <header class="head">
2. Перед ссылкой ставить полный адрес к фону " ../image/bg.png либо https://bla-bla.in/img.png
3. Проверь не битый ли изображение
4. Объединить все стили в одно так как у вас мелкий количество классов.
5. Ставить точку в style.css перед названием класса, например : header на .header
1. Показать header как класс в style.css " <header class="head">
2. Перед ссылкой ставить полный адрес к фону " ../image/bg.png либо https://bla-bla.in/img.png
3. Проверь не битый ли изображение
4. Объединить все стили в одно так как у вас мелкий количество классов.
5. Ставить точку в style.css перед названием класса, например : header на .header
6. Соберите все участвующие header элементы в один header класс и попробуйте ещё.
iMiWeY, У меня сработало другим вариантом,либо все в одном файле хранить,но я сделал по другому,в индексе подключил стиль на оформление,а в файле с оформлением подключил файл со сбросом настроек от браузера,и все работает как должно))