Как создать файл стилей CSS?
Первый практический шаг, который необходимо сделать при работе со стилям CSS, это научиться создавать файл, в котором эти стили будут храниться. Давайте посмотрим, что для этого нужно сделать.
Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.
Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.
Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.
Для тех, кто любит видео:
Все мои уроки по CSS (каскадным таблицам стилей) здесь.
Способ 1. Создание файла CSS меняя расширение текстового файла.
Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.css.
Если у Вас не отображается расширение файлов, вот заметка:
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.
После данной операции вы получите файл стилей css.
Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).
Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.
Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.
После открытия программы появляется главное меню, в котором можно выбрать создание файла CSS.
После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».
Аналогичный процесс создания файлов CSS есть и в других редакторов кода.
На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.
Все мои уроки по CSS (каскадным таблицам стилей) здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Учебник: добавление пользовательского CSS на сайт
Рабочая область настройки стиля позволяет редактировать некоторые компоненты темы вашего сайта, такие как шрифты и цвета, однако вы можете применять свои собственные темы CSS.
Вы можете создать собственную тему, определив пользовательский файл CSS и загрузив его на сайт.
Из этого руководства вы узнаете, как выполнять следующие задачи:
- Загружать собственный файл CSS
- Изменить CSS в Visual Studio Code для Интернет
Предварительные условия
- Подписка или пробная версия Power Pages. Получите пробную версию Power Pages здесь.
- Создание сайта Power Pages. Создайте сайт Power Pages.
- Файл пользовательской темы, созданный с использованием предпочитаемого вами CSS-редактора.
Любая создаваемая пользовательская тема должна быть совместима с Bootstrap v3.
Добавление пользовательского CSS на сайт
В следующем видео показано, как применить пользовательский код CSS на сайте.
В этом примере мы добавим несколько пользовательских CSS-файлов, которые позволяет нам добавлять эффекты тени к кнопкам на веб-сайте. Вы можете использовать свой собственный CSS-файл или предоставленный образец.
-
Чтобы создать образец, в своем предпочитаемом CSS-редакторе создайте файл пользовательской темы button_shadow.css и сохраните его.
.button1
Чтобы полностью удалить пользовательскую тему, удалите запись веб-файла в приложении «Управление порталом».
Создание пользовательских тематических CSS-файлов в SharePoint
Узнайте, как добавить разметку стилей комментариев в CSS-файл, чтобы его можно использовать в механизме темы SharePoint.
Общие сведения о заметках
Примечания, разметку специальные стиль комментариев, сообщают engine темы SharePoint как свойства темы в CSS-файл. При применении темы к сайту engine темы заменяет значения свойств CSS значения соответствующие темы. В SharePoint можно использовать заметки для изменения цвета, шрифта и фонового изображения. Можно также изменить цвет изображения. При использовании настраиваемого CSS-файлы, если вы хотите использовать их с помощью механизма SharePoint темы необходимо добавить эти заметки CSS-файлы. Если применить тему для сайта, использующего настраиваемые CSS-файлы, и вы не добавили аннотации, свойства CSS не изменяются. Это может привести к сайтом с несоответствие разработки.
В этой статье описываются доступные заметки и регистрация CSS-файлы.
Добавление заметок в пользовательские CSS — файлы
Заметки сообщить engine темы SharePoint как свойства темы в CSS-файл. В этом разделе описываются доступные заметки и как их использовать.
Заметка ReplaceColor
Заметка ReplaceColor заменяет значение цвета указанным цветом темы. Его можно использовать со свойствами CSS, которые определяют значение цвета, например цвет, цвет фона, границы и т. д.
Ниже приводится формат ReplaceColor заметки.
/* [ReplaceColor(themeColor:"ColorSlot"[, themeShade:"ShadeValue"][, themeTint:"TintValue"][, opacity:"OpacityValue"])] */ Замените ColorSlot на имя заметки цветового слота для использования. Чтобы просмотреть список доступных цветовых слотов, обратитесь к разделу Сопоставление цветовых слотов в статье Цветовые палитры и шрифты в SharePoint.
Используйте параметр необязательно themeShade, если вы хотите затемнить цвет темы. Замените ShadeValue числовое значение от 0,0 (без изменений) для версии 1.0 (самый темный).
Используйте параметр необязательно themeTint, если вы хотите осветлить цвет темы. Замените TintValue числовое значение от 0,0 (без изменений) для версии 1.0 (очень светлый).
Используйте параметр необязательно opacity, если вы хотите задать непрозрачность цвет темы. Замените OpacityValue числовое значение, указывающее, непрозрачность. Непрозрачность параметр в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полная непрозрачность).
Ниже приведены примеры ReplaceColor заметки, используемых в CSS-файл.
- /* [ReplaceColor(themeColor:»BodyText»)] */ color:#444;
- /* [ReplaceColor(themeColor:»BackgroundOverlay»,opacity:»0.5″)] */ background-color:#fff;
- /* [ReplaceColor(themeColor:»EmphasisBackground»,themeTint:»0.05″)] */ background-color:#f2faff;
Заметка ReplaceFont
Заметки ReplaceFont добавляет шрифт темы указанного списка доступных шрифтов. Его можно использовать со свойствами CSS font и font-family.
Ниже приводится формат ReplaceFont заметки.
/* [ReplaceFont(themeFont:"FontSlot")] */ Замените FontSlot именем используемого слота шрифтов. Чтобы просмотреть список доступных слотов шрифта, обратитесь к разделу Слоты шрифтов в статье Цветовые палитры и шрифты в SharePoint.
Ниже показан пример ReplaceFont заметки. В этом примере Если разъем body шрифтов определяется как Courier в теме, Courier добавляются как первый элемент в списке доступных шрифтов в мастере Choose the Look.
- /* [ReplaceFont(themeFont:»body»)] */ font-family:»Segoe UI»,»Segoe»,Tahoma,Helvetica,Arial,sans-serif;
Заметка ReplaceBGImage
Заметки ReplaceBGImage заменяет фонового изображения в CSS-файл фонового изображения темы. Его можно использовать со свойствами CSS background и background-image.
Ниже приводится формат ReplaceBGImage заметки. Заметки ReplaceBGImage можно также использовать с фильтром AlphaImageLoader для поддержки более ранних версий Internet Explorer.
/* [ReplaceBGImage] */ Заметка RecolorImage
Заметки RecolorImage recolors указываемое изображение.
Следующие описывает формат RecolorImage заметки.
/* [RecolorImage(themeColor:"ColorSlot"[, method:["Tinting"|"Blending"|"Filling"]][, includeRectangle: )] */ Замените ColorSlot именем заметки цветового слота. Чтобы просмотреть список доступных цветовых слотов, обратитесь к разделу Сопоставление цветовых слотов в статье Цветовые палитры и шрифты в SharePoint.
Используйте параметр необязательно method, если вы хотите указать метод recoloring.
Используйте параметр необязательно includeRectangle, если вы хотите изменить цвет для отдельного региона изображения. Замените x-Setting, y-Setting, RegionWidth и RegionHeight на x-координаты, y-координаты, ширину и высоту области, которую требуется перекрасить.
Ниже приведены примеры RecolorImage заметки, используемых в CSS-файл.
- /* [RecolorImage(themeColor:»SubtleBodyText»,method:»Tinting»)] */ background-image:url(«/_layouts/15/images/tabtitlerowbottombg.png?rev=23»);
- /* [RecolorImage(themeColor:»BodyText»,method:»Filling»,includeRectangle:)] */ background:url(«/_layouts/15/images/spcommon.png?rev=23») no-repeat -161px -178px;
Отправка CSS – файла в тематическую папку в библиотеке стилей
Place the custom CSS files in the Themable folder in the Style library (not the Themable folder in the Master Page Gallery). Only CSS files that are stored in the Themable folder in the Style library are recognized by the theming engine. The Themable folder is created automatically for publishing sites. В противном случае можно создать папку Themable в правильном расположении (http:// SiteCollectionName/Style Library/ language/Themable/).
Имя языковой папки должно быть в 4-значном формате ll-cc , чтобы определить язык и язык и региональные параметры соответственно. Например, en-us или ar-sa. Для получения дополнительных сведений см идентификаторы языков и значения идентификаторов OptionState в Office 2013.
CSS-файлы должны вернули и опубликован. Если CSS-файлы изменяются, необходимо повторно применить темы для внесенных изменений.
Регистрация CSS файла
Необходимо зарегистрировать CSS-файла в главную страницу, прежде чем CSS-файла можно использовать ядром темы. Если применить тему к сайту, направляет главную страницу в CSS-файл. Чтобы зарегистрировать CSS-файл, добавьте в элемент страницы master. Ниже показан формат .
Замените CSSFileLocation на расположение CSS-файла.
Ниже приведен пример .
… " runat="server" /> [!Примечание] Маркер %$SPUrl не может использоваться для SharePoint Foundation 2013. Необходимо использовать URL-адрес, чтобы указать расположение CSS-файла.
См. также
- Общие сведения о темах для SharePoint
- Инструкции. Развертывание пользовательской темы в SharePoint
- Обновление пользовательских тем и CSS для SharePoint
- Инструкции. Создание файла предварительного просмотра эталонной страницы в SharePoint
- Цветовые палитры и шрифты в SharePoint
- Фирменная символика и конструкция возможности дизайнер SharePoint