Назначение общих CSS стилей для создания адаптивной страницы в html5 и css3

Здравствуйте, уважаемые друзья и гости блога! Продолжаем наши уроки “Создание адаптивной страницы в html5 и css3 для начинающих”. И на втором шаге мы с вами сделаем назначение стилей в html5 и css3 для создания адаптивной страницы в html5 и css3.

Продолжим …

Построение адаптивной страницы – Назначение стилей в html5 и css3

На этом этапе построения адаптивной подписной страницы нам нужно с вами сделать назначение стилей в html5 и css3 для создания общих стилей 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="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;
}
/* --------------- /базовые настройки ---------*/

Его нам нужно вставить в наш ранее созданный файл стилей style.css.

А в файл index.html нужно добавить следующий код:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400italic,700italic|Raleway:500italic&subset=cyrillic-ext,latin' rel='stylesheet' type='text/css'>

Для того, чтобы назначение стилей в html5 и css3 прошло успешно и наши шрифты на странице отображались так, как нужно.

Теперь смотрим видеоурок:

Вот пример созданной мной адаптивной страницы. Подписавшись Вы можете скачать видеоуроки+исходники не дожидаясь выхода всех шести уроков!!!

Пока на этом все. Далее мы с вами узнаем:

Все шаги создания адаптивной страницы в html5 и css3:

• Шаг первый: Создание разметки страницы в html5 и css3
• Шаг второй: Назначение общих CSS стилей для создания адаптивной страницы в html5 и css3
• Шаг третий: Назначение стилей для header в создании адаптивной страницы на html5 и css3
• Шаг четвертый: Описание стилей CSS для формы подписки в создании адаптивной страницы на html5 и css3
• Шаг пятый: Описание стилей основного контента в создании адаптивной страницы на html5 и css3
• Шаг шестой: Делаем страницу адаптивной в html5 и css3

Спасибо за внимание!

Всегда ваш Валерий Бородин