Основы HTML. Создание первой веб-страницы

14.04.2022

CSS является фундаментом для стилизации ваших веб страниц. Его обманчиво простой синтаксис позволяет влиять на визуальный слой веб сервера. А CSS3 открывает еще больше возможностей.

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

1. Установите свойство font-size : 62.5% для тега body , чтобы было проще конвертировать em единицы

Если вам нравится использовать относительные единицы для установки размера шрифта (em), установите значение 62.5% для свойства font-size тега body . В результате станет очень просто пересчитывать px в em - нужно будет всего лишь разделить значение в px на 10 (например, 24px = 2.4em).

Body { font-size: 62.5%; /* font-size 1em = 10px */ } p { font-size: 1.2em; /* 1.2em = 12px */ }

2. Удаление контура вокруг полей ввода для браузеров WebKit

Когда элемент input получает фокус ввода (:focus), то в браузере Safari к нему добавляется голубой контур (а в Chrome - желтый).

Если вы хотите удалить данный контур, то можно использовать правило (в данном случае будет удален контур у текстового поля):

Input:focus { outline: none; }

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

3. Используйте правило CSS transform для получения интересных эффектов при наведении курсора мыши на элемент

Для масштабирования элемента можно использовать свойство transform в большинстве браузеров, поддерживающих CSS3.

Вот правила для трюка с увеличением элемента на 10% при наведении курсора мыши на него:

A { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); }

4. Указываем правила для IE6 и IE7 без использования условных комментариев

Нужно указать правило для браузера IE? Есть способ сделать это без условных комментариев (тем не менее, ваш код CSS не пройдет проверку).

Код примера изменяет background-color для элемента div в зависимости от типа используемого пользователем браузера. Так как * указывает на IE версии 7 и ниже, то мы используем правило с _ после него, чтобы для IE6 (и более ранних версий) использовать другой цвет фона, отличный от фона для IE7:

Div { background-color: #999; /* все браузеры */ *background-color: #ccc; /* добавили * перед свойством - для IE7 и ниже> */ _background-color: #000; /* добавили _ перед свойством - для IE6 и ниже */ }

5. Поддержка прозрачности во всех основных браузерах

В примере для элемента div задается 70% прозрачности. Нужно использовать частный код CSS для корректной работы в Internet Explorer (что делает наш код несоответствующим стандартам W3C):

Div { /* для браузеров, совместимых со стандартами */ opacity:0.7; /* следующие строки будут проигнорированы в браузерах, совместимых со стандартами */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */ filter: alpha(opacity=70); /* IE 5-7 */ }

6. Используйте !important для изменения обычного порядка наследования правил CSS

В CSS, когда два одноименных свойства применяются для элемента, использоваться будет то, которое расположено в листинге дальше. Но с помощью!important в конце значения свойства можно изменить порядок использования одноименных свойств.

Например:

H1 { color: green; } h1 { color: red; }

В данном наборе правил, элемент h1 будет иметь красный цвет.

Если нужно изменить приоритет правил без изменения порядка их объявления, можно сделать так:

H1 { color: green !important; } h1 { color: red; }

Теперь элемент

будет зеленым.

Это один из способов центрировать элемент div с фиксированной шириной/высотой во внешнем контейнере. Данный способ можно использовать для центрирования текста, изображений и так далее внутри контейнера. Нужно сделать несложные вычисления для элемента с фиксированными размерами и использовать абсолютные величины для позиционирования и полей. Родительский контейнер должен иметь свойство position: relative , чтобы данный метод сработал.

Div { position: absolute; top: 50%; left: 50%; width: 400px; height: 300px; margin-top: -150px; /* 1/2 высоты вашего элемента */ margin-left: -200px; /* 1/2 ширины вашего элемента */ }

8. Простое использование веб шрифтов с помощью API Google Font

Веб шрифты открывают дополнительные возможности оформления страниц с помощью правила CSS @font-face. Однако в настоящий момент нет унифицированной реализации @font-face в различных браузерах. Если говорить конкретно, типы поддерживаемых файлов шрифтов различаются в разных браузерах (может быть ситуация изменится с введением стандарта WOFF). Кроме того, при использовании шрифтов нужно быть осторожным при соблюдении авторских прав (шрифт может не иметь лицензии для использования в веб пространстве).

Одним из обходных путей в ситуации с @font-face является API Google Font .

Ниже приводится пример использования шрифта Cantarell для элемента

с использованием API Google Font.

Для использования шрифта из API Google Font сначала нужно указать ссылку на внешнюю таблицу стилей в теге :

Для использования шрифта для элемента h1 просто указываем его в свойстве font-family .

H1 { font-family: "Cantarell", Arial, serif; /* Используем набор шрифтов (на всякий случай) */ }

9. Предотвращаем перевод строки в текстовых элементах

Иногда нужно, чтобы текст не переводился на следующую строку, когда исчерпывается ширина содержащего его элемента.

Текст ссылки разорван пробелом, чтобы перенести последнее слово на следующую строку. Но как сделать так, чтобы ссылка все время оставалась на одной строке (то есть предотвратить перенос строки)? Просто. Нужно использовать свойство white-space:

A { white-space: nowrap; }

10. Вертикальное центрирование текста

Для горизонтального центрирования текста можно использовать несколько стандартных методов (например, text-align: center или margin: 0 auto), но вертикальное центрирование текста требует использования трюков.

Для текста, который состоит из одной строки, мы можем использовать свойство line-height . Устанавливая значение свойства line-height для элемента с текстом равным высоте его контейнера, мы получаем центрированный по вертикали текст.

Вот элемент p , который центрирован по горизонтали внутри элемента div с размерами 100×100px, с помощью свойства text-align: center:

Свойство text-align не центрирует текст по вертикали. Мы можем установить значение свойства line-height равным высоте контейнера div (100px).

Div { width:100px; height:100px; } div p { line-height:100px; }

Такое использование свойств предполагает отсутствие у элемента p полей и отступов. Если будут иметься поля или отступы сверху или снизу, то нужно будет их компенсировать или просто установить 0 для padding и margin , чтобы облегчить себе жизнь.

Также, данный трюк не сработает, если текст будет содержать более одной строки (например, в случае переноса текста на следующую строку), потому что между строками будет установлено расстояние равное значению свойства line-height .

Представление документа пользователю значит его конвертацию в понятную для пользователя форму. Браузеры , такие как Firefox , Chrome или Internet Explorer , предназначены для представления документов визуально, например, на экране компьютера, проектора или принтера.

Как CSS влияет на HTML?

Браузер применяет CSS правила к документу, чтобы описать, как он будет отображаться. CSS-правила формируются из:

Набора свойств , которые имеют значения, устанавливающие, как будет отображаться содержимое(HTML), Например Я хочу, чтобы ширина элемента равнялась 50% ширины родительского элемента, и его фон был красным .
Селектор , который выбирает (англ. selects) элемент/элементы, к которым вы хотите применить измененные значения. Например, Я хочу применить это CSS-правило ко всем параграфам в моем HTML-документе .

Набор правил CSS, содержащихся в таблице стилей(stylesheet), определяет, как должна выглядеть веб-страница. Более подробно о синтаксисе CSS вы узнаете в следующей статье модуля - .

Краткий пример CSS

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

и определяет собой абзац текста.">
(заметьте, что таблица стилей применяется к HTML с использованием элемента ):
Мой эксперимент с CSS

Hello World!

Это мой первый CSS-пример

Теперь давайте посмотрим на очень простой пример CSS, содержащий два правила:

Первое правило начинается с селектора h1 , который означает, что оно будет применено к элементу

. Оно содержит три свойства и три значения(каждая пара свойство/значение называется объявление ):

Первое объявление меняет цвет текста на синий.

Второе выставляет желтый фон тексту.

Третье создает границу вокруг текста шириной 1 пиксель, сплошную(не пунктирную, не штрих-пунктирную) и окрашенную в черный цвет.

Второе правило начинается с селектора p , который значит, что оно применится к элементу определяет собой абзац текста.">
. Оно содержит одно объявление, которое меняет цвет текста на красный.

Приведенный выше код в браузере отобразится вот так:

Это не очень красиво, но показывает, как работает CSS.

Активное обучение: Пишем наш первый CSS

Сейчас мы дадим вам возможность написать свой первый CSS. Вы можете сделать это, используя поле ввода, расположенное ниже, и увидеть это на живом редактируемом примере. У нас есть некоторые простые элементы HTML, а также некоторые свойства CSS. Так же, как показано выше, попробуйте добавить простые объявления в CSS, чтобы определить стиль HTML.

Если вы сделаете ошибку, вы всегда можете сделать сброс, используя кнопку Reset. Если вы чувствуете, что застряли, можете нажать "Показать решение", чтобы посмотреть решение.

Playable code

HTML Input

CSS Input

Output

Как на самом деле работает CSS?

Когда браузер отображает документ, он совмещает содержимое документа с информацией о стиле. Он обрабатывает документ в два этапа:

Браузер конвертирует HTML и CSS в DOM (англ. Document Object Model ). DOM представляет документ в память компьютера и применяет к содержимому стили.
Браузер отображает содержимое DOM.

О DOM

DOM имеет древовидную структуру. Каждый элемент, атрибут и кусочек текста в языке разметки представляется как узел DOM в этой структуре. Узлы определяются их отношением к другим DOM-узлам. Элементы могут иметь потомков, а потомки могут иметь братские(соседние) элементы.

Понимание DOM поможет вам в проектировании, отладке и поддержке вашего CSS, потому что DOM это место, в котором CSS встречается с содержимым документа.

Представление DOM

Вместо долгих и скучных объяснений давайте рассмотрим пример, который покажет, как DOM и CSS работают вместе.

Давайте рассмотрим представленный HTML-код:

В DOM узел, соответствующий элементу

Является родителем. Его дети являются текстовыми узлами и соответствуют элементу . Узлы SPAN также являются родителями, а их потомки -- текстовые элементы:

P ├─ "Let"s use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"

После интерпретации DOM-дерева браузером на выходе мы получим вот это:

Применение CSS к DOM

Let"s use: Cascading Style Sheets

Мы применим к нему этот CSS:

Span { border: 1px solid black; background-color: lime; }

Браузер проанализирует HTML и создаст DOM из него, а затем разберется с CSS. Поскольку у нас есть только одно правило, описывающее селектор span,то оно будет применено ко всем узлам документа с этим селектором. На выходе получим это.

Как применить ваш CSS к вашему HTML

Есть три различных варианта применения CSS к HTML-документу, которые встречаются чаще всего. Здесь мы рассмотрим каждый из них.

Внешняя таблица стилей

Вы уже сталкивались с внешней таблицей стилей в этой статье, но называли ее не так. Внешняя таблица стилей это отдельный файл с расширением.css, в котором и хранится CSS. Вы ссылаетесь на него из HTML при помощи элемента . HTML при этом выглядит так:

My CSS experiment

Hello World!

This is my first CSS example

Добавим CSS-файл:

H1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }

Этот метод, вероятно, лучший из всех, поскольку вы можете использовать одну таблицу стилей для нескольких документов. Чтобы обновить стили, достаточно внести изменения лишь в один CSS-файл.

Внутренняя таблица стилей

Внутренняя таблица стилей содержится внутри элемента содержит стилевую информацию для документа или его части. По умолчанию стилевые инструкции внутри этого элемента считаются написанными на CSS.">

Hello World!

This is my first CSS example

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

Встроенные стили

Встроенные стили - это объявление CSS, которое применимо только к одному элементу, и содержится в атрибуте style :

My CSS experiment

Hello World!

This is my first CSS example

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

Единственный случай, когда вам, возможно, придется прибегнуть к использованию встроенных стилей, это когда ваше рабочее окружение устанавливает ограничения (например, ваша CMS позволяет только редактировать HTML)

Что дальше

На этом этапе вы должны были понять, как работает CSS, и как с ним работают браузеры. Далее, вы узнаете о

Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML

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

Элементы

Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с