In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
-
+
Prerequisites:
@@ -50,44 +50,44 @@
Semantic HTML
-
Note: You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.
+
Note: You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.
-
The images
+
The images
-
The images are currently inaccessible to screenreader users. Can you fix this?
+
The images are currently inaccessible to screenreader users. Can you fix this?
-
The audio player
+
The audio player
-
The <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
-
The <audio> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
+
The <audio> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
+
The <audio> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
-
The forms
+
The forms
-
The <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
-
The two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
+
The <input> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
+
The two <input> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
-
The show/hide comment control
+
The show/hide comment control
-
The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?
+
The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?
-
The table
+
The table
-
The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?
+
The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?
-
Other considerations?
+
Other considerations?
-
Can you list two more ideas for improvements that would make the website more accessible?
+
Can you list two more ideas for improvements that would make the website more accessible?
-
Assessment
+
Assessment
-
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!
+
If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!
В CSS и JavaScript есть множество возможностей для создания доступных интерфейсов. Но это обоюдоострый клинок — при неосторожном обращении они могут доступности и значительно навредить. В этой статье мы рассмотрим лучшие практики в CSS и JavaScript, которые позволят даже сложному контенту оставаться доступным настолько, насколько это возможно.
Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.
-
+
Необходимые знания:
@@ -78,25 +78,25 @@
Текстовый контент
Одно из самых лучших вспомогательных средств доступности для пользователя скринридера — хорошая структура заголовков, параграфов, список и т.д. Пример хорошей семантики может выглядеть так:
-
<h1>Мой заголовок</h1>
+
<h1>Мой заголовок</h1>
-<p>Это первый раздел моей страницы.</p>
+<p>Это первый раздел моей страницы.</p>
-<p>Я добавлю ещё один параграф тут.</p>
+<p>Я добавлю ещё один параграф тут.</p>
<ol>
<li>Это</li>
<li>список для</li>
<li>чтения</li>
-</ol>
+</ol>
-<h2>Мой подзаголовок</h2>
+<h2>Мой подзаголовок</h2>
-<p>Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!</p>
+<p>Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!</p>
-<h2>Мой второй подзаголовок</h2>
+<h2>Мой второй подзаголовок</h2>
-<p>Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</p>
+<p>Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</p>
Мы подготовили версию с длинными текстом, чтобы вы попробовали со скринридером (смотрите good-semantics.html). Если вы попробуете поперемещаться, то увидите, как легко ориентироваться на странице:
@@ -109,24 +109,24 @@
Текстовый контент
Иногда люди используют презентационные элементы HTML и перенос строки, чтобы написать заголовки или параграфы:
-
<fontsize="7">Мой заголовок</font>
-<br><br>
-Это первый раздел моей страницы.
-<br><br>
-Я добавлю ещё один параграф тут.
-<br><br>
+
<font size="7">Мой заголовок</font>
+<br><br>
+Это первый раздел моей страницы.
+<br><br>
+Я добавлю ещё один параграф тут.
+<br><br>
1. Это
-
<br><br>
+<br><br>
2. список для
-<br><br>
+<br><br>
3. чтения
-<br><br>
-<fontsize="5">Мой подзаголовок</font>
-<br><br>
+<br><br>
+<font size="5">Мой подзаголовок</font>
+<br><br>
Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!
-<br><br>
-<fontsize="5">Мой второй подзаголовок</font>
-<br><br>
+<br><br>
+<font size="5">Мой второй подзаголовок</font>
+<br><br>
Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.
Если вы попробуете полную версию с помощью скринридера (смотрите bad-semantics.html), вам не слишком это понравится: скринридеру нечего использовать как ориентир, поэтому вы не сможете получить содержание, а вся страница для скринридера — это один большой блок, поэтому он озвучит всё за один раз, без остановок.
@@ -339,11 +339,11 @@
Д
Хотя дополнение, которые мы сделали, позволяет нам перемещаться по кнопкам с помощью Tab, оно не позволяет нам активировать их кнопкой Enter. Для этого нам необходимо добавить хитрый кусочек JavaScript:
Мы навешиваем обработчик событий на document для обнаружения нажатий с клавиатуры. Далее, через свойство объекта события keyCode, проверяем, какая кнопка была нажата. Если код клавиши совпадает с кодом клавиши Enter, мы выполняем функцию, которая хранится в обработчике кнопки onclick, используя document.activeElement.click().activeElement возвращает текущий сфокусированный элемент.
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.
Исходя из предыдущей статьи, иногда создание сложных элементов UI, которые включают в себя несемантичный HTML и динамически обновляемый с помощью JavaScript контент, может быть затруднено. WAI-ARIA - это технология, которая может помочь в решении таких проблем, добавляя дополнительную разметку, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. В этой статье мы покажем, как использовать эту технологию на базовом уровне для улучшения доступности.
+
Исходя из предыдущей статьи, иногда создание сложных элементов UI, которые включают в себя несемантичный HTML и динамически обновляемый с помощью JavaScript контент, может быть затруднено. WAI-ARIA - это технология, которая может помочь в решении таких проблем, добавляя дополнительную разметку, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. В этой статье мы покажем, как использовать эту технологию на базовом уровне для улучшения доступности.
-
+
Необходимые знания:
@@ -33,7 +33,7 @@
Новый набор пробле
С тех пор как веб-приложения стали более сложными и динамичными, появились новые специальные возможности и проблемы.
-
Например, HTML5 ввёл ряд семантических элементов, чтобы определить общую разметку страниц ( <nav>, <footer>и т.д.). До того как они были доступны, разработчики просто использовали <div> с идентификаторами или классами, например <div class="nav">, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.
+
Например, HTML5 ввёл ряд семантических элементов, чтобы определить общую разметку страниц ( <nav>, <footer>и т.д.). До того как они были доступны, разработчики просто использовали <div> с идентификаторами или классами, например <div class="nav">, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.
Первоначальным решением было добавить одну или несколько скрытых ссылок вверху страницы для ссылки на навигацию (или на что-то ещё), например:
@@ -46,7 +46,7 @@
Новый набор пробле
<input type="date">
<input type="range">
-
Они не очень хорошо поддерживаются в разных браузерах, и их очень сложно стилизовать, что делает их не очень полезными для интеграции с дизайном сайтов. В результате разработчики нередко используют библиотеки JavaScript, которые генерируют такие элементы управления, как последовательность вложенных <div>элементов или ячеек таблиц с именами классов, которые затем стилизуются с помощью CSS и управляют с помощью JavaScript.
+
Они не очень хорошо поддерживаются в разных браузерах, и их очень сложно стилизовать, что делает их не очень полезными для интеграции с дизайном сайтов. В результате разработчики нередко используют библиотеки JavaScript, которые генерируют такие элементы управления, как последовательность вложенных <div>элементов или ячеек таблиц с именами классов, которые затем стилизуются с помощью CSS и управляют с помощью JavaScript.
The problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean.
@@ -83,7 +83,7 @@
Where is WAI-ARIA supported?
Browser support is generally quite good — at the time of writing, caniuse.com stated that global browser support for WAI-ARIA was around 88%.
-
Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
+
Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's WAI-ARIA Screen reader compatibility article.
In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.
@@ -265,10 +265,10 @@
Form validation and error alerts
First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read Keeping it unobtrusive for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:
role="alert" automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like alert() calls have a number of accessibility problems; see Popup Windows by WebAIM).
WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the Signposts/Landmarks section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.
+
WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the aria-label property to provide a label where we don't want the label to be visible to sighted users (see the Signposts/Landmarks section, above). There are some other labelling techniques that use other properties such as aria-labelledby if you want to designate a non-<label> element as a label or label multiple form inputs with the same label, and aria-describedby, if you want to associate other information with a form input and have it read out as well. See WebAIM's Advanced Form Labeling article for more details.
-
There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.
+
There are many other useful properties and states too, for indicating the status of form elements. For example, aria-disabled="true" can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.
-
If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:
+
If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our form-validation-checkbox-disabled.html demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:
Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.
Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.
-
+
Прежде чем приступить:
@@ -26,7 +26,7 @@
Резюме
-
Запуск сайта может вам обойтись в сущее ничто, однако, ваши расходы могут достичь и критических значений. В этой статье мы обсудим, как дорого может что-либо стоить, и как вам получить то, за что вы заплатили (или не платили).
+
Запуск сайта может вам обойтись в сущее ничто, однако, ваши расходы могут достичь и критических значений. В этой статье мы обсудим, как дорого может что-либо стоить, и как вам получить то, за что вы заплатили (или не платили).
В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!
+
В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!
Эта статья покрывает первый и крайне важный шаг в создании любого проекта: определить, что вы хотите получить.
-
+
Необходимые знания:
@@ -25,7 +25,7 @@
Определение идеи проекта
-
Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.
+
Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.
Так что когда у вас появляется какая-то идея и желание воплотить её в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :
@@ -53,7 +53,7 @@
Более глубо
Примечание: Имеется неисчислимое множество способов, как сформулировать идею проекта. К сожалению, мы не можем собрать здесь все сразу (и даже увесистой книги не хватит). То, что мы представляем в этой статье - это простой способ выполнить шаги, которые профессионалы называют Project Ideation, Project Planning и Project Management.
-
Что же в конце концов я хочу получить?
+
Что же в конце концов я хочу получить?
Этот вопрос наиболее остро нуждается в ответе, поскольку ответ является решающим в дальнейших действиях. Лучше всего подойдёт список целей, которых вы хотите достичь. Это может быть что угодно: интернет-магазин, выражение политических взглядов, расширение круга общения, организация концертов, коллекционирование картинок с котиками, или что угодно ещё, что вы хотите получить.
@@ -85,7 +85,7 @@
Как сайт поможет мне в достижении цели?
+
Как сайт поможет мне в достижении цели?
И так, у вас есть конкретная цель и вам кажется, что для её достижения нужен веб-сайт. Вы уверены?
@@ -97,7 +97,7 @@
Что и в какие сроки должно быть реализовано для достижения целей?
+
Что и в какие сроки должно быть реализовано для достижения целей?
Теперь, когда вы уже узнали, что вам на самом деле нужно, настало время составить план, раскладывающий ваши цели на небольшие выполнимые шаги. Ещё нужно помнить, что все ваши планы не есть догмы. Они постоянно эволюционируют вместе с изменением курса проекта. К примеру, если вы вдруг вспомните о чем-то ранее неучтённом, или просто измените своё видение проекта.
графический пользовательский интерфейс Git для выполнения тех же задач, если вам неудобно работать с командной строкой.
-
Каждая операционная система поставляется с инструментом командной строки:
+
Каждая операционная система поставляется с инструментом командной строки:
Windows: Командную строку (Command Prompt) можно вызвать, нажав клавишу Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
@@ -77,7 +77,7 @@
Загрузка файлов
На текущей странице вас интересует раздел …or push an existing repository from the command line («...или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
-
Safari.Разработка ➤ Показать Web Inspector . Если вы не видите меню "Разработка", зайдите в Safari ➤ Настройки ➤ Дополнительно, и проверьте стоит ли галочка напротив "Показать меню разработки".
-
Opera. Меню ➤Разработка ➤ Инструменты разработчика. Если вы не видите меню "Разработка", включите его отображение, перейдя в Меню ➤ Другие инструменты ➤Показать меню разработчика.
Safari.Разработка ➤ Показать Web Inspector . Если вы не видите меню "Разработка", зайдите в Safari ➤ Настройки ➤ Дополнительно, и проверьте стоит ли галочка напротив "Показать меню разработки".
+
Opera. Меню ➤ Разработка ➤ Инструменты разработчика. Если вы не видите меню "Разработка", включите его отображение, перейдя в Меню ➤ Другие инструменты ➤ Показать меню разработчика.
Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт Исследовать Элемент. (дополнение: этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)
В данной статье мы узнаем, что такое ссылки и почему они важны.
-
+
Предварительно:
@@ -53,7 +53,7 @@
Активно изучаем
Глубокое погружение
-
Как мы определили, ссылка — это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть:
+
Как мы определили, ссылка — это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть:
Типы ссылок
@@ -61,7 +61,7 @@
Типы ссылок
Внутренняя ссылка
Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).
Внешняя ссылка
-
Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб — это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте.
+
Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб — это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте.
Входящие ссылки
Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.
@@ -85,7 +85,7 @@
Ссылки и по
Текст ссылки влияет на то, какой поисковый запрос выдаст URL.
Чем больше существует входящих ссылок на сайт, тем выше он будет в результатах поиска.
-
Внешние ссылки влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, — неизвестно.
+
Внешние ссылки влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, — неизвестно.
SEO (поисковая оптимизация) - это комплекс мер для "поднятия" позиции сайтов в поисковой выдаче. Оптимизация использования ссылок на сайте является одной из ключевых в SEO.
В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя.
-
+
Необходимые знания:
@@ -29,7 +29,7 @@
Summary
-
Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.
+
Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.
Каждый компьютер подключён к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., 173.194.121.32) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделённых двоеточиями (напр., 2027:0da8:8b73:0000:0000:8a2e:0370:1337). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.
Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру.
-
+
Предварительно:
@@ -130,11 +130,8 @@
Примеры относ
Дочерние ресурсы
-
-
Skills/Infrastructure/Understanding_URLs
-
-
-
Поскольку URL не начинается с /, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs
+
Skills/Infrastructure/Understanding_URLs
+
Поскольку URL не начинается с /, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs
В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны.
-
+
Необходимые
@@ -31,10 +31,10 @@
Введение
-
Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.
+
Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.
-
С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное mozilla.org.
+
С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное mozilla.org.
С точки зрения ПО, веб-сервер включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещённым на сервере файлам, как минимум — это HTTP-сервер. HTTP-сервер — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).
@@ -44,9 +44,9 @@
Введение
Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.
-
Статический веб-сервер, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещённые файлы в браузер «как есть».
+
Статический веб-сервер, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещённые файлы в браузер «как есть».
-
Динамический веб-сервер состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего сервера приложения и базы данных. Мы называем его «динамическим», потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.
+
Динамический веб-сервер состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего сервера приложения и базы данных. Мы называем его «динамическим», потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.
Например, для получения итоговой страницы, которую вы просматриваете в браузере, сервер приложений может заполнить HTML-шаблон данными из базы данных. Такие сайты, как MDN или Википедия, состоят из тысяч веб-страниц, но они не являются реальными HTML документами — лишь несколько HTML-шаблонов и гигантские базы данных. Эта структура упрощает и ускоряет сопровождение веб-приложений и доставку контента.
@@ -106,9 +106,9 @@
Связь по HTTP
Статический и Динамический контент
-
Грубо говоря, сервер может отдавать статическое или динамическое содержимое.«Статическое» означает «отдаётся как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.
+
Грубо говоря, сервер может отдавать статическое или динамическое содержимое.«Статическое» означает «отдаётся как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.
-
«Динамическое» означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.
+
«Динамическое» означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.
Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется Kuma, написан он на языке программирования Python (используя фреймворк Django). Команда Mozilla создала Kuma для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.
В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.
В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ .Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.
+
В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.
-
+
Необходимые умения:
@@ -32,7 +32,7 @@
Стилизация фона в CSS
-
CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке.Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
+
CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство background в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
.box {
background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
@@ -40,33 +40,33 @@
Стилизация фона в C
}
-
Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.
+
Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background.
Фоновый цвет
-
Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS.Свойство принимает любой допустимый цвет<color>.background-color распространяется на сам контент и отступы от него (padding).
+
Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет <color>. background-color распространяется на сам контент и отступы от него (padding).
-
В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.
+
В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.
-
Поиграйте с ними, используя любое доступное значение<color>.
+
Поиграйте с ними, используя любое доступное значение<color>.
Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента.В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.
+
Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.
-
Этот пример демонстрирует две особенности фоновых изображений.По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок.В нашем случае фактически было использовано изображение одной маленькой звезды.
+
Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.
Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом. Попробуйте добавить свойство background-color в приведённый выше пример, чтобы увидеть это в действии.
+
Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом. Попробуйте добавить свойство background-color в приведённый выше пример, чтобы увидеть это в действии.
Свойство background-repeat
-
Свойство {{cssxref ("background-repeat")}} используется для управления повторениями фонового изображения.Доступные значения:
+
Свойство {{cssxref ("background-repeat")}} используется для управления повторениями фонового изображения. Доступные значения:
no-repeat — останавливает повторение фонового изображения во всех направлениях.
@@ -75,46 +75,46 @@
Свойство background-repeat<
repeat — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.
-
Попробуйте эти значения в примере ниже.Мы установили значение no-repeat, поэтому вы видите только одну звезду.Попробуйте разные значения - repeat-x и repeat-y— чтобы увидеть, какие эффекты они оказывают.
+
Попробуйте эти значения в примере ниже. Мы установили значение no-repeat, поэтому вы видите только одну звезду. Попробуйте разные значения - repeat-x и repeat-y— чтобы увидеть, какие эффекты они оказывают.
В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является.В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения длины или в процентах, чтобы размер изображения соответствовал размеру фона.
+
В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения длины или в процентах, чтобы размер изображения соответствовал размеру фона.
-
Вы также можете использовать ключевые слова:
+
Вы также можете использовать ключевые слова:
-
cover— браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон.В этом случае часть изображения, скорее всего, окажется за пределами блока.
-
contain — браузер сделает изображение нужного размера, чтобы поместиться в блоке.В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.
+
cover — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
+
contain — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.
Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.
-
В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока.Вы можете посмотреть, как это исказило изображение.
+
В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.
Попробуйте следующее.
-
Измените значения длины, используемые для изменения размера фона.
+
Измените значения длины, используемые для изменения размера фона.
Измените значение длины на background-size: cover или background-size: contain.
-
Если ваше изображение меньше размеров блока, вы можете изменить значение свойства background-repeat, чтобы повторить изображение.
+
Если ваше изображение меньше размеров блока, вы можете изменить значение свойства background-repeat, чтобы повторить изображение.
Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке.При этом используется система координат, в которой левый верхний угол блока равен (0,0), а сам блок располагается вдоль горизонтальной (x) и вертикальной (y) осей.
+
Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой левый верхний угол блока равен (0,0), а сам блок располагается вдоль горизонтальной (x) и вертикальной (y) осей.
Примечание: По умолчанию значение background-position равно (0,0).
-
Обычно свойство background-position задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.
+
Обычно свойство background-position задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.
-
Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):
+
Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):
И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова.Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:
+
И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:
Примечание: background-position — это сокращение для {{cssxref("background-position-x")}} и {{cssxref("background-position-y")}}, которые позволяют вам устанавливать различные значения положения по оси индивидуально.
+
Примечание: background-position — это сокращение для {{cssxref("background-position-x")}} и {{cssxref("background-position-y")}}, которые позволяют вам устанавливать различные значения положения по оси индивидуально.
Градиент в качестве фона
-
Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.
+
Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.
-
Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <gradient>.Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот.Вы можете создать градиент, а затем скопировать и вставить его в свой код.
+
Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <gradient>. Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например этот. Вы можете создать градиент, а затем скопировать и вставить его в свой код.
-
Попробуйте использовать разные градиенты в примере ниже.В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.
+
Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.
Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image запятыми.
-
Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга.Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.
+
Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.
-
Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.
+
Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.
-
Другие свойства background- * также могут иметь значения, разделённые запятыми, как и background-image:
+
Другие свойства background- * также могут иметь значения, разделённые запятыми, как и background-image:
Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах.Выше, например, значение background-repeat для image1 будет no-repeat.Однако, что происходит, когда разные свойства имеют разное количество значений?Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position.Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.
+
Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.
-
Поиграем?В приведённом ниже примере я добавил два изображения.Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке.Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.
+
Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.
Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого.Это контролируется с помощью свойства {{cssxref ("background-attachment")}}, которое может принимать следующие значения:
+
Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства {{cssxref ("background-attachment")}}, которое может принимать следующие значения:
-
scroll: Заставляет элементы фона прокручиваться при прокрутке страницы.Если содержимое элемента прокручивается, фон не перемещается.Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
-
fixed: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента.Фон всегда будет оставаться на одном и том же месте на экране.
-
local: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите.Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.
+
scroll: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
+
fixed: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
+
local: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.
-
Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html(также смотри исходный код здесь).
+
Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на background-attachment.html (также смотри исходный код здесь).
-
Использование сокращённого свойства background
+
Использование сокращённого свойства background
-
Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}.Это сокращение позволяет вам одновременно устанавливать все различные свойства.
+
Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}. Это сокращение позволяет вам одновременно устанавливать все различные свойства.
-
При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой.В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением no-repeat и положением, затем цвет.
+
При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением no-repeat и положением, затем цвет.
-
При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:
+
При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:
background-color можно указывать только после последней запятой.
Значения background-size могут быть включены только сразу после background-position, разделённые символом '/', например: center/80%.
-
Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.
+
Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.
Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта.Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать background-color, который позволит тексту быть разборчивым, если изображение не загружается.
+
Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта. Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать background-color, который позволит тексту быть разборчивым, если изображение не загружается.
Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.
Границы
-
Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока.В этом уроке мы рассмотрим, как творчески использовать границы.Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.
+
Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.
-
Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:
+
Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:
.box {
border: 1px solid black;
}
-
Или мы можем нацеливаться на один край блока, например:
+
Или мы можем нацеливаться на один край блока, например:
Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз).Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.
+
Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.
-
Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.
+
Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.
Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.
-
+
Необходимые условия:
@@ -35,7 +35,7 @@
Конфликтующие п
CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово "каскадные" является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.
-
В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. Каскад и тесно связанная концепция специфичности— это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.
+
В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. Каскад и тесно связанная концепция специфичности — это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.
Также значимой является концепция наследования, которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.
@@ -45,7 +45,7 @@
Каскад
Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.
-
В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате h1 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.
+
В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате h1 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.
Селектор элементов ( например h1 ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
-
-
Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.
-
+
Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.
Например. Как указано ниже, у нас опять есть два правила, которые могут применяться к h1. h1 в результате будет окрашен красным цветом — селектор класса даёт своему правилу более высокую специфичность, поэтому он будет применён, несмотря на то, что правило для селектора элемента расположено ниже в таблице стилей.
@@ -163,32 +161,32 @@
Порядок следования
Специфичность
-
Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило.Это связано с тем, что более раннее правило имеет более высокую специфичность— оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.
+
Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило. Это связано с тем, что более раннее правило имеет более высокую специфичность — оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.
-
Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.
+
Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.
-
Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.
+
Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.
-
Такое поведение помогает избежать повторения в вашем CSS.Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются.Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения.Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.
+
Такое поведение помогает избежать повторения в вашем CSS. Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются. Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения. Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.
Давайте теперь посмотрим, как браузер будет вычислять специфичность.Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом.По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.
+
Давайте теперь посмотрим, как браузер будет вычислять специфичность. Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом. По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.
-
Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:
+
Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:
Тысячи: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
Сотни: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.
-
Десятки: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
-
Единицы: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.
+
Десятки: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
+
Единицы: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.
-
Примечание: Универсальный селектор (*), комбинаторы (+, >, ~, '') и псевдокласс отрицания (:not) не влияют на специфичность.
+
Примечание: Универсальный селектор (*), комбинаторы (+, >, ~, '') и псевдокласс отрицания (:not) не влияют на специфичность.
-
Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали.Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе всправочнике селекторов MDN.
+
Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в справочнике селекторов MDN.
@@ -245,16 +243,16 @@
Специфичность
-
Прежде чем мы продолжим, давайте посмотрим на пример в действии.
+
Прежде чем мы продолжим, давайте посмотрим на пример в действии.
Так что здесь происходит?Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.
+
Так что здесь происходит? Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.
-
Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
-
Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы.Таким образом, приоритетная специфичность составляет 113 против 104.
-
Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора.Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше.Седьмой селектор, однако, превосходит как пятый, так и шестой —он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса.Таким образом, приоритетная специфичность 33 против 23 и 24.
+
Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
+
Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
+
Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.
@@ -265,58 +263,58 @@
Специфичность
!important
-
Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — !important. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.
+
Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — !important. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.
-
Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.
+
Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.
Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:
+
Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:
-
Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
-
Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
-
Оба элемента имеют {{htmlattrxref("class")}} с названием better, но у второго также есть {{htmlattrxref("id")}} с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельнаячёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
-
2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления !important во втором правиле — размещение которого после border: noneозначает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.
+
Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
+
Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
+
Оба элемента имеют {{htmlattrxref("class")}} с названием better, но у второго также есть {{htmlattrxref("id")}} с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
+
2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления !important во втором правиле — размещение которого после border: none означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.
-
Примечание: Единственный способ переопределить объявление!important – это включить другое объявление !importantв правило с такой же специфичностью позже или в правило с более высокой специфичностью.
+
Примечание: Единственный способ переопределить объявление !important – это включить другое объявление !important в правило с такой же специфичностью позже или в правило с более высокой специфичностью.
-
Полезно знать о существовании !important, чтобы вы понимали, что это такое, когда встретите в чужом коде. Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости.!importantменяет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.
+
Полезно знать о существовании !important, чтобы вы понимали, что это такое, когда встретите в чужом коде. Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости.!important меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.
-
Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом.Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.
+
Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.
Влияние расположения CSS
-
Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочетустановить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.
+
Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.
Подведение итогов
-
Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:
+
Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:
-
Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).
-
Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).
Важные объявления в пользовательских таблицах стилей.
-
Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше — это может быть достигнуто с помощью использования!importantв их правилах.
+
Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше — это может быть достигнуто с помощью использования !important в их правилах.
-
Проверьте ваши навыки
+
Проверьте ваши навыки
Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Test your skills: the Cascade.
Что дальше?
-
Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS.Далее мы рассмотрим селекторы подробно.
+
Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.
-
Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь!Это, безусловно, самая сложная вещь из тех, что мы до сих пор изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной.Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.
+
Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.
-
Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете.Это может быть проблемой специфичности.
+
Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.
Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
-
Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
+
Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.
+
Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.
-
+
Необходимые знания:
@@ -26,17 +26,17 @@
Ка
Статья What are browser developer tools это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.
-
Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts, Flexbox, и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.
+
Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts, Flexbox, и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.
В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать файл примера. Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.
DOM vs View Source
-
То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когдапросматриваете источник веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на HTML панели DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.
+
То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда просматриваете источник веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на HTML панели DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.
В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <h2>, но закрыли </h3>, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать <h2> с </h2>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.
-
View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.
+
View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.
Инспекция применённого CSS
@@ -46,11 +46,11 @@
Инспекция пр
Если вы посмотрите на Rules view справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу box1 и также CSS который наследуется блоком от предков, в этом случае от <body>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.
-
Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись margin.
+
Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись margin.
Кликните по маленькой стрелке для того, чтобы развернуть вид, показывающий полную запись различных свойств и значений.
-
Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.
+
Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.
Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.
@@ -58,7 +58,7 @@
Редактирован
В дополнение к включению и выключению свойств, вы можете редактировать их значения. Возможно, вам захочется посмотреть будет ли другой цвет выглядеть лучше или захотите настроить размер чего-либо. DevTools поможет вам сэкономить кучу времени редактируя таблицу стиля и перезагружая страницу.
-
Выбрав box1, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. Аналогичным образом вы можете изменить ширину или стиль границ.
+
Выбрав box1, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. Аналогичным образом вы можете изменить ширину или стиль границ.
@@ -76,7 +76,7 @@
Добавление
Понимание модели блоков
-
В предыдущем уроке мы обсудили модель блоков и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.
+
В предыдущем уроке мы обсудили модель блоков и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.
Layout view показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений.
@@ -84,7 +84,7 @@
Понимание мод
Сравните два блока с классами box1 и box2. Они оба имеют одинаковую ширину (400px) применённую к ним, однако box1 визуально шире. В layout panel вы можете увидеть, что он использует content-box. Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding и ширину границ.
-
Элемент с классом box2 использует border-box, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае width: 400px.
+
Элемент с классом box2 использует border-box, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае width: 400px.
@@ -117,7 +117,7 @@
Решение
Узнайте больше о Firefox DevTools
-
На MDN имеется много информации о Firefox DevTools. Взгляните на основной раздел DevTools, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите The How To Guides.
+
На MDN имеется много информации о Firefox DevTools. Взгляните на основной раздел DevTools, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите The How To Guides.
Отладка проблем в CSS
@@ -142,7 +142,7 @@
-
Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства {{cssxref("shape-outside")}}.
+
Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства {{cssxref("shape-outside")}}.
{{compat("css.shape-outside")}}
@@ -150,11 +150,11 @@
Сделайте сокращённый контрольный пример проблемы
+
Сделайте сокращённый контрольный пример проблемы
-
Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.
+
Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.
-
Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля. Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.
+
Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля. Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.
Создание сокращённого контрольного примера:
@@ -165,7 +165,7 @@
Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.
+
В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.
If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.
Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.
Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.
В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.
-
+
Prerequisites:
@@ -41,7 +41,7 @@
Размер
Так что же мы можем сделать с проблемой перекрывания?
-
Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как <video> или <iframe>.
+
Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как <video> или <iframe>.
Попробуйте добавить max-width: 100% к элементу <img> в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.
@@ -59,7 +59,7 @@
Размер
Замещаемые элементы в вёрстке
-
При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
+
При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все <div> элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.
@@ -78,11 +78,11 @@
Замещае
Элементы форм
-
Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и Web Forms module содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.
+
Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и Web Forms module содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.
-
Многие элементы управления форм добавляются на вашу страницу с помощью элемента<input> — он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как <textarea> для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как <fieldset> и <legend>.
+
Многие элементы управления форм добавляются на вашу страницу с помощью элемента <input> — он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как <textarea> для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как <fieldset> и <legend>.
-
HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.
+
HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.
Важно: При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.
+
Важно: При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.
-
Как объяснено в уроке стилизация форм в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.
+
Как объяснено в уроке стилизация форм в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.
Наследование и элементы форм
@@ -112,7 +112,7 @@
Наследов
Элементы форм и box-sizing
-
В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство box-sizing в нашем уроке Блоки в CSS и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.
+
В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство box-sizing в нашем уроке Блоки в CSS и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.
Для единообразия рекомендуется устанавливать margin и padding на 0 для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.
@@ -135,7 +135,7 @@
Другие поле
Собираем все вместе в "перезагрузку"
-
В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
+
В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.
В этом уроке мы рассмотрим другую важную концепцию в CSS — переполнение. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.
Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе.В CSS вы можете использовать селекторы атрибутадля стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
+
Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
-
+
Необходимые условия:
@@ -27,9 +27,9 @@
-
Селекторы наличия и значения
+
Селекторы наличия и значения
-
Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например,href) или на всевозможных разного рода сочетаниях со значением атрибута.
+
Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.
@@ -43,29 +43,29 @@
Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
+
Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value]
a[href="https://example.com"]
-
Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
+
Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
[attr~=value]
p[class~="special"]
-
Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.
+
Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.
[attr|=value]
div[lang|="zh"]
-
Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.
+
Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.
-
В приведённом ниже примере вы можете увидеть использование этих селекторов.
+
В приведённом ниже примере вы можете увидеть использование этих селекторов.
Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
@@ -75,9 +75,9 @@
-
Селекторы вхождения подстроки
+
Селекторы вхождения подстроки
-
Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
+
Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
@@ -91,7 +91,7 @@
-
Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
+
Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
[attr$=value]
@@ -120,14 +120,14 @@
Чувствительность к регистру
-
Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значениеi перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.
+
Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.
-
В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.
+
В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.
Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.
+
Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.
Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.
В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.
Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.
Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
+
Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
-
Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
+
Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.
-
+
Необходимые условия:
@@ -23,14 +23,14 @@
Задача:
-
Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.
+
Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.
Селекторы типа
-
Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.
+
Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.
Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.
Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.
+
Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.
-
Использование универсального селектора для облегчения чтения ваших селекторов
+
Использование универсального селектора для облегчения чтения ваших селекторов
-
Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>:
+
Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдоклассах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>:
article :first-child {
font-weight: bold;
}
-
Однако этот селектор можно спутать сarticle:first-child, который выберет любой элемент<article>, являющийся первым дочерним элементом другого элемента .
+
Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .
-
Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс:first-child, чтобы было очевидно, что делает селектор.Он выбирает любой элемент, который является первым дочерним элементом элемента<article> или первым дочерним элементом любого потомкаэлемента<article>:
+
Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:
Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.
+
Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.
Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.
+
Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.
Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.
+
Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.
-
Нацеливание на элемент, к которому применено более одного класса
+
Нацеливание на элемент, к которому применено более одного класса
-
Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора.Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
+
Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
В примере ниже у нас есть <div>, содержащий примечание. Серая граница применяется когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.
-
Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только классdanger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.
+
Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.
В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.
Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.
Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании.
-
+
Prerequisites:
@@ -22,7 +22,7 @@
Что такое значение CSS?
-
В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.
+
В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <color> или <length>. Если вы видите значение <color> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <color>.
Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.
@@ -87,7 +87,7 @@
Длины
Абсолютные единицы длины
-
Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.
+
Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.
@@ -140,7 +140,7 @@
Абсолютные е
Единицы относительной длины
-
Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.
+
Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.
Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.
-
Шестнадцатеричные RGB значения
+
Шестнадцатеричные RGB значения
Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть 0123456789abcdef. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).
Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.
Первоначально используемое для "обтекания" картинок текстом, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.
-
+
Предварительные требования:
@@ -17,7 +17,7 @@
Задача:
-
Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.
+
Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.
@@ -65,7 +65,7 @@
Простой пример float
-
Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box:
+
Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу .box:
.box {
float: left;
@@ -77,7 +77,7 @@
Простой пример float
-
Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:
+
Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:
@@ -120,7 +120,7 @@
Float Example 1
Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на right и замените {{cssxref("margin-right")}} на {{cssxref("margin-left")}} в последнем наборе правил, чтобы увидеть каков результат.
-
В то время как мы можем добавлять margin к обтекаемому элементу чтобы оттолкнуть текст от него, мы не можем добавлять margin к тексту чтобы отодвинуть его от обтекаемого элемента. так происходит потому, что обтекаемые элементы изъяты из нормального потока, а следующие за ним блоки фактически располагаются за обтекаемым элементом. Вы можете продемонстрировать это, внеся некоторые изменения в ваш пример.
+
В то время как мы можем добавлять margin к обтекаемому элементу чтобы оттолкнуть текст от него, мы не можем добавлять margin к тексту чтобы отодвинуть его от обтекаемого элемента. так происходит потому, что обтекаемые элементы изъяты из нормального потока, а следующие за ним блоки фактически располагаются за обтекаемым элементом. Вы можете продемонстрировать это, внеся некоторые изменения в ваш пример.
Добавьте класс special к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.
@@ -235,7 +235,7 @@
Float Example 3
{{ EmbedLiveSample('Float_3', '100%', 600) }}
-
Вы должны увидеть, что следующий параграф очищает float элемента и больше не появляется рядом с ним. Свойство clear принимает следующие значения:
+
Вы должны увидеть, что следующий параграф очищает float элемента и больше не появляется рядом с ним. Свойство clear принимает следующие значения:
left: очищает объекты, обтекаемые слева.
@@ -313,11 +313,11 @@
Float Example 4
{{ EmbedLiveSample('Float_4', '100%', 600) }}
-
И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.
+
И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.
Clearfix hack
-
Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.
+
Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.
Добавьте следующий CSS в наш пример:
@@ -327,7 +327,7 @@
Clearfix hack
display: block;
}
-
Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как <div> ниже объекта и установили clear: both.
+
Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как <div> ниже объекта и установили clear: both.
@@ -433,11 +433,11 @@
Float Example 6
{{ EmbedLiveSample('Float_6', '100%', 600) }}
-
Этот пример работает путём создания того, что известно как Блочный Контекст Форматирования (block formatting context (BFC)). Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.
+
Этот пример работает путём создания того, что известно как Блочный Контекст Форматирования (block formatting context (BFC)). Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.
display: flow-root
-
Современный способ решения этой проблемы — это использование значения flow-root свойства display. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите overflow: auto из вашего правила .wrapper и добавьте display: flow-root. Если предположить, что у вас поддерживающий браузер, блок будет очищаться.
+
Современный способ решения этой проблемы — это использование значения flow-root свойства display. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите overflow: auto из вашего правила .wrapper и добавьте display: flow-root. Если предположить, что у вас поддерживающий браузер, блок будет очищаться.
Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше — см. Проверка ваших навыков: Floats.
+
Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше — см. Проверка ваших навыков: Floats.
Заключение
-
Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об устаревших методах макета устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.
+
Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об устаревших методах макета устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.
Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке Floats. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.
+
Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке Floats. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.
-
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.
+
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.
Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.
-Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах.
+Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах.
-
В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье.
-
+
Требования:
@@ -81,7 +81,7 @@
Свойство display
Вы можете изменить дефолтное поведение display. К примеру, {{htmlelement("li")}} отображается как display: block по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на inline они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML-элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.
-
В дополнение к возможности менять значение с block на inline и обратно, есть и другие возможности вёрстки с другими значениями display. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются display: flex и display: grid.
+
В дополнение к возможности менять значение с block на inline и обратно, есть и другие возможности вёрстки с другими значениями display. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются display: flex и display: grid.
Flexbox
@@ -165,7 +165,7 @@
Grid Layout
В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.
-
Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.
+
Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.
@@ -259,7 +259,7 @@
Grid example 2
Floats
-
Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке.Элемент перемещается влево или вправо и удаляется из нормального потока (normal flow), а окружающий контент обтекает плавающий элемент.
+
Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке. Элемент перемещается влево или вправо и удаляется из нормального потока (normal flow), а окружающий контент обтекает плавающий элемент.
Свойство {{cssxref("float")}} имеет четыре возможных значения:
@@ -270,7 +270,7 @@
Floats
inherit — Определяет, что значение свойства float должно быть унаследовано от родительского элемента.
-
В примере ниже мы задаём элементу <div> float - left и даём {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.
+
В примере ниже мы задаём элементу <div> float - left и даём {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.
@@ -322,16 +322,16 @@
Floats example
Методы позиционирования
-
Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, это больше об управлении и точной настройке положения определённых элементов на странице.
+
Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, это больше об управлении и точной настройке положения определённых элементов на странице.
-
Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство {{cssxref("position")}}. Понимание позиционирования также способствует пониманию нормального потока и того, что значит вывести элемент из нормального потока.
+
Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство {{cssxref("position")}}. Понимание позиционирования также способствует пониманию нормального потока и того, что значит вывести элемент из нормального потока.
Существует пять типов позиционирования о которых вам следует знать:
Static positioning (статическое позиционирование) — умолчание, которое получают все элементы — это всё лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".
Relative positioning (относительное позиционирование) позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.
-
Absolute positioning (абсолютное позиционирование) полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв <html> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.
+
Absolute positioning (абсолютное позиционирование) полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв <html> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.
Fixed positioning (фиксированное позиционирование) очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.
Sticky positioning (липкое позиционирование) это новый метод позиционирования, который заставляет элемент вести себя как position: static пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как position: fixed.
@@ -569,9 +569,9 @@
Sticky positioning example
Макет таблицы
-
HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже базовый CSSнадёжно поддерживался в браузерах — веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжёлая в вёрстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).
+
HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже базовый CSS надёжно поддерживался в браузерах — веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжёлая в вёрстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).
-
То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы. Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».
+
То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы. Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».
Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.
@@ -641,9 +641,9 @@
Макет таблицы
Многоколоночный макет
-
Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.
+
Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.
-
Чтобы превратить блок в многоколоночный контейнер мы используем свойство {{cssxref("column-count")}}, которое говорит браузеру сколько колонок мы хотим иметь, либо свойство {{cssxref("column-width")}}, которое говорит браузеру заполнить контейнер как можно большим количеством столбцов, по крайней мере, такой ширины.
+
Чтобы превратить блок в многоколоночный контейнер мы используем свойство {{cssxref("column-count")}}, которое говорит браузеру сколько колонок мы хотим иметь, либо свойство {{cssxref("column-width")}}, которое говорит браузеру заполнить контейнер как можно большим количеством столбцов, по крайней мере, такой ширины.
В примере ниже мы начинаем с HTML блоком, который содержится в элементе <div> с классом container.
Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке Макет с несколькими столбцами. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.
+
Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке Макет с несколькими столбцами. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.
-
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, or Glitch чтобы проработать задания.
+
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, or Glitch чтобы проработать задания.
Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.
-
+
Необходимые знания:
@@ -86,7 +86,7 @@
column-count example
}
-
Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.
+
Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.
@@ -184,7 +184,7 @@
Styling the columns
{{ EmbedLiveSample('Multicol_3', '100%', 400) }}
-
Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap.
+
Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap.
Свойств column-span
@@ -240,9 +240,9 @@
Spanning the columns
Столбцы и фрагментация
-
Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведёт себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.
+
Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведёт себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.
-
Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.
+
Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.
Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.
+
Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке Позиционирование. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.
-
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.
+
Примечание: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как CodePen, jsFiddle, или Glitch чтобы проработать задания.
В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.
+
В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.
Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать.
-
+
Необходимые знания:
@@ -28,9 +28,9 @@
Введение в позиционирование
-
Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент - позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.
+
Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент - позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.
-
Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство {{cssxref("position")}}.
+
Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство {{cssxref("position")}}.
Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px;, сила толкает блок, заставляя его перемещаться вниз на 30px.
+
Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали top: 30px;, сила толкает блок, заставляя его перемещаться вниз на 30px.
В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы;и так далее...
+
В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее...
-
Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является исходным содержащим блоком. См. раздел ниже для дополнительной информации).
+
Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является исходным содержащим блоком. См. раздел ниже для дополнительной информации).
-
Примечание: вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните...
+
Примечание: вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить top: 0; bottom: 0; left: 0; right: 0; и margin: 0; для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните...
@@ -184,9 +184,9 @@
Контекст по
Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. Определение содержащего блока).
-
Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в исходным содержащем блоке. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент {{htmlelement("html")}}. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.
+
Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в исходным содержащем блоке. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент {{htmlelement("html")}}. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.
-
Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен).Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body:
+
Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить контекст позиционирования — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего body:
position: relative;
@@ -239,7 +239,7 @@
Контекст по
Введение в z-index
-
Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?
+
Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?
Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:
@@ -250,11 +250,11 @@
Введение в z-index
right: 30px;
}
-
На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом .positioned, где они оба перекрываются. Это потому что параграф .positioned является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.
+
На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом .positioned, где они оба перекрываются. Это потому что параграф .positioned является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.
-
Можете ли вы изменить порядок наложения? Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).
+
Можете ли вы изменить порядок наложения? Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).
-
У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-indexauto, что фактически равно 0.
+
У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют z-indexauto, что фактически равно 0.
Для того чтобы изменить порядок наложения, попробуйте объявить для вашего p:nth-of-type(1) правила:
@@ -318,9 +318,9 @@
Введение в z-index
Фиксированное позиционированиее
-
А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), фиксированное позиционирование обычно фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что егосвойству transform отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.
+
А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), фиксированное позиционирование обычно фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его свойству transform отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.
-
Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.
+
Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила p:nth-of-type(1) и .positioned из вашего CSS.
А теперь, обновите правило body удалив объявление position: relative; и добавьте фиксированную высоту как тут:
@@ -343,7 +343,7 @@
Фикс
top: 0; необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.
-
Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:
+
Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:
Доступно другое значение позиции называемое position: sticky, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.
+
Доступно другое значение позиции называемое position: sticky, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.
@@ -440,7 +440,7 @@
Sticky positioning example
{{ EmbedLiveSample('Sticky_1', '100%', 200) }}
-
Интересное и общее использование position: stickyзаключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:
+
Интересное и общее использование position: sticky заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:
Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.
На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна(responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.
+
На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна(responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.
-
+
Необходимые знания:
@@ -27,18 +27,16 @@
Исторические макеты сайтов
-
В какой-то момент истории при разработке веб-сайта у вас было два варианта:
+
В какой-то момент истории при разработке веб-сайта у вас было два варианта:
Вы могли создать жидкий сайт, который будет растягиваться чтобы заполнить окно браузера
или сайт с фиксированной шириной, который будет иметь фиксированный размер в пикселях.
-
Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт!Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.
+
Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.
-
-
-
+
Примечание: Посмотрите этот простой жидкий макет: пример, исходный код. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.
@@ -46,9 +44,7 @@
Историческ
Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.
-
-
-
+
Примечание: Посмотрите этот простой макет с фиксированной шириной: пример, исходный код. Снова изучите результат по мере изменения размера окна браузера.
@@ -60,17 +56,17 @@
Историческ
Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.
-
Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.
+
Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.
Гибкий макет до отзывчивого дизайна
Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.
-
Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
+
Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - Fluid Grids (опубликовано в 2009 в A List Apart).
@@ -78,13 +74,13 @@
Отзывчивый дизайн
Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
-
Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.
+
Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.
-
Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
+
Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
Медиавыражения
-
Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.
+
Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.
Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.
@@ -107,7 +103,7 @@
Гибкие сетки
Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.
-
В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.
+
В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.
target / context = result
@@ -119,19 +115,15 @@
Гибкие сетки
}
-
Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
+
Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье Устаревших методов макетов. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:
-
-
-
+
На более широких экранах они перемещаются в два столбца:
В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrinkвы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
+
В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.
@@ -178,7 +170,7 @@
Flexbox
CSS grid
-
В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.
+
В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.
.container {
display: grid;
@@ -192,18 +184,18 @@
CSS grid
Отзывчивые изображения
-
Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:
+
Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:
img {
max-width: 100%;
}
-
Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.
+
Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.
-
Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размерадля устройства, которое они используют.
+
Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты srcset и sizes элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.
-
Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.
+
Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.
Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод.Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
+
Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
В мобильных версиях заголовок меньше:
-
-
-
+
На компьютерах, однако, мы видим больший размер заголовка:
Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
+
Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.
-
+
Необходимые знания:
@@ -326,7 +326,7 @@
@правила
@import 'styles2.css';
-
Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
+
Чаще других встречается @rules под названием @media: оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
Ниже у нас CSS-файл, в котором значение заднего фона элемента <body> равно pink. Однако после мы добавили правило @media, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.
Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу.
С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
-
+
С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
{{Glossary("CSS")}} (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.
-
-
-
-
-
-