Содержание

Подключение CSS Стилей — 3 Варианта

Существует 3 способа, как осуществить подключение CSS стилей для вашего сайта: вы можете использовать глобальные стили CSS, добавив CSS правила в контейнер <head> HTML документа, вы можете добавить ссылку на внешний .css файл, содержащий все необходимые правила или использовать внутренний CSS для применения правил к определенному элементу. В этом руководстве мы рассмотрим все три варианта подключения CSS, узнаем их достоинства и недостатки.

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Вариант 1 — Глобальный CSS

Глобальный CSS помещается в контейнер <head> конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы — вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами <style></style>. Вот пример глобальной таблицы стилей:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

Преимущества глобальных CSS:

  • Таблица стилей влияет только на одну страницу.
  • В глобальной CSS могут быть использованы классы и идентификаторы (ID).
  • Нет необходимости загружать несколько файлов.
    HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

  • Увеличенное время загрузки страницы.
  • Подключается только к одной странице — неэффективно, если вы хотите использовать одну и ту же CSS для нескольких страниц.

Как произвести подключение CSS к HTML странице
  1. Откройте вашу HTML страницу в любом текстовом редакторе. Если страница уже загружена на вашу учетную запись хостинга, вы можете использовать текстовый редактор предоставленный вашим хостингом. Если данный документ HTML находится на вашем компьютере, вы можете использовать любой текстовый редактор для его редактирования, и после этого повторно загрузить его на вашу учетную запись хостинга используя FTP-клиент.
  2. Найдите открывающий тег <head> и добавьте после него следующий код:
<style type="text/css">
  1. Далее перейдите к следующей строке и добавьте нужные CSS правила, к примеру:
body {
     background-color: blue;
 }
 h2 {
     color: red;
     padding: 60px;
 }
  1. Как только вы закончите добавление CSS правил, добавьте закрывающий тег:
</style>

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h2 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h2>Руководство Hostinger</h2>
<p>Это наш текст. </p>

</body>
</html>

Вариант 2 — Внешний CSS

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

<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Тогда как, сами таблицы стилей располагаются в файле style.css. К примеру:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

Преимущества внешних CSS:

  • Меньший размер страницы HTML и более чистая структура файла.
  • Быстрая скорость загрузки.
  • Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

  • Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 — Внутренний CSS

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

<!DOCTYPE html>
<html>
<body style="background-color:black;">

<h2 style="color:white;padding:30px;">Руководство Hostinger</h2>
<p style="color:white;">Здесь что-нибудь полезное. </p>

</body>
</html>

Преимущества внутреннего CSS:

  • Полезен для проверки и предпросмотра изменений.
  • Полезен для быстрых исправлений.
  • Меньше HTTP запросов.

Недостатки внутреннего CSS:

  • Внутренние CSS должны быть применены для каждого элемента в отдельности.

Заключение

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

Как подключить CSS к HTML

Существует три способа подключения CSS к HTML:

  • Внешние таблицы стилей.

  • Внутренние таблицы стилей.

  • Встроенные таблицы стилей.

Рассмотрим каждый из них на примерах.

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

Внешние таблицы стилей подключаются при помощи отдельного файла с расширением . css и тега <link>, “встроенного” в HTML-документ. Например:

<html>

<head>

<title>Страница</title>

<link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

<body>

Текст.

</body>

</html>

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

Внутренние таблицы стилей “включаются” в HTML-документ, а используется для этого атрибута style. Например:

<html>

<head>

<title>Страница</title>

</head>

<body>

<h2>Текст<h2>

</body>

</html>

Встроенные таблицы стилей

Встроенные таблицы стилей “прописываются” в заголовке HTML-документа.

Например:

<html>

<head>

<title>Моя страница</title>

<style type=»text/css»>

h2 {

«color:red

}

</style>

</head>

<body>

hello! <h2>

</body>

</html>

Учебник CSS — Урок 1 — подключаем CSS-стили

Я не буду объяснять зачем нужен CSS. Если вы открыли этот учебник значит вы желаете его выучить. От себя лишь скажу, что возможности CSS очень широки и позволяют верстать макеты любой сложности. В свою очередь использование css означает, что вам придется отказаться от использования различных атрибутов тегов size, color, bgcolor, align и других, которые будут «мешать» CSS.

Существует по крайней мере три способа подключения CSS к вашему HTML файлу. Давайте рассмотрим самый простой, потом второй и правильный способ.

CSS внутри тега

CSS можно подключить c помощью атрибута style:

<div> Блок </div>

Так мы задаем блок размером 200 на 100 пикселей. Давайте рассмотрим как пишется CSS. Сначала мы пишем атрибут. И потом уже в ковычках пишем css-стили.

style="параметр:значение;параметр:значение;параметр:значение"

Пишем стили мы так сначала идет параметр (widht, height и другие), потом идет двоеточие и значение параметра. Разделяем каждый параметр точкой с запятой.

Теперь ко второму способу написания CSS.

CSS в начале HTML-документа

Для этого мы используем тег <style></style> в котором мы пишем CSS-код.

<html>
 <head>
  <title>Учебник CSS</title>
  <style type="text/css">
  здесь мы будем писать css-код
  </style>
 </head>
 <body>
  <p>Учите CSS вместе с drupalbook.org</p>
 </body>
</html>

Тег style мы пишем в теге <head></head> после тега <title>. Давайте напишем какой-нибудь CSS-код:

<html>
 <head>
  <title>Учебник CSS</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* фон страницы */     font-size: 14px;            /* размер шрифта */
   }
   p{
     color: #ff0000; /* цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Учите CSS вместе с drupalbook.org</p>
  <p>2 строка учите CSS вместе с drupalbook.org</p>
 </body>
</html>

Давайте посмотрим как пишется css для тегов. Если мы пишем название тега в css, то для всех этих тегов будут применены параметры CSS. Так например если мы пишем p то значит для всех параграфов будет выбраны следующие параметры.

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

параметр:значение;параметр:значение;параметр:значение

Параметр, двоеточие, значение, точка с запятой и снова параметр, двоеточие, значение, точка с запятой и снова… После последнего стиля можно не ставить точку с запятой, но лучше всего поставить.

Мы вставили двумя способами css-стили, а теперь давайте используем третий способ, самый оптимальный.

CSS в отдельном файле

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

Это основная идея CSS размежевать текст и оформление текста. HMTL нам нужен чтобы разметить текст, а вот CSS нужен для того чтобы этот текст гармонично выглядел. С помощью HTML выводиться только текст, а с помощью CSS размеры, цвета, формы, границы, отступы.

Это было во-первых, теперь во-вторых когда код HTML и CSS в одном файле, то это становится нечитабельно и грамоздко. А теперь в-третьих, css сохраняются в браузере, поэтому если вынести весь CSS отдельно, то страница будет загружаться быстрее, потому что загружать css нужно только один раз. Я думаю вам уже стало понятным к чему я клоню?

CSS нужно стараться выносить в отдельный файл! Вот к этому я и клоню. А теперь давайте создавать отдельный css файл. Для этого есть тег <link>:

 

<html>
 <head>
  <title>Учебник CSS</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>Учите CSS вместе с drupalbook.org</p>
  <p>2 строка учите CSS вместе с drupalbook.org</p>
 </body>
</html>

У тега <link> есть следующие атрибуты:

type=»text/css» — так мы указываем то что это css,

rel=»stylesheet» — это указывает на то что этот файл является css-файлом,

media=»all» — этот css файл будет отображаться для всех устройств, через которые просматривают сайт,

href=»styles. css» — путь к css файлу, в нашем случае путь относительный.

Кажется разобрались с тем как подключать css файл, теперь создавайте этот файл styles.css в той же папке где и html-файл.

Теперь открывайте файл styles.css и вставьте него css-стили:

body{
  background: #eeeeee; /* фон страницы */
  font-size: 14px;            /* размер шрифта */
}
p{
  color: #ff0000; /* цвет текста */
}

Сохраните этот файл и откройте через браузер ваш html-файл. Теперь css подключен к вашему файлу как полагается, через отдельный файл. В следующем уроке мы подробно начнем разбирать, как писать стили в отдельном файле.

Начинаем работу с HTML + CSS

Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul>
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h2>My first styled page</h2>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style. 
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы можете видеть, документ содержится между <html> и </html> тэгами. Между <head> and </head> находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе, все что находится внутри этого тэга за исключением текста между <!— и —>, являющегося комментариями, будлет выведено на экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги <li> начинают “элементы списка” (List Item). Тэг <p> является “параграфом”. А тэг <a> — “якорь” (Anchor), с помощью которого создаются гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.

  • Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
  • Элементы “h2” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги </li> и </p>, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage. html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами <head> и </head>. Строки, которые надо добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т. д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое правило состоит из трех частей:

  1. селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
  2. свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
  3. и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS, вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4. 01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство ‘position: absolute’ говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными — те которые он уже посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

Обычно браузеры выделяют гиперссылки цветом и подчеркиванием. Обычно, цвета похожи на те, что мы указали: синие для ссылок которые пользователь еще не открывал (или открывал долгое время назад), пурпурные дял страниц, которые он уже видел.

В HTML гиперссылки создаются тэгами <a> поэтому для указания цвета нам надо создать правило в CSS для “a”. Для того, чтобы различать посещенные и непосещенные ссылки, CSS предоставляет два “псевдо-класса” (:link и :visited). Они называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство ‘border-top’ для того чтобы добавить прерывистую линию над элементом <address> (строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul. navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

Теперь наше оформление закончено. Давайте вынесем таблицу стилей в отдельный файл, чтобы остальные файлы могли использовать ту же самую таблицу стилей, что и первый файл.

ШАГ 7: внешний CSS

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

Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню «Файл» в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из HTML в это новое окно. Не копируйте элементы разметки <style> и </style>. Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h2 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul. navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от <style> до </style> включительно и замените убранное элементом <link> как показано (строка 5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle. css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

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

Конечный резульат

Следующий шаг — положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.

Как подключить CSS. Методы и способы подключений.

» Как подключить CSS. Методы и способы подключений.

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

Приступим… 

Как подключить CSS. Методы и способы подключений.

Таблицы связанных стилей.

Способ подключения  CSS — №1

Способ №1 — самый удобный способ определения стилей для сайта. Все стили для сайта хранятся в одном отдельном файле и используются для любых веб-страниц. Для подключения или для связки таблицы CSS к html странице используется тег LINK в заголовке страницы.

<link rel="stylesheet" ENGINE="text/css" href="style.css">

или

<link rel="stylesheet" type="text/css" href="https://ВАШ САЙТ/style.css">

Пример подключение таблицы CSS:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<link rel="stylesheet" type="text/css" href="style. css">
</head>
<body>
<h2>Заголовок</h2>
<p>Текст</p>
</body>
</html>

Плюсы данного способа:

1. Использование одного файла стилей CSS для всех веб-страниц веб-сайта;

2. Можно изменять вид сайта через таблицу стилей без редактирования веб-страниц;

3. При изменении стиля в одном файле style.css, стиль автоматически применяется ко всем страницам, где только есть на CSS файл подключение. Это очень удобно;

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

Таблицы глобальных стилей.

Способ подключения  CSS — №2

Способ №2 не так эффективен и удобен как способ №1, но бывают моменты, что и этот способ подключения CSS необходим.
Этот стиль подключается и прописывается в самом документе и размещается в заголовке веб-страницы между тегами <head></head>. Подключается стиль тегом <STYLE>.

<style type="text/css"></style>

Пример подключение таблицы CSS:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<style type="text/css">
h3
{
font-size: 90px; /* Размер шрифта */
font-family: Verdana, Arial, Helvetica, sans-serif; /* Шрифт */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<h3>Заголовок</h3>
</body>
</html>

В этом примере я показал изменение стиля заголовка <h3>. Теперь на этой веб-странице достаточно только указать тег <h3> и стили добавятся к нему автоматически.

Внутренние стили.

Способ подключения  CSS — №3

Способ №3 используется в редких случаях.  Внутренний стиль служит для изменения одиночного тега на веб-странице. Для подключения стиля используется параметр style.

Пример подключение таблицы CSS:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
</head>
<body>
<h3>Заголовок</h3>
</body>
</html>

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

Способ подключения  CSS — №4

В этом способе используется сразу несколько стилей, которые мы использовали выше (способ №1 — №3).

Пример подключение таблицы CSS:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример подключение таблицы CSS</title>
<style type="text/css">
h3
{
font-size: 90px; /* Размер шрифта */
font-family: Verdana, Arial, Helvetica, sans-serif; /* Шрифт */
color: #cc0000 /* Цвет текста */
}
</style>
</head>
<body>
<h3>Заголовок</h3>
<h3>Заголовок</h3>
</body>
</html>

В итоге по примеру у нас получится первый заголовок красного цвета с размером 50 пикселей, а следующий — зеленым цветом и с размером 90 пикселей.

Повторюсь, что все описанные методы использования CSS могут применяться самостоятельно, а могут совмещаться друг с другом. Это можно увидеть в способе№4.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: css, для начинающих, основы

Как подключить CSS к HTML: способы, инструкция

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

Что это такое?

CSS (от англ. Cascading Style Sheets) – формальный язык настройки внешнего вида страницы, написанной на языке разметки. Существует 3 способа, как подключить CSS файл к HTML. Каких-то особенных знаний для этого не нужно, как и нельзя четко выделить, какой из методов подключения CSS к HTML наиболее приемлем – просто следуйте инструкции и используйте удобный для вас.

Общая структура кода с использованием селекторов в учебниках представлена следующим образом:

селектор {

свойство: значение;

свойство: значение;

… и т.п.

}

Реализация каждого способа особенная. Разбирать будем на примере такого кода:

Задача подключаемых стилей – изменить цвет тега на красный.

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

Инструкция по подключению стилей CSS

Вариант первый

Чтобы ответить на вопрос, как подключить стили CSS, нужно присоединить таблицу стилей внутри тела, используя атрибут style.

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

Для более наглядного объяснения рассмотрим на примере, заданном ниже. Значение style приписано к элементу.

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

У метода есть существенные недостатки, которые важно учитывать:

  1. Ограниченность в плане функционала. Так, способ не позволяет подключить несколько селекторов одновременно или создавать ссылки в одном файле.
  2. Из первого минуса вытекает второй: каждый стиль по отдельности прописывается вручную, что со временем сделает код страницы настоящим хламовником.

Вариант второй

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

Выглядит это следующим образом:

Замечание. В параметре href необходимо описать путь файла, расположенного на компьютере. Условный пример: href =”C:\Users:\Desktop:\файл”.

В итоге получается код следующего вида:

C:\Users:\Desktop:\style.css» type=»text/css»/>

Статья

Cleep

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

p {color:red;}

Несколько нюансов, касающихся этого метода:

  1. Команда link, которая указывает отсылку на внешний файл обязательно должна размещаться в заголовке между тегами.
  2. Атрибут Rel показывает тот тип сайта, на который пользователь делает ссылку. В нашем случае таблица селекторов прописывается как stylesheet.
  3. Путь к внешнему файлу обязательно указывается относительно кода. В связи с чем, рекомендуется поместить оба файла в одну папку.

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

Вариант третий

В этом случае CSS прописывается внутри параметра style.

Наиболее короткий способ подключения к коду страницы, популярность которого постепенно снижается. Для этого используется элемент

Статья

Cleep

Читайте также: 

Подключение нескольких селекторов к странице

Множество веб-мастеров не ограничиваются одним подключенным файлом к странице. Чтобы подключить несколько, достаточно пары шагов:

  1. Создаем несколько css-файлов с любым названием.
  2. Используя второй способ подключения, вписываем в код аналогичную строку, указав название и путь второго файла.

Итоговый код будет иметь следующий вид:

C:\Users:\Desktop:\1.css» type=»text/css»/>

C:\Users:\Desktop:\2.css» type=»text/css»/>

Статья

Cleep

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

  1. Подключаем стиль к странице одним из вышеописанных способов.
  2. В файле прописываем строку, подключающую к атрибуту дополнительный стиль: @import url(«style-2.css»).

Видео на тему: подключение CSSк HTML

В сюжете более наглядно показаны все способы подключения таблицы стилей к коду страницы:

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

Подключаем CSS тегом style (вложенные таблицы стилей)

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

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

Следующим преимуществом, является их расположение. Если в встроенных они разбросаны по всему html документу, то в вложенных таблицах они сконцентрированы в одном месте, а значит с кодом будет в случае чего, легче работать.

Как это выглядит?

Для того чтобы создать таблицу стилей в html документе нам понадобится тег style, а внутри него прописываются стили, таким же образом как и в css. Однако и тут не обошлось без правил и ограничений:

  • Он должен располагается непосредственно в head документа;
  • Их количество в документе не ограниченно;

Пример:

<html>
<head>
    <meta charset="windows-1251">
    <title>Сайт</title>
<style type=”text/css”>
   p {
     color:#000
   }
   .left a {
     text-decoration: underline;
   }
</style>
</head>

Атрибуты, которые можно использовать с style

В примере, описанном выше, к тегу style добавили атрибут type с значением type/css. Этот атрибут был необходим для корректной работы браузера с таблицей. Стоит обратить внимание, что в качестве значения по умолчанию выступает type/css, ну и что необходимость в использовании этого атрибута пропала уже в HTML5.

Следующим атрибутом, с которым может работать тег style, является media. Этот атрибут даёт возможность применять таблицу стилей для уточнённого устройства.

Например:

<head>
    <meta charset="windows-1251">
    <title>Сайт</title>
<style media=”handheld“>
   p {
     color:#000
   }
   .left a {
     text-decoration: underline;
   }
</style>
</head>

Данный пример рассчитан на HTML5, в котором не нужен атрибут type, а также, с помощью атрибута media мы определили устройства, на которых будут применены стили.

Недостатки

В самом начале мы рассмотрели достоинства использования вложенных таблиц стилей. Теперь стоит обратить внимание на недостатки.

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

Из-за этого недостатка внешние таблицы получили большую распространённость.

Область применения

  • Первый вариант, один из самых распространённых, это наложение уникальных стилей на определённой странице. Например, нам необходимо, чтобы на одной странице подсвечивался конкретный раздел списка:
    <head>
    <style>
    #block li:nth-child(2) a {
      background: #1F2226;
      padding: 20px;
      color: #fff;
    }
    </style>
    </head>
  • Вторым вариантом является ускорение быстродействия на «тяжёлых» участках сайта. Это объясняется тем, что браузеру не приходится грузить несколько файлов.

Важно

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

Оценок: 4 (средняя 5 из 5)

  • 1117 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Включить CSS | Руководство разработчика Adobe Commerce

В этой теме

В приложении Magento файлы CSS включаются в файлы макета.

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

Имена классов CSS могут быть назначены как в шаблонах, так и в макетах.

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

Как организованы файлы таблиц стилей Magento

Обычно файлы CSS и Less хранятся только в темах. Каталоги модулей не содержат стилей по умолчанию.

В каталоге темы таблицы стилей хранятся в следующих местах:

Справочник относительно Описание
/ <пространство имен> _ <модуль> / web / css Стили, специфичные для модуля.
/ web / css Содержит следующее:
  • print.less : используется для создания стилей для печатной версии страниц магазина.
  • _styles.less — составной файл, включающий все Less файлы, используемые в теме. Знак подчеркивания («_») в имени файла обычно означает, что файл не используется независимо, а включен в другие файлы.
  • styles-m.less : используется для создания стилей для мобильных устройств, включает _styles. менее .
  • styles-l.less : используется для создания стилей, специфичных для рабочего стола, включает _styles.less .
  • / source : этот подкаталог содержит файлы конфигурации Less, которые вызывают миксины из библиотеки пользовательского интерфейса Magento.
  • /source/_theme.less : отменяет значения переменных библиотеки пользовательского интерфейса Magento по умолчанию.

Включить CSS

В приложении Magento рекомендуемый способ включения таблиц стилей — указать их в файлах макета.

Обычно включаемые вами таблицы стилей должны быть доступны для всех страниц магазина. Для этого включите свой CSS в default_head_blocks.xml модуля Magento_Theme , который определяет раздел страницы по умолчанию для всех страниц Magento. Рекомендуемый способ сделать это — добавить расширяющий default_head_blocks. xml в вашу тему и включить необходимые таблицы стилей в этот файл.

Ваш собственный default_head_blocks.xml должен располагаться следующим образом:

<каталог_ темы> /Magento_Theme/layout/default_head_blocks.xml .

Чтобы включить файл CSS, добавьте блок в раздел файла макета. <путь> указывается относительно веб-каталога темы ( / web )

Например, чтобы включить / web / css / custom.css :

  
 1
2
3
4
5
 
 
    
        
    

 

Ниже показано, как таблицы стилей включены в пустую тему по умолчанию:

[ / Magento_Theme / layout / default_head_blocks. xml ]

  
 1
2
3
4
5
6
7
 
 
    
        
        
        
    

 

Чтобы включить внешний файл CSS, добавьте .

  
 1
2
3
4
5
 
 
    
        
    

 

Если система не находит включенные файлы CSS, она ищет файлы с теми же именами, что и .без расширения . Это часть встроенного механизма предварительной обработки. Дополнительную информацию об этом можно найти в теме «Предварительная обработка CSS».

Установка

— Tailwind CSS

Руководства по интеграции

Процесс установки Tailwind CSS может немного отличаться в зависимости от того, какие другие фреймворки / инструменты вы используете, поэтому мы составили несколько руководств, которые охватывают популярные настройки.

Не видите свой любимый инструмент в списке? Мы всегда работаем над новыми руководствами, но пока вы можете следовать инструкциям по установке Tailwind CSS в качестве плагина PostCSS, чтобы настроить его в кратчайшие сроки.


Установка Tailwind CSS в качестве плагина PostCSS

Tailwind CSS требует Node. js 12.13.0 или выше.

Для большинства реальных проектов мы рекомендуем установить Tailwind как плагин PostCSS. Большинство современных фреймворков уже используют PostCSS под капотом, и есть большая вероятность, что вы использовали или в настоящее время используете другие плагины PostCSS, такие как autoprefixer.

Если вы никогда не слышали о PostCSS или задаетесь вопросом, чем он отличается от таких инструментов, как Sass, прочтите наше руководство по использованию PostCSS в качестве препроцессора для ознакомления.

Если это немного непосильно и вы хотите попробовать Tailwind без настройки PostCSS, прочтите вместо этого наши инструкции по использованию Tailwind без PostCSS.

Установить Tailwind через npm

Для большинства проектов (и для того, чтобы воспользоваться возможностями настройки Tailwind) вам нужно установить Tailwind и его одноранговые зависимости через npm.

  npm install -D tailwindcss @ latest postcss @ latest autoprefixer @ latest  

Поскольку Tailwind не добавляет автоматически префиксы поставщиков в создаваемый им CSS, мы рекомендуем установить autoprefixer, чтобы справиться с этой проблемой, как мы показали во фрагменте выше.

Если вы интегрируете Tailwind с инструментом, который использует более старую версию PostCSS, вы можете увидеть следующее сообщение об ошибке:

  Ошибка: плагин PostCSS tailwindcss требует PostCSS 8.  

В этом случае вы должны установить вместо этого сборка совместимости с PostCSS 7.

Добавить Tailwind как плагин PostCSS

Добавьте tailwindcss и autoprefixer в вашу конфигурацию PostCSS. В большинстве случаев это файл postcss.config .js в корне вашего проекта, но это также может быть файл .postcssrc или ключ postcss в вашем файле package.json .

 
module.exports = {
  плагины: {
    tailwindcss: {},
    автопрефиксатор: {},
  }
}  

Если вы не знаете, где сконфигурированы плагины PostCSS для используемых вами инструментов, вам следует обратиться к документации по этим инструментам, чтобы узнать, куда это нужно делать. Поиск по запросу «настроить postcss {мой инструмент}» тоже даст вам ответ довольно быстро.

Если вы используете какие-либо другие плагины PostCSS, вам следует прочитать нашу документацию по использованию PostCSS в качестве препроцессора для получения более подробной информации о том, как лучше всего заказать их с помощью Tailwind.

Создайте файл конфигурации

Если вы хотите настроить установку Tailwind, сгенерируйте файл конфигурации для своего проекта с помощью утилиты Tailwind CLI, включенной при установке пакета tailwindcss npm:

Это создаст минимальный попутный ветер.config.js в корне вашего проекта:

 
module.exports = {
  удалять: [],
  darkMode: ложь,
  тема: {
    продлевать: {},
  },
  варианты: {},
  плагины: [],
}  

Подробнее о настройке Tailwind см. В документации по конфигурации.

Включите Tailwind в свой CSS

Создайте файл CSS, если у вас его еще нет, и используйте директиву @tailwind для внедрения Tailwind base , компонентов и утилит Стили :

 
@tailwind base;
компоненты @tailwind;
@tailwind утилиты;  

Tailwind заменит эти директивы во время сборки на все стили, которые он генерирует на основе вашей сконфигурированной системы дизайна.

Если вы используете postcss-import (или инструмент, который использует его под капотом, например Webpacker для Rails), используйте наш импорт вместо директивы @tailwind , чтобы избежать проблем при импорте любого из ваших собственных дополнительные файлы:

  @import "tailwindcss / base";
@import "tailwindcss / components";
@import "tailwindcss / утилиты";  

Если вы работаете в среде JavaScript, такой как React или Vue, которая поддерживает прямой импорт файлов CSS в ваш JS, вы также можете вообще не создавать файл CSS и импортировать tailwindcss / tailwind.css , в котором уже есть все эти директивы:

 
import "tailwindcss / tailwind.css"  

Создание CSS

То, как вы на самом деле создаете свой проект, будет зависеть от инструментов, которые вы используете. Ваша структура может включать в себя команду типа npm run dev для запуска сервера разработки, который компилирует ваш CSS в фоновом режиме, вы можете запускать webpack самостоятельно или, может быть, вы используете postcss-cli и выполняете такую ​​команду, как стиль postcss. css -o compiled.css .

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

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

 
  module.exports = {
+ очистка: [
+ './src/**/*.html',
+ './src/**/*.js',
+],
    darkMode: ложь,
    тема: {
      продлевать: {},
    },
    варианты: {},
    плагины: [],
  }  

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

Если вы интегрируете Tailwind с инструментом, который полагается на более старую версию PostCSS, вы можете увидеть такую ​​ошибку при попытке создать свой CSS:

  Ошибка: плагин PostCSS tailwindcss требует PostCSS 8.  

В В этом случае вам следует вместо этого переключиться на нашу сборку совместимости с PostCSS 7.


Использование Tailwind без PostCSS

Tailwind CSS требует Node.js 12.13.0 или выше.

Для простых проектов или просто для пробуждения Tailwind вы можете использовать инструмент Tailwind CLI для генерации CSS без настройки PostCSS или даже без установки Tailwind в качестве зависимости, если вы не хотите.

Используйте инструмент npx , который автоматически устанавливается вместе с npm для создания полностью скомпилированного файла CSS Tailwind:

  npx tailwindcss-cli @ latest build -o tailwind.css  

Это создаст файл называется tailwind.css , созданный на основе конфигурации Tailwind по умолчанию, и автоматически добавляет все необходимые префиксы поставщиков с помощью autoprefixer.

Теперь вы можете вставить этот файл в свой HTML, как и любую другую таблицу стилей:

  


  
  
  
  


  

  

Использование пользовательского файла CSS

Если вы хотите обрабатывать любой пользовательский CSS вместе со стилями по умолчанию, создаваемыми Tailwind, создайте файл CSS в любом месте и используйте директиву @tailwind , чтобы включить Tailwind базовый , компоненты и служебные программы Стили :

 
@tailwind base;
компоненты @tailwind;

.btn {
  @apply px-4 py-2 bg-blue-600 текст-белый закругленный;
}

@tailwind утилиты;  

Затем укажите путь к этому файлу при создании CSS с npx tailwindcss build :

  npx tailwindcss-cli @ latest build ./src/tailwind.css -o ./dist/tailwind.css  

Прочтите о добавлении базовых стилей, извлечении компонентов и добавлении новых утилит, чтобы узнать больше о добавлении пользовательского CSS поверх Tailwind.

Настройка конфигурации

Если вы хотите настроить попутный ветер, создайте попутный ветер . config.js с помощью инструмента Tailwind CLI:

  npx tailwindcss-cli @ latest init  

Это создаст минимальный файл tailwind.config.js в корне вашего проекта:

 
module.exports = {
  удалять: [],
  darkMode: ложь,
  тема: {
    продлевать: {},
  },
  варианты: {},
  плагины: [],
}  

Этот файл будет автоматически прочитан при сборке CSS с npx tailwindcss build :

  npx tailwindcss-cli @ latest build./src/tailwind.css -o ./dist/tailwind.css  

Если вы хотите сохранить файл конфигурации в другом месте или дать ему другое имя, передайте путь к файлу конфигурации, используя -c вариант при создании CSS:

  npx tailwindcss-cli @ latest build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css  

Подробнее о настройку Tailwind в документации по конфигурации.

Отключение Autoprefixer

По умолчанию инструмент Tailwind CLI запускает ваш CSS через Autoprefixer, чтобы добавить необходимые префиксы поставщиков. Если у вас уже есть Autoprefixer, настроенный в конвейере сборки где-то дальше по цепочке, вы можете отключить его в инструменте Tailwind CLI с помощью флага --no-autoprefixer , чтобы не запускать его дважды:

  npx tailwindcss-cli @ последняя сборка --no-autoprefixer -o tailwind.css  

Построение для производственной среды

При сборке для производственной среды установите NODE_ENV = production в командной строке при сборке CSS:

  NODE_ENV = production npx tailwindcss-cli @ последняя сборка./src/tailwind.css -o ./dist/tailwind.css  

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


Использование Tailwind через CDN

Перед использованием сборки CDN обратите внимание, что многие функции, которые делают Tailwind CSS отличным, недоступны без включения Tailwind в процесс сборки.

Чтобы получить максимальную отдачу от Tailwind, вам действительно следует установить его как плагин PostCSS.2 / dist / tailwind.min.css «rel =» stylesheet «>

Обратите внимание, что, хотя сборка CDN большая (71,3 КБ в сжатом виде, 2872,2 КБ в исходном состоянии) , , она не соответствует размерам, которые вы видите при включении Tailwind как часть процесса сборки .

Сайты, которые следуют нашим лучшим практикам, почти всегда имеют сжатие менее 10 КБ.


Стартовый шаблон HTML

Чтобы стили Tailwind работали должным образом, вы захотите использовать HTML5 doctype и включите метатег адаптивного окна просмотра, чтобы правильно обрабатывать адаптивные стили на всех устройствах.

  


  
  
  
  


  

  

Многие интерфейсные фреймворки, такие как Next. js, vue-cli и другие, делают все это за вас за кулисами автоматически, поэтому в зависимости от того, что вы создаете, вам, возможно, не потребуется настраивать это.


Построение совместимости с PostCSS 7

Начиная с версии 2.0, Tailwind CSS зависит от PostCSS 8. Поскольку PostCSS 8 всего несколько месяцев назад, многие другие инструменты в экосистеме еще не обновлены, что означает, что вы можете увидеть подобная ошибка в вашем терминале после установки Tailwind и попытки скомпилировать ваш CSS:

  Ошибка: плагин PostCSS tailwindcss требует PostCSS 8.  

Чтобы заполнить пробел до тех пор, пока все не обновятся, мы также публикуем сборку совместимости с PostCSS 7 как @ tailwindcss / postcss7-compat в npm.9

Сборка совместимости идентична основной сборке во всех отношениях, поэтому вы не упустите ни одной функции или чего-то подобного.

После того, как остальные инструменты добавят поддержку PostCSS 8, вы можете отказаться от сборки совместимости, переустановив Tailwind и его одноранговые зависимости, используя последнюю версию тега :

  npm uninstall tailwindcss
npm install -D tailwindcss @ latest postcss @ latest autoprefixer @ latest  

Введение · Bootstrap

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных сайтов, ориентированных на мобильные устройства, с BootstrapCDN и начальной страницей шаблона.

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

Скопируйте и вставьте таблицу стилей в ваш перед всеми другими таблицами стилей для загрузки нашего CSS.

  22 

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются jQuery, Popper.js и наши собственные плагины JavaScript. Поместите следующие 900_Current_Current_Current_Current_Software_Software_Software_Russian/. JS и Popper.js? Щелкните ссылку "Показать компоненты" ниже. Если вы вообще не уверены в общей структуре страницы, продолжайте читать, чтобы увидеть пример шаблона страницы.

Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper, но не jQuery.Для получения дополнительной информации о том, что входит в Bootstrap, см. Наш раздел содержания.

Показать компоненты, требующие JavaScript
  • Предупреждения об отклонении
  • Кнопки для переключения состояний и функции флажка / радио
  • Карусель для любого поведения слайдов, элементов управления и индикаторов
  • Свернуть для переключения видимости содержимого
  • Выпадающие списки для отображения и позиционирования (также требуется Popper.js)
  • Модальные окна для отображения, позиционирования и прокрутки
  • Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения
  • Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
  • Scrollspy для поведения прокрутки и обновлений навигации

Стартовый шаблон

Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования. Сложите все вместе, и ваши страницы должны выглядеть так:

  

  
    
    
    

    
     Привет, мир! 
  
  
    

Привет, мир!

Встроенные стили для HTML

Введение

Обычно CSS записывается в отдельный файл CSS (с расширением .css ) или в теге