Общие требования к HTML разметке

§ Форматирование HTML кода должно быть иерархическим, отступ должен составлять 4 пробела.

§ Верстка HTML страниц должна быть реализована без использования JavaScript (там где это возможно).

§ Необходимо следовать семантики HTML5. Использовать существующие тэги HTML5 (header, footer, aside, nav, section, article и т.д). 2. Каждый тег должен использоваться по назначению (div для блоков, ul для списков и т.д.).

§ Необходимо правильно организовать структуру заголовков H1-H6. На странице не должно быть двух заголовков H1.

§ Кодировка для HTML страниц должна быть определена как "UTF-8".

§ Значения всех атрибутов HTML тегов должны быть заклюены в двойные кавычки (там где это возможно).

§ Классы которые используются в JavaScript должны начинаться с префикса "js-" и не должны использоваться для оформления стилей.

§ Для адаптивности необходимо использовать подход от меньшего к большему (порядок расположения стилей). Запрещено в одном проекте использовать сразу два подхода (от меньшего к большему и от большего к меньшему).

§ Все внешние ресурсы необходимо хранить в папках с названием блока или компонента (например, /images/news/bg.jpg).

§ Для всех картинок необходимо определять аттрибут "alt".

§ Необходимо определять цвет фона для тега "body". Если цвет не указан в макете, необходимо использовать белый.

§ Запрещается использовать размеры больше 100% (за исключением случаев, когда на этом построена логика работы, например галереи и т.д.).

§ Верстка контента, редактируемого в WYSIWYG-редакторе, не должна содержать классов (там где это возможно).

§ На HTML странице должны присутствовать "favicon" (с вариациями 32x32, 48x48 и 64x64) и "apple-touch-icon". "favicon" и "apple-touch-icon" должны быть предоставлены дизайнером. "favicon" и "apple-touch-icon" должны быть в формате ".png".

§ Для ссылок на e-mail необходимо задавать атрибут "mailto", для ссылок на телефон - атрибут "tel".

§ Запрещается использовать атрибут "id" с целью оформления стилей.

Основы CSS

CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML). Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL. Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>

<!DOCTYPE HTML>< html > < head > < meta charset="utf-8"> < title >Стили</ title > < link rel="stylesheet" href="http://htmlbook.ru/mysite.css"> < link rel="stylesheet" href="http://www.htmlbook.ru/main.css"> </ head > < body > < h1 >Заголовок</ h1 > < p >Текст</ p > </ body > </ html >

Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> .

H1 { color: #000080; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center;}P { padding-left: 20px;}

Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера <style>

<!DOCTYPE HTML>< html > < head > < meta charset="utf-8"> < title >Глобальные стили</ title > < style > H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366; } </ style > </ head > < body > < h1 >Hello, world!</ h1 > </ body > </ html >

В данном примере задан стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

<!DOCTYPE HTML>< html > < head > < meta charset="utf-8"> < title >Внутренние стили</ title > </ head > < body > < p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</ p > </ body > </ html >

В данном примере стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства (рис. 3.2).

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль.

<!DOCTYPE HTML>< html > < head > < meta charset="utf-8"> < title >Подключение стиля</ title > < style > H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </ style > </ head > < body > < h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</ h1 > < h1 >Заголовок 2</ h1 > </ body > </ html >

В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей.

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей;@import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него.

<!DOCTYPE HTML>< html > < head > < meta charset="utf-8"> < title >Импорт</ title > < style > @import url("style/header.css"); H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; } </ style > </ head > < body > < h1 >Заголовок 1</ h1 > < h2 >Заголовок 2</ h2 > </ body > </ html >

В данном примере показано подключение файла header.css, который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу.

@import "/style/print.css";@import "/style/palm.css"; BODY { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 90%; background: white; color: black;

}

Свойство padding задает внутренние отступы элемента — отступы от внешней границы элемента до его содержания. Эти отступы еще иногда называют полями.

Существует несколько способов записи свойства padding.

padding: 10px;padding: 5px 10px;padding: 5px 10px 15px;padding: 5px 10px 15px 20px;

1. Одинаковые отступы со всех сторон.

2. Отступы сверху и снизу 5px, справа и слева 10px.

3. Отступ сверху 5px, слева и справа 10px, снизу 15px.

4. Разные отступы со всех сторон, в порядке верхний, правый, нижний, левый.

Также можно задавать отступы для разных сторон с помощью свойств padding-left, padding-right, padding-top, padding-bottom.

Для строчных элементов лучше не задавать вертикальных отступов, так как они ведут себя непредсказуемо.

margin

— oпределяет ширину поля за пределами границы элемента:

margin: margin-top | margin-right | margin-bottom | margin-left

margin: 25px 30px 40px 80px → указаны ширины внешних полей (по часовой стрелке:

верхнее, правое, нижнее, левое);

margin: 0 auto → позволяет расположить блок по центру.

margin-top

— верхнее внешнее поле элемента:

margin-top: 20px → величина может быть указана в пикселях или в процентах.

margin-right

— определяет ширину правого внешнего поля:

margin-right: 40px

margin-bottom | margin-left

— определяют соответственно нижнее и левое внешнее поле.

CSS поддерживает множество единиц измерений, включая абсолютные единицы измерения, такие как дюймы, сантиметры, пункты и т.д., а также относительные единицы измерения, такие как проценты, em и т.д. Эти значения необходимо использовать при указании различных измерений в ваших правилах стиля, например border = "5px solid blue".

Ниже перечислены все единицы измерения CSS вместе с соответствующими примерами:

Единица измерения	Описание	Пример
%	Устанавливает измерение в процентах относительно другого значения, как правило, охватывающего элемента.	div {width: 50%;}
cm	Определяет измерение в сантиметрах.	p {padding-top: 1cm;}
em	Относительное измерение высоты шрифта в em пространстве. Поскольку единица em эквивалентна размеру данного шрифта, то, если Вы укажите шрифт 12pt, каждый элемент «em» будет 12pt. Таким образом, 2em будет 24pt.	h1 {letter-spacing: 3em;}
ex	Это значение устанавливает измерение относительно x-высоты шрифта. x-высота определяется высотой строчной буквы x шрифта.	p {letter-spacing: 7ex;}
in	Определяет измерение в дюймах.	h2 {word-spacing: .10in;}
mm	Устанавливает измерение в миллиметрах.	div {margin: .15mm;}
pc	Определяет измерение в пиках. Пика эквивалентна 12 пунктам (12pt).	h3 {font-size: 10pc;}
pt	Определяет измерение в типографских пунктах (твип), введённых компанией Adobe. Пункт равен 1/72 дюйма или 25,4/72 мм = 0,3528 мм. В странах СНГ, входящих в Таможенный союз, 1 пункт равен 0,376 мм.	table {font-size: 20pt;}
px	Устанавливает измерение в пикселях экрана.	p {margin: 30px;}
vh	Равен 1% высоты окна просмотра.	h1 {font-size: 2.0vh;}
vw	Равен 1% ширины окна просмотра.	h2 {font-size: 2.0vw;}
vmin	Равен 1vw или 1vh, в зависимости от того, что меньше.	div {font-size: 5vmin;}

Все значения свойства "display"

Свойство display имеет много разных значений. Обычно, используются только три из них: none, inline и block, потому что когда-то браузеры другие не поддерживали.

Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.

Значение none

Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.

<div style="border:1px solid black">Невидимый div ( <div style="display: none">Я - невидим!</div>) Стоит внутри скобок</div>

Значение block

· Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float).

· Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Это значение display многие элементы имеют по умолчанию: <div>, заголовок <h1>, параграф <p>.

<div style="border:1px solid black"> <div style="border:1px solid blue; width: 50%">Первый</div> <div style="border:1px solid red">Второй</div></div>

Блоки прилегают друг к другу вплотную, если у них нет margin.

Значение inline

· Элементы располагаются на той же строке, последовательно.

· Ширина и высота элемента определяются по содержимому. Поменять их нельзя.

Например, инлайновые элементы по умолчанию: <span>, <a>.

<span style="border:1px solid black"> <span style="border:1px solid blue; width:50%">Ширина</span> <a style="border:1px solid red">Игнорируется</a></span>

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними <span> и <a> есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

<span style="border:1px solid black"> <span style="border:1px solid blue; width:50%">Без</span><a style="border:1px solid red">Пробела</a></span>

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

<div style="border:1px solid black"> <span style="border:1px solid red">Инлайн</span> <div style="border:1px solid blue; width:50%">Блок</div> <span style="border:1px solid red">Инлайн</span></div>

Значение inline-block

Это значение – означает элемент, который продолжает находиться в строке (inline), но при этом может иметь важные свойства блока.

Как и инлайн-элемент:

· Располагается в строке.

· Размер устанавливается по содержимому.

Во всём остальном – это блок, то есть:

· Элемент всегда прямоугольный.

· Работают свойства width/height.

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.

Например:

Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:

Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.

Значения table-*

Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display.

Для таблицы целиком table, для строки – table-row, для ячейки – table-cell и т.д.

Пример использования:

<form style="display: table"> <div style="display: table-row"> <label style="display: table-cell">Имя:</label> <input style="display: table-cell"> </div> <div style="display: table-row"> <label style="display: table-cell">Фамилия:</label> <input style="display: table-cell"> </div></form>

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

Дата добавления: 2019-08-30; просмотров: 211; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 123 Следующая ⇒

Мы поможем в написании ваших работ!