Рейтинг@Mail.ru
Часть I. Статья №2. Основная разметка. Reset CSS - ДРУиД: Верстка шаблона сайта своими руками.

~ДРУиД~

Дом рационально-умный и душевный

ДРУиД - Дом Рационально-Умный и Душевный
Строительство частного "Умного" дома своими руками
Изучение МК STM32
Материалы по сайтостроению
Изготовление девайсов для быта и не только
Часть I. Статья №2. Основная разметка. Reset CSS.

28 February 17 г. Автор - admin


Часть I. Верстка шаблона сайта на основе макета фотошопа.

Часть I. Статья №2. Основная разметка. Reset CSS.

 

Структура сайта.

 

Структура будущего блога (сайта) не будет уникальной. Все по классике жанра.

 

Структура блога

Рисунок №1. Структура сайта (блога).

 

Можно убедиться, спросив у гугла и посмотрев при этом картинки.

 

Index.html

 

Создадим индексный файл и заполним его основными тегами.

 

<!DOCTYPE html>
<html>

<head>
	<title>ДРУиД-Дом рационально-умный и душевный</title>
    	<meta name="Keywords" content="Ключевые слова страницы сайта">
    	<meta name="Description" content="Описание страницы сайта">
</head>

<body>
</body>

</html>

 

Теперь в теле документа пропишем обзац с текстом.

 

Начальный вид сайта

 

Если посмотреть на то, что получилось, то по умолчанию браузер выставил отступы от краев. И у всех браузеров эти отступы по умолчанию могут сильно различаться. Как с этим бороться? В РУНЕТе много расписано про Reset.css. Например, тут или здесь, еще вот там тоже есть.

 

Добавим в проект дефолтный файл стилей. В нем напишем примитив:

 

* {
	padding: 0;
	margin: 0;
}

 

Теперь посмотрим:

 

Применение ресет css

 

Так что reset.css играет огромную роль при создании кросбраузерности сайта и вообще заставляет браузер пользователя играть по нашим правилам. А вот какого должно быть содержание самого дефолтного файла стилей вопрос отнюдь не праздный. Каждый разработчик пишет его под конкретный сайт и т.д. и т.п.

 

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 --------------- */

 

Разбираться по строчно не будем. Основная мысль такова – что мы всем без «исключения» элементам присваиваем начальные общие свойства.

 

Также наряду с reset.css, применяется еще и базовые настройки стилей. Они направлены на то чтобы придать элементам основную стилистику шаблона сайта. Если у нас темные фоновые тона, то цвет текстов будет светлым (белым) и это можно прописать в базовых стилях, и т.п.

 

Базовые настройки стилей автор объединил с дефолтными в одном файле.

 

/* --------------- базовые настройки ---------*/
html {
	min-height:100%; /* всегда показываем вертикальную полосу прокрутки  */
}
body {
	color: # 5c646e;
	text-align: left;
	font-size: 0.95em; /* используем безопасные шрифтовые CSS стеки */
	min-height:100%;
	font-family: sans-serif;
}
a:hover {
	color: #971E27;
	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;
}
/* --------------- /базовые настройки ---------*/

 

Теперь наш обзац выглядит следующим образом.

 

Дефолтные + базовые настройки

 

А откуда взялся такой цвет текста? А вот тут вступает в работу наш макет отрисованный в фотошопе. Открываем макет, пипеткой смотрим на цвет текста и устанавливаем его в базовых настройках.

 

Верстка нашего блога будет на DIVах. Табличную верстку применять не будем в виду морального устаревания такого стиля написания.

 

Общая структура выглядит следующим образом:

 

<body>
	<header>
	</header>
	<article>
	</article>
	<aside>
	</aside>
	<footer>
	</footer>
</body>

 

Начнем верстать шаблон сверху вниз. Но это уже в следующих выпусках (статьях).

 

Видео данного урока представлено ниже.

 

 

Ознакомится с нововедениями и тенденциями в веб-разработке можно по следующей ссылке:"Современные тенденции и подходы в веб-разработке"

 


Просмотров: 1772



Да, Я Хочу Всегда Быть В Курсе Новых Событий На Сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности


Комментарии: (0)

Оставить комментарий

Рекомендованные статьи:


Часть I. Статья №3. Верстка шапки сайта. Блок ХИДЕР.

На прошлом уроке была произведена основная разметка сайта, рассмотрены аспекты дефолтных и базовых настроек стилей сайта. Приступим непосредственно к написанию кода шаблона сайта. HTML и CSS. Верстать будем сверху вниз, то есть начнем с блока ХИДЕР.

Часть I. Статья №1. Выбор макета для сайта.

В цикле статей по верстке дизайна сайта на ДИВах (HTML+CSS) автор ресурса ~ДРУиД~ делился своим опытом в сайтостроении, на примере верстки шаблона собственного ресурса. Цикл получился скомканным и не информативным.

Новый цикл статей будет носить более обучающий характер с видеоотчетами и ссылками на полезные ресурсы. Этот цикл статей положит начало всему разделу «Создание сайта | блога | своими руками».



РУБРИКИ САЙТА:



Последняя статья:

Выбор системы оплаты труда - изобретаем велосипед

С промежуточным итогом по современным системам оплаты труда ознакомились. Теперь вернемся к нашим попугаям. Для чего менять существующую систему? На что опираться при формировании новой системы? Как учесть все пожелания работодателя (читай цели, возлагаемые на работника)? Как не ущемить права работника, не потерять квалифицированного сотрудника, поднять мотивацию и увеличить производительность труда? Начнем разбираться.

Читать далее »

Да, Я Хочу Всегда Быть В Курсе Новых Событий На Сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности


Рейтинг@Mail.ru Яндекс.Метрика