Домой / Сайтостроение / Шаг второй: Назначение стилей в html5 и css3

Шаг второй: Назначение стилей в html5 и css3

назначение стилей в html5 и css3
назначение стилей в html5 и css3

Назначение общих 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:

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

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



Про Валерий Бородин

Проверьте также

анимация svg

Анимация SVG или как создать SVG слайдер на сайт?

Анимация SVG в создании слайдера для сайта — Пример рабочего SVG слайдера изображений! Здравствуйте, уважаемые друзья и гости …

  • http://sovety-lecheniya.ru людмилла

    Здорово! Валерий у вас снова свежая статья. Вы просто молодчина. Уважаю целеустремленных людей.Желаю вам удачи!

    • https://pribylwm.ru/ Валерий Бородин

      Спасибо Людмила! И вам желаю всего самого наилучшего, побольше посетителей!

  • http://ydachari.ru Маргарита

    Спасибо, Валерий за полезную информацию. Код мне пригодится.

    • https://pribylwm.ru/ Валерий Бородин

      Надеюсь на это Маргарита!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу