Как создать css файл
Перейти к содержимому

Как создать css файл

  • автор:

Создание пользовательских тематических 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

Как структурирован CSS

Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.

Необходимые знания: Базовая компьютерная грамотность, Базовое программное обеспечение, базовые знания работа с файлами, и базовые знания HTML (статья Введение в HTML), и знание о том Как работает CSS
Задача: Подробно узнать основные синтаксические структуры CSS.

Применение CSS к вашему HTML

Первое, что мы рассмотрим, это три метода применения CSS к документу.

Внешняя таблица стилей

В статье Начало работы с CSS мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.

Внешняя таблица стилей — это когда у вас есть CSS отдельным файлом с расширением .css , и ссылка на него из HTML-элемента :

doctype html> html> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> link rel="stylesheet" href="styles.css" /> head> body> h1>Привет!h1> p>Это мой первый опыт в CSSp> body> html> 

Файл CSS может выглядеть следующим образом:

h1  color: blue; background-color: yellow; border: 1px solid black; > p  color: red; > 

В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:

link rel="stylesheet" href="styles/style.css" /> link rel="stylesheet" href="styles/general/style.css" /> link rel="stylesheet" href="../styles/style.css" /> 

Внутренняя таблица стилей

Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента , содержащейся внутри HTML .

Таким образом, HTML будет выглядеть вот так:

doctype html> html> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> style> h1  color: blue; background-color: yellow; border: 1px solid black; > p  color: red; > style> head> body> h1>Привет!h1> p>Это мой первый опыт в CSSp> body> html> 

Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.

Встроенные стили

Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте style :

doctype html> html> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> head> body> h1 style="color: blue;background-color: yellow;border: 1px solid black;"> Привет! h1> p style="color:red;">Это мой первый опыт в CSSp> body> html> 

Пожалуйста, не делайте этого! Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.

Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.

Игра с CSS в этой статье

Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:

doctype html> html lang="ru"> head> meta charset="utf-8" /> title>Я пробую писать CSStitle> link rel="stylesheet" href="styles.css" /> head> body> p>Пишите сюда свой кодp> body> html> 
/* Пишите сюда свой код */ p  color: red; > 

Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.

Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.

Читайте дальше и получайте удовольствие!

Селекторы

Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве Начало работы с CSS. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.

Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:

/* это селектор тегов */ a:link /* это селектор ссылок */ .manythings /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */ #onething /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */ * /* универсальный селектор */ .box p /* селектор потомков */ .box p:first-child /* селектор потомков + селектор псевдоклассов */ h1, h2, .intro /* перечисление селекторов */ 

Примечание: вы узнаете больше о селекторах в руководстве CSS-селекторы в следующем модуле.

Спецификация

Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента p — он будет синим; также я задал класс, который сделает элемент красным:

.special  color: red; > p  color: blue; > 

А теперь допустим, что в нашем HTML-коде у нас есть абзац p с классом special . Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?

p class="special">Какого же я цвета?p> 

В языке CSS есть правила, которые определяют, какое правило «выиграет» в случае подобного столкновения — они называются каскадами, или спецификациями. В примере ниже мы задали два правила для селектора p , но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.

p  color: red; > p  color: blue; > 

А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.

Попрактикуйтесь сами — добавьте два правила для параграфа p < . >в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

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

Свойства и значения

Если говорить в общем, CSS строится на двух его составляющих:

Определяют, какую характеристику вы желаете изменить (например, font-size , width , background-color ).

Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.

На изображении внизу выделены свойство и его значение. Здесь свойство — color , а его значение — blue .

A declaration highlighted in the CSS

Свойство вкупе со значением называется CSS-объявлением. CSS-объявления помещаются внутри блока объявлений CSS. Ниже показан наш CSS-код с выделенным блоком объявлений.

A highlighted declaration block

Наконец блок объявлений воссоединяется с селекторами, образуя CSS-правила. Наше изображение содержит два правила — одно для селектора h1 , другое для селектора p . Правило для h1 выделено.

The rule for h1 highlighted

Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием ( : ).

Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:

Предупреждение: Важно: Если свойство или значение не определено, то объявление считается недействительным — и будет попросту проигнорировано.

Предупреждение: Важно: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, color надо всегда писать color ; британский вариант colour не будет работать.

Функции

Чаще всего в качестве значений выступают ключевые слова или числа. Но некоторые значения могут быть функциями.

Функция calc()

Напрмер, рассмотрим функцию calc() , с попомщью которой можно выполнять простые математические операции в CSS:

div class="outer"> div class="box">Ширина внутреннего контейнера равна 90% - 30px.div> div> 
.outer  border: 5px solid black; > .box  padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; > 

Этот код отобразит следующий результат:

Вызов функции состоит из имени функции, круглых скобок и значения внутри них. В приведённом выше примере с помощью функции calc() устанавливается ширина контейнера равная 90% от ширины родтиельского блока минус 30 пикселей. Результат такого расчёта нельзя вычислить заранее и ввести как статическое значение.

Функции трансформации

Другим примером могут служить различные функции трансформации , такие как rotate() .

div class="box">div> 
.box  margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn); > 

Результат приведённого выше кода будет таким:

Найдите различные значения свойств, перечисленных ниже. Напишите правила CSS, которые применяют стили к различным элементам HTML:

Правила

До сих пор не сталкивались мы с правилами @rules (произносится как эт-рулс, от английского «at-rules»). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил @rules простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать @import :

@import "styles2.css"; 

Чаще других встречается @rules под названием @media : оно позволяет вам использовать медиавыражения, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).

Ниже у нас CSS-файл, в котором значение заднего фона элемента равно pink . Однако после мы добавили правило @media , которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.

body  background-color: pink; > @media (min-width: 30em)  body  background-color: blue; > > 

Вы столкнётесь и с другими правилами @rules в продолжение следующих уроков.

Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.

Стенография

Некоторые свойства вроде font , background , padding , border и margin называются стенографическими свойствами, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.

К примеру, это строка (комментарий не в счёт):

/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах значения добавляются в порядке верх(низ)–право–лево. В двузначных стенограммах значения добавляются от верхнего/нижнего края к левому/правому краю */ padding: 10px 15px 15px 5px; 

делает то же самое, что и эти четыре, вместе взятые:

padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; 
-block-start: 10px padding-inline-end: 15px; padding-block-end: 15px; padding-inline-start: 5px; 

в то время как строка:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed; 

делает то же, что и эти строки:

background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-scroll: fixed; 

Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в Руководстве по CSS.

Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.

Предупреждение: Осторожно: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.

Комментарии

Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.

Комментарии в CSS начинаются с /* и окачиваются с */ . В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.

/* Работаю над основными элементами */ /* -------------------------------------------------------------------------------------------- */ body  font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; > @media (min-width: 70em)  /* Позволяет определить размер шрифта. На широких экранах больше размер шрифта для удобства чтения */ body  font-size: 130%; > > h1  font-size: 1.5em; > /* Работаю над элементами, вложенными в DOM */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line  background-color: red; background-style: none; > div p  margin: 0; padding: 1em; > div p + p  padding-top: 0; > 

Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора .special .

/*.special < color: red; >*/ p  color: blue; > 

Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.

Отступы

Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.

В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:

body  font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; > @media (min-width: 70em)  body  font-size: 130%; > > h1  font-size: 1.5em; > div p, #id:first-line  background-color: red; background-style: none; > div p  margin: 0; padding: 1em; > div p + p  padding-top: 0; > 

То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:

body  font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; > @media (min-width: 70em)  body  font-size: 130%; > > h1  font-size: 1.5em; > div p, #id:first-line  background-color: red; background-style: none; > div p  margin: 0; padding: 1em; > div p + p  padding-top: 0; > 

Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.

Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:

margin: 0 auto; padding-left: 10px; 

А такие объявления не действительны:

margin: 0auto; padding- left: 10px; 

Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.

Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.

Что дальше?

Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — Как работает CSS — мы рассмотрим этот процесс.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 9 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

CSS — сделай это красиво!

Наш блог всё ещё выглядит довольно скверно, не так ли? Пора сделать его красивым! Для этого будем использовать CSS.

Что такое CSS?

Каскадные таблицы стилей (англ. Cascading Style Sheets, или сокращённо CSS) — специальный язык, используемый для описания внешнего вида и форматирования сайта, написанного на языке разметки (как HTML). Воспринимай это как своего рода макияж для нашей веб-страницы 😉

Но мы же не хотим начинать всё с нуля, правда? Мы просто снова возьмём что-то, что уже было создано программистами и опубликовано в Интернете для свободного пользования. Ты же знаешь, заново изобретать велосипед совсем не весело.

Давай использовать Bootstrap!

Bootstrap — один из наиболее популярных HTML и CSS фреймворков для разработки красивых сайтов: https://getbootstrap.com/

Он был написан программистами, которые работали в Twitter, а сейчас совершенствуется волонтёрами со всего мира.

Установка Bootstrap

Для установки Bootstrap тебе нужно добавить следующие строки в твоего .html файла ( blog/templates/blog/post_list.html ):

link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 

Это не добавит ни одного файла к твоему проекту. Эти строки просто указывают на файлы, опубликованные в Интернете. Просто продолжай, открой свой веб-сайт и обнови страницу. Вот и результат!

Рисунок 14.1

Выглядит уже лучше!

Статические файлы в Django

Теперь мы ближе познакомимся с теми таинственными статическими файлами. Статическими файлами называются все файлы CSS и изображения, т.е. файлы, которые не изменяются динамически, их содержание не зависит от контекста запроса и будет одинаково для всех пользователей.

Куда поместить статические файлы в Django

Django уже знает, где искать статические файлы для встроенного приложения «admin». Теперь нам нужно добавить статические файлы для своего приложения blog .

Мы сделаем это, создав папку static внутри каталога с нашим приложением:

djangogirls ├── blog │ ├── migrations │ ├── static │ └── templates └── mysite 

Django будет автоматически находить папки static внутри всех каталогов твоих приложений и сможет использовать их содержимое в качестве статических файлов.

Твой первый CSS файл!

Давай создадим CSS файл, чтобы добавить свой собственный стиль для твоей веб-страницы. Создай новую папку под названием css внутри твоей папки static . Затем создай новый файл под названием blog.css внутри папки css . Готово?

djangogirls └─── blog └─── static └─── css └─── blog.css 

Пришло время написать несколько строк CSS! Открой файл blog/static/css/blog.css в своем редакторе кода.

Мы не будем здесь погружаться слишком глубоко в процесс настройки и изучения CSS, поскольку это так просто, что ты сможешь изучить этот материал самостоятельно после этого руководства. В конце этой главы мы порекомендуем тебе бесплатный курс для дальнейшего изучения.

Но давай сделаем хотя бы немного. Возможно, мы могли бы изменить цвет заголовка? Чтобы понимать цвета, компьютеры используют специальные коды. Они начинаются с # и далее следуют 6 букв (A-F) и цифр (0-9). Ты можешь найти коды цветов, например, здесь: http://www.colorpicker.com/. Также можешь пользоваться предопределенными цветами, такими как red и green .

В файле blog/static/css/blog.css тебе нужно добавить следующий код:

h1 a < color: #FCA205; > 

h1 a — это CSS-селектор. Это означает, что мы применяем наши стили к каждому элементу a внутри элемента h1 (например, когда у нас в коде что-то вроде:

link

). В этом случае мы говорим о том, что нужно изменить цвет элемента на #FCA205 , то есть на оранжевый. Конечно, ты можешь указать свой собственный цвет!

В CSS файле мы определяем стили для элементов файла HTML. Элементы идентифицируются именами (то есть a , h1 , body ), атрибутом class или атрибутом id . Class и id – это имена, которые ты сама присваиваешь элементам. Классы (сlass) определяют группы элементов, а идентификаторы (id) указывают на конкретные элементы. Например, следующий тег может быть идентифицирован CSS с использованием имени тега a , класса external_link или идентификатора link_to_wiki_page :

a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page"> 

Почитай про CSS селекторы в CSS Selectors на w3schools.

Затем нам также нужно сообщить нашему HTML-шаблону о том, что мы добавили CSS. Открой файл blog/templates/blog/post_list.html и добавь эту строку в самое начало:

Мы просто загружаем здесь статические файлы 🙂 Далее между и , после ссылок на файлы Bootstrap CSS, добавь такую строку:

link rel="stylesheet" href=""> 

Браузер читает файлы в порядке их следования, поэтому нам необходимо удостовериться, что файл расположен в необходимом месте. Иначе код нашего файла может переопределить код в файлах Bootstrap. Мы только что сказали нашему шаблону, где находится наш CSS файл.

Твой файл должен теперь выглядеть следующим образом:

 html> head> title>Django Girls blog title> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> link rel="stylesheet" href=""> head> body> div> h1>a href="/">Django Girls Blog a> h1> div> div> p>published: > p> h1>a href="">> a> h1> p>> p> div> body> html> 

Ок, сохрани файл и обнови страницу!

Рисунок 14.2

Отличная работа! Может быть, мы также хотели бы добавить нашему веб-сайту немного пространства и увеличить отступ слева? Давай попробуем!

body < padding-left: 15px; > 

Добавь это к твоему CSS, сохрани файл и посмотри, как это работает!

Рисунок 14.3

Возможно, мы можем настроить шрифт нашего заголовка? Вставь это внутрь тега в файле blog/templates/blog/post_list.html :

link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic" rel="stylesheet" type="text/css"> 

Как и ранее, проверь порядок и вставь эту строку перед ссылкой на blog/static/css/blog.css . Эта строка импортирует шрифт под названием Lobster из шрифтов Google (https://www.google.com/fonts).

Теперь добавь строку font-family: ‘Lobster’; в CSS файле blog/static/css/blog.css внутри блока определения стиля h1 a (код помещается между скобками < и >) и обнови страницу:

h1 a < color: #FCA205; font-family: 'Lobster'; > 

Рисунок 14.3

Как было указано выше, в CSS используется концепция классов, которая позволяет назвать часть HTML кода и применять стили только для этой части без всякого эффекта для других. Это очень полезно, если у тебя есть, скажем, два блока div, но они выполняют совершенно разные функции (как ваш заголовок и пост), следовательно, ты не хочешь, чтобы они выглядели одинаково.

Дадим имена определённым частям HTML кода. Добавь класс под названием page-header в блок div , содержащий наш заголовок, как это сделано здесь:

div class="page-header"> h1>a href="/">Django Girls Blog a> h1> div> 

А теперь добавь класс post в твой div , содержащий сообщение в блоге:

div class="post"> p>published: > p> h1>a href="">> a> h1> p>> p> div> 

Теперь добавим определения блоков для различных селекторов. Селекторы, которые начинают с символа . , относятся к классам. В Интернете много хороших справочников по CSS, которые могут помочь тебе понять следующий код. А сейчас просто скопируй и вставь код в файл djangogirls/static/css/blog.css :

.page-header < background-color: #ff9400; margin-top: 0; padding: 20px 20px 20px 40px; > .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active < color: #ffffff; font-size: 36pt; text-decoration: none; > .content < margin-left: 40px; > h1, h2, h3, h4 < font-family: 'Lobster', cursive; > .date < color: #828282; > .save < float: right; > .post-form textarea, .post-form input < width: 100%; > .top-menu, .top-menu:hover, .top-menu:visited < color: #ffffff; float: right; font-size: 26pt; margin-right: 20px; > .post < margin-bottom: 70px; > .post h1 a, .post h1 a:visited < color: #000000; > 

Далее переделаем код HTML, отображающий посты, используя классы. Замени:

 div class="post"> p>published: > p> h1>a href="">> a> h1> p>> p> div> 

в blog/templates/blog/post_list.html этим кодом:

div class="content container"> div class="row"> div class="col-md-8"> div class="post"> div class="date"> p>Опубликовано: > p> div> h1>a href="">> a> h1> p>> p> div> div> div> div> 

Сохрани эти файлы и обнови свой веб-сайт.

Рисунок 14.4

Юхууу! Выглядит прекрасно, не так ли? Код, который мы только что вставили, на самом деле не сложный для понимания, и ты, просто прочитав его, сможешь понять большую часть.

Не бойся немного повозиться с этим CSS-файлом и попробуй поменять некоторые вещи. Если что-то сломается, не волнуйся, ты всегда можешь отменить предыдущее действие!

В любом случае, мы настоятельно рекомендуем пройти бесплатный онлайн курс Codeacademy HTML & CSS course в виде домашней работы после воркшопа, чтобы изучить всё, что нужно знать об оформлении веб-сайтов с помощью CSS.

Готова к следующей главе?! 🙂

results matching » «

No results matching » «

Как создать css файл

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 20-02-2024! ��

Видео — как сделать файл css

Как сделать файл css пошагово рассказано в представленном видео о «создании файла сыы«:

Как делать файл css без программы!?

Способ сделать файл css вообще без программы, будем делать фал css на компьютере!

Открываем папку, где должен находиться файл css

Нажимаем ПКМ, по пустому месту в папке. Создать – текстовый документ.

Как делать файл css без программы!?

Можно сразу выделить и удалить сразу все, и написать ваше название нового файла стилей css

Primer-CSS.css

Если у вас нет точки, ищем — параметры папок — скрывать расширение для зарегистрированных файлов (для XP, vista, 7,8,10 — все одинаково). Вроде делал страницу на данную тему- не помню где. Зачем здесь, сейчас говорю об отсутствии разрешения файла!? Просто — когда столкнетесь, поймете зачем здесь показывать расширение!

Как делать файл css без программы!?

Выходит предупреждение – игнорируем – нажимаем да.

Как делать файл css без программы!?

Всё! Наш файл css – готов!

Как делать файл css без программы!?

Для того, чтобы понять, что это файл css нам нужно что-то туда добавить, к примеру такую запись:

Загрузим на сервер Смотрим, что у нас получилось!

Следующим шагом у нас идёт прикрепление файла css к странице.

Как сделать файл css в простом блокноте

Можно сделать файл css в простом блокноте! Открываем блокнот, заносим какие-то стили в текст вашего нового файла css — далее идем в файл — сохранить как — печатаем название создаваемого файла css — тип файла — здесь нужно выбрать все файлы — далее кодировка файла css — выбираем utf-8, вы конечно можете оставить ANSI — потом расскажите!

Как сделать файл css в простом блокноте

Как делать файл css в программе Sublime!?

Открываем программу Sublime, в новом документе создаем какие-то нужные стили. Нажимаем файл — сохранить как, или сохранить все — выбираем название вашего будущего файла css — можно оставить тип фала — все файлы. либо выбрать расширение css в выпадающем окне:

Как делать файл css в программе Sublime!?

Как делать файл css в программе Notepad++!?

Создание файла css в программе Notepad абсолютно аналогично созданию файла css в предыдущей программе!

Создаем документ css — идем файл — сохранить как — выбираем местоположение вашего нового файла css — выбираем название файла css — выбираем тип, либо можно оставить все файлы, нажимаем сохранить файл css.

Как делать файл css в программе Notepad++!?

Как делать файл css на сервере в программе!?

На сервере можно создать файл через, любую программу filezilla, которая может связываться с с сервером с помощью ftp

Во вкладке сервер нажимаем ПКМ — в новом окне — выбираем новый файл — далее печатаем название создаваемого файла css — нажимаем ок — видим, что наш новый файл создался на сервере — естественно, что он сейчас пустой. Если вы хотите го редактировать, добавлять содержимое на компьютере его надо скачать.

Как делать файл css на сервере в программе!?

Не стесняемся говорить спасибо!

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *