Таблица стилей CSS в SharePoint Designer

Как подключить таблицу стилей CSS для различных элементов одностраничного сайта в программе SharePoint Designer? Конечно, когда Вы сайт уже сделали, подключать новые стили CSS бессмысленно. Поэтому давайте в SharePoint Designer создадим новый файл через пункт меню Файл — Создать. И сразу откройте html-код, чтобы лучше видеть те изменения, которые будут в нем происходить в процессе Вашей работы.

Нажмите на Формат — Создать стиль, либо выберите соответствующую опцию в окне Управление стилями. В окошке Значение выбора: выберите в раскрывающемся списке body. Оставьте Определить в: текущей странице. И определите для всего сайта стили CSS: шрифт, размер, цвет и так далее. К примеру, можно выбрать

font-family: Arial, Helvetica, sans-serif;
font-size: 18px (в поле пропишите вручную);
font-weight: bold;
color: выберите темно-синий.

Когда Вы выбираете цвет, в окошке появляется код цвета. При желании, код нужного цвета можно прописать и вручную. Нажмите ОК. В html-коде сайта в таблице стилей CSS появляется следующее:

body {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
color: #000080;
}

Теперь переключитесь на Конструктор, и попробуйте что-нибудь написать. Вы увидите, что текст будет темно-синим, жирным, размер 18 пикселей, со шрифтом Arial.

Если Вы переключитесь назад в Код, то увидите, что видимый текст, который Вы только что написали, окружен тэгами <p>, и никаких лишних кодов непосредственно в видимой части сайта нет: все форматирование находится в таблице стилей CSS отдельно от текста.

Исходя из этого алгоритм создания сайта будет следующий. Сначала Вы создаете таблицы, прописываете текст, ставите картинки и другие элементы сайта, но ничего не форматируете. Когда все создадите, начинаете создавать таблицу стилей CSS для всего сайта целиком, и для его различных элементов. При этом Вы смотрите в Конструкторе и в браузере, какие изменения происходят на сайте. И только затем, когда это действительно необходимо, прописываете форматирование для различных элементов путем их выделения.

Давайте еще поработаем с таблицей стилей CSS и посмотрим, какие возможности перед нами открываются.

В поле: Значение выбора: Вы можете присвоить стиль CSS всему документу (body), ссылке (a), заголовку (от h1 до h6), таблице (table) и так далее, вариантов выбора очень много. Также в этом поле можно создать класс или идентификатор, а потом их присвоить различным фрагментам Вашего сайта.

Слева Вы увидите поле Категории. Когда Вы нажимаете на любую из категорий, открывается набор атрибутов, этой категории соответствующих. Этих атрибутов огромный выбор. Практически все возможности таблицы стилей CSS перед Вами. Пробуйте, изучайте стили CSS, и применяйте на практике: программа SharePoint Designer дает хорошие подсказки тем, кто со стилями CSS хоть немного знаком.

Как, например, задать цвет и картинку фона для сайта? В поле Значение выбора: выбираете body, затем выбираете категорию Фон, и выбираете цвет фона (background-color) и картинку фона (background-image). Файл картинки, естественно, должен быть в папке сайта. Кстати, всегда цвет фона подбирайте в тон основного цвета картинки фона, потому что когда картинка не сразу загружается, именно цвет фона будет виден поначалу, пока картинка не загрузится. Там же Вы можете задать свойство неподвижности для фона, если Выберете background-attachment: fixed.

А если Вы захотите сделать так, чтобы все ссылки на Вашем сайте при наведении на них мышкой становились, например, красными. нужно сделать следующее: в поле Значение выбора: выбираете a:hover — это ссылка с наведенным на нее курсором. А в категории Шрифт выберите color: красный. После того, как Вы это сделаете, в таблице стилей CSS появится еще один стиль:

a:hover {
color: #FF0000;
}

И все ссылки на сайте, уже созданные, или те, которые будут создаваться, при наведении на них мышкой будут менять цвет на красный.

Стили CSS можно не только добавлять новые, но и редактировать уже существующие. Для редактирования заходите в Формат — Стили CSS — Управление стилями.  Справа Вы увидите это окошко: Управление стилями: в нем Вы увидите стили CSS, которые есть на сайте. Нажимаете правой клавишей на нужном стиле, и выбираете Изменить стиль. Появляется окошко, в котором Вы можете добавить новый атрибут к стилю, или удалить, или отредактировать уже добавленный атрибут.

Например, давайте отредактируем стиль a:hover, который Вы уже создали. В окошке Управление стилями нажимаете на него правой клавишей, выбираете Управление стилями, и в открывшемся окне добавляете новый атрибут. Пусть это будет увеличенный размер шрифта. Выберите font-size: xx-large. Нажмите ОК. Сохраните изменения и посмотрите в браузере, что получится: цвет ссылки при наведении на нее мышкой должен увеличиваться.

А если Вы, например, не хотите, чтобы ссылки были подчеркнутыми, Вам нужно в окошке Значение выбора: выбрать a:link — просто ссылку. Затем в категории Шрифты выбираете text-decoration: none (ставите птичку в соответствующее окошко).

Видео о том, как работать с таблицей стилей CSS в SharePoint Designer

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

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером