Для управления текстом и изменения его вида существует достаточно большое количество различных элементов. Что не удивительно, ведь текст — это самый популярный вид информации.
Перед тем, как мы начнём наше путешествие по урокам создания сайтов на HTML и CSS, важно понимать различия между двумя языками, синтаксис каждого языка и некоторую основную терминологию.
- Что такое HTML и CSS?
- Основные термины CSS
- Селекторы
- Свойства
- Значения
- What Contains index.html?
- index.html Code
- index.html Basic Structure
- Location Of The index.html
- index.html vs index.htm
- index.html Alternatives
- Основные термины HTML
- Элементы
- Теги
- Атрибуты
- Демонстрация основных терминов HTML
- Заголовок страницы TITLE
- Мета-теги
- Внешний лист стилей
- Оформление страницы
- Содержание страницы
- Абзацы
- Подключение CSS
- Другие варианты добавления CSS
- Какие файлы и папки находятся на сервере
- Файл index.html (index.htm)
- Файл robots.txt
- Файл .htaccess
- ИТОГ
- Также
- Использование сброса CSS
- Кроссбраузерность и тестирование
- Особенности текста в HTML
- На практике
- Демонстрация и исходный код
- Ресурсы и ссылки
- Резюме
- Заголовки
- На практике
- Настройка структуры документа HTML
- Демонстрация структуры HTML-документа
- Самозакрывающиеся элементы
- Валидация кода
- Верхний и нижний индексы
- Создаем еще три страницы html.
- Переносы в тексте
- HTML справочник - дескрипторы и их атрибуты
- Специальные символы
- Работа с селекторами
- Селекторы типа
- Классы
- Идентификаторы
- Дополнительные селекторы
- Также
Что такое HTML и CSS?
HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.
Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.
При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.
Допустим наш сайт уже находится в интернете и имеет доменное имя «nemeckieavto.ru».
По ссылке nemeckieavto.ru/audi будет открываться наш файл audi.html
По ссылке nemeckieavto.ru/bmw будет открываться наш файл bmw.html
По ссылке nemeckieavto.ru/mercedes будет открываться наш файл mercedes.html
Теперь внимание! Для того, чтобы попасть на главную страницу нашего сайта, не нужно вводить в адресной строке nemeckieavto.ru/index, достаточно будет только ввести nemeckieavto.ru
Файл index.html в обязательном порядке присутствует абсолютно на любом сайте. Сайт не будет работать без этого файла.
В одностраничных сайтах присутствует только файл index.html, других файлов нет.
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: (от англ. superscript) — верхний индекс и (от англ. subscript) — нижний индекс. Текст,
помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.
Пример 1. Создание верхнего и нижнего
индекса
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Верхний и нижний индекс</title>
<style>
.formula { font-size: 1.4em; /* Размер текста формулы */ }
sup, sub {
font-style: italic; /* Курсивное начертание */
color: red; /* Красный цвет символов */
}
sub {
color: blue; /* Синий цвет символов */
}
</style>
</head>
<body>
<p>Характеристическое уравнение поверхности второй степени</p>
<p class=»formula»>λ<sup>3</sup> — I<sub>1</sub>λ<sup>2</sup> +
I<sub>2</sub>λ — I<sub>3</sub> = 0</p>
</body>
</html>
В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).
Рис. 1. Вид индексов после применения стилей
Можно вообще отказаться от использования и в пользу стилей. Аналогом этих элементов служит свойство , заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.
Пример 2. Использование стилей для управления индексами
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Верхний и нижний индекс</title>
<style>
.formula {
font-size: 1.6em; /* Размер текста */
font-style: italic; /* Курсивное начертание */
}
.sup, .sub {
font-style: normal; /* Нормальное начертание */
font-size: 0.6em; /* Размер индекса */
color: red; /* Цвет верхнего индекса */
vertical-align: 0.8em; /* Сдвигаем текст вверх */
}
.sub {
color: blue; /* Цвет нижнего индекса */
vertical-align: -0.5em; /* Сдвигаем текст вниз */
}
</style>
</head>
<body>
<p>Многочлен степени <em>n</em></p>
<p class=»formula»>f(x) = a<span class=»sub»>0</span> + a<span class=»sub»>1</span> x + … +
a<span class=»sub»>n-1</span> x<span class=»sup»>n-1</span> +
a<span class=»sub»>n</span> x<span class=»sup»>n</span></p>
</body>
</html>
В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).
Рис. 2. Управление положением и видом нижнего и верхнего индекса
Использование элемента делает код громоздким, поэтому лучше переопределить стили и , в частности, задать положение индекса, цвет и курсивное начертание.
Основные термины CSS
В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.
Селекторы
При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.
Селекторы, как правило, связаны со значением атрибута, вроде значения или или именем элемента, вроде или .
p { ... }Свойства
p {
color: ...;
font-size: ...;
}Значения
Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы > и устанавливаем значение свойства как , а значение свойства как 16 пикселей.
p {
color: orange;
font-size: 16px;
}Для проверки, в CSS наш набор правил начинается с селектора, затем сразу же идут фигурные скобки. В этих фигурных скобках располагаются объявления, состоящие из пар свойств и значений. Каждое объявление начинается со свойства, за которым следует двоеточие, значение свойства и, наконец, точка с запятой.
Распространённой практикой является сдвиг пары свойств и значений внутри фигурных скобок. Как и с HTML, отступы помогают держать наш код организованным и понятным.
Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения
Знание нескольких основных терминов и общего синтаксиса CSS — это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.
Websites provide a lot of web pages with different URLs but there are some defacto pages that exist most of the web sites. index.html is one of them. index.html is used as the main or entrance page for the whole web site or web application.
As its name suggests index.html consists of two words index and html. The index simply means shortlist for multiple items. In web terminology generally used to showcase the website pages, categories or parts on a single page. Html simply an extension for the index file which means the index file is an HTML file that contains HTML code or tags with some CSS and JavaScript code. index.html file generally resides in the root path of the web page and when the web site like http://www.poftut.com is requested by default index.html file is returned.
What Contains index.html?
index.html Code
There is no standard about the index.html code but there are some regular code parts generally used in index.html. Below we can see that the JavaScript code is defined inside the head part of the web page. Also, the links and menu are defined as the first element of the index.html.
index.html Basic Structure
When we look at an index.html file we can see that there is some basic structure that is mostly used in most of the web site’s other pages.
- `Menu` will contain shortcuts to other pages of the sites.
- `Main Content` generally contains information about the web site and some latest or generic or definitive information about the web site.
- `Footer` may contain some social media link, contact information, copyright information, etc.
Location Of The index.html
The index.html file is stored inside the web site root directory of the webserver. If the webserver is Apache2 the default path is /var/www and the web site folder name. If the webserver is IIS the path will be C:\inetpub\sites by default but change according to specific web site configuration.
index.html vs index.htm
Well, we can see some minor changes in the usage of the index.html web page. index.htm is an alternative to the index.html file. index.htm is generally used in Windows servers but almost the same HTML, CSS and JavaScript code is used.
index.html Alternatives
index.html was popular a long time ago. Currently, most of the web sites prefer index.php or nothing where index.html is not used. But there are some alternatives that are mostly used with dynamic server-side applications or sites like PHP , Python, ASP.NET, etc.
- `index.asp` is used by ASP.NET web sites or web applications.
- `index.php` is used by PHP web applications.
- `default.html` or `home.html` are also alternatives to the index.html.
Основные термины HTML
Перед началом работы с HTML вы, вероятно, столкнётесь с новыми и часто странными терминами. Со временем вы ознакомитесь со всеми ними подробнее, но сейчас вы должны начать с трёх основных терминов HTML — элементы, теги и атрибуты.
Элементы
Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с до ) и абзацев (определены как ); в список можно включить элементы , , , и и многие другие.
Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:
<a>Теги
Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.
Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, .
Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, .
Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег и закрывающий тег . Что находится между этими двумя тегами будет содержимым ссылки.
Так, теги ссылок будут выглядеть примерно так:
<a>...</a>Атрибуты
Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут , который идентифицирует элемент; атрибут , который классифицирует элемент; атрибут , который определяет источник встраиваемого содержимого; и атрибут , который указывает ссылку на связанный ресурс.
Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом будет выглядеть следующим образом:
<a data-hren="http://shayhowe.com">Shay Howe</a>Демонстрация основных терминов HTML
Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через в открывающем теге.
Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег
Теперь, когда вы знаете что такое элементы HTML, теги и атрибуты, давайте взглянем воедино на нашу первую веб-страницу. Если что-то выглядит здесь новым, не беспокойтесь — мы расшифруем всё по ходу.
Всю работу по рождению нового сайта мы уже проделали — сайт зарегистрирован и выложен в сети. Набрав в адресной строке браузера URL сайта, мы увидим содержимое главной страницы сайта (в нашем случае — это http://v-mire-givotnyh.ru). Пришло время заняться главной страницей, и привести ее в надлежащий вид. Напомним, что содержание нашей главной страницы пока следующее:
Заголовок страницы TITLE
Это очень важный тег, т.к. в нем отражается суть всей страницы, а в нашем случае, поскольку речь идет о главной странице ВСЕГО САЙТА, то заголовок должен, ни много, ни мало, — отражать суть ВСЕГО САЙТА! То что написано в тайтле страницы индексируется поисковиками в первую очередь и имеет очень важный вес при ранжировании страницы. Поэтому, в теге TITLE надо в краткой форме (50-60 символов) отразить всю суть содержимого страницы, при этом обязательно надо использовать ключевые слова и фразы, которые встречаются в тексте самой страницы.
Здесь сделаю небольшое отступление. Зачем делаются сайты? В общем-то, для разных целей. Но, возьмем «нормальную» цель создания сайта — сайты делаются для людей. Т.е., для нас с вами — рядовых пользователей Интернета. Сайты несут определенную информацию, которую мы ищем в сети. А как мы ищем информацию в подавляющем большинстве случаев? Конечно же, через запрос в поисковой системе (обычно Яндекс или Google). Поисковая система получает запрос и выдает результат поиска по многим сайтам. При этом на первые места ставятся сайты, информация на которых (по мнению поисковика) наиболее полно удовлетворяет введенному нами запросу. Задача вебмастера сделать свой сайт таким, чтобы по профилирующим запросам сайт находился как можно выше в выдаче поисковой системы. Чем выше сайт, тем больше посетителей мы получим на свой сайт (т.к., львиная доля посетителей на сайт приходит именно с поисковых систем). Такие вот профилирующие запросы и составляют ключевые слова и фразы, по которым наш сайт должен быть как можно выше в результатах поиска. Чтобы более полно уловить суть вышесказанного, рекомендую ознакомиться с разделом Оптимизация сайта.
Вернемся к нашим «баранам». Наш сайт называется «В мире животных». Поэтому, вполне логично будет в тайтле прописать такое название для сайта: В мире животных — сайт о жизни животных и их повадках.
Мета-теги
Далее, за тайтлом следует расположить основные мета-теги. Их не очень много, но пренебрегать ими не следует.
Итого мы вписали 4 мета-тега:
- определение кодировки html-страницы;
- заголовок страницы;
- описание страницы;
- ключевые слова страницы.
Внешний лист стилей
После мета-тегов, в самом конце тега HEAD пропишем следующую строку:
<link rel="stylesheet" data-hren="style.css" type="text/css">
Этой строкой мы подключили к данной странице внешний лист стилей, в котором содержится форматирование основных элементов страницы. В нашем случае внешний лист стилей находится в файле с именем style.css, и располагается в корне сайта. Пока мы сам файл еще не создали, но за этим дело не станет.
Теперь html-код главной страницы имеет следующий вид:
Оформление страницы
Пришло время подумать КАК будет выглядеть наш сайт. Вариантов множество. Остановимся на следующем:
- В верхней части сайта будет располагаться «шапка» сайта;
- Средняя часть сайта будет состоять из двух колонок: в правой будет навигация (она будет уже); в левой — основной контент сайта;
- В нижней части сайта будет расположен «подвал».
Верстать сайт будем с помощью таблиц, причем ширину таблиц сделаем фиксированной, таким образом, мы обезопасим себя от всяких неприятных сюрпризов верстки при смене разрешения экрана монитора. Поскольку 15 дюймовые мониторы практически уже вышли из употребления, то за минимальный размер экрана монитора возьмем стандартное разрешение 17 дюймового монитора — 1024*768. Исходя из этого, максимальная ширина таблицы при верстке не должна превышать 1024 пиксела. Ниже приведен код страницы с комментариями, для наглядности различные части страницы окрашены в разные цвета.
А вот как выглядит страница в браузере IE 8:
Содержание страницы
Теперь самое время наполнить страницу содержимым (контентом). При подготовке информационного материала следует придерживаться следующих «правил»:
- контент страницы должен быть уникальным и полезным (не стоит копировать информацию с других сайтов — таким образом вы очень быстро попадете под штрафные санкции поисковых систем, в результате сайт будет находиться очень низко в поисковой выдаче и посетителей не будет);
- текст на сайте должен быть составлен грамотно и без ошибок;
- где это уместно, надо подготовить и разместить соответствующие графические материалы;
- приветствуется наличие тематических ссылок на другие ресурсы Интернета, которые дополняют информацию на вашем сайте;
- объем информации на странице не должен быть слишком маленьким, или слишком большим — примерно от 1000 до 4000 знаков (от 1/2 до 2 страниц печатного текста);
- допускается размещение небольших цитат или выдержек с других сайтов (если это разрешается) с обязательной ссылкой на первоисточник.
В начало страницы
В начало страницы
Абзацы
Как правило, блоки текста разделяют между собой абзацами. По умолчанию между абзацами существует небольшой вертикальный отступ, называемый отбивкой. Синтаксис создания абзацев следующий.
<p>Первый абзац</p>
<p>Второй абзац</p>Каждый абзац начинается с открывающего тега и заканчивается закрывающим тегом . В примере 2 показано применение нескольких абзацев.
Пример 2. Использование абзацев
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Абзацы</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.</p>
<p>В одних краях ещё февраль, в других — уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век…</p>
<p>Во всём — его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять — апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Абзацы текста
Как видно из приведённого рисунка, при использовании элемента между абзацами возникают отступы. От них можно избавиться, если в местах переноса строк добавить элемент . В отличие от абзаца, не создаёт дополнительных вертикальных отступов между строк и может применяться практически в любом тексте.
Так, текст примера 1 с учётом переноса строк будет преобразован следующим образом (пример 3).
Пример 3. Использование <br>
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Переносы в тексте</title>
</head>
<body>
<p>В одних садах цветёт миндаль, в других метёт метель.<br>
В одних краях ещё февраль, в других — уже апрель.<br>
Проходит время, вечный счёт: год за год, век за век…<br>
Во всём — его неспешный ход, его кромешный бег.<br>
В году на радость и печаль по двадцать пять недель.<br>
Мне двадцать пять недель февраль, и двадцать пять — апрель.<br>
По двадцать пять недель в туман уходит счёт векам.<br>
Летит мой звонкий балаган куда-то к облакам.</p>
<p>М. Щербаков</p>
</body>
</html>
Результат примера продемонстрирован на рис. 3. Видно, что расстояние между строками текста уменьшилось и текст приобрёл более компактный вид.
Рис. 3. Вид текста с учётом переносов
Учтите, что один абзац нельзя вкладывать внутрь другого.
Подключение CSS
Чтобы заставить наш CSS говорить с нашим HTML мы должны указать на CSS-файл из HTML. Хорошей практикой является включение всех наших стилей в одном внешнем файле, на который есть указатель внутри элемента нашего HTML-документа. Использование одного внешнего CSS позволяет нам применять одни и те же стили по всему сайту и быстро вносить в него изменения.
Другие варианты добавления CSS
Другие варианты подключения CSS включают в себя использование внутренних и встроенных стилей. Вы можете встретить эти варианты в реальности, но они, как правило, не одобряются, так как делают обновление сайтов громоздким и неповоротливым.
Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением .css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.
Внутри элемента применяется элемент , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут со значением для указания их отношений. Кроме того, атрибут применяется для указания местоположения или пути к CSS-файлу.
В следующем примере HTML-документа элемент указывает на внешний стилевой файл.
<head>
<link rel="stylesheet" data-hren="main.css">
</head>Чтобы CSS отображался правильно, значение пути атрибута должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.
Если CSS-файл располагается в подпапке, то значение атрибута должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута будет . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.
На данный момент наши страницы начинают оживать, медленно, но верно. Мы пока не вникали в CSS слишком глубоко, но вы, возможно, заметили, что у некоторых элементов есть стили, которые мы не объявляли в нашем CSS. Это браузер навязывает свои собственные предпочтительные стили для этих элементов. К счастью, мы можем переписать эти стили достаточно легко, что мы и сделаем дальше с помощью сброса CSS.
Какие файлы и папки находятся на сервере
Как уже было сказано ранее, если процедура регистрации нового сайта прошла успешно, то через сутки-двое новый сайт будет доступен в сети Интернет.
Для начала давайте установим связь с нашим удаленным сервером и посмотрим что на нем находится, в качестве файлового менеджера для установки связи с сервером можно использовать программы CuteFTP, TotalCommander (или другой файловый менеджер, который вам больше по душе):
- залогиниваемся в свою админ-панель на хостинге;
- смотрим свои данные для ФТП-доступа: Хостинг — FTP-Shell;
- в файловом менеджере делаем новое FTP-соединение (обычно комбинация клавиш Ctrl+N);
- в окне нового соединения вводим необходимые данные для соединения из админ-панели хостинга;
- жмем кнопку «Соединить», если все введено правильно, файловый менеджер произведет соединение с удаленным сервером.
Более подробно процесс соединения с удаленным сервером описан на странице Загрузка сайта на сервер. Файловый менеджер CuteFTP.
Когда соединение произошло, файловый менеджер в одном окне показывает содержимое папки нашего компьютера, а в другом — корень вашей серверной папки. Что же там находится (описывается сервер hqhost.net):
- в корне находится папка domains, содержащая все ваши сайты на этом сервере;
- проходим путь: domains — v-mire-givotnih.ru (имя вашего сайта);
- наш сайт содержит две папки: html (файлы сайта), logs (лог-файлы, содержащие статистику посещений);
- папка html изначально содержит две папки: cgi-bin (служебная папка для хранения серверных скриптов), webalizer (статистика сайта);
- в папку html мы и будем выгружать файлы для своего сайта.
Ниже мы рассмотрим какие именно файлы должны находиться в корневой папке сайта.
Файл index.html (index.htm)
В корне сайта обычно находится множетсво различных файлов и папок. Если путь к файлу указан полоностью (например, http://v-mire-givotnyh.ru/index.html), то никаких вопросов не возникает — браузер находит файл и открывает его. Но, зачастую указывается неполный путь (например, http://v-mire-givotnyh.ru/) — как быть в этой ситуации? Какой файл нужно открывать? На момент написания статьи самым популярным веб-сервером является Apache. В большинстве случаев, он настроен таким образом, что при неявном указании пути ищется и открывается файл с именем index (index.html, index.htm, index.php). Файл с таким именем сервер считает файлом главной страницы, с которой надо начинать просмотр.
Поэтому, в корне сайта обязательно должен присутствовать файл главной страницы с именем index.
Чтобы возникало меньше непредвиденных ситуаций, возмите за правило в каждой вновь созданной папке (в которой планируется размещать html-страницы) первым делом определять файл главной страницы с именем index.html (index.htm).
Если по каким-то причинам ваш сервер не открывает по умолчанию файл главной страницы при неявном указании пути, то ситуацию можно исправить, прописав в конфигурационном файле .htaccess (о нем речь пойдет ниже) следующую строку:
DirectoryIndex index.html index.htm
Для главной страницы сайта подготовим и выгрузим на сервер файл с именем index.html следующего содержания:
Файл robots.txt
Robots.txt — это простой текстовый файл, который располагается в корне сайта, и предназначен для роботов поисковых систем. В этом файле указываются параметры индексирования сайта как для всех роботов сразу, так и для каждой поисковой системы по отдельности.
Более подробно о файле robots.txt читайте в хэлпе Яндекса или на специализированных ресурсах, например, robotstxt.org.ru/.
Посетив вышеуказанные ресурсы, вам будет понятна следующая запись в файле robots.txt, которую мы сделаем и потом выгрузим на сервер:
User-agent: * Disallow: /cgi-bin Disallow: /webalizer
Для тех, кто поленился почитать о robots.txt, скажем, что данная запись относится к роботам всех поисковых систем, и запрещает им индексировать содержимое папок cgi-bin, webalizer. Это вполне логично, т.к. содержимое этих папок не представляет никакой ценности посетителям вашего сайта.
Файл .htaccess
Файл .htaccess — это конфигурационный файл сервера Apache, в котором прописываются различные директивы, согласно которым сервер настраивает свою работу. Выше мы уже прописали в него одну директиву, которая указывает серверу какие файлы он должен открывать при неявном указании пути в строке браузера. Давайте сразу пропишем еще несколько полезных директив, которые заметно упростят нашу дальнейшую работу с сайтом.
ErrorDocument 404 /error_404.html
Еще одной полезной директивой будет подключение различных модулей к нашей html-странице (об этом поговорим позже). Для этого надо в файл .htaccess прописать директиву, которая позволяет серверу читать и исполнять встроенный в html-страницу, программный код php:
RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html
Всем желающим познакомиться ближе с конфигурированием сервера Apache посредством файла .htaccess, рекомендую посетить специализированный сайт htaccess.net.ru.
ИТОГ
Мы создали четыре важных файла, которые надо выгрузить в корень сайта:
- index.html — файл главной страницы сайта;
- error_404.html — файл-заглушка, если искомая страница не находится (содержимое этого файла подготовьте самостоятельно по аналогии с файлом index.html);
- robots.txt — файл для управления роботами поисковиков;
- .htaccess — конфигурационный файл сервера Apache.
Теперь при помощи файлового менеджера выгружаем подготовленный материал на свой сервер, и смотрим результат.
В начало страницы
В начало страницы
Также
Последнее изменение: 11.08.2018
Использование сброса CSS
Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.
Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.
Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.
Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.
Кроссбраузерность и тестирование
Как упоминалось ранее, разные браузеры отображают элементы по-своему. Важно признать значение кроссбраузерности и тестирования. Сайты не должны выглядеть исключительно одинаково во всех браузерах, но должны быть близки. Какие браузеры вы хотите поддерживать и в какой степени — это решение вы должны будете сделать на основе того, что лучше для вашего сайта.
Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.
Особенности текста в HTML
Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.
Любое количество пробелов идущих подряд, в браузере отображается как один
Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. То же правило относится к символам табуляции и переносу текста. Приведённые ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром. Отмечай мелом. Отрубай топором.</p>
<p>Измеряй микрометром.
Отмечай мелом.
Отрубай топором.</p>
Исключением из этого правила является элемент , содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине часто применяется для фрагментов программ, где важны пробелы (пример 1).
Пример 1. Использование <pre>
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>pre</title>
</head>
<body>
<pre>public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith(«http://») || url.startsWith(«https://»)) {
view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
return true;
} else {
return false;
}
}</pre>
</body>
</html>
Результат данного примера показан на рис. 1.
<img src="https://webref.ru/assets/images/html-tutorial/text-pre.png" alt="Текст внутри
">
Рис. 1. Текст внутри <pre>
Текст занимает всю ширину окна браузера
Если вы просто напишете одну длинную строку в коде HTML, то в браузере она будет отформатирована так, чтобы текст поместился по ширине. Под форматированием подразумевается автоматическое добавление переносов текста там, где есть пробел или дефис. Соответственно, переносы текста будут меняться в зависимости от диагонали экрана устройства и размеров окна браузера.
На практике
Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.
- Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
- Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.
Просматривая файл index.html в браузере мы можем видеть, что элементы и уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт, скопируйте код и вставьте его в верхней части нашего файла main.css.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }- Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент в , сразу после элемента .
- Поскольку мы указываем на стили через элемент добавьте атрибут со значением .
Мы также включим ссылку на наш файл main.css используя атрибут . Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута , который является путём к нашему файлу main.css, должно быть .
<head> <meta charset="utf-8"> <title>Styles Conference</title> <link rel="stylesheet" data-hren="assets/stylesheets/main.css"> </head>Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.
Рис. 1.04. Наш сайт Styles Conference со сбросом CSS
Демонстрация и исходный код
Ресурсы и ссылки
- Common HTML terms via Scripting Master
- CSS Terms & Definitions via Impressive Webs
- CSS Tools: Reset CSS via Eric Meyer
- Normalize.css via Nicolas Gallagher
- An Intro to HTML & CSS via Shay Howe
Резюме
Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.
Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.
Напомним, что мы рассмотрели следующее:
- Разница между HTML и CSS.
- Знакомство с элементами HTML, тегами и атрибутами.
- Настройка структуры вашей первой веб-страницы.
- Знакомство с селекторами CSS, свойствами и значениями.
- Работа с селекторами CSS.
- Указатель на CSS из HTML.
- Важность CSS сброса.
Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.
Заголовки
Заголовки выполняют важную функцию на веб-странице — с их помощью происходит систематизация текста и определяется иерархия подразделов. Это учитывается поисковыми системами при индексации веб-страницы и при отображении результатов поиска.
В HTML для заголовков есть шесть элементов от до . Элемент определяет заголовок первого уровня, он самый значимый и применяется обычно для заголовка статьи или поста блога. Элемент определяет заголовок второго уровня, он используется, как правило, для подзаголовков. Последним по иерархии идёт .
Синтаксис создания заголовков показан в примере 4.
Пример 4. Добавление заголовков
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовки в тексте</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>
Результат данного примера показан на рис. 4. Содержимое элемента отображается самым крупным шрифтом жирного начертания, а — самым мелким.
Рис. 4. Вид заголовков на веб-странице
Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.
На практике
В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!
- Откройте текстовый редактор, создайте новый файл с именем index.html и сохраните его в место, которое не забудете. Я собираюсь создать папку на рабочем столе с именем styles- conference и сохранить этот файл в ней; не стесняйтесь делать то же самое.
В файле index.html добавим структуру документа, в том числе тип документа и элементы , и .
<!DOCTYPE html> <html lang="ru"> <head> </head> <body> </body> </html>Внутри элемента добавим элементы и . Элемент должен включать в себя правильные атрибуты и значение, в то время как элемент должен содержать название страницы, скажем «Styles Conference».
<head> <meta charset="utf-8"> <title>Styles Conference</title> </head>Внутри элемента добавим элементы и . Элемент должен включать в себя желаемый заголовок — давайте снова воспользуемся «Styles Conference», а элемент должен включать в себя простой абзац для представления нашей конференции.
<body> <h1>Styles Conference</h1> <p>Каждый год самые яркие веб-дизайнеры и фронтенд-разработчики собираются в Чикаго, чтобы обсудить новейшие технологии. Присоединяйся к нам этим августом!</p> </body>Пришло время взглянуть на то, что мы сделали! Отыщем наш файл index.html (у меня он находится в папке styles-conference на рабочем столе). Дважды щёлкнув по этому файлу или перетащив его в браузер мы откроем его для просмотра.
Рис. 1.02. Наши первые шаги при создании сайта Styles Conference
Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.
Настройка структуры документа HTML
HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.
Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: , , и .
Объявление типа документа или находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто . После этого идёт элемент означающий начало документа.
Внутри элемент определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.
Всё видимое содержимое веб-страницы будет находиться в элементе . Структура типичного HTML-документа выглядит следующим образом:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Привет, мир!</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это веб-страница.</p>
</body>
</html>Демонстрация структуры HTML-документа
Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент включает в себя заголовок через элемент и абзац текста через . Поскольку и заголовок и абзац вложены в элемент , они видны на веб-странице.
Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента и вложены и сдвинуты внутри элемента . Структура отступов для элементов продолжается с новыми добавленными элементами внутри и .
Самозакрывающиеся элементы
В предыдущем примере элемент был единственным тегом, который не включал закрывающий тег. Не переживайте, это было сделано намеренно. Не все элементы состоят из открывающих и закрывающих тегов. Некоторые элементы просто получают содержимое или поведение через атрибуты в пределах одного тега. является одним из таких элементов. Содержимое элемента в примере присваивается с помощью атрибута и значения. К другим типичным самозакрывающимся элементам относятся:
Приведённая структура, сделанная с помощью объявления типа документа и элементов , и , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.
Валидация кода
Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS, которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.
Верхний и нижний индексы
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз (рис. 5). В зависимости от положения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: — верхний индекс (от англ. superscript) и — индекс нижний (от англ. subscript). Текст внутри этих элементов обозначается меньшим размером, чем обычный текст, и смещается вверх или вниз.
Рис. 5. Базовая линия текста
В примере 5 показано применение нижнего индекса для химической формулы.
Пример 5. Использование нижнего индекса
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Нижний индекс</title>
</head>
<body>
<p>Формула серной кислоты: H<sub>2</sub>SO<sub>4</sub></p>
</body>
</html>
Результат данного примера показан на рис. 6.
<img src="https://webref.ru/assets/images/html-tutorial/text-sub.png" alt="Использование элемента ">
Рис. 6. Использование элемента <sub>
В примере 6 показано применение верхнего индекса для математической формулы.
Пример 6. Использование верхнего индекса
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Верхний индекс</title>
</head>
<body>
<p>ax<sup>2</sup> + bx + c</p>
</body>
</html>
Результат данного примера показан на рис. 7.
<img src="https://webref.ru/assets/images/html-tutorial/text-sup.png" alt="Использование элемента ">
Рис. 7. Использование элемента <sup>
Создаем еще три страницы html.
На 2-ом уроке мы создали папку "Сайт" и в ней создали файл с расширением html. Скорее всего этот файл у Вас называется "new 0". Сейчас давайте в этой папке создадим еще 3 файла. Чтобы не заморачиваться с расширением и с кодировкой (2 урок), можно просто сделать 3 копии нашего файла "new 0". Таким образом у нас получится 4 файла с расширением html. Перед тем как сделать копии, удалите все html коды, которые мы писали в процессе работы. Оставьте только теги относящиеся к структуре html страницы.
С этими файлами мы будем работать в следующих уроках. Теперь давайте переименуем файлы и дадим им имена audi.html, bmw.html, mercedes.html и index.html. Не используйте в названии файлов заглавные буквы, с чем это связанно, Вы узнаете из следующего урока. Внимание! Если я пишу, что файл должен иметь имя, например, bmw.html, то это не значит что нужно дать ему имя bmw.html, это значит ,что файл должен иметь имя bmw, а html - это расширение (тип) файла, а не часть его имени!
Для тех, кто в танке, в результате в папке "Сайт" у нас 4 файла с расширением html:
Если по умолчанию у Вас стоит браузер FireFox, то вид ваших файлов будет как на рисунке. Если же по умолчанию установлен другой браузер, то и файлы будут с изображением другого браузера.
ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ
Переносы в тексте
HTML произвольно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах вместо пробела применяется неразрывный пробел , как показано в примере 8.
Пример 8. Неразрывный пробел
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пробел</title>
</head>
<body>
<p>Возврат к стереотипам аннигилирует глубокий
полифонический роман, именно об этом говорил
Б. В. Томашевский в своей работе
1925 года.</p>
</body>
</html>
И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент или спецсимвол . И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 9). Есть только небольшая разница в отображении — добавляет при переносе дефис, а нет.
Пример 9. Переносы в тексте
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Переносы</title>
</head>
<body>
<p>Название орудия — сорока­пяти­миллиметровая
противотанковая пушка образца 1942 года (М-42).</p>
</body>
</html>
Последнее изменение: 01.06.2020
HTML справочник - дескрипторы и их атрибуты
В таблице представлены наиболее часто употребляемые теги (тэги) html-страницы и их атрибуты. Любознательные веб-мастера могут ознакомиться с более полным Обзором HTML-тегов, в котором дано краткое описание каждого тега с примером использования.
В начало страницы
В начало страницы
Специальные символы
Преимуществом кодировки UTF-8 является то, что она позволяет напрямую вставлять символы, которых на клавиатуре нет, к примеру знаки зодиака. На сайте utf8icons.com вы можете найти множество различных символов, скопировать их и вставить в свой код HTML. Главное, чтобы текстовый редактор поддерживал кодировку UTF-8.
При этом некоторые символы нельзя вставлять в код напрямую. К примеру, если в тексте понадобились символы < и >, а вы вставите их в код, то HTML воспримет их как теги, что может привести к ошибке отображения. В подобных случаях используется специальная форма написания, показанная в табл. 1.
Спецсимвол начинается с амперсанда, затем идёт текстовое обозначение символа и заканчивается всё точкой с запятой. Любое отклонение от такой формы записи приведёт к тому, что символ отображаться не будет.
Таким образом, чтобы вывести код HTML, в тексте мы используем следующую запись (пример 7).
Пример 7. Использование спецсимволов
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Угловые скобки</title>
</head>
<body>
<p><meta charset="utf-8"></p>
</body>
</html>
Работа с селекторами
Селекторы, как уже упоминалось ранее, указывают, какие элементы HTML будут стилизованы. Важно полностью понимать как использовать селекторы и как они действуют. Первым шагом должно стать знакомство с различными типами селекторов. Мы начнём с самых основных селекторов: селекторы типа, классы и идентификаторы.
Селекторы типа
Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы мы должны использовать селектор . Следующий код показывает селектор типа для элементов , а также соответствующий HTML.
div { ... }<div>...</div>
<div>...</div>Классы
Классы позволяют выбрать элемент на основе значения атрибута . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.
Классы позволяют применять одинаковые стили сразу к разным элементам, используя то же значение атрибута для нескольких элементов.
В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута , включая элементы и .
.awesome { ... }<div class="awesome">...</div>
<p class="awesome">...</p>Идентификаторы
Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута , идентификаторы используют значение атрибута в качестве селектора.
Независимо от типа отображаемого элемента, значение атрибута может быть использовано только один раз на странице. Если присутствуют, то они должны быть зарезервированы для важных элементов.
В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута . Здесь идентификатор выберет только элемент, содержащий атрибут со значением .
#shayhowe { ... }<div id="shayhowe">...</div>Дополнительные селекторы
Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.
Ладно, начинаем собирать всё вместе. Мы добавляем элементы на страницу внутри нашего HTML, затем можем выбрать эти элементы и применить к ним стили с помощью CSS. Теперь давайте соединим точки между HTML и CSS, чтобы эти два языка работали вместе.
Также
Последнее изменение: 11.03.2020
