Как создать css файл: Работа с таблицами стилей CSS в приложении HTML5 — Вебджем.рф

Содержание

Работа с таблицами стилей CSS в приложении HTML5

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

Примечания. В этом учебном курсе мы рекомендуем использовать браузер Chrome и установить расширение NetBeans для Chrome. Подробнее об устаноке расширения NetBeans Connector см. Начало работы с приложениями HTML5.

Чтобы запустить приложение в браузере Chrome, выполните следующие шаги.

Убедитесь, что Chrome с интеграцией NetBeans выбран в раскрывающемся списке на панели инструментов.
Нажмите кнопку ‘Выполнить’ на панели инструментов, чтобы запустить проект в браузере Chrome.

В браузере отобразится простое расширяемое меню.

Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.

При закрытии желтой полосы или щелчка ‘Отмена’ разрывается соединение между IDE и браузером. В случае разрыва соединения необходимо запустить приложение HTML5 из IDE.

Также следует отметить, что значок NetBeans отображается в местоположении адреса URL поля браузера. Вы можете щелкнуть значок, чтобы открыть меню, которое предоставляет различные варианты для изменения размера изображения в браузере, и для включения режима проверки в режиме NetBeans.

Щелкните значок ‘Открыть действие NetBeans’ в адресной строке браузера URL, чтобы открыть меню NetBeans и выбрать в меню ‘Планшет — портрет’.

Размер окна изменится до размеров браузера планшета в режиме портрета. Меню можно растянуть, чтобы заполнить правую сторону, после чего меню будет видно полностью.

Figure 2. Размер отображения планшетного портрета в браузере

Если выбрать одно из заданных по умолчанию устройств в меню, окно браузера изменится до размеров устройства. Это позволит увидеть, как приложение будет выглядеть на выбранном устройстве. Приложения HTML5 обычно реагируют на размер экрана устройства, на котором они просматриваются. Можно использовать правила JavaScript и CSS, которые реагируют на размер экрана, а также изменять способ отображения приложений так, чтобы макет был оптимизирован для устройства.

Щелкните значок NetBeans еще раз и выберите ‘Смартфон — пейзаж’ в меню NetBeans.

Figure 3. Выберите ‘Смартфон — пейзаж’ в меню NetBeans в браузере

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

Figure 4. Размер окна браузера изменяется на ‘Смартфон — пейзаж’

В следующем разделе пользователи смогут изменить таблицу стилей, что позволит просматривать все меню без прокрутки на смартфоне в горизонтальной ориентации.

Как структурирован CSS — Изучение веб-разработки

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

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

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

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

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

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

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

h2 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Атрибут href элемента <link> должен ссылаться на файл в файловой системе.

В приведённом выше примере файл 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 помещён внутри элемента <style>, содержащейся внутри HTML <head>.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <style>
      h2 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
  </head>
  <body>
    <h2>Привет!</h2>
    <p>Это мой первый опыт в CSS</p>
  </body>
</html>

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

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

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

index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Я пробую писать CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <p>Пишите сюда свой код</p>

  </body>
</html>

styles.css:



p {
  color: red;
}

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

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

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

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

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

h2  
a:link  
.manythings  
#onething  
*  
.box p  
.box p:first-child  
h2, h3, .intro

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

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

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

.special {
  color: red;
}

p {
  color: blue;
}

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

<p>Какого же я цвета?</p>

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

p {
  color: red;
}

p {
  color: blue;
}

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

Попрактикуйтесь сами — добавьте два правила для параграфа

p { ... } в вашу таблицу стилей. Затем добавьте класс к одному элементу p и попробуйте применить к нему какой-нибудь стиль.

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

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

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

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

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

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

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

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

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

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

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

Функции

Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию calc(). Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:

<div><div>The inner box is 90% - 30px.</div></div>

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

В результате получим это:

Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!

В следующем примере будут различные значения для свойства <transform> rotate().

<div></div>

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

Результат этого кода будет:

Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:

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

@import 'styles2.css';

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

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

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

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

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

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

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


padding: 10px 15px 15px 5px;

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

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

или эти:

padding-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%;
  }
}

h2 {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;
}

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



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%;
  }
}

h2 {
  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%;} }

h2 {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 — мы рассмотрим этот процесс.

Создание пустых страниц и файлов

Создание файла

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

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

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

В области содержимого, учебном модуле, плане занятий или папке нажмите вкладку Построить содержимое и в открывшемся меню выберите пункт Файл.
На странице Создать файл введите название и выберите файл. Нажмите кнопку Обзор моего компьютера, чтобы загрузить файл с компьютера. Файл сохраняется в папке верхнего уровня в хранилище файлов курса: «Файлы курса» или коллекции материалов. Файл можно также прикрепить из хранилища. Используйте параметр Выбрать другой файл , чтобы удалить файл, на который вы создали ссылку, и заменить его другим файлом.
Для параметра Открыть в новом окне выберите значение Да, чтобы открывать содержимое в новом окне или вкладке.
Выберите необходимые параметры доступности, отслеживания, а также даты отображения. Даты отображения не влияют на доступность файла (только на его видимость).

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

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

Архивные пакеты содержимого

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

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

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

Создание ссылок на HTML-файлы

Можно использовать тип содержимого «Файл», чтобы внедрить HTML-файлы в созданный вами веб-сайт. После отправки файлов HTML в раздел «Файлы курса» или коллекцию материалов необходимо выбрать файл начальной страницы, например index.html или page_1.html. Имя файла отобразится в поле Имя. Укажите имя так, чтобы пользователям было проще находить содержимое. Например, измените имя на «Начните отсюда» или «Смотрите урок 1».

При выборе HTML-файла отображается раздел Управление доступом, где можно установить уровни доступа для учащихся. Есть три варианта выбора:

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

как подключить CSS к HTML-странице

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

Как работает CSS

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

Как подключить CSS к своему проекту

Есть много способов прикрутить CSS к проекту. Первый — прописать все параметры в коде HTML-страницы. Для этого пригодится открывающий и закрывающий тег «style» — в нем будут содержаться правила. Второй — создать самостоятельный файл с расширением .css. У этих двух методов есть названия — внутренние и внешние таблицы стилей. Также веб-разработчики именуют их глобальными и связанными.

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

Его называют встроенным. В нем содержится атрибут «style», относящийся к HTML, а в скобках записан уже CSS-код. Стоит учитывать, что использование такого варианта — не лучшее решение для большинства ситуаций. Он работает, но не считается правильным.

Когда требуется застилить отдельный элемент, стоит создать селектор класса. Он придаст форму исключительно тем элементам, к которым применили определенный класс.

В качестве примера возьмем абзац, с селектором «skill»:

Такой тег превращается из:

в конструкцию, при помощи которой присвоение стилей является максимально правильным:

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

Что нужно для работы внутренних таблиц стилей

В примере взята несложная конструкция, задающая для абзацев «p» цвет — color и размер шрифта — font-size.

Данный отрезок вставляют в какую-либо HTML-страницу, используя тег «style». Такой блок располагается следом за «title» — текстом, высвечивающимся в панели вкладок браузера. В коде это будет выражено так:

Полный код страницы:

А это появляется на браузерной веб-странице, если нажать в редакторе на правую кнопку мыши и выбрать «open in browser»:

В упражнении читатель сделал внутреннюю таблицу стилей, которую можно в любое время отредактировать. Она пригодна для вынесения кода в самостоятельный документ с расширением .css, после чего она перейдет в форму внешних таблиц, ее можно будет добавить в любое количество веб-страниц.

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

Отличие внешних таблиц CSS-стилей

Как уже упоминалось выше, внешние таблицы имеют расширение .css и сохраняются в отдельном файле. Создания такого документа предусматривает использование специальных текстовых редакторов (Sublime Text) или знакомого всем пользователям компьютера блокнота. Главным правилом, из-за которого файл приобретает свои свойства, является правильное разрешение. Прописать его можно в названии, просто поставив после имени точку и «css» . На изображении приведен пример кода:

Внимательный читатель мог заметить, что строки на этой картинке не отличаются от написанного для внутренних таблиц. Отличие только в окружающих блок тегах и возможности применения настроек к нескольким веб-страницам или целому сайту. Если подробнее рассмотреть первое отличие, понятно, что дополнительные теги указывают на расположение таблицы. Вставляется блок также после «title».

Как это выглядит в редакторе:

Путь к файлу styles.css не указан полностью — это допустимо, если оба документа находятся в одной папке.

Можно ли импортировать чужие стили

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

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

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

Заметили ошибку? Выделите ее и нажмите Ctrl+Enter, чтобы сообщить нам.

Пишем CSS лучше и красивее. Не будем ходить вокруг да около, скажем… | by Nikita | WebbDEV

Не будем ходить вокруг да около, скажем прямо: процесс написания хорошего CSS-кода может быть очень и очень тяжёлым. Многие разработчики не хотят связываться со стилями. Они готовы заниматься всем, чем угодно, но только не CSS. От этого никуда не деться. В наши дни огромное внимание уделяется дизайну, и тому, что называют «UX», а без CSS тут никак не обойтись. Цель этого материала — помочь всем желающим улучшить свои навыки в разработке и применении стилей веб-страниц.

В самом начале нового проекта стили обычно выглядят просто и понятно. Скажем, имеется совсем мало CSS-селекторов, вроде .title, input, #app, работа с которыми никому не покажется трудной.

Но, по мере роста приложения, стили превращаются в кошмар. Разработчик начинает путаться в CSS-селекторах. Он обнаруживает, что пишет нечто вроде div#app .list li.item a. Однако работу останавливать нельзя, поэтому программист продолжает использовать подобные конструкции, CSS-код запихивают куда-нибудь в конец файла. И правда — кого интересуют стили? Да и сам по себе CSS — это такая ерунда… В результате получается 500 строк совершенно неподдерживаемого, ужасного CSS.

Мне хочется, чтобы дочитав эту статью, вы взглянули бы на свои предыдущие проекты и подумали: «Ну ничего ж себе, как же я мог такое написать?».

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

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

И, в конце концов, вы ведь читаете это не для того, чтобы ознакомиться с неким фреймворком? Поэтому займёмся CSS. Сразу хотелось бы отметить, что материал это не о том, как создавать красивые дизайны для приложений. Он — о том, как писать качественный CSS-код, который легко поддерживать, и о том, как правильно его организовывать.

В своих примерах я буду использовать SCSS. Это — CSS-препроцессор. Фактически, SCSS является надмножеством CSS. В нём имеются некоторые весьма интересные возможности, такие, как переменные, вложенные конструкции, импорт файлов, миксины. Обсудим возможности SCSS, которыми мы будем пользоваться.

Переменные

В SCSS можно пользоваться переменными. Основной плюс применения переменных — возможность их повторного использования. Представим, что у нас имеется набор цветов для приложения. Основной цвет — голубой. В результате этот цвет применяется буквально повсюду. Он используется в свойстве background-color кнопок, в свойстве color заголовка страницы, и во многих других местах.

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

Вложенные конструкции

SCSS поддерживает вложенные конструкции. Вот обычный CSS:

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

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

Фрагментирование и импорт

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

Файлы, содержащие фрагменты описаний стилей, можно создавать, добавляя в начале их имён знак подчёркивания: _animations.scss, _base.scss, _variables.scss, и так далее.

Для импорта этих файлов используется директива @import. Вот как пользоваться этим механизмом:

Возможно, вам покажется, что в этом коде имеется ошибка. Действительно, ведь файл, который мы хотим импортировать, называется _animations.scss, а мы, в файле header.scss, используем команду @import "animations". Однако ошибки здесь нет. SCSS — система достаточно интеллектуальная для того, чтобы понять, что в подобной ситуации разработчик имеет в виду соответствующий файл.

Это — всё, что нам надо знать о переменных, о вложенных конструкциях, о фрагментировании стилей, и об импорте. В SCSS есть и другие возможности, вроде миксинов, наследования, и других директив (среди них — @for, @if и ещё некоторые), но мы тут о них говорить не будем.

Если вы хотите познакомиться с SCSS поближе — взгляните на соответствующую документацию.

Я уже и не помню, сколько раз я использовал универсальные термины для именования CSS-классов. В результате у меня получались такие имена, думаю, знакомые всем: .button, .page-1, .page-2, .custom-input.

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

Методология БЭМ (Блок, Элемент, Модификатор) — это компонентный подход к веб-разработке. В частности, речь идёт о соглашении по именованию сущностей. Эта методология позволяет структурировать код, способствует разбиению его на модули и помогает в его повторном использовании. Поговорим о блоках, элементах и модификаторах.

Блоки

Блоки можно рассматривать как компоненты. Наверняка, вы играли в детстве в Lego. Поэтому включим машину времени.

Как вы строили, скажем, обычный домик? Тут понадобится окно, крыша, дверь, стены, и, в общем-то, этого достаточно. Всё это — наши блоки. Они значимы сами по себе.

Именование: имя блока — .block

Примеры: .card, .form, .post, .user-navigation

Элементы

Как сделать из Lego окно? Вероятно, некоторые кубики выглядят как рамки, поэтому, если соединить четыре таких кубика, получится красивое окно. Это — элементы. Они являются частями блоков, они нам нужны для того, чтобы создавать блоки. Однако, элементы, вне блоков, бесполезны.

Именование: имя блока + __ + имя элемента — .block__element

Примеры: .post__author, .post__date, .post__text

Модификаторы

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

Именование: имя блока ИЛИ имя элемента + -- + имя модификатора — .block__element--modifier, .block--modifier
Примеры: .post--important, .post__btn--disabled

Примечания

При использовании БЭМ имена дают исключительно классам. Никаких ID или тегов — только классы.
Блоки или элементы могут быть вложены в другие блоки или элементы, но они должны быть полностью независимыми. Это очень важно. Поэтому, например, не надо назначать кнопке поля из-за того, что вы хотите поместить её под заголовком, в противном случае кнопка окажется связанной с заголовком. Используйте вместо этого вспомогательные классы.
При применении методологии БЭМ HTML-файлы будут перегружены именами, но это — небольшая плата за те возможности, которые даёт нам БЭМ.

Упражнение

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

Например, вот что у меня получилось в результате анализа Google Store.

Анализ сайта

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

Примеры

Вот пример, подготовленный средствами Codepen, демонстрирующий возможности БЭМ. Тут мы по-разному оформляем нечто вроде публикаций в некоем блоге. Вот HTML-код этого примера.

Вот SCSS-стили:

А вот то, что в итоге получилось.

Оформление «публикаций» с использованием БЭМ

Рассмотрим ещё один пример. Тут, пользуясь БЭМ, мы оформляем кнопки. Вот HTML-код этого примера.

Вот SCSS-стили.

А вот — результат.

Оформление кнопок с использованием методологии БЭМ

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

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

Все файлы с SCSS-фрагментами надо разместить в 7 разных папках.
Все эти файлы нужно импортировать в один файл, main.scss, расположенный в корневой директории, в которой лежат все эти папки.

Название шаблона, в результате, можно расшифровать, как «7 папок — 1 файл». Как видите, всё не так уж и сложно. Поговорим об этом шаблоне подробнее.

7 папок

Вот папки, о которых идёт речь:

base: в этой папке надо разместить весь, так сказать, «шаблонный» код. Под «шаблонным» кодом здесь понимается весь тот CSS-код, который приходится писать при создании нового проекта. Например: типографские правила, анимации, утилиты (то есть — классы вроде margin-right-large, text-center), и так далее.
components: название этой папки явно указывает на то, что в ней будет храниться. Речь идёт о стилях компонентов, используемых для сборки страниц. Это — кнопки, формы, всяческие слайдеры, всплывающие окна, и так далее.
layout: эта папка применяется для хранения стилей элементов макетов страниц. Это — шапка и подвал страницы, навигационная область, различные разделы страницы, сетка, и так далее.
pages: иногда в проекте нужны страницы, обладающие собственным специфическим стилем, который отличается от стиля остальных страниц. Описания стилей для таких вот особенных страниц и попадают в эту папку.
themes: если веб-проект предусматривает использование различных тем оформления (скажем, нечто вроде «dark mode», или «admin»), стили для них надо положить сюда.
abstracts: в эту папку попадают всяческие вспомогательные вещи — функции, переменные, миксины.
vendors: редкий сайт обходится без внешних зависимостей. В этой папке хранятся стили, которые созданы не тем, кто разрабатывает конкретный сайт. Сюда, например, можно сохранить файлы проекта Font Awesome, стили Bootstrap и прочее подобное.

Файл main.scss

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

Не могу не согласиться с тем, что выглядит вся эта конструкция из семи папок довольно масштабной. Однако тут надо отметить, что эта архитектура рассчитана на большие проекты. Для маленьких проектов можно использовать адаптированную версию шаблона «7–1». Особенности этой версии заключаются в том, что в ней можно обойтись без некоторых папок. Так, тут можно отказаться от папки vendors, поместив ссылки на внешние по отношению к проекту файлы стилей в тег link. Далее, можно обойтись без папки themes, так как, вероятно, в небольшом веб-приложении темы оформления использоваться не будут. И, наконец, можно избавиться от папки pages, так как в этом проекте, скорее всего, не будет страниц, стиль которых сильно отличается от общего стиля. В результате из семи папок остаётся всего четыре.

Далее, занимаясь маленьким проектом, можно пойти одним из двух путей:

Если вы предпочитаете воспользоваться тем, что осталось от шаблона «7–1», то у вас сохраняются папки abstracts, components, layout и base.
Если вы решаете обойтись одной большой папкой, то все файлы с фрагментами стилей, вместе с файлом main.scss, попадают в эту папку. Выглядеть это может примерно так:

Что именно выбрать — зависит от ваших предпочтений.

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

Для того чтобы преобразовать SCSS-код в CSS, вам понадобится платформа Node.js и менеджер пакетов NPM (или Yarn).

Мы будем использовать пакет node-sass, который позволяет компилировать .scss-файлы в .css-файлы. Это — инструмент командной строки, пользоваться им несложно. А именно вызов node-sassвыглядит так:

Здесь доступно множество опций. Мы остановимся на двух:

Опция -w позволяет организовать наблюдение за папкой или файлом. То есть, node-sass будет следить за изменениями в коде, и, когда они происходят, автоматически компилировать файлы в CSS. Эта возможность весьма полезна в процессе разработки.
Опция --output-style определяет стиль выходного CSS-файла. Тут доступно несколько вариантов: nested, expanded, compact, compressed. Эту опцию мы будем использовать для сборки готового CSS-файла.

Если вы — человек любопытный (надеюсь — так оно и есть, ведь разработчику любопытство только на пользу), то вам, скорее всего, интересно будет взглянуть на документацию к пакету node-sass.

Итак, с инструментами мы определились, теперь осталось самое простое. Для того чтобы преобразовать SCSS в CSS, надо выполнить следующие шаги:

Создайте папку проекта и перейдите в неё: mkdir my-app && cd my-app

Инициализируйте проект: npm init

Добавьте в проект пакет node-sass: npm install node-sass — save-dev

Создайте файл index.html, папки со стилями, файл main.scss:

Добавьте в файл package.json следующее:

Добавьте ссылку, ведущую к скомпилированному CSS-файлу, в тег head файла index.html:

Вот и всё. Теперь, когда вы занимаетесь работой над проектом, выполните команду npm run watch и откройте в браузере файл index.html. Для того, чтобы минифицировать CSS, выполните команду npm run build.

Интерактивная перезагрузка страницы

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

Установите пакет live-server (обратите внимание на то, что его устанавливают глобально):

npm install -g live-server

Добавьте в зависимости проекта пакет npm-run-all, который позволит одновременно запускать несколько скриптов:

npm install npm-run-all — save-dev

Добавьте следующее в package.json:

Теперь, выполнив команду npm run start, вы, в процессе работы над проектом, мгновенно будете видеть изменения, вносимые в него, не перезагружая страницу вручную.

Пакет autoprefixer

На данном этапе у вас имеется настроенная среда разработки, что очень хорошо. Теперь поговорим об инструментах для сборки проекта, и, в частности, о пакете autoprefixer. Это — инструмент (речь идёт о postcss-плагине), который парсит CSS-код и добавляет префиксы производителей браузеров к CSS-правилам, используя данные с Can I Use.

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

Код с префиксами браузеров выглядит примерно так:

Несложно заметить, что писать такой код весьма утомительно. Для того чтобы облегчить задачу обеспечения совместимости нашего CSS-кода с различными браузерами, не переусложняя проект, мы и воспользуемся пакетом autoprefixer. Тут понадобится выполнить следующие действия:

Скомпилируем все SCSS-файлы в один основной CSS-файл.
Добавим в этот файл префиксы браузеров с помощью autoprefixer.
Сожмём этот CSS-файл.

Это, в общем-то, завершающий этап работы над проектом. Итак, вот что надо сделать для использования autoprefixer:

Добавьте в проект две зависимости — postcss-cli и autoprefixer:

npm install autoprefixer postcss-cli — save-dev

Добавьте в package.json следующий код и модифицируйте скрипт build:

Теперь осталось лишь выполнить команду npm run build, и вы получите сжатый CSS-файл, в который будут добавлены префиксы браузеров. Вот репозиторий, в котором вы найдёте шаблонный проект, построенный с использованием рассмотренных здесь технологий. А вот — ещё один репозиторий с моими учебными проектами, при разработке которых я пользовался описанными здесь приёмами, и страница с рабочими примерами.

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

Перевод статьи How to get better at writing CSS.

Подключение файла стилей CSS на видеокурсе от Loftblog

Человек стремится к знанию, и как только в нем угасает жажда знания,
он перестает быть человеком. Ф. Нансен

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

Какие знания о CSS, CSS-правилах, подключении файла стилей CSS вы почерпнете на этом видеоуроке

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

Где лучше прописывать файлы стилей CSS

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

Правильное подключение файла стилей CSS

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

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

Правильное оформление CSS-правил

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

.class { font-size: 18px; width: 50px; }

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

.class, р { font-size: 18px; color: #fd2bac; width: 50px; }

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

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Рекомендуемые курсы

Что такое CSS | Web-Creature

Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств

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

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

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

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

Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь.

Практическое освоение CSS

Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://…») в случае, если файл стилей находится на другом сервере.

Второй вариант, при котором описание стилей располагается в коде Webстранички, внутри тега <BODY>, в теге <STYLE type=»text/css»>… </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type=»text/css» является обязательным и служит для указания броузеру использовать CSS.

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

Популярность: 100%

Рейтинг: Загрузка …

Создание файла CSS

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

MyLayout.ascx
MyLayout.css
MyLayout.doctype.xml

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

default.css (~ / Portals / _default / default.css) — CSS по умолчанию для веб-сайта.
module.css (~ / DesktopModules / mymodulename / module.css) — CSS для каждого типа модуля, отображаемого на странице.
skin.css (~ / Portals / PortalID / Skins / SkinPackageName / skin.css) — главный CSS для темы должен называться skin.css.
MyThemeTemplate.css (~ / Portals / _default / Skins / SkinPackageName / MyThemeTemplate.css) — CSS для определенного шаблона макета.
container.css (~ / Portals / PortalID / Containers / ContainerPackageName / container.css) — главный CSS для всех контейнеров в вашей теме.
portal.css (~ / Portals / PortalID / portal.css) — CSS, который может переопределять элементы в установленных темах. Администраторы веб-сайтов могут использовать это, чтобы переопределить любые стили в теме или контейнерах.

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

Ступеньки

Создайте главную таблицу стилей для своей темы (skin.css). Включать:
- Общие стили для всех шаблонов макетов в вашей теме.
- Стилей для объектов темы. используется во всех ваших шаблонах макета.
(Необязательно) Создайте отдельную таблицу стилей для каждого шаблона макета в своей теме (MyThemeLayout.css). Включать:
- Стили, относящиеся к шаблону макета.
- Стили для объектов темы, которые используются только в определенном шаблоне макета.
(Рекомендуется) Создайте главную таблицу стилей для всех контейнеров в вашей теме (container.css). Включать:
- Общие стили для всех контейнеров в вашей теме.
- Стилей для объектов темы. используется во всех ваших контейнерах.
(Необязательно) Создайте отдельную таблицу стилей для каждого типа контейнера в вашей теме (MyThemeLayout.css). Включать:
- Стили, относящиеся к контейнеру.
- Стили для объектов темы, которые используются только в определенном контейнере.

Пример

шаблон макета

CSS

 
    #login_style .linkseparator {
         цвет белый;
         font-weight: жирный;
    }

Создавайте, редактируйте и прикрепляйте файлы CSS для стилизации вашего сайта

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

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

Создайте новый файл CSS

В своей учетной записи HubSpot перейдите к Marketing > Files and Templates > Design Tools .
Щелкните значок папки Папка в верхнем левом углу, чтобы развернуть меню боковой панели. Затем щелкните Файл > Новый файл .

В диалоговом окне щелкните Таблица стилей CSS . Затем введите имя для своей таблицы стилей CSS и нажмите Create .

Редактировать файл CSS

После создания или открытия существующего файла CSS внесите изменения в редакторе кода. Помимо стандартного CSS, редактор кода поддерживает переменные и макросы HubL, чтобы упростить поддержку CSS.Чтобы предварительно просмотреть, как будет отображаться ваш HubL, нажмите, чтобы включить переключатель Show output в верхней части редактора. Справа откроется панель с отрендеренным предварительным просмотром.

Чтобы увидеть список стандартных селекторов CSS для шаблонов HubSpot, ознакомьтесь с Boilerplate CSS.

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

В консоли ошибок в нижней части редактора кода.
В полосе ошибок в левой части редактора кода.
На полосе прокрутки в правой части редактора.

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

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

Вы также можете щелкнуть номер строки в редакторе кода и соответствующим образом обновить URL-адрес файла. Это позволяет вам поделиться ссылкой на ваш код с другими и направить их туда, где вы работаете в файле.

После редактирования файла нажмите Опубликовать изменения в правом верхнем углу. Если вы хотите вызвать эту таблицу стилей в другом закодированном шаблоне, скопируйте URL-адрес таблицы, щелкнув Действия > Копировать общедоступный URL-адрес в меню левой боковой панели.

Прикрепить к шаблону

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

public_common.css * — таблица стилей, которая в основном используется приложением HubSpot, но также и для определенных функций сайта.
HTML заголовка в настройках Веб-сайт > Страницы — теги ссылок добавляются в глобальный сайта.
Layout.css ** — адаптивный файл CSS по умолчанию, прикрепленный ко всем макетам шаблонов перетаскивания.
Прикрепленные таблицы стилей в настройках в разделе Веб-сайт > Страницы — таблицы стилей, прикрепленные ко всему вашему сайту.
Прикрепленные таблицы стилей в настройках в разделе Веб-сайт > Блог — таблицы стилей, прикрепленные к вашему блогу (заменяют глобальные таблицы сайта).
Связанные таблицы стилей *** — таблицы стилей, прикрепленные к макету шаблона.
Дополнительная разметка в шаблоне — теги ссылок, добавленные в определенного макета шаблона.
Таблицы стилей для конкретной страницы — таблицы стилей, прикрепленные к настройкам страницы.
Заголовок страницы HTML — теги ссылок, добавляемые в заголовок определенной страницы в настройках страницы.

* Обязательно

** Требуется для макетов перетаскивания

*** Рекомендуемый способ прикрепления таблиц стилей для макетов шаблонов

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

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

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

Присоединение или удаление таблиц стилей на определенной странице

Обратите внимание: этот параметр недоступен для шаблонов тем.Узнайте, как изменить настройки темы.

Чтобы добавить или удалить таблицу стилей для конкретной страницы из раздела настроек редактора страницы:

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

Нажмите Сохранить и Опубликовать в верхнем правом углу.

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

На той же вкладке Settings в редакторе страниц выберите Disabled в раскрывающемся меню рядом с вашими включенными таблицами стилей.
Нажмите Сохранить и Опубликовать в правом верхнем углу.

Прикрепите или удалите таблицы стилей на уровне домена

Обратите внимание: эта функция доступна только для учетных записей Marketing Hub Enterprise .

Чтобы добавить или удалить таблицу стилей из всего содержимого в домене:

В своей учетной записи HubSpot щелкните значок настроек Настройки на главной панели навигации.
В меню боковой панели щелкните Веб-сайт > Страницы .
Щелкните раскрывающееся меню , чтобы выбрать домен , для которого нужно обновить настройки.
На вкладке Шаблоны прокрутите до CSS и таблицы стилей . Чтобы добавить таблицу стилей, нажмите + Добавить таблицу стилей . Щелкните значок X рядом с прикрепленной таблицей стилей, чтобы удалить ее.
Нажмите Сохранить .

Как устроен CSS — Изучите веб-разработку

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

Во-первых, давайте рассмотрим три метода применения CSS к документу: с внешней таблицей стилей, с внутренней таблицей стилей и со встроенными стилями.

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

Внешняя таблица стилей содержит CSS в отдельном файле с расширением .css . Это наиболее распространенный и полезный метод добавления CSS в документ. Вы можете связать один файл CSS с несколькими веб-страницами, стилизовав их все с помощью одной и той же таблицы стилей CSS. В разделе «Начало работы с CSS» мы связали внешнюю таблицу стилей с нашей веб-страницей.

Вы ссылаетесь на внешнюю таблицу стилей CSS из элемента HTML :

  

  
    
     Мой эксперимент с CSS 
    
  
  
      Привет, мир!  
     Это мой первый пример CSS

Файл таблицы стилей CSS может выглядеть так:

  h2 {
  цвет синий;
  цвет фона: желтый;
  граница: сплошной черный 1px;
}

п {
  красный цвет;
}

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

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

Внутренняя таблица стилей находится в документе HTML. Чтобы создать внутреннюю таблицу стилей, вы помещаете CSS в элемент

`Привет, мир!`

Это мой первый пример CSS

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

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

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

Встроенные стили - это объявления CSS, которые влияют на один элемент HTML, содержащийся в атрибуте стиля . Реализация встроенного стиля в HTML-документе может выглядеть так:

  

  
    
     Мой эксперимент с CSS 
  
  
      Привет, мир!  
     Это мой первый пример CSS

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

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

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

index.html:

  

  
    
     Мои эксперименты с CSS 
    
  
  

     Создайте здесь свой тестовый HTML

styles.css:

 

п {
  красный цвет;
}

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

В качестве альтернативы вы также можете использовать интерактивный редактор, расположенный ниже.

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

Селектор нацелен на HTML для применения стилей к содержимому.Мы уже обнаружили множество селекторов в руководстве «Начало работы с CSS». Если CSS не применяется к содержимому, как ожидалось, ваш селектор может не соответствовать так, как вы думаете, он должен соответствовать.

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

  h2
ссылка
.много вещей
#одна вещь
*
.box p
.box p: первый ребенок
h2, h3,.введение

Попробуйте создать несколько правил CSS, в которых используются указанные выше селекторы. Добавьте HTML, который будет стилизован селекторами. Если какой-либо из приведенных выше синтаксисов вам не знаком, попробуйте поискать в MDN.

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

Специфичность

Вы можете столкнуться со сценариями, когда два селектора выбирают один и тот же элемент HTML. Рассмотрим таблицу стилей ниже с селектором p , который устанавливает синий цвет текста абзаца.Однако существует также класс, который устанавливает красный цвет для текста выбранных элементов.

  .special {
  красный цвет;
}

п {
  цвет синий;
}

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

   Какого я цвета?

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

  п {
  красный цвет;
}

п {
  цвет синий;
}

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

Попробуйте сами! Добавьте HTML, затем добавьте два правила p {...} в свою таблицу стилей. Затем измените первый селектор p на .special , чтобы увидеть, как он меняет стиль.

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

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

На самом базовом уровне CSS состоит из двух компонентов:

Свойства : это удобочитаемые идентификаторы, указывающие, какие стилистические особенности вы хотите изменить.Например, font-size , width , background-color .
Значения : каждому свойству присваивается значение. Это значение указывает, как стилизовать свойство.

В приведенном ниже примере выделяется одно свойство и значение. Имя свойства - , цвет, , значение - , синий, .

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

Наконец, блоки объявления CSS объединяются с селекторами для создания наборов правил CSS (или правил CSS ). Пример ниже содержит два правила: одно для селектора h2 и одно для селектора p . Цветное выделение указывает на правило h2 .

Установка для свойств CSS определенных значений - это основной способ определения макета и стиля документа.Механизм CSS вычисляет, какие объявления применяются к каждому элементу страницы.

Важно: Свойства и значения CSS чувствительны к регистру. Свойство и значение в каждой паре разделяются двоеточием. (: )

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

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

Важно : В CSS (и других веб-стандартах) согласовано, что орфография в США является стандартом там, где есть языковые вариации или неточности. Например, цвет следует писать как цвет , так как цвет работать не будет.

Функции

Хотя большинство значений являются относительно простыми ключевыми словами или числовыми значениями, есть некоторые значения, которые принимают форму функции.Примером может служить функция calc () , которая может выполнять простые вычисления в CSS:

    Внутреннее поле 90% - 30 пикселей.

  .outer {
  граница: сплошной черный цвет 5 пикселей;
}

.коробка {
  отступ: 10 пикселей;
  ширина: calc (90% - 30 пикселей);
  цвет фона: rebeccapurple;
  цвет белый;
}

Это отображается как:

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

Другим примером могут быть различные значения для transform , такие как rotate () .

  .box {
  маржа: 30 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: rebeccapurple;
  преобразовать: повернуть (0.8 оборот);
}

Вывод приведенного выше кода выглядит следующим образом:

CSS @rules (произносится как «at-rules») содержат инструкции о том, что CSS должен выполнять или как он должен себя вести. Некоторые @rule просты с ключевым словом и значением. Например, @import импортирует таблицу стилей в другую таблицу стилей CSS:

  @import 'styles2.css ';

Одно из распространенных @rule, с которым вы, вероятно, столкнетесь, - это @media , которое используется для создания медиа-запросов. Медиа-запросы используют условную логику для применения стилей CSS.

В приведенном ниже примере таблица стилей определяет розовый фон по умолчанию для элемента . Однако следует медиа-запрос, который определяет синий фон, если область просмотра браузера шире 30 em.

  кузов {
  цвет фона: розовый;
}

@media (min-width: 30em) {
  тело {
    цвет фона: синий;
  }
}

В этих уроках вы встретите и другие правила @.

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

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

Например, эта строка кода:

 
отступ: 10px 15px 15px 5px;

эквивалентен этим четырем строкам кода:

  padding-top: 10px;
отступ справа: 15 пикселей;
padding-bottom: 15 пикселей;
отступ слева: 5 пикселей;

Эта одна строка:

  фон: красный url (bg-graphic.png) 10px 10px repeat-x исправлено;

эквивалентно этим пяти строкам:

  цвет фона: красный;
фоновое изображение: URL (bg-graphic.png);
background-position: 10px 10px;
фон-повтор: повтор-х;
background-attachment: исправлено;

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

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

Предупреждение : Менее очевидный аспект использования сокращений CSS - это сброс пропущенных значений. Значение, не указанное в сокращении CSS, возвращается к своему исходному значению. Это означает, что пропуск в сокращении CSS может заменить ранее установленными значениями .

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

Комментарии CSS

начинаются с / * и заканчиваются * / . В приведенном ниже примере комментарии отмечают начало отдельных разделов кода. Это помогает ориентироваться в кодовой базе по мере ее увеличения. При наличии такого рода комментариев поиск комментариев в редакторе кода становится способом эффективного поиска раздела кода.

 

тело {
  шрифт: 1em / 150% Helvetica, Arial, без засечек;
  заполнение: 1em;
  маржа: 0 авто;
  максимальная ширина: 33em;
}

@media (min-width: 70em) {
  
  тело {
    размер шрифта: 130%;
  }
}

h2 {размер шрифта: 1.5em;}



div p, #id: first-line {
  цвет фона: красный;
  радиус границы: 3 пикселя;
}

div p {
  маржа: 0;
  заполнение: 1em;
}

div p + p {
  padding-top: 0;
}

Код

«Комментирование» также полезно для временного отключения участков кода для тестирования. В приведенном ниже примере правила для .special отключены путем «комментирования» кода.

 

п {
  цвет синий;
}

Добавьте комментарии к вашему CSS.

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

В приведенном ниже примере каждое объявление (и начало / конец правила) имеет свою собственную строку. Возможно, это хороший способ написать CSS. Это упрощает обслуживание и понимание CSS.

  кузов {
  шрифт: 1em / 150% Helvetica, Arial, без засечек;
  заполнение: 1em;
  маржа: 0 авто;
  максимальная ширина: 33em;
}

@media (min-width: 70em) {
  тело {
    размер шрифта: 130%;
  }
}

h2 {
  размер шрифта: 1.5em;
}

div p,
#id: first-line {
  цвет фона: красный;
  радиус границы: 3 пикселя;
}

div p {
  маржа: 0;
  заполнение: 1em;
}

div p + p {
  padding-top: 0;
}

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

  body {font: 1em / 150% Helvetica, Arial, sans-serif; заполнение: 1em; маржа: 0 авто; max-width: 33em;}
@media (min-width: 70em) {body {font-size: 130%;}}

h2 {размер шрифта: 1.5em;}

div p, #id: первая строка {цвет фона: красный; радиус границы: 3px;}
div p {маржа: 0; заполнение: 1em;}
div p + p {padding-top: 0;}

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

Важно: Хотя пробелы разделяют значения в объявлениях CSS, в именах свойств никогда не бывает пробелов .

Например, эти объявления являются действительными CSS:

  маржа: 0 авто;
отступ слева: 10 пикселей;

Но эти объявления недействительны:

  маржа: 0авто;
отступ слева: 10 пикселей;

Вы видите ошибки с интервалами? Во-первых, 0auto не распознается как допустимое значение для свойства маржи .Запись 0auto предназначена для двух отдельных значений: 0 и auto . Во-вторых, браузер не распознает padding- как допустимое свойство. Правильное имя свойства ( padding-left ) отделено ошибочным пробелом.

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

Чтобы узнать, как интервал может нарушить CSS, попробуйте поиграть с интервалом внутри вашего тестового CSS.

Полезно понять, как браузер использует HTML и CSS для отображения веб-страницы. Следующая статья, Как работает CSS, объясняет этот процесс.

`Как связать файл таблицы стилей (CSS) с файлом HTML`

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

`Причины использования внешнего файла таблицы стилей CSS для программирования HTML`

Cascading Style Sheet (CSS) - это язык таблиц стилей, который управляет визуальным представлением веб-сайта. Обычно используемый с такими языками разметки, как HTML, CSS позволяет стилизовать каждый элемент HTML и придать вашему сайту более привлекательный вид.

Хотя есть много способов добавить CSS в HTML, самый простой способ сделать это - напрямую добавить все правила CSS в HTML. Несмотря на это, этот метод CSS имеет много недостатков.Помимо раздувания кода повторяющимися правилами CSS, его редактирование отнимает много времени, поскольку изменения, внесенные в один файл, не применяются к другим.

Чтобы избежать этих проблем, вы можете поместить стили CSS в файл .css и связать его с файлами HTML. Таким образом, один файл CSS можно использовать для стилизации многих страниц HTML.

Вот преимущества связывания файла CSS с HTML:

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

`Как подключить внешнюю таблицу стилей CSS к файлу HTML`

Чтобы связать CSS с файлом HTML, мы используем тег , который вы помещаете в раздел HTML . Ссылка будет выглядеть так:

Вот разбивка атрибутов, содержащихся в ссылке:

rel - определяет связь между файлом, в котором размещена эта команда, и файлом, определенным в атрибуте href . Стандартное значение этого атрибута - , таблица стилей .
тип - определяет содержимое связанного файла. В этом руководстве мы устанавливаем для этого атрибута значение text / css . Однако вы можете вообще пропустить его, если используете HTML5.
href - указывает расположение файла CSS, который вы хотите связать с HTML. Если файл CSS находится в том же каталоге, что и файл HTML, вам нужно только ввести имя файла. В противном случае вам необходимо указать имя папки, в которой вы храните файл CSS (пример: CSS / stylesheet.css ).
media - указывает тип носителя, для которого оптимизированы правила CSS. В этом руководстве мы используем значение screen , чтобы подразумевать его использование для экранов компьютеров.Если вы хотите применить правила CSS к напечатанным страницам, вы можете установить значение print .

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

`Заключение`

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

Что вы думаете об этом руководстве? Дайте нам знать в комментариях ниже!

Меркис - администратор серверов и эксперт по Linux в Hostinger.Он поддерживает все в рабочем состоянии, решая сложные проблемы управления сервером. Кроме того, он большой поклонник технологии блокчейн, веб-разработки и бодибилдинга.

`Создайте свой первый проект HTML / CSS`

Требования:

Текстовый редактор (мы рекомендуем VS Code)
Интернет-браузер

`Введение`

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

Мы рекомендуем вам просмотреть это видео с пояснениями, а затем следовать приведенным ниже инструкциям.

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

`Шаг 1. Создайте структуру папок для своей веб-страницы`

Давайте создадим структуру папок для поддержки вашей веб-страницы.Хорошо продуманная структура папок поможет вам быстро перейти к файлам HTML или CSS, содержащим ваш код.

Сначала откройте Finder (в Mac) или проводник (в Windows). Затем создайте папку (также известную как каталог) с именем DevProject . Эта папка будет содержать все файлы для вашего проекта HTML и CSS.

Откройте папку DevProject . Внутри создайте следующие предметы:

Новый файл с именем index.html (используйте предпочитаемый текстовый редактор)
Новая папка с названием ресурсов

Индекс .html будет содержать HTML-код для вашей веб-страницы, а папка resources будет содержать все необходимые ресурсы, необходимые для файлов HTML (файлы CSS, изображения и т. д.).

Затем откройте вновь созданную папку resources . Внутри этой папки создайте следующее:

Дополнительная папка с именем css

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

Наконец, откройте только что созданную папку css .Внутри этой папки создайте следующее:

Новый файл с именем index.css (используйте предпочитаемый текстовый редактор)

Файл index.css будет содержать все правила стилей CSS, которые будут применены к вашей веб-странице.

Эта общая структура папок поможет поддерживать рабочий процесс при добавлении файлов или ресурсов. Вот как это должно выглядеть на высоком уровне:

`Шаг 2. Добавьте контент на свою веб-страницу`

Отлично! Имея структуру папок, файлы HTML и CSS в нужном месте, мы можем добавлять контент на веб-страницу.

Сначала откройте файл index.html в предпочитаемом текстовом редакторе. Затем добавьте необходимый шаблонный HTML-код:

После добавления стандартного HTML-кода вы можете также добавить следующие элементы:

Ваш собственный заголовок между тегами </code></li><li> Ваш собственный контент в тегах <code><body> </code>.Если вам нужно какое-то быстрое заранее написанное содержимое, вы можете свободно использовать следующее и изменять по своему усмотрению:</li></ol><pre> <pre> <code> <p> <h2><span class="ez-toc-section" id="i-36"> Имя Фамилия </span></h2> <p> Я учусь программировать на Codecademy! В мои цели входят: </p> <ul> <li> Научитесь программировать </li> <li> Начать компанию </li> <li> Помогите миру </li> </ul> <p> Это один из моих любимых веб-сайтов: <a href="https://www.google.com/" target="_blank" rel="noopener"> Google </a> </p> </p> </code> </pre></pre><p> Наконец, откройте индекс <strong>.css </strong> в предпочитаемом вами текстовом редакторе. Добавьте в файл следующие предварительно записанные правила CSS (не стесняйтесь изменять по своему усмотрению):</p><pre> <pre> <code> <p> * { семейство шрифтов: Helvetica, Arial, sans-serif; } h2 { цвет: SeaGreen; } п, li { размер шрифта: 18 пикселей; } a { текстовое оформление: нет; } </p> </code> </pre></pre><p> Обязательно сохраните изменения для обоих файлов!</p><h5><span class="ez-toc-section" id="_3_HTML_CSS"> Шаг 3. Свяжите файл HTML и файл CSS </span></h5><p> Как оказалось, добавленный вами HTML-контент не будет стилизован под правила CSS, если не индекс <strong>.html </strong> и <strong> index.css </strong> связаны между собой. В разделе <code><head> </code> свяжите таблицу стилей с файлом HTML.</p><pre> <pre> <code> <p> </p> </code> </pre></pre><p> Вам может быть интересно, почему для атрибута <code> href </code> установлено значение <code> ./resources/css/index.css </code>. Это связано с тем, что вы должны точно указать, где находится файл <strong> index.css </strong> в вашей папке (ах) <em> относительно </em>, где находится индекс <strong>.html </strong> жив (в противном случае два файла не будут связаны).</p><p> Если у вас возникли проблемы со связыванием HTML и CSS, обратитесь за помощью на форумы сообщества Codecademy.</p><p> Опять же, обязательно сохраните изменения!</p><h5><span class="ez-toc-section" id="_4"> Шаг 4. Просмотрите свой проект </span></h5><p> Отличная работа - давайте взглянем на вашу веб-страницу в браузере.</p><p> Откройте предпочтительный веб-браузер. В строке меню нажмите «Файл», а затем нажмите «Открыть файл…» (или аналогичный). Перейдите к файлу <strong> index.html </strong> и нажмите «Открыть» (или аналогичный).Браузер должен загрузить вашу веб-страницу. Что ты видишь?</p><p> На этом этапе вы можете вносить изменения в свой код HTML или CSS. Имейте в виду, что для просмотра любых <em> новых </em> изменений, которые вы вносите, вам необходимо обновить страницу в браузере.</p><h5><span class="ez-toc-section" id="i-37"> Обзор </span></h5><p> Поздравляю! За это короткое время вы узнали, как взять то, что вы изучили на Codecademy, и применить это с помощью инструментов, имеющихся на вашем персональном компьютере. Вы успешно научились:</p><ol><li> Создайте структуру папок для поддержки рабочего процесса и веб-страницы</li><li> Добавить содержимое HTML и стили CSS в соответствующие файлы</li><li> Свяжите файлы HTML и CSS вместе</li><li> Просмотрите свою веб-страницу в браузере (и обновите браузер, чтобы увидеть новые изменения)</li></ol><p> В целом четыре приведенных выше пункта являются хорошей отправной точкой для вашего собственного рабочего процесса разработчика.По мере того, как вы узнаете больше, вы можете изменить рабочий процесс в соответствии со своими потребностями. На этом этапе вы можете изменить содержимое веб-страницы или создать совершенно новый проект. Удачного кодирования!</p><h2><span class="ez-toc-section" id="_CSS_Dreamweaver"> Создание документа CSS в Dreamweaver </span></h2><h4><span class="ez-toc-section" id="i-38"> страница РЕЗЮМЕ </span></h4><p> Как и зачем создавать документ CSS (каскадная таблица стилей) в Dreamweaver. Файлы CSS определяют способ отображения всего на веб-сайте.</p><h3></h3><em> Создайте новый документ каскадной таблицы стилей (CSS), чтобы определить, как все выглядит </em></h3><p> Чтобы добавить фоновые изображения и стили текста на веб-сайт, нам сначала нужно создать отдельный документ стилей - файл CSS.<em> CSS </em> расшифровывается как <em> Cascading Style Sheet </em> и назван так из-за «каскадного» способа построения иерархии, а также из-за того, что одни правила перекрывают другие (в случае противоречивых инструкций), в зависимости от их положение в документе.</p><h4><span class="ez-toc-section" id="i-39"> Иерархия таблиц стилей </span></h4><p> Например, (не желая слишком увязнуть в теме), если вы используете стили CSS на своей HTML-странице, есть четыре основных способа определения стиля, и чем «ближе» стиль к странице , тем выше приоритет перед другими стилями:</p><ul type="disc"><li> Связанные внешние таблицы стилей (отдельные документы) отменяются:</li><li> Таблицы стилей на уровне документа (правила стилей написаны вверху самой страницы).Их отменяет:</li><li> Встроенные определения стилей (стили, применяемые непосредственно к элементам на странице).</li></ul><p> Для всех, кто знаком с Quark Xpress, InDesign (или даже Microsoft Word), вы, возможно, уже сталкивались с предопределенными стилями. По сути, все, что вам нужно знать о CSS (на данный момент), - это то, что CSS определяет почти все, как выглядит ваша страница - как выглядят шрифты, как и где размещаются фоновые изображения, что происходит, когда вы перемещаете ссылку и т. Д. И так далее.</p><p> К счастью для нас, графических дизайнеров и новичков в HTML, Dreamweaver выполняет большую часть кодирования за нас - как на странице HTML, так и в документе CSS. Когда вы познакомитесь с тем, как работают HTML, CSS (и, возможно, даже PHP и Javascript), вы узнаете, какие части кода что делают, и научитесь манипулировать кодом для достижения своих целей.</p><h4><span class="ez-toc-section" id="WordPress"> WordPressДИЗАЙН </span></h4><p> Этот веб-сайт ориентирован в первую очередь на создание «статического» веб-сайта, а не веб-сайта с управляемым содержанием.Тем не менее, я по-прежнему использую Dreamweaver при работе с динамическими сайтами, а WordPress - моя любимая CMS.</p><p> WordPress на сегодняшний день является самой используемой системой управления контентом на планете - и если вы хотите погрузиться в создание веб-сайтов на основе баз данных, я бы посоветовал вам использовать именно эту. Чтобы избежать чрезмерно сложного кодирования, я использую плагины Toolset, которые помогают мне создавать сложные функции, не беспокоясь о том, как кодировать. Я настоятельно рекомендую вам ознакомиться с ними, если вы хотите перейти на разработку WordPress и беспокоитесь о кодировании PHP.</p><p> Узнайте больше о Toolset здесь. <br /></p><p> <em> Для этого не нужно быть программистом. </em></p><h3><span class="ez-toc-section" id="_CSS-14"> Создайте внешний файл CSS и сохраните его в папке своего веб-сайта </span></h3><p> Лучше всего хранить все ваши глобальные стили (под глобальными я подразумеваю для всего сайта; стили, которые будут использовать каждая страница) во внешнем CSS-файле <em> </em>, а затем связать этот CSS-файл со страницами вашего веб-сайта, предпочтительно через шаблон страницы, который мы создали.</p><h4><span class="ez-toc-section" id="_CSS-15"> Чтобы создать файл CSS: </span></h4><p> Выбрать:</p><p> ФАЙЛ / НОВЫЙ…</p><p> <strong> Из диалогового окна «Новый документ»: </strong></p><p> Выберите <strong> Пустая страница </strong> слева и <strong> CSS </strong> из среднего столбца (<em>, рисунок 1, </em>).</p><p> Затем нажмите <strong> Создать </strong>.</p><p> Сохраните файл в каталоге своего веб-сайта либо в «корне» (папка верхнего уровня), либо в другой (но с логическим именем) папке по вашему выбору.Я сохраняю свой в корневой каталог и называю его «<em> using-dreamweaver-styles.css </em>». Суффикс <em> .CSS </em> добавляется автоматически.</p><h4><span class="ez-toc-section" id="_HINT"> программное обеспечение HINT </span></h4><p> При сохранении нового файла вы можете обнаружить, что диалоговое окно «Сохранить как» перенесло вас в папку, отличную от файлов вашего сайта. Чтобы быстро вернуться туда, нажмите кнопку «Site Root» - и вы окажетесь в корневом каталоге файлов вашего локального сайта.</p><p></p><p> Новое диалоговое окно CSS <br /></p><p> После сохранения вы заметите, что файл CSS открывается в «Представлении кода» со следующим текстом вверху:</p><p> @charset «UTF-8»; <br /> / * Документ CSS * /</p><p> Это удобно, чтобы вы могли видеть, что происходит, но это не важно.Имеется красивое и удобное диалоговое окно CSS, которое помогает создавать стили и записывает код в документ CSS на основе вашего выбора.</p><p> Далее нам нужно связать файл CSS со страницей шаблона ...</p><h4><span class="ez-toc-section" id="_CSS_Dreamweaver-2"> Создание документа CSS в Dreamweaver - конец статьи </span></h4><p> Перейти к предыдущей статье | Перейти на домашнюю страницу | Перейти к следующей статье</p><h4><span class="ez-toc-section" id="i-40"> Требуется обратная связь! </span></h4><p> Присылайте любые вопросы или отзывы по адресу: feedback @ using-dreamweaver.com или оставьте его на нашей странице в Facebook.</p><h2><span class="ez-toc-section" id="_CSS-16"> Как использовать Блокнот для написания CSS для веб-страницы </span></h2><h3><span class="ez-toc-section" id="_CSS-17"> Создание таблицы стилей CSS </span></h3><p> Таким же образом, как мы создали отдельный текстовый файл для HTML, вы создадите текстовый файл для CSS. Если вам нужны визуальные эффекты для этого процесса, см. Первое руководство. Вот шаги, чтобы создать вашу таблицу стилей CSS в Блокноте:</p><ol><li> Выберите <strong> Файл> Новый </strong> в Блокноте, чтобы получить пустое окно.</li><li> Сохраните файл как CSS, щелкнув <strong> Файл <Сохранить как... </strong></li><li> Перейдите в папку my_website на жестком диске</li><li> Измените «<strong> Тип файла </strong>:» на «<strong> Все файлы </strong>»</li><li> Назовите файл «<strong> styles.css </strong>» (кавычки опускайте) и нажмите <strong> Сохранить </strong></li></ol><h3><span class="ez-toc-section" id="_CSS_HTML-5"> Свяжите таблицу стилей CSS с вашим HTML </span></h3> Взаимодействие с другими людьми<p> После того, как у вас есть таблица стилей для вашего веб-сайта, вам необходимо связать ее с самой веб-страницей. Для этого вы используете тег ссылки. Поместите следующий тег ссылки в любом месте тегов<head> ваших домашних животных.htm документ:</p><pre data-type="code"> </pre>data-type = "code"><h3><span class="ez-toc-section" id="i-41"> Исправить поля страницы </span></h3><p> Когда вы пишете XHTML для разных браузеров, вы узнаете, что все они имеют разные поля и правила отображения вещей. Лучший способ убедиться, что ваш сайт выглядит одинаково в большинстве браузеров, - это не разрешать таким параметрам, как поля, по умолчанию выбираться браузером.</p><p> Мы предпочитаем начинать страницы в верхнем левом углу, без дополнительных отступов или полей вокруг текста.Даже если мы собираемся заполнить содержимое, мы устанавливаем поля равными нулю, так что мы начинаем с того же чистого листа. Для этого добавьте в документ styles.css следующее:</p><pre data-type="code"> html, body {<br/> margin: 0px; <br/> отступ: 0 пикселей; <br/> граница: 0 пикселей; <br/> слева: 0 пикселей; <br/> верх: 0 пикселей; <br/>} </pre>data-type = "code"><h3><span class="ez-toc-section" id="i-42"> Изменение шрифта на странице </span></h3><p> Часто шрифт - это первое, что вам нужно изменить на веб-странице. Шрифт по умолчанию на веб-странице может быть уродливым и фактически зависит от самого веб-браузера, поэтому, если вы не определите шрифт, вы действительно не знаете, как будет выглядеть ваша страница.</p><p> Как правило, вы меняете шрифт в абзацах, а иногда и во всем документе. Для этого сайта мы определим шрифт на уровне заголовка и абзаца. Добавьте в свой документ styles.css следующее:</p><pre data-type="code"> p, li {<br/> шрифт: 1em Arial, Helvetica, без засечек; <br/>} <br/> h2 {<br/> шрифт: 2em Arial, Helvetica, без засечек; <br/>} <br/> h3 {<br/> шрифт: 1.5em Arial, Helvetica, sans-serif; <br/>} <br/> h4 {<br/> шрифт: 1.25em Arial, Helvetica, без засечек; <br/>} </pre>data-type = "code"><p> Мы начали с 1em в качестве базового размера для абзацев и элементов списка, а затем использовали его для установки размера моих заголовков.Мы не ожидаем использовать заголовок глубже, чем h5, но если вы планируете это сделать, вы также захотите стилизовать его.</p><h3><span class="ez-toc-section" id="i-43"> Сделайте ссылки более интересными </span></h3><p> По умолчанию для ссылок используются синий и фиолетовый цвета для непосещенных и посещенных ссылок соответственно. Хотя это стандарт, он может не соответствовать цветовой схеме ваших страниц, поэтому давайте изменим его. В свой файл styles.css добавьте следующее:</p><pre data-type="code"> a: ссылка {<br/> font-family: Arial, Helvetica, sans-serif; <br/> цвет: # FF9900; <br/> оформление текста: подчеркивание; <br/>} <br/> a: посещено {<br/> color: # FFCC66; <br/>} <br/> a: hover {<br/> background: #FFFFCC; <br/> font-weight: жирный; <br/>} </pre>data-type = "code"><p> Мы настроили три стиля ссылок: ссылка a: по умолчанию, a: посещена, когда она была посещена, мы меняем цвет и a: hover.С помощью: hover у нас есть ссылка, которая окрашивается в цвет фона и выделяется жирным шрифтом, чтобы подчеркнуть, что это ссылка, по которой нужно щелкнуть.</p><h3><span class="ez-toc-section" id="i-44"> Стилизация раздела навигации </span></h3><p> Поскольку мы помещаем раздел навигации (id = "nav") первым в HTML, давайте сначала стилизуем его. Нам нужно указать, насколько он должен быть широким, и поставить более широкое поле с правой стороны, чтобы основной текст не натыкался на него. мы также обводим его рамкой.</p><p> Добавьте следующий CSS в свой документ styles.css:</p><pre data-type="code"> #nav {<br/> width: 225px; <br/> поле справа: 15 пикселей; <br/> граница: средне сплошная # 000000; <br/>} <br/> #nav li {<br/> стиль списка: нет; <br/>} <br/>.нижний колонтитул {<br/> font-size: .75em; <br/> прозрачный: оба; <br/> ширина: 100%; <br/> выравнивание текста: по центру; <br/>} </pre>data-type = "code"><p> Свойство стиля списка настраивает список внутри раздела навигации так, чтобы в нем не было маркеров или номеров, а нижний колонтитул стилизует раздел об авторских правах, чтобы он был меньше и центрирован внутри раздела.</p><h3><span class="ez-toc-section" id="i-45"> Размещение основной секции </span></h3><p> Размещая свой основной раздел с абсолютным позиционированием, вы можете быть уверены, что он останется именно там, где вы хотите, чтобы он оставался на вашей веб-странице.Мы сделали его шириной 800 пикселей для размещения мониторов большего размера, но если у вас монитор меньшего размера, вы можете сделать его уже.</p><p> Поместите в свой документ styles.css следующее:</p><pre data-type="code"> #main {<br/> width: 800px; <br/> верх: 0 пикселей; <br/> позиция: абсолютная; <br/> слева: 250 пикселей; <br/>} </pre>data-type = "code"><h3><span class="ez-toc-section" id="i-46"> Стилизация абзацев </span></h3><p> Так как я уже установил шрифт абзаца выше, я хотел придать каждому абзацу дополнительный «толчок», чтобы он лучше выделялся.Я сделал это, поместив границу сверху, которая выделяла абзац больше, чем просто изображение.</p><p> Поместите в свой документ styles.css следующее:</p><pre data-type="code"> .topline {<br/> border-top: толстый сплошной # FFCC00; <br/>} </pre>data-type = "code"><p> Мы решили сделать это как класс под названием «верхняя линия», а не просто определять таким образом все абзацы. Таким образом, если мы решим, что хотим иметь абзац без верхней желтой линии, мы можем просто оставить в теге абзаца, и у него не будет верхней границы.</p><h3><span class="ez-toc-section" id="i-47"> Стилизация изображений </span></h3><p> Изображения обычно имеют границу вокруг них, она не всегда видна, если изображение не является ссылкой, но нам нравится иметь класс в таблице стилей CSS, который автоматически отключает границу. Для этой таблицы стилей мы создали класс «noborder», и большинство изображений в документе являются частью этого класса.</p><p> Другая особенность этих изображений - их расположение на странице. Мы хотели, чтобы они были частью абзаца, в котором они были, без использования таблиц для их выравнивания.Самый простой способ сделать это - использовать свойство CSS float.</p><p> Поместите в свой документ styles.css следующее:</p> <pre data-type="code"> #main img {<br/> float: left; <br/> поле справа: 5 пикселей; <br/> margin-bottom: 15 пикселей; <br/>} <br/> .</div></div></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/kollektivnaya-zakupka-moj-opyt-zakupki-tkanej-na-osinke-zapis-polzovatelya-galina-ctvmz2010-v-dnevnike.html" rel="prev">Коллективная закупка – Мой опыт закупки тканей на Осинке — запись пользователя Галина ❀❀❀ (ctvmz2010) в дневнике</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/slepym-metodom-pechatat-kak-nauchitsya-bystro-pechatat-na-klaviature-prostye-texniki-obucheniya-slepoj-pechati-i-top-5-klaviaturnyx-trenazhyorov-novosti-miravsyo-obo-vsyom.html" rel="next">Слепым методом печатать – Как научиться быстро печатать на клавиатуре: простые техники обучения слепой печати и ТОП-5 клавиатурных тренажёров | новости мира,всё обо всём</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/kak-sozdat-css-fajl-rabota-s-tabliczami-stilej-css-v-prilozhenii-html5.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='20477' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2025 | Все права защищены.</a></div></div></div></div></div></footer> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </body></html>