Содержание
Адаптивный дизайн — это стандарт, заключающийся в следующем: веб-сайт должен хорошо выглядеть независимо от платформы, с которой он просматривается.
Адаптивный дизайн
- Один из способов адаптации контента к размеру экрана — использовать медиазапрос:
<style> @media print { .screen-only { display: none; } } </style> <body> <p class="screen-only">This will not appear when printed</p> </body>
@media
является медиа-запросом, что означает, что следующий CSS будет применяться только в определенных ситуациях, а именно, когда веб-страница печатается..screen-only -
это селектор класса, который определяет, какой контент предназначен для печати:@media (min-width: 500px) { body { background-color: red; } } @media (max-width: 499px) { body { background-color: yellow; } }
- Если ширина экрана
body
менее 500 пикселей, цвет фона будет красным, а если он меньше 499 пикселей, цвет фонаbody
будет желтым. - Для взаимодействия с размером экрана необходимо включить в head следующее:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport
является видимой областью, на которой отображается экран.content
относится ко всей веб-странице,width
для которой устанавливаетсяdevice-width
.
- Еще один инструмент, который использует адаптивный дизайн — «flexbox». Flexbox позволяет реорганизовать контент в зависимости от размера области просмотра.
.container { display: flex; flex-wrap: wrap; }
- При установке
display: flex
иflex-wrap: wrap
, при необходимости, содержимое будет перенесено вертикально, поэтому оно не будет потеряно при уменьшении ширины экрана.
- При установке
- Сетка контента может быть достигнута аналогичным образом:
.grid { display: grid; grid-column-gap: 20px; grid-row-gap: 10px; grid-template-columns: 200px 200px auto; }
- При настройке
display: grid
все различные характеристики макета сетки могут использоваться для форматирования содержимого. В частности, при определенииgrid-template-colummns
, последний столбец может быть установлен наauto
, заполняя как можно больше места на экране. Если для нескольких столбцов установлено значениеauto
, они будут в равной степени разделять оставшееся пространство.
- При настройке
Подробнее о CSS
Селекторы CSS используются для выбора различных частей веб-сайта для стилизации определенным образом.
Некоторые общие CSS-селекторы:
- Выберите
h1
иh2:
h1, h2 {
color: red;
}
- Выберите все
li
потомкиol
(не обязательно прямые потомки):ol li { color: red; }
- Выберите все
li,
которые являются непосредственными детьмиol:
ol > li { color: red; }
- Выберите все поля
input
с атрибутомtype=text:
input[type=text] { background-color: red; }
- Выберите все
button
с псевдоклассомhover:
button:hover { background-color: orange; }
- «Псевдокласс» — это особое состояние элемента HTML. В этом примере указывается, находится ли курсор над кнопкой.
- Выбрать все
before
псевдоэлементы элементаa:
a::before { content: "\21d2 Click here: "; font-weight: bold; }
- «Псевдоэлемент» — это способ воздействия на определенные части HTML-элемента. В этом примере к селектору
before
применяетсяcontent
с указанным стилем перед содержимым всехa
элементов. \21d2
является шестнадцатеричным значением для значка Unicode, который может представлять символы, такие как эмодзи.
- «Псевдоэлемент» — это способ воздействия на определенные части HTML-элемента. В этом примере к селектору
- Выбрать все
selection
псевдоэлементы элементаp:
p::selection { color: red; background-color: yellow; }
Bootstrap
- Bootstrap — это библиотека CSS, созданная для создания чистых, адаптивных и привлекательных веб-сайтов без необходимости запоминать мельчайшие подробности о флексбоксах или сетках каждый раз, когда необходимо настроить макет.
- Единственное , что нужно для того, чтобы использовать Bootstrap, это добавить одну строку , которая связывает сайт с Bootstrap CSS стилями:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
. - CSS от Bootstrap заставит все выглядеть немного чище и современнее, но его реальная сила — в системе макетов. Bootstrap использует модель на основе столбцов, где каждая строка на веб-сайте разделена на 12 отдельных столбцов, и различным элементам может быть выделено разное количество столбцов для заполнения.
- В примерах Columns (см. ниже) Bootstrap столбцы и строки ссылаются в HTML с
class="row"
иclass="col-3"
атрибуты, где число послеcol-
это число столбцов, которые элемент должен использовать.- Элементы могут занимать различное количество столбцов в зависимости от размера экрана с такими атрибутами, как
class="col-lg-3 col-sm-6
. На маленьком экране будут использоваться 6 столбцов, но на большом экране будут использоваться 3 столбца. Если нужно добавить еще одну строку, Bootstrap сделает это автоматически. Это гораздо более простая альтернатива чему-то вроде flexbox (Bootstrap делает это за кулисами).
- Элементы могут занимать различное количество столбцов в зависимости от размера экрана с такими атрибутами, как
- Bootstrap имеет целый ряд других симпатичных компонентов, которые можно легко применить, просто добавив соответствующий
class
атрибут к элементу. Смотрите документацию Bootstrap для обширного изучения.
См подключение Bootstrap к отдельной странице WordPress.
Sass
- Sass — это совершенно новый язык, построенный поверх CSS, который дает ему намного больше возможностей и гибкости при разработке таблиц стилей CSS и позволяет генерировать таблицы стилей программным способом. В конечном счете, Sass просто облегчает написание CSS и упрощает адаптивный дизайн.
- Чтобы использовать Sass, он должен быть сначала установлен . После установки, мы можем выполнить
sass style.scss style.css
для компиляции файла наших Sassstyle.scss
вsass.css
, которые на самом деле могут быть связаны и интерпретирован HTML — файл.- Если перекомпиляция становится утомительной для разработчика,
sass --watch style.scss:style.css
автоматически перекомпилировать,style.scss
какstyle.css
приstyle.scss
изменении. Кроме того, многие системы развертывания веб-сайтов, такие как GitHub Pages, имеют встроенную поддержку Sass. Например, если.scss
файл помещен в GitHub, GitHub Pages скомпилирует его автоматически.
- Если перекомпиляция становится утомительной для разработчика,
- Одной из особенностей является Sass переменные, которые определяются как так:
$color: red;
. Anywhere$color
передается как значение для свойства CSS, напримерcolor: $color
,red
будет использоваться. - Другая особенность — вложение, которое является более кратким способом стилизовать элементы, которые определенным образом связаны с другими элементами.
div { font-size: 18px; p { color: blue; } ul { color: green; } }
- В этом примере все
p
внутриdiv
будут иметьcolor: blue
, но такжеfont-size: 18px
, в то время какul
внутриdiv
будут иметьcolor: green
, но все же такжеfont-size: 18px
.
- В этом примере все
- Еще одна полезная особенность — наследование, которое похоже на объектно-ориентированную концепцию. Наследование Sass позволяет немного изменить общий стиль для различных компонентов.
%message { font-family: sans-serif; font-size: 18px; font-weight: bold; } .specificMessage { @extend %message; background-color: green; }
%message
определяет общий шаблон, который может быть унаследован в других определениях стиля с использованием синтаксиса@extend %message
. Кроме того, могут быть добавлены другие свойства стиля.
Подробнее о Git
- «Ветвление» (Branching) — это функция Git, которая позволяет проекту перемещаться в нескольких разных направлениях одновременно. Существует одна
master
ветвь, которую всегда можно использовать, но можно создать любое количество новых веток для разработки новых функций. Когда все готово, эти ветви могут быть объединены обратно вmaster
. - При работе в Git-хранилище
HEAD
ссылается на текущую ветвь, над которой работает. Когда другая ветвь «извлечена», измененияHEAD
указывают новую рабочую ветвь. - При слиянии ветви обратно в
master
могут возникнуть конфликты слияния. - Некоторые команды Git, связанные с ветвлением:
git branch
: список всех веток, находящихся в данный момент в хранилище;git branch <name>
: создать новую ветку под названиемname;
git checkout <name>
: переключить текущую рабочую ветвь наname;
git merge <name>
: объединить веткуname
с текущей рабочей веткой (обычноmaster
).
- Любая версия репозитория, которая не хранится локально на устройстве, называется «удаленной». «Origin» используется для обозначения удаленного узла, с которого локальный репозиторий был первоначально загружен.
- Некоторые команды Git, связанные с пультами:
git fetch
: загрузить все последние коммиты с удаленного на локальное устройствоgit merge origin/master
: слияние сorigin/master
, которая является удаленной версией репозитория, обычно загружаемой сgit fetch
, в локальнуюmaster
ветвь с предварительным доступом;- Обратите внимание, что
git pull
эквивалентно запускуgit fetch,
а затемgit merge origin/master
- Обратите внимание, что
- «Вилка» (fork) репозитория — это совершенно отдельный репозиторий, который является копией исходного репозитория. Разветвленный репозиторий может управляться и изменяться, как и любой другой, и все это не влияет на оригинальную копию.
- Проекты с открытым исходным кодом часто разрабатываются с использованием вилок. Будет одна центральная версия программного обеспечения, которую участники будут расширять и улучшать, и когда они хотят, чтобы эти изменения были объединены в центральном репозитории, они отправляют «запрос на извлечение» (pull request).
- Запрос на извлечение может быть сделан для объединения ветки репозитория с другой ветвью того же репозитория или даже с другим репозиторием. Запросы на извлечение — это хороший способ получить отзывы об изменениях от соавторов в том же проекте.
- Обратите внимание, что форки и пул-запросы являются специфическими функциями GitHub.
Адаптивный дизайн: некоторые примеры
columns (адаптивный дизайн с bootstrap)
Пример 1
See the Pen
columns by Alla (@AllaJan)
on CodePen.
Пример 2
See the Pen
columns1 by Alla (@AllaJan)
on CodePen.
Пример 3
See the Pen
columns2 by Alla (@AllaJan)
on CodePen.
Адаптивный дизайн с flexbox