Основы работы с языком CSS
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Как правило, CSS команды (стили) хранятся в отдельном файле, который подключается специальным тегом ко всем HTML страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Если мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, то эти изменения применятся на всей тысяче HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Файл со стилями должен иметь расширение .css.
Чтобы подключить такой файл к HTML странице,
в теге head следует написать такую
конструкцию:
<link rel="stylesheet" href="имяФайла.
css">
В следующем примере к нашему HTML файлу подключается
CSS файл styles.css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>
Это абзац с текстом.
</p>
</body>
</html> Создайте и подключите ко всем вашим страницам
файл styles.css.
Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью
которого мы можем обратиться ко всем абзацам
HTML страницы и, например, покрасить их всех
одновременно в красный цвет.
После селектора следует ставить фигурные
скобки, внутри которых следует
писать CSS свойства.
Свойства и задают цвет, размер шрифта и другие
интересные вещи.
Их следует писать в таком
формате: имя свойства, потом двоеточие, потом
значение этого свойства (например, свойство
— это цвет, а «красный» — это значение).
Потом нужно поставить точку с запятой и можно
писать следующее свойство.
Давайте, например, покрасим все абзацы в красный цвет:
p {
color: red;
} В вашем файле styles.css разместите
код, красящий абзацы в красный цвет. Откройте
страницы вашего сайта в браузере и убедитесь
в том, что все абзацы стали красными.
Другие значения для цвета
Помимо ключевого слова red, задающего
красный, можно использовать и другие английские
слова для цвета, например, green —
зеленый, blue — голубой, yellow — желтый, orange — оранжевый, black — черный, white — белый.
Используя соответствующие селекторы покрасьте
заголовки h2 в зеленый цвет, заголовки h4 — в красный, а абзацы — в оранжевый.
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей. Электронный учебник
В бюро радикально переосмыслили формат электронной книги
О нашем формате❱
В бюро радикально переосмыслили формат электронной книги
Было
Существующие «е‑буки» далеки от высоких издательских стандартов оформления, неудобны для навигации и поиска. Типографика не выдерживает критики, причём шрифты и вёрстка неконтролируемы авторами и издателями. Книги случайно разбиты на экранные страницы — сколько ни открывай, одна и та же иллюстрация может оказаться наверху, внизу или даже на следующей странице. На планшете страницы сбиваются от случайного поворота устройства.
Стало
Бюрошная экранная книга соединяет удобство прокрутки и наглядность бумажной книги. Она поделена на развороты, которые можно прокрутить от начала до конца. Текст на развороте прокручивается, когда это необходимо, а иллюстрации сохраняют положение на экране. Читателю легко запомнить место и позднее вернуться к материалу.
Разворот — смысловая единица, а не результат математического деления книги на «экраны».
О нашем формате❱
Книга на экране
Благодаря интерактивному интерфейсу, читатель видит изменения и примеры в динамике. Иллюстрации сменяют друг друга в зависимости от положения в тексте.
bureau.ru
Есть несколько способов разложить элементы по странице. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position. Этим свойством элемент можно разместить в любом месте страницы, задав ему координаты. Есть пять значений свойства:
Static
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Relative
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative; left: 50px; top: 80px;
Fixed и sticky
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей.
Закреплённое позиционирование — гибрид между относительным и фиксированным.
Есть несколько способов разложить элементы по странице. Мы постепенно разберём их все, а начнём с самого простого — позиционирования свойством position. Этим свойством элемент можно разместить в любом месте страницы, задав ему координаты. Есть пять значений свойства:
Static
Это значение по умолчанию, отсутствие какого‑либо позиционирования. Элементы просто выстраиваются друг под другом.
Relative
Элемент с относительным позиционированием сдвигается со своего места, не влияя на положение соседних элементов.
position: relative; left: 50px; top: 80px;
Fixed и sticky
Элемент с фиксированным позиционированием ведёт себя так же, как с абсолютным, но при этом не прокручивается вместе со страницей. Закреплённое позиционирование — гибрид между относительным и фиксированным.
Проверка знаний
В бумажных книгах «вопросы в конце главы» вызывают недоумение и раздражение. Интерактивные тесты, наоборот, побуждают читателя попробовать свои силы на иллюстрированных примерах и мгновенно узнать результат.
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить
bureau.ru
Тест предлагает вопросы на знание материала и анализ примеров: что хорошо и плохо, как улучшить
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
Тесты помогают глубже понять материал. Если результат не устраивает, читатель снова изучает материал и пересдаёт тест
bureau.ru
Справочник приёмов вёрстки
Сразу запомнить все приёмы и правила вёрстки сложно, учебник используется как систематизированный справочник: читатель быстро находит нужные примеры кода в закладках, иллюстрированном оглавлении или поиске.
bureau.ru
К книге удобно обращаться за подсказками прямо во время работы
Примеры кода сопровождаются пояснениями и демонстрацией результата в виде готовой верстки
Примеры кода сопровождаются пояснениями и демонстрацией результата в виде готовой верстки
К книге удобно обращаться за подсказками прямо во время работы
К книге удобно обращаться за подсказками прямо во время работы
bureau.ru
Вопросы и ответы
Почему книги доступны только по подписке?
Наши книги — сервис. В книгах работает поиск, закладки, доступные на всех устройствах. Подписка питает создание новых книг, которые мы хотим сделать для улучшения мира и профессии, а не чтобы один раз заработать. Благодаря этой модели мы издаём то, что считаем правильным и нужным, а не то, что проще продать. Все наши книги обладают справочной ценностью, чтобы к ним хотелось вернуться для дела или удовольствия. Как только вы потеряете интерес или перестанете видеть пользу — просто отпишитесь.
Запись в фейсбуке Артёма Горбунова
Как подписаться?
Нажмите на кнопку «Подписка» в правом нижнем углу страницы книги.
Внизу страницы откроется панель, на которой мы попросим вас указать ваше имя, электронную почту и данные банковской карты. При этом вы сможете выбрать подписку себе или в подарок. После этого вы сможете нажать на кнопку «Подписаться» — деньги за первый год спишутся с карты. Вы или тот, кому вы дарите, получите письмо со ссылкой для доступа к книге.
Когда вы перейдёте по ссылке из письма, мы запомним вас на этом устройстве и вы сможете открывать книгу с её страницы.
На странице книг Издательства бюро можно увидеть, на какие из них вы подписаны. Рядом с каждой книгой, на которую вы подписаны, отображается зелёная галочка.
Если же вы уже указывали имя и карту ранее и вошли со своим адресом, вы сможете подписаться сами или подарить подписку знакомому одним нажатием на кнопку без дополнительного ввода данных и перехода по ссылке из письма.
Что делать, если книга не открывается?
После оформления подписки вы получили письмо со ссылкой для доступа к книге. Когда вы перейдёте по ссылке из письма, мы запомним вас на этом устройстве и вы сможете открывать книгу с её страницы. При этом запоминается история чтения, и книга открывается на последней прочитанной вами странице.
Но если наш сайт вас забывает, скорее всего, у вас не сохраняются куки. Это возможно в одном из двух случаев:
Что такое Бюросфера?
Как отменить подписку и что будет с книгой?
Если вы подписаны и авторизованы, на зелёной кнопке в правом нижнем углу будет галочка: «✓Подписка». Нажмите на кнопку, там будет ссылка «Отмена подписки». После отмены подписки книга станет вам недоступна. Когда захотите, вы сможете подписаться заново, но при этом нужно будет заново оплатить полную стоимость первого года (1200 ₽).
Все вопросы и ответы❱
Учебное пособие: добавление пользовательского макета страницы на ваш сайт
Редактировать Твиттер LinkedIn Фейсбук Электронная почта- Статья
При создании новых веб-страниц с использованием рабочего пространства «Страницы» у вас есть выбор из предоставленных макетов страниц. В некоторых случаях может потребоваться создать собственный макет страницы для отображения информации в определенном формате или для предоставления специализированного пользовательского интерфейса.
В этом руководстве вы узнаете, как создать собственный макет страницы с помощью Liquid.
В нашем примере сценарий состоит в создании простого шаблона с двумя столбцами, в котором главное меню сайта является левосторонней навигацией, а содержимое страницы — справа.
Ниже приведены следующие шаги и активы, которые будут созданы для предоставления пользовательского макета страницы:
- Мы создадим общий базовый веб-шаблон с пользовательским кодом для установки базового макета страницы.
- Мы создадим второй веб-шаблон с дополнительным кодом, чтобы продемонстрировать модульные функции веб-шаблонов.
- Мы также создадим запись шаблона страницы, ссылающуюся на веб-шаблон, который будет настраивать способ отображения макета страницы на сайте.
- Наконец, мы создадим веб-страницу, используя пользовательский макет страницы.
Необходимые условия
- Подписка или пробная версия Power Pages. Получите пробную версию Power Pages здесь.
- Создан сайт Power Pages. Создайте сайт Power Pages.
- Базовые знания HTML и Liquid.
Шаг 1: Создайте веб-шаблон и напишите код шаблона Liquid
Сначала мы создадим наш веб-шаблон и напишем код шаблона Liquid. Вероятно, мы будем повторно использовать некоторые общие элементы этого шаблона в будущих шаблонах. Итак, мы создадим общий базовый шаблон, который мы расширим нашим конкретным шаблоном. Наш базовый шаблон будет содержать навигационные ссылки, заголовок/заголовок нашей страницы и определять макет из двух столбцов.
Перейдите на Power Pages.
В студии дизайна выберите .
.. и затем выберите Управление порталом . Вам нужно будет использовать приложение Portal Management, чтобы создать запись веб-шаблона и ввести собственный код.В приложении Portal Management перейдите к разделу Content и выберите Web Templates
На экране Active Web Templates выберите New .
Назовите веб-шаблон Макет с двумя столбцами .
Вставьте следующий код в поле Source .
Макет с двумя столбцами (веб-шаблон)
<класс div=контейнер>
-
{% для крошки в page.breadcrumbs -%}
- {{ крошка.название }} {% конец для -%}
- {{ page.title }}
{{ page.
title }}
<класс деления=строка>{% block sidebar %}{% endblock %}{% block content %}{% endblock %}
.. и затем выберите Управление порталом . Вам нужно будет использовать приложение Portal Management, чтобы создать запись веб-шаблона и ввести собственный код.
title }}
Шаблон страницы необходим для нашего пользовательского макета страницы, чтобы его можно было выбрать при создании новой веб-страницы.
Мы только покроем создание основных частей макета и оставим на ваше усмотрение последние штрихи. 
