Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.

С точки зрения современного CSS, обычные <table>, <tr>, <td> и т.д. – это просто элементы с предопределёнными значениями display:

table{display: table }tr{display: table-row }thead{display: table-header-group }tbody{display: table-row-group }tfoot{display: table-footer-group }col{display: table-column }colgroup{display: table-column-group }td, th{display: table-cell }caption{display: table-caption }

Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.

Вертикальное центрирование с table-cell

Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.

Это можно использовать для центрирования:

<style>div{border:1px solid black }</style> <div style="height:100px;display: table-cell;vertical-align: middle"><div>Элемент<br>С неизвестной<br>Высотой</div></div>

CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV, это допустимо.

При этом он ведёт себя как ячейка TD, то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align.

Значения list-item, run-in и flex

У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:

List-item

Этот display по умолчанию используется для элементов списка. Он добавляет к блоку содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:

<div style="display: list-item;list-style:inside square">Пункт 1</div>

Run-in

Если после run-in идёт block, то run-in становится его первым инлайн-элементом, то есть отображается в начале block.

Если ваш браузер поддерживает это значение, то в примере ниже h3, благодаря display:run-in, окажется визуально внутри div:

<h3 style="display: run-in;border:2px solid red">Пропчёл.</h3><div style="border:2px solid black">Пчёлы - отличные создания, они делают мёд.</div>

Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in.

Вот, для примера, правильный вариант отображения run-in, оформленный другим кодом:

<div style="border:2px solid black"><h3 style="display: inline;border:2px solid red">Пропчёл.</h3>Пчёлы - отличныесоздания, ониделаютмёд.</div>

Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in. На момент написания этой статьи только IE поддерживал display:run-in.

Flex-box

Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке

Для начала нужно понять, что css не создает блоки – он оформляет их. Сами по себе они формируются в HTML – языке разметки гипертекста. По умолчанию блок по высоте будет занимать место, равное высоте его содержимого. По ширине же он займет все доступное пространство, которое есть в родителе.

Для примера: если ширина родительского контейнера составляет 300 пикселей и в нем создан блок, то он тоже будет занимать такую ширину (только если у родителя не заданы отступы). Все остальные элементы, которые будут создаваться в контейнере, не могут стоять на одной линии с первым блоком и будут перенесены дальше.

Обычный пустой блочный элемент записывается с помощью парного тега — div. Сам по себе он ничего не делает. Например, давайте вспомним, что многие теги имеют определенный смысл: абзац является частью какого-то текста, подзаголовки нужны для улучшения навигации и восприятия и т.д. А вот тег div выступает просто контейнером.

Давайте сначала разберемся с размерами. В css размеры элементам можно записывать с помощью свойств width и height.Color

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

Свойство наследуется.

Список основных ключевых слов включает в себя следующие значения:

Название	HEX	RGB	Цвет
black	#000000	0,0,0
silver	#C0C0C0	192,192,192
gray	#808080	128,128,128
white	#FFFFFF	255,255,255
maroon	#800000	128,0,0
red	#FF0000	255,0,0
purple	#800080	128,0,128
fuchsia	#FF00FF	255,0,255
green	#008000	0,128,0
lime	#00FF00	0,255,0
olive	#808000	128,128,0
yellow	#FFFF00	255,255,0
navy	#000080	0,0,128
blue	#0000FF	0,0,255
teal	#008080	0,128,128
aqua	#00FFFF	0,255,255

RGB

Формат значения RGB в шестнадцатеричном формате — это знак #, за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная запись RGB #rgbпреобразуется в шестизначную форму #rrggbb путем копирования цифр, а не путем добавления нулей. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый #ffffff может быть указан в короткой записи #fff, и удаляет любые зависимости от глубины цвета дисплея.

Формат значения RGB в функциональной нотации — rgb(, за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует символ). Целочисленное значение 255 соответствует 100% и F или FF в шестнадцатеричной записи:

rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF

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

 

RGBA

Цветовая модель RGB расширена в этой спецификации, чтобы включить alpha, которая управляющая непрозрачностью цвета. В отличие от значений RGB, для значения RGBA нет шестнадцатеричной записи.

Формат значения RGBA в функциональной нотации — rgba(за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует значение непрозрачности, а затем). Целочисленное значение 255 соответствует 100%, rgba (255,255,255,0.8) = rgba (100%,100%,100%,0.8). Символы пробела допускаются вокруг числовых значений.

Параметр непрозрачности применяется ко всему объекту. Любые значения за пределами диапазона от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) будут ограничены этим диапазоном.

История и стандарты, базовые элементы.

Служба Интернет World Wide Web (Всемирная Паутина) в настоящее время используемая наиболее интенсивно, появилась в 1995 г., в Европейском Центре Ядерных Исследований в Швеции. Основу WWW составляют hypermedia-документы или Web-страницы. Эти документы могут содержать как текстовые, так и не текстовые данные (например, изображения, звук), а также ссылки. Ссылки – это специальные элементы, позволяющие автоматизировать процедуру открытия и загрузки документа, на который указывает данная ссылка. Эта ссылка может указывать на документ, который расположен на жестком диске компьютера, находящегося на другом континенте.

С появлением службы WWW стало легко находить нужную информацию с помощью простого указания и щелчка мышью. Поэтому служба WWW приобрела всемирную популярность и получила большое распространение. Каждый день в сети Интернет появляются новые Web–серверы и публикуются тысячи документов.

Для построения Web-страницы в WWW используется специальный язык HTML, что означает Hyper Text Markup Language – язык гипертекстовой разметки, язык форматирования данных. Язык HTML определяет форматирование и организацию данных в Web-страницах. Документ на языке HTML – это файл в ASCII-формате, состоящий из специальных дескрипторов, называемых теги. Эти теги и определяют форматирование данных в любом Web-документе.

Когда говорят об "Интернет-стандарте", в большинстве случаев имеется в виду техническая спецификация протокола, программного интерфейса, схемы базы данных и тому подобных вещей. Стандарт - это своего рода "строительный блок", призванный в совокупности с другими элементами создать систему или решение. Для этого наряду со стандартами существуют также информационные документы с рекомендациями по применению стандарта или технологии для решения определенных задач. Обычно организации, занимающиеся стандартизацией, разрабатывают оба типа спецификаций.

Для правильного представления, как и какие стандарты определяют функционирование Интернета, полезно кратко остановиться на архитектурной модели Сети.

С точки зрения протоколов модель Интернета, основанная на протоколах TCP/IP, состоит из четырех уровней: канальный, сетевой, транспортный и уровень приложений. Ниже я кратко приведу их основные характеристики:

· Канальный уровень включает технологии и протоколы передачи данных в физической и локальной сети. Этому уровню принадлежат такие технологии как Ethernet, Frame Relay, ATM, MPLS. В модели TCP/IP в этот уровень также включены стандарты кодирования и передачи сигналов в физической сети - оптическое волокно, радиосигнал и т.п.

· Сетевой уровень определяет передачу данных между локальными сетями, обеспечивая создание интер-сетей, или собственно Интернета. Этот уровень является глобальным и универсальным - каждое устройство, непосредственно подключенное к Интернету, взаимодействует с другими устройствами на этом уровне. Сетевая технология различных сетей, составляющих Интернет, может быть различна, также как и приложения и услуги, предоставляемые в этих сетях. Однако протокол IP - основной протокол сетевого уровня - является общим знаменателем, определяющим Интернет, по крайней мере сегодня.

· Услугами протоколов транспортного уровня пользуются приложения, расположенные на различных хостах. Эти протоколы обеспечивают сквозную связность между хостами, а также дополнительные функции, такие как мультиплексирование виртуальных каналов, гарантированную безошибочную передачу данных, контроль пропускной способности и т.п. Основными протоколами этого уровня являются TCP и UDP. Первый из них обеспечивает обмен данными между приложениями с созданием виртуального соединения, а UDP - обмен "дейтаграммами" без создания соединения.

· Уровень приложений, или прикладной уровень, содержит протоколы обмена данными между приложениями, или процессами. Наиболее значительными приложениями, использующими протоколы этого уровня являются (приведу лишь некоторые протоколы):

o Электронная почта: SMTP, POP, IMAP

o Передача файлов: FTP, TFTP

o Коллаборативные вэб-платформы: HTTP, WebDAV

o Голосовая связь: SIP

o Обмен сообщениями: XMPP

o Инфраструктурные приложения: DNS, DHCP, TLS/SSL

Каждый протокол выполняет наиболее универсальные функции, необходимые для взаимодействия между устройствами на конкретном уровне. Например, Ethernet (IEEE 802.3) обеспечивает обмен данными между сетевыми интерфейсами локальной сети. Он поддерживает различные типы среды передачи (от коаксиального кабеля до оптоволокна) и скорости (от 10 Мбит/с до 100 Гбит/с). Однако, хотя Ethernet и обеспечивает обнаружение ошибочных данных (фреймов), исправление ошибок (например путем повторной передачи) производится протоколами верхних уровней.

Такой подход обладает поистине неограниченным инновационным потенциалом, поскольку изменения протокола одного уровня не затрагивают протоколы других уровней, при условии, что интерфейсы взаимодействия между протоколами неизменны. Так, эволюция того же Ethernet происходила абсолютно независимо от протокола следующего уровня - IP. А для создания нового приложения (или протокола прикладного уровня) нет необходимости требовать каких-либо изменений от Сети.

XHTML (англ. e x tensible h yper t ext m arkup l anguage — расширяемый язык гипертекстовой разметки) — семейство языков разметки веб-страниц на основе XML, повторяющих и расширяющих возможности HTML 4. Спецификации XHTML 1.0 и XHTML 1.1 являются рекомендациями консорциума Всемирной паутины. Развитие XHTML остановлено; новые версии XHTML не выпускаются; рекомендуется использовать HTML.

Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются.

XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. HTML обладает множеством особенностей в процессе обработки и фактически перестал относиться к семейству SGML, что и закреплено в черновике спецификации HTML 5.

Браузер выбирает парсер для обработки документа на основании заголовка content-type, полученного от сервера:

· HTML — text/html

· XHTML — application/xhtml+xml

· Для локального просмотра на клиенте выбор основывается на расширении файла^{[ уточнить ]}.

· В Internet Explorer вплоть до 8-й версии парсер обработки XHTML-документов отсутствует.

Декларация DOCTYPE может не оказывать никакого влияния на определение парсера для обработки (зависит от используемого браузера).

Блочные элементы занимают всю доступную ширину и располагаются один под другим. Перенос слов осуществляется в границах блочного элемента.

Как пример блочных элементов можно привести абзацы. Абзацы выстраиваются один под другим, занимают всю ширину страницы. Текст в абзацах переносится по словам.

Абзацы <p>

Абзацы — основной структурный элемент Web-страницы.

Абзацы создаются с помощью элемента <p>. Его имя происходит от английского слова «paragraph» — «абзац».

Между тегами <p> и </p>распологается текст абзаца.

Заголовки бывают шести уровней.

Заголовок первого уровня является названием страницы. Он создаётся с помощью элемента <h1>. Заголовок второго уровня разбивает страницу на логические разделы. Он создаётся с помощью элемента <h2>. Заголовок третьего уровня разбивает разделы на смысловые части. Он создаётся с помощью элемента <h3>и т.д.

Первым элементом на странице всегда должен быть элемент <h1>.
Заголовки являются блочными элементами.

Заголовки нельзя включать в абзацы, а абзацы – в заголовки.

Элементы <h1>, <h2>, <h3>, <h4>, <h5> и <h6> включаются в элемент <body>.

Размеченный текст <pre>

В XHTML пробелы и начала строк игнорируются. Если нужно обойти такое стандартное поведение обозревателя, применяют элемент <pre>. Текст внутри элемента <pre> выводится в том же виде, в каком он был сохранён, с соблюдением всех пробелов и новых строк.

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

К линейным элементам относятся элементы логического форматирования: <strong> и <em> и ссылки — элемент <a>.

Элементы «усиление» и «эмфазис»

Линейные элементы <strong> и <em> используются для расстановки логических ударений в тексте. Поскольку эти элементы линейны, они позволяют выделить букву, слово или фразу.

Обычно <strong> отображается полужирным, а <em> — курсивом. Но это стандартное поведение легко может быть переопределено в стилях.

Сосуществование блочных и линейных элементов

Линейные элементы могут включаться как в блочные, так и в линейные элементы. Блочные элементы включаются только в блочные элементы. В абзацы никакие блочные элементы включаться не могут.

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

C сылки и пути.

С помощью элемента <a> создаются ссылки с Web-страницы на различные ресурсы.
Для элемента <a> определён обязательный атрибут href, задающий подключаемый ресурс.

Ссылки являются линейными элементами. Элементы <a> включаются в элемент <body> и в другие блочные и линейные элементы.

Ссылки не могут включаться одна в другую, то есть в элемент <a> нельзя включать другие элементы <a>.

Атрибут href

Атрибут href задаёт ресурс, на который указывает ссылка.

Если файл, на который производится ссылка, находится в той же папке, что Web-страница, как значение атрибута href указывается просто имя этого файла (обязательно с расширением) с соблюдением регистра. Например, в этой папке есть файл archive.zip. Ссылку на него можно создать таким образом:

<body>

<h1>ЗАКАЧКА ФАЙЛА</h1>

<p>

Здесь находится <a href="archive.zip">архив</a> программы.

</p>

</body>

 

Атрибут title

Атрибут title позволяет определить всплывающую подсказку. Значение атрибута title и будет её текстом.

Атрибут title определён для всех элементов, то есть любому элементу может быть назначена всплывающая подсказка.

Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.Абсолютные ссылки обычно применяются для указания документа на другом сетевом ресурсе, впрочем, допустимо делать абсолютные ссылки и внутри текущего сайта. Однако подобное практикуется нечасто, поскольку такие ссылки достаточно длинные и громоздкие. Поэтому внутри сайта преимущественно используются относительные ссылки.

При создании относительных ссылок надо понимать, какое значение для атрибута href следует указывать, поскольку оно зависит от исходного расположения файлов. Рассмотрим несколько типичных вариантов.

1. Файлы располагаются в одной папке

Необходимо сделать ссылку из исходного документа на ссылаемый. В таком случае код будет следующий.

< a href="Ссылаемый документ.html" > Ссылка </ a >

Подобное имя файла взято только для образца, на сайте в именах файлов не следует использовать русские символы с пробелами, да еще и в разном регистре.

2. Файлы размещаются в разных папках

Когда исходный документ хранится в одной папке, а ссылаемый в корне сайта, то перед именем файла в адресе ссылки следует поставить две точки и слэш (/), как показано ниже.

< a href="../Ссылаемый документ.html" > Ссылка </ a >

Две точки в данном случае означают выйти из текущей папки на уровень выше.

3. Файлы размещаются в разных папках

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

< a href="../../Ссылаемый документ.html" > Ссылка </ a >

Аналогично обстоит дело с любым числом вложенных папок.

4. Файлы размещаются в разных папках

Теперь ситуация меняется, исходный файл располагается в корне сайта, а файл, на который необходимо сделать ссылку - в папке. В этом случае путь к файлу будет следующий.

< a href="Папка/Ссылаемый документ.html" > Ссылка </ a >

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

< a href="Папка 1/Папка 2/Ссылаемый документ.html" > Ссылка </ a >