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

05/12/2019, by Ivan

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

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

CSS внутри тега

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

<div style="widht: 200px; height: 100px;">
  Блок
</div>

Так мы задаем блок размером 200 на 100 пикселей. Давайте рассмотрим как пишется CSS. Сначала мы пишем атрибут style="". И потом уже в ковычках пишем 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-стили пишутся также как и в атрибуте style="":

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

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

Мы вставили двумя способами 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 подключен к вашему файлу как полагается, через отдельный файл. В следующем уроке мы подробно начнем разбирать, как писать стили в отдельном файле.

Comments

Extra Block Types (EBT) - New Layout Builder experience❗

❗Extra Paragraph Types (EPT) - New Paragraphs experience

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

CSS внутри тега

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

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