Как сделать css: Введение в CSS | htmlbook.ru

Содержание

Введение в CSS | htmlbook.ru

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

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.

Рис. 1.1. Веб-страница, созданная только на HTML

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

Рис. 1.2. Веб-страница, созданная на HTML и CSS

Перемена разительна, поэтому заглянем в код, чтобы понять, в чем же разница (пример 1.1).

Пример 1.1. Исходный код документа

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Флексагон</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h2>Флексагон</h2>
  <p>Флексагон представляет собой бумажную фигуру, которая имеет 
   три и более стороны. Поначалу кажется, что это невозможно, но вспомните 
   ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа  бумаги, 
   и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и 
   склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но 
   стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, 
   что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. 
   Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
 </body>
</html>

Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

body {
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}
h2 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 24pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста  */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселах */
  margin-right: 10px; /* Отступ справа в пикселах */
  border-left: 1px solid #999; /* Параметры линии слева */
  border-bottom: 1px solid #999; /* Параметры линии снизу */
  padding-left: 10px; /* Отступ от линии слева до текста  */
  padding-bottom: 10px; /* Отступ от линии снизу до текста  */
}

В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

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

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

Типы стилей

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

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора

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

Стиль пользователя

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

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

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

Вопросы для проверки

1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

  1. font-color
  2. color
  3. font-family
  4. text
  5. font-size

2. Что такое стиль?

  1. Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
  2. Язык разметки гипертекстовых документов.
  3. Набор правил форматирования элементов веб-страницы.
  4. Метод преобразований текстовых документов в HTML.
  5. Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

3. Как расшифровывается аббревиатура CSS?

  1. Colorful Style Sheets
  2. Cascading Style Sheets
  3. Computer Style Sheets
  4. Creative Style Sheets
  5. Common Style Sheets

Ответы

1. color

2. Набор правил форматирования элементов веб-страницы.

3. Cascading Style Sheets

Как создать файл стилей CSS?

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

Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.

Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.

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

Для тех, кто любит видео:

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

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

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.css.

Если у Вас не отображается расширение файлов, вот заметка:

Как включить отображение расширений файлов в Windows.

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

Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.

После данной операции вы получите файл стилей css.

Способ 2. Создание файла стилей с помощью редакторов кода  (на примере Dreamweaver). 

Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.

Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.

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

После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».

Аналогичный процесс создания файлов CSS есть и в других редакторов кода.

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

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

CSS HTML уроки для начинающих академия



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

Цвета,  Коробки



Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

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

х.

CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

  • Встроенный — с помощью атрибута Style в элементах HTML
  • Internal -с помощью <style> элемента в <head> разделе
  • Внешний — с помощью внешнего CSS-файла

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

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.


Встроенный CSS

Встроенный CSS используется для применения уникального стиля к одному элементу HTML.

Встроенный CSS использует атрибут style элемента HTML.

В этом примере устанавливается цвет текста элемента <h2> синим цветом:

Пример

<h2>This is a Blue Heading</h2>



Внутренняя CSS

Внутренний CSS используется для определения стиля для одной HTML-страницы.

Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :

Пример





body {background-color: powderblue;}
h2   {color: blue;}
p    {color: red;}

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>


Внешние CSS

Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> страницы HTML:

Пример




 

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>

</html>

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

Вот как выглядит «styles.css»:

body {
    background-color: powderblue;
}
h2 {
    color: blue;
}
p {
    color: red;
}


Шрифты CSS

Свойство CSS color определяет используемый цвет текста.

Свойство CSS font-family определяет используемый шрифт.

Свойство CSS font-size определяет размер текста, который будет использоваться.

Пример





h2 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>


Граница CSS

Свойство CSS border определяет границу вокруг элемента HTML:

Пример

p {
    border: 1px solid powderblue;
}


CSS заполнение

Свойство CSS padding определяет отступ (пробел) между текстом и границей:

Пример

p {
    border: 1px solid powderblue;
    padding: 30px;
}


CSS маржа

Свойство CSS margin определяет поле (пробел) за пределами границы:

Пример

p {
    border: 1px solid powderblue;
    margin: 50px;
}


Атрибут ID

Чтобы определить конкретный стиль для одного специального элемента, добавьте атрибут id к элементу:

<p>I am different</p>

then define a style for the element with the specific id:

Пример

#p01 {
    color: blue;
}

Примечание: Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор ID используется для выбора одного уникального элемента!


Атрибут class

Чтобы определить стиль для специального типа элементов, добавьте атрибут class к элементу:

<p>I am different</p>

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

Пример

p.error {
    color: red;
}


Внешние ссылки

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

В этом примере используется полный URL-адрес для связывания с таблицей стилей:

Пример

<link rel=»stylesheet» href=»https://html5css.ru/html/styles.css»>

Этот пример связывается с таблицей стилей, расположенной в папке HTML на текущем веб-узле:

Пример

<link rel=»stylesheet» href=»/html/styles.css»>

Этот пример связывается с таблицей стилей, расположенной в той же папке, что и текущая страница:

Примере

<link rel=»stylesheet» href=»styles.css»>

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.


Справка

  • Использование атрибута HTML style для встроенного стиля
  • Используйте элемент HTML <style> для определения внутреннего CSS
  • Используйте элемент HTML <link> для ссылки на внешний файл CSS
  • Используйте элемент HTML <head> для хранения <Style> и <Link> элементов
  • Используйте свойство CSS color для текстовых цветов
  • Используйте свойство CSS font-family для текстовых шрифтов
  • Используйте свойство CSS font-size для размеров текста
  • Использовать свойство CSS border для границ
  • Используйте свойство CSS padding для пространства внутри границы
  • Использование свойства CSS margin для пространства за пределами границы

Теги стиля HTML

Тег Описание
<style> Определяет сведения о стиле для документа HTML
<link> Определяет связь между документом и внешним ресурсом

Учебник CSS3. Статья «создание первой таблицы стилей»

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

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

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

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8"> <!-- указываем кодировку документа -->
	<title>Внутренняя таблица стилей</title>
<style> 
</style>
</head>
<body>
	<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
	<p>Я выучу CSS за месяц, а то и быстрее</p>
</body>
</html>

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


Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color: red), а для абзацев голубой (color: blue). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align: center). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Внутренняя таблица стилей</title>
<style> 
h2 {
text-align: center; /* горизонтальное выравнивание текста по центру */
color: red; /* изменяем цвет текста */
}
p {
color: blue; /* изменяем цвет текста */
}
</style>
</head>
<body>
	<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
	<p>Я выучу CSS за месяц, а то и быстрее</p>
</body>
</html>

Шаг 4: Просмотр HTML страницы в браузере

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

Рис. 2.1 Пример создания внутренней таблицы стилей в документе.

Подключение внешней таблицы стилей

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

  1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css) в той же папке, где вы создавали HTML документ.
  2. Перенесите из предыдущего примера код CSS (содержимое тега <style>) в файл, который мы создали. Обратите внимание, что сам тег <style> необходимо удалить из документа (зачем нам пустые неиспользуемые теги в документе). Файл css у Вас должен содержать следующий код:
  3. h2 {
    text-align: center;
    color: red;
    }
    p {
    color: blue;
    }
    
  4. Добавьте к вашей таблице стилей следующий CSS код для элемента <body>, который определяет видимое содержимое страницы:
  5. body { 
    margin-top: 50px; 
    border: 5px solid green;
    font-family: courier;
    }
    

    Для элемента <body> мы указали следующие новые для Вас CSS свойства:

    margin-top: 50px – это CSS свойство отвечает за внешний отступ от верхнего края элемента, его мы указали равным 50 пикселям.
    border: 5px solid green — это универсальное CSS свойство, которое позволяет установить все свойства границ элемента в одном объявлении (в нашем случае задаем сплошной тип границы (solid) равной 5 пикселям зеленого цвета.
    font-family: courier — задаем шрифт «Courier» для элемента.
  6. Нам осталось только элементом <link> определить связь между документом и внешним ресурсом (таблицами стилей). Обратите внимание, что тег <link> необходимо разместить перед закрывающим элементом </head>:
  7. <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset = "UTF-8">
    		<title>Внутренняя таблица стилей</title>
    		<link href = "page.css"  rel = "stylesheet">  <!-- подключаем нашу таблицу стилей -->
    	</head>
    	<body>
    		<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
    		<p>Я выучу CSS за месяц, а то и быстрее.</p>
    	</body>
    </html>
    
  8. Сохраните ваши файлы и проверьте результат в браузере.

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:

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

Практическое задание № 1.

Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.

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


Пишем 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».

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

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

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

7 папок

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

  1. base: в этой папке надо разместить весь, так сказать, «шаблонный» код. Под «шаблонным» кодом здесь понимается весь тот CSS-код, который приходится писать при создании нового проекта. Например: типографские правила, анимации, утилиты (то есть — классы вроде margin-right-large, text-center), и так далее.
  2. components: название этой папки явно указывает на то, что в ней будет храниться. Речь идёт о стилях компонентов, используемых для сборки страниц. Это — кнопки, формы, всяческие слайдеры, всплывающие окна, и так далее.
  3. layout: эта папка применяется для хранения стилей элементов макетов страниц. Это — шапка и подвал страницы, навигационная область, различные разделы страницы, сетка, и так далее.
  4. pages: иногда в проекте нужны страницы, обладающие собственным специфическим стилем, который отличается от стиля остальных страниц. Описания стилей для таких вот особенных страниц и попадают в эту папку.
  5. themes: если веб-проект предусматривает использование различных тем оформления (скажем, нечто вроде «dark mode», или «admin»), стили для них надо положить сюда.
  6. abstracts: в эту папку попадают всяческие вспомогательные вещи — функции, переменные, миксины.
  7. 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. Как определяется приоритет стилей — учебник CSS

В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:

  • подключить внешнюю таблицу стилей;
  • добавить внутреннюю таблицу стилей в HTML-документ через тег <style>;
  • определить стиль элемента, применив к тегу атрибут style с необходимыми значениями (inline-стиль).

Эти способы добавления стилей могут быть использованы одновременно. К примеру, для тегов <p> может быть одновременно задан стиль как во внешней таблице стилей, так и во внутренней. Кроме того, в одной таблице стилей может быть записано несколько вариантов форматирования тегов <p>. Например:


p {color: green;}
.your_class p {color: yellow;}
#your_id p {color: red;}

В этом примере для тегов <p> указано три варианта форматирования. Но каким образом браузер расставляет приоритеты между стилями? Какой стиль из вышеприведенных будет выбран и по какому принципу? Это нам и предстоит выяснить.

Приоритеты стилей

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

Какие источники являются более значимыми, а какие – менее? Разобраться в этом поможет эта таблица, где указан вес (значимость) каждого селектора. Чем больше вес, тем выше приоритет:

Селектор тега: 1
Селектор класса: 10
Селектор ID: 100
Inline-стиль: 1000

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

Селектор ID Класс Тег Общий вес
p 0 0 1 1
.your_class 0 1 0 10
p.your_class 0 1 1 11
#your_id 1 0 0 100
#your_id p 1 0 1 101
#your_id .your_class 1 1 0 110
p a 0 0 2 2
#your_id #my_id .your_class p a 2 1 2 212

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

Пример: во внутренней таблице стилей задан красный цвет для тегов <p>, а во внешней – зеленый цвет для этих же тегов. В HTML-документе вы первым делом подключили внешнюю таблицу стилей, а затем добавили внутреннюю таблицу с помощью тега <style></style>. В итоге цвет тегов <p> будет красным.

Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.

Объявление !important

Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление !important:


p {color: red !important;}
p {color: green;}

Также !important перекрывает inline-стили. Слишком частое применение !important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

Сброс стилей с помощью reset.css

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

Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.

Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:


html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.

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

А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:

  • в первом селекторе собраны наиболее популярные теги, для которых удаляются все отступы, рамки и поля, а также назначается размер шрифта 100%;
  • второй групповой селектор предназначен для правильного отображения тегов HTML5 в старых браузерах;
  • с помощью свойства line-height селектора body устанавливается одинаковый интерлиньяж (межстрочный интервал) для текста;
  • для списков ol, ul убраны маркеры;
  • отменены кавычки и другой контент перед и после содержимого тегов blockquote, q;
  • упрощено добавление рамок для ячеек таблиц.

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

Итоги

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

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

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

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

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

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

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

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

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

  2. Нажмите кнопку ‘Выполнить’ на панели инструментов, чтобы запустить проект в браузере Chrome.

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS Урок 2: Как создать свой первый файл CSS

Сегодня мы напишем и сохраним наш первый файл CSS. Начнем с открытия программы редактирования текста. Если вы работаете на ПК с Microsoft Windows, откройте программу «Блокнот» (удерживайте нажатой клавишу Windows на клавиатуре и нажмите R, затем введите notepad и нажмите Enter). Если вы используете компьютер Macintosh, запустите приложение под названием «TextEdit» (которое можно найти в папке «Приложения»).

Давайте напишем наш первый бит CSS

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

.
 ч2 {
оранжевый цвет;
выравнивание текста: по центру;
} 

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

Шаг 1. Сохранение файла CSS

Создайте новую папку на рабочем столе (или в другом удобном для вас месте) и назовите ее CSS-Test . Теперь, вернувшись в программу редактирования текста, сохраните документ как «style.CSS».

Связывание файла CSS со страницей HTML

Наш новый файл CSS бесполезен, если мы не применим его к веб-странице. Давайте создадим быструю HTML-страницу для этого урока. Создайте новый пустой файл в Блокноте (или TextEdit) и добавьте следующий код:

 


<голова>
<мета-кодировка="utf-8">
CSS-тест

<тело>

 

CSS-тест

<дел>

Это первая коробка.

<дел>

Это поле два.

Если вы читали несколько моих первых уроков HTML, то этот код вам хоть немного знаком. Я объясню это по мере продолжения урока; пока сохраните этот документ в нашей папке «CSS-Test» и назовите его «index.htm».

Связывание двух файлов вместе

Нам все еще нужно сообщить веб-браузеру, чтобы он загрузил наш файл «style.css» при просмотре страницы «index.htm». Добавьте следующий код в index.htm прямо над закрывающим тегом :

 <ссылка rel="stylesheet" href="style.css"> 

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

Теперь, когда вы просматриваете страницу «index.htm» в веб-браузере, вы должны увидеть оранжевый заголовок по центру:

Давайте стилизуем эти две коробки

Если вы посмотрите на код нашей HTML-страницы, вы увидите два элемента

.Мы добавили HTML-атрибут «id» для этих двух элементов и присвоили им значения «box-one» и «box-two». Мы можем использовать «id» элемента, чтобы выбрать и стилизовать его с помощью CSS. Например, давайте сделаем первую коробку серой, а вторую — желтой. Добавьте следующий код в свой файл CSS, непосредственно под нашим исходным правилом

:

.
 #коробка-один {
цвет фона: серый;
}

#коробка-два {
цвет фона: желтый;
отступ: 10 пикселей;
} 

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

, мы просто набираем «#box-one», а затем запускаем наше правило CSS.

Наши новые модные коробки

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

Ура для стиля

Возможно, это некрасиво, но мы создали нашу первую HTML-страницу с помощью CSS! Давайте подытожим ваши знания CSS. Вы знаете:

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

Если вы предпочитаете смотреть видеоуроки, а не читать письменные уроки, ознакомьтесь с моим 8-часовым видеокурсом и присоединитесь к более чем 4000 других людей, которые изучили HTML, CSS и адаптивный дизайн на профессиональном уровне.

Как создавать классы с помощью CSS

Введение

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

Предпосылки

Чтобы следовать этому учебному пособию, убедитесь, что вы настроили необходимые файлы и папки, как указано в предыдущем учебном пособии из этой серии «Как настроить учебный проект CSS и HTML».

Как работают селекторы классов CSS

Селектор класса CSS позволяет назначать правила стиля для элементов HTML, которые вы определяете с помощью этого класса, вместо всех экземпляров определенного элемента. В отличие от элементов HTML (таких как

,

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

Правило CSS для селектора класса написано так же, как правило для селектора тега, за исключением . добавлено к имени класса:

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

Чтобы использовать класс при добавлении HTML-контента на вашу веб-страницу, вы должны указать его в открывающем теге HTML-элемента, используя атрибут class в вашем HTML-документе, например:

  

класс=".красный текст" >Содержимое.

Создание класса CSS с помощью селектора классов

Давайте приступим к изучению классов CSS на практике. Сотрите все в файле styles.css и добавьте следующий фрагмент кода, чтобы указать правило для класса red-text :

стили.css

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

После добавления фрагмента кода в файл styles.css сохраните файл.

Вернитесь к индексу .html и сотрите все, кроме первой строки кода , которая ссылается на вашу таблицу стилей CSS. Затем добавьте следующий фрагмент кода HTML:

.

index.html

  

class="red-text" >Вот первый образец текста абзаца.

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

index.html

  . . .

В этот фрагмент кода вы добавили текст с помощью тега HTML

. Но вы также указали класс red-text , добавив выделенный атрибут класса class="red-text" внутри открывающего тега HTML.

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

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

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

текстового содержимого с помощью разных классов. Добавьте следующий фрагмент кода в файл styles.css (после правила CSS для «красного текста»):

стиля.CSS

  .желтый фон-текст {
  цвет фона: желтый;
}
  

Это правило CSS объявляет, что классу yellow-background-text присвоено значение yellow для свойства background-color . Любой текстовый элемент HTML, которому присвоен этот класс, будет иметь желтый фон. Обратите внимание, что использование слова text в классе yellow-background-*text* предназначено только для удобочитаемости. Вам не нужно включать слово text в имена классов для классов, назначенных тексту HTML.

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

index.html

  

Вот второй образец текста абзаца.

В этом фрагменте кода вы добавили текстовое содержимое с помощью элемента

и указали класс yellow-background-text . Сохраните файл и перезагрузите его в браузере. У вас должна быть веб-страница с двумя разными предложениями, первое красное, а второе с желтым фоном:

.

Обратите внимание, что к тегу HTML можно добавить более одного класса.Попробуйте добавить оба класса в один текстовый элемент, добавив в файл index.html следующую строку:

.

index.html

  

Вот третий образец текста.

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

Теперь ваша третья строка текста должна быть оформлена в соответствии со значениями свойств, установленными в классе red-text и классе yellow-background-text , и иметь красный шрифт и желтый фон.

Добавление классов CSS к изображениям

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

.

стили.css

  .black-img {
  граница: 5 пикселей с черными точками;
  радиус границы: 10%;
}

.yellow-img {
  граница: 25 пикселей сплошного желтого цвета;
  радиус границы: 50%;
}

.red-img {
  граница: 15px двойная красная;
}
  

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

.
  • Первое правило CSS объявляет, что класс black-img должен иметь black , точечную границу шириной пять пикселей и border-radius размером 10%, что придает элементу закругленные углы.
  • Второе правило CSS объявляет, что класс yellow-img должен иметь yellow , сплошную границу шириной 25 пикселей и border-radius размером 50%, что придает элементу круглую форму.
  • Третье правило CSS объявляет, что класс red-img должен иметь red , double границу шириной 15 пикселей. Вы не установили радиус границы, поэтому граница будет соответствовать форме элемента.

Сохраните файл styles.css . Затем сотрите все из файла index.html (кроме первой строки кода: ) и добавьте следующий фрагмент кода:

индекс

.html

  


  

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

Сохраните файл index.html и загрузите его в браузере. Вы должны получить что-то вроде этого:

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

Чтобы продолжить изучение классов CSS, попробуйте создать новые классы с другими наборами правил и применить их к различным типам содержимого HTML. Обратите внимание, что свойства и значения, указанные в блоках объявления класса, будут работать только с элементами, для которых они предназначены.Например, объявление font-color не изменит цвет границы изображения. Точно так же объявление height не изменит размер шрифта.

Заключение

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

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

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

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

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

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

  • В своей учетной записи HubSpot перейдите к Маркетинг > Файлы и шаблоны > Инструменты дизайна .
  • Щелкните значок папки в левом верхнем углу, чтобы развернуть боковое меню. Затем нажмите Файл > Новый файл .
  • В диалоговом окне щелкните Таблица стилей CSS . Затем введите имя для таблицы стилей CSS и нажмите Create .

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

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


Список стандартных селекторов CSS для шаблонов HubSpot см. в Boilerplate CSS.

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

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

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

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

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

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

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

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

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

* Требуется

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

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

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

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

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

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

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

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

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

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

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

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

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

Marketing Hub Enterprise )

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

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

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

Создать файл CSS

Файл CSS можно связать с шаблоном макета или контейнером, присвоив ему то же имя файла и поместив его в ту же папку.Когда шаблон макета (или контейнер ) применяется к веб-странице (или панели ), соответствующий файл CSS применяется автоматически. Пример: эти три файла автоматически связываются друг с другом:
  • MyLayout.ascx
  • MyLayout.css
  • MyLayout.doctype.xml
Файлы CSS применяются иерархически. Если стиль определен для элемента в нескольких файлах CSS с одинаковой специфичностью, последний CSS, в котором упоминается тот же элемент, переопределяет определения стиля в ранее загруженных файлах CSS.По умолчанию файлы CSS загружаются в следующем порядке:
  1. default.css (~/Portals/_default/default.css) — CSS по умолчанию для веб-сайта.
  2. module.css (~/DesktopModules/mymodulename/module.css) — CSS для каждого типа модуля, отображаемого на странице.
  3. skin.css (~/Portals/PortalID/Skins/SkinPackageName/skin.css) — главный CSS для темы должен называться skin.css.
  4. MyThemeTemplate.css (~/Portals/_default/Skins/SkinPackageName/MyThemeTemplate.css) — CSS для конкретного шаблона макета.
  5. container.css (~/Portals/PortalID/Containers/ContainerPackageName/container.css) — основной CSS для всех контейнеров в вашей теме.
  6. portal.css (~/Portals/PortalID/portal.css) — CSS, который может переопределять элементы в установленных темах. Администраторы веб-сайтов могут использовать это для переопределения любых стилей в теме или контейнерах.

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

Ступени

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

Пример

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

 
    <дел>
        
            
        
    
              

УСБ

 
    #логин_стиль .разделитель ссылок {
         белый цвет;
         вес шрифта: полужирный;
    }
              

Создание документа CSS в Dreamweaver

стр. РЕЗЮМЕ

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

Создайте новый документ каскадной таблицы стилей (CSS), чтобы определить, как все будет выглядеть

Чтобы добавить фоновые изображения и стили текста на веб-сайт, нам сначала нужно создать отдельный документ стилей — файл CSS. CSS расшифровывается как Cascading Style Sheet и названа так из-за «каскадного» способа построения иерархии, а также из-за того, что одни правила имеют приоритет над другими (в случае противоречивых инструкций), в зависимости от их положение в документе.

Иерархия таблиц стилей

Например, (не желая слишком углубляться в тему), если вы используете стили CSS на своей HTML-странице, есть четыре основных способа определить стиль, и чем «ближе» стиль к странице , тем выше его приоритет над другими стилями:

  • Связанные внешние таблицы стилей (отдельные документы) имеют приоритет над:
  • Таблицы стилей на уровне документа (правила стиля написаны в верхней части самой страницы).Они отменены:
  • Определения встроенных стилей (стили, применяемые непосредственно к элементам на странице).

Те, кто знаком с Quark Xpress, InDesign (или даже Microsoft Word), наверняка уже сталкивались с предопределенными стилями. По сути, все, что вам нужно знать о CSS (на данный момент), это то, что CSS определяет почти все, как выглядит ваша страница: как выглядят шрифты, как и где размещаются фоновые изображения, что происходит, когда вы наводите курсор на ссылку и так далее. так далее.

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

WordPressДИЗАЙН

Этот веб-сайт ориентирован в первую очередь на создание «статического» веб-сайта, а не веб-сайта с управляемым содержимым.Тем не менее, я по-прежнему использую Dreamweaver при работе с динамическими сайтами, а WordPress — моя любимая CMS.

WordPress, безусловно, является наиболее используемой системой управления контентом на планете, и если вы хотите окунуться в создание веб-сайтов на основе баз данных, я бы посоветовал вам использовать именно ее. Чтобы избежать слишком сложного кодирования, я использую плагины Toolset, которые помогают мне создавать сложные функции, не беспокоясь о том, как кодировать. Я настоятельно рекомендую вам ознакомиться с ними, если вы хотите перейти к разработке WordPress и вас беспокоит PHP-кодирование.

Узнайте больше о наборе инструментов здесь.

Для этого не нужно быть программистом.

Создайте внешний файл CSS и сохраните его в папке вашего веб-сайта

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

Чтобы создать файл CSS:

Выберите:

ФАЙЛ/НОВЫЙ…

Из диалогового окна «Новый документ»:

Выберите Пустая страница слева и CSS из среднего столбца ( рисунок 1 ).

Затем нажмите Создать .

Сохраните файл в каталоге вашего веб-сайта либо в «корневой» (папке верхнего уровня), либо в другой (но с логическим названием) папке по вашему выбору.Я сохраняю свой в корневой каталог и называю его « using-dreamweaver-styles.css ». Суффикс .CSS добавляется автоматически.

ПО

ПОДСКАЗКА

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

Новое диалоговое окно CSS

После сохранения вы заметите, что файл CSS открывается в «Просмотр кода» со следующим вверху:

@charset «UTF-8»;
/* CSS-документ */

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

Далее нам нужно связать файл CSS со страницей шаблона…

Создание документа CSS в Dreamweaver — конец статьи

Перейти к предыдущей статье | Перейти на главную страницу | Перейти к следующей статье

Требуется обратная связь!

Пожалуйста, присылайте любые вопросы или отзывы по адресу: [email protected] или оставить на нашей странице в Facebook.

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

Требования:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 2. Добавьте содержимое на веб-страницу

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

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

.
 
 

2

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

  1. Ваш собственный заголовок между тегами </code> </li> <li> Ваш собственный контент в <code> тегах <body> </code>.Если вам нужен быстрый, предварительно написанный контент, не стесняйтесь использовать следующее и изменять по своему усмотрению: </li> </ol> <pre> <pre data-testid="colorized-block" tabindex="0"> <p> <h2><span class="ez-toc-section" id="i-53">Имя Фамилия</span></h2> </p> <p> <p>Я учусь программировать на Codecademy! Мои цели включают в себя:</p> </p> <p> <ul> </p> <p> <li>Научиться программировать</li> </p> <p> <li>Создать компанию</li> </p> <p> <li>Помочь миру</li> </p> <p> </ul> </p> <p> <p>Это один из моих любимых веб-сайтов: <a href="https://www.google.com/" target="_blank" rel="noopener">Google</a></p> </p> </pre> </pre> <p> Наконец, откройте файл <strong> index.css </strong> в предпочитаемом вами текстовом редакторе. Добавьте в файл следующие предварительно написанные правила CSS (не стесняйтесь изменять их по своему усмотрению): </p> <pre> <pre data-testid="colorized-block" tabindex="0"> <p> * { </p> <p> семейство шрифтов: Helvetica, Arial, без засечек; </p> <p> } </p> <p> h2 { </p> <p> цвет: морской зеленый; </p> <p> } </p> <p> p, </p> <p> li { </p> <p> размер шрифта: 18px; </p> <p> } </p> <p> a { </p> <p> украшение текста: нет; </p> <p> } </p> </pre> </pre> <p> Обязательно сохраните изменения для обоих файлов! </p> <h5><span class="ez-toc-section" id="_3_HTML_CSS"> Шаг 3. Свяжите файл HTML и файл CSS </span></h5> <p> Как оказалось, добавленный вами HTML-контент не будет оформлен в соответствии с правилами CSS, если только <strong> index.html </strong> и <strong> index.css </strong> связаны друг с другом. В разделе <code> <head> </code> свяжите таблицу стилей с файлом HTML. </p> <pre> <pre data-testid="colorized-block" tabindex="0"> <p> <link href="./resources/css/index.css" type="text/css" rel="stylesheet"> </p> </pre> </pre> <p> Вам может быть интересно, почему для атрибута <code> href </code> установлено значение <code> ./resources/css/index.css </code> . Это связано с тем, что вы должны точно указать, где находится файл <strong> index.css </strong> в вашей папке (папках) <em> относительно </em> места, где <strong> index.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-54"> Обзор </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="_IntelliJ_IDEA"> таблиц стилей | IntelliJ IDEA </span></h2> <p> С помощью IntelliJ IDEA вы можете писать определения стилей в CSS, а также на различных языках, которые компилируются в него, таких как Sass, Less, SCSS или Stylus. </p> <p> Вы также можете найти документацию по таблицам стилей, создавать и перемещать наборы правил, вводить переменные и многое другое.</p> <h3 data-toc="css_before_you_start"><span class="ez-toc-section" id="i-55"> Перед началом работы </span></h3> <p> Убедитесь, что подключаемый модуль CSS включен в меню «Настройки/Настройки | Страница Плагины, вкладка Установленные. Дополнительные сведения см. в разделе Управление плагинами. </p> <h3 data-toc="ws_css_completion"><span class="ez-toc-section" id="i-56"> Автозавершение кода </span></h3> <p> IntelliJ IDEA обеспечивает автодополнение кода для свойств, их значений, селекторов, переменных и миксинов. </p> <h4 data-toc="ws_html_code_completion"><span class="ez-toc-section" id="i-57"> Полные классы таблицы стилей </span></h4> <p> Автодополнение для классов и идентификаторов CSS, SCSS, Less и Sass доступно в HTML-файлах, в различных типах шаблонов (например, в Angular или Vue.js), а также в коде JSX. </p> <p> В файлах HTML IntelliJ IDEA сначала предлагает классы и идентификаторы из тега </code> стиля <code> и файлов, связанных с тегами <code> link </code>. Если подходящие результаты не найдены, IntelliJ IDEA также предлагает символы, определенные во всех файлах таблиц стилей в проекте. Чтобы сразу увидеть все классы и идентификаторы, определенные в проекте, прежде чем начать печатать, дважды нажмите <kbd data-secondary_macos="⌃ Space" data-primary_kde="Ctrl+Space" data-secondary_eclipse="⌃ Space" data-primary_gnome="Ctrl+Space" data-secondary_emacs="⌥ /" data-secondary_macos_system_shortcuts="⌃ Space" data-primary_netbeans="Ctrl+Space" data-secondary_netbeans="⌃ Space" data-primary_emacs="Alt+/" data-secondary_eclipse_macos="⌃ Space" data-primary_visual_studio="Ctrl+Space" data-secondary_visual_studio="⌃ Space" data-primary_windows="Ctrl+Space" data-secondary_sublime_text_macos="⌃ Space" data-secondary_sublime_text="⌃ Space" data-primary_sublime_text="Ctrl+Space" data-secondary_intellij_idea_classic="⌃ Space" data-primary_xwin="Ctrl+Space" data-primary_eclipse="Ctrl+Space"> Ctrl+Пробел </kbd>. </p> <h5 data-toc="ws_css_completion_classes_from_external_libs"><span class="ez-toc-section" id="i-58"> Полные классы таблицы стилей из внешних библиотек </span></h5> <p> С помощью IntelliJ IDEA вы также можете получить завершение имен классов из Twitter Bootstrap или других библиотек CSS, которые связаны из CDN в файле HTML, без добавления этих библиотек в зависимости вашего проекта.</p> <ol> <li> <p> Откройте файл HTML со ссылкой CDN на внешнюю библиотеку CSS. IntelliJ IDEA выделяет ссылку. </p> </li> <li> <p> Чтобы включить завершение для библиотеки, нажмите <kbd data-secondary_macos="⌥ ⏎" data-primary_kde="Alt+Enter" data-secondary_eclipse="⌃ 1" data-primary_gnome="Alt+Enter" data-secondary_emacs="⌥ ⏎" data-secondary_macos_system_shortcuts="⌥ ⏎" data-primary_netbeans="Alt+Enter" data-secondary_netbeans="⌥ ⏎" data-primary_emacs="Alt+Enter" data-secondary_eclipse_macos="⌘ 1" data-primary_visual_studio="Alt+Enter" data-secondary_visual_studio="⌥ ⏎" data-primary_windows="Alt+Enter" data-secondary_sublime_text_macos="⌥ ⏎" data-secondary_sublime_text="⌥ ⏎" data-primary_sublime_text="Alt+Enter" data-secondary_intellij_idea_classic="⌥ ⏎" data-primary_xwin="Alt+Enter" data-primary_eclipse="Ctrl+1"> Alt+Enter </kbd> на ссылке и выберите из списка. Либо наведите указатель мыши на ссылку и нажмите «Загрузить библиотеку». </p> </li> </ol> <p> Библиотека добавлена ​​в список библиотек JavaScript на странице, подробности см. в разделе Настройка библиотеки, добавленной по ссылке CDN. </p> <h4 data-toc="style_sheets_completion_for_sass_and_scss"><span class="ez-toc-section" id="_Sass_SCSS"> Полные селекторы Sass и SCSS </span></h4> <p> IntelliJ IDEA также обеспечивает завершение селекторов Sass и SCSS, включая вложенные селекторы и селекторы, созданные с помощью амперсанда (&).</p> <ul> <li> <p> Чтобы найти использование символа таблицы стилей, поместите курсор и нажмите <kbd data-secondary_macos="⌥ F7" data-primary_kde="Alt+Shift+7" data-secondary_eclipse="⌃ G" data-primary_gnome="Alt+Shift+7" data-secondary_emacs="⌥ F7" data-secondary_macos_system_shortcuts="⌃ U" data-primary_netbeans="Alt+F7" data-secondary_netbeans="⌥ F7" data-primary_emacs="Alt+F7" data-secondary_eclipse_macos="⇧ ⌘ G" data-primary_visual_studio="Shift+F12" data-secondary_visual_studio="⇧ F12" data-primary_windows="Alt+F7" data-secondary_sublime_text_macos="⌥ F7" data-secondary_sublime_text="⌥ F7" data-primary_sublime_text="Alt+F7" data-secondary_intellij_idea_classic="⌥ F7" data-primary_xwin="Alt+F7" data-primary_eclipse="Ctrl+G"> Alt+F7 </kbd> . Дополнительные сведения см. в разделе Поиск использований в проекте. </p> </li> <li> <p> Чтобы перейти от использования символа таблицы стилей к его определению, нажмите <kbd data-secondary_macos="⌘ B" data-primary_kde="Ctrl+B" data-secondary_eclipse="F3" data-primary_gnome="Ctrl+B" data-secondary_emacs="⌃ ⌥ G" data-secondary_macos_system_shortcuts="⌘ B" data-primary_netbeans="Ctrl+B" data-secondary_netbeans="⌃ B" data-primary_emacs="Ctrl+Alt+G" data-secondary_eclipse_macos="F3" data-primary_visual_studio="F12" data-secondary_visual_studio="F12" data-primary_windows="Ctrl+B" data-secondary_sublime_text_macos="F12" data-secondary_sublime_text="F12" data-primary_sublime_text="F12" data-secondary_intellij_idea_classic="⌘ B" data-primary_xwin="Ctrl+B" data-primary_eclipse="F3"> Ctrl+B </kbd> . Переход к определению доступен для классов, идентификаторов, селекторов, включая вложенные селекторы и селекторы с амперсандом <code> и </code>, а также для переменных и примесей. </p> <p> Узнайте больше из Перейти к объявлению.</p> </li> </ul> <h3 data-toc="ws_css_documentation_lookup"><span class="ez-toc-section" id="i-59"> Поиск документации </span></h3> <p> Для свойств и псевдоэлементов IntelliJ IDEA может показать вам сводку из соответствующей статьи MDN. Эта сводка отображается во всплывающем окне «Документация», в котором отображается краткое описание свойства и его значений, а также информация о его совместимости с различными браузерами. </p> <p> Если свойство доступно во всех версиях браузеров, IntelliJ IDEA не показывает никакой информации о его совместимости. </p> <p> В противном случае во всплывающем окне «Документация» также перечислены браузеры и их версии, поддерживающие это свойство.</p> <p> Обратите внимание, что совместимость проверяется только для Chrome, Chrome Android, Safari, Safari iOS, Firefox, Internet Explorer и Edge. </p> <p> Для селекторов IntelliJ IDEA также показывает их специфику. </p> <h4 data-toc="view"><span class="ez-toc-section" id="i-60"> Просмотр документации по свойству </span></h4> <ul> <li> <p> Поместите курсор на свойство и нажмите <kbd data-secondary_macos="F1" data-primary_kde="Ctrl+Q" data-secondary_eclipse="⌥ Middle-Click" data-primary_gnome="Ctrl+Q" data-secondary_emacs="⌃ Q" data-secondary_macos_system_shortcuts="⌘ I" data-primary_netbeans="Ctrl+Q" data-secondary_netbeans="⌃ Q" data-primary_emacs="Ctrl+Q" data-secondary_eclipse_macos="⌥ Middle-Click" data-primary_visual_studio="Ctrl+K, I" data-secondary_visual_studio="⌃ K, I" data-primary_windows="Ctrl+Q" data-secondary_sublime_text_macos="N/A" data-secondary_sublime_text="N/A" data-primary_sublime_text="N/A" data-secondary_intellij_idea_classic="⌃ J" data-primary_xwin="Ctrl+Q" data-primary_eclipse="Alt+Middle-Click"> Ctrl+Q </kbd> или выберите в главном меню. </p> </li> <li> <p> При наведении указателя мыши на свойство IntelliJ IDEA немедленно отображает ссылку на него во всплывающем окне "Документация".</p> <p> Вы можете отключить это поведение или настроить всплывающее окно так, чтобы оно отображалось быстрее или медленнее, см. раздел Настройка поведения всплывающего окна документации ниже. </p> </li> </ul> <ul> <li> <p> Чтобы отключить автоматическое отображение документации, откройте диалоговое окно «Настройки/Настройки» ( <kbd data-secondary_macos="⌘ ," data-primary_kde="Ctrl+Alt+S" data-secondary_eclipse="⌃ ⌥ S" data-primary_gnome="Ctrl+Alt+S" data-secondary_emacs="⌃ ⌥ S" data-secondary_macos_system_shortcuts="⌘ ," data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃ ⌥ S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘ ," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃ ⌥ S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘ ," data-secondary_sublime_text="⌃ ⌥ S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘ ," data-primary_xwin="Ctrl+Alt+S" data-primary_eclipse="Ctrl+Alt+S"> Ctrl+Alt+S </kbd> ), перейдите к и снимите флажок «Показать быструю документацию при наведении». </p> </li> <li> <p> Чтобы всплывающее окно с документацией отображалось быстрее или медленнее, откройте диалоговое окно «Настройки/Настройки» ( <kbd data-secondary_macos="⌘ ," data-primary_kde="Ctrl+Alt+S" data-secondary_eclipse="⌃ ⌥ S" data-primary_gnome="Ctrl+Alt+S" data-secondary_emacs="⌃ ⌥ S" data-secondary_macos_system_shortcuts="⌘ ," data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃ ⌥ S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘ ," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃ ⌥ S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘ ," data-secondary_sublime_text="⌃ ⌥ S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘ ," data-primary_xwin="Ctrl+Alt+S" data-primary_eclipse="Ctrl+Alt+S"> Ctrl+Alt+S </kbd> ), перейдите к , затем установите флажок «Показать всплывающее окно с документацией» и укажите время задержки.</p> </li> </ul> <h4 data-toc="ws_css_documentation_lookup_open_mdn"><span class="ez-toc-section" id="_MDN"> Откройте документацию MDN в браузере </span></h4> <ul> <li> <p> Во всплывающем окне «Документация» <kbd data-secondary_macos="F1" data-primary_kde="Ctrl+Q" data-secondary_eclipse="⌥ Middle-Click" data-primary_gnome="Ctrl+Q" data-secondary_emacs="⌃ Q" data-secondary_macos_system_shortcuts="⌘ I" data-primary_netbeans="Ctrl+Q" data-secondary_netbeans="⌃ Q" data-primary_emacs="Ctrl+Q" data-secondary_eclipse_macos="⌥ Middle-Click" data-primary_visual_studio="Ctrl+K, I" data-secondary_visual_studio="⌃ K, I" data-primary_windows="Ctrl+Q" data-secondary_sublime_text_macos="N/A" data-secondary_sublime_text="N/A" data-primary_sublime_text="N/A" data-secondary_intellij_idea_classic="⌃ J" data-primary_xwin="Ctrl+Q" data-primary_eclipse="Alt+Middle-Click"> Ctrl+Q </kbd> щелкните ссылку внизу. </p> </li> <li> <p> Нажмите <kbd data-secondary_macos="⇧ F1" data-primary_kde="Shift+F1" data-secondary_eclipse="⇧ F2" data-primary_gnome="Shift+F1" data-secondary_emacs="⇧ F1" data-secondary_macos_system_shortcuts="⇧ F1" data-primary_netbeans="Shift+F1" data-secondary_netbeans="⇧ F1" data-primary_emacs="Shift+F1" data-secondary_eclipse_macos="⇧ F2" data-primary_visual_studio="Shift+F1" data-secondary_visual_studio="⇧ F1" data-primary_windows="Shift+F1" data-secondary_sublime_text_macos="⇧ F1" data-secondary_sublime_text="⇧ F1" data-primary_sublime_text="Shift+F1" data-secondary_intellij_idea_classic="⇧ F1" data-primary_xwin="Shift+F1" data-primary_eclipse="Shift+F2"> Shift+F1 </kbd> или выберите в главном меню. </p> </li> </ul> <h3 data-toc="ws_css_formatting"><span class="ez-toc-section" id="i-61"> Форматирование </span></h3> <p> Встроенный модуль форматирования IntelliJ IDEA позволяет переформатировать фрагменты кода таблицы стилей, а также целые файлы и папки в соответствии с требованиями стиля кода для конкретного языка. Средство форматирования также автоматически активируется при создании или рефакторинге кода.</p> <ul> <li> <p> Чтобы настроить форматирование для языка таблицы стилей, откройте диалоговое окно «Настройки/Предпочтения» ( <kbd data-secondary_macos="⌘ ," data-primary_kde="Ctrl+Alt+S" data-secondary_eclipse="⌃ ⌥ S" data-primary_gnome="Ctrl+Alt+S" data-secondary_emacs="⌃ ⌥ S" data-secondary_macos_system_shortcuts="⌘ ," data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃ ⌥ S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘ ," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃ ⌥ S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘ ," data-secondary_sublime_text="⌃ ⌥ S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘ ," data-primary_xwin="Ctrl+Alt+S" data-primary_eclipse="Ctrl+Alt+S"> Ctrl+Alt+S </kbd> ), перейдите к и настройте специфические для языка параметры табуляции и отступов, пробелов, обтекания и фигурных скобок, твердые и мягкие поля и так далее. </p> <p> В контексте CSS, SCSS и Less IntelliJ IDEA по умолчанию использует двойные кавычки для сгенерированных строковых литералов в операторах <code> import </code> и URL-адресах. Чтобы использовать одинарные кавычки, откройте вкладку «Другое» и выберите «Одинарная» в списке «Кавычки».</p> <p> Чтобы применить выбранный стиль ко всему файлу после переформатирования, установите флажок Применять к формату под списком. </p> <p> В настоящее время изменение конфигурации кавычек не влияет на введенные таблицы стилей и код CSS внутри тегов <code> <style> </code>. </p> </li> <li> <p> Чтобы переформатировать фрагмент кода, выделите его в редакторе и нажмите <kbd data-secondary_macos="⌥ ⌘ L" data-primary_kde="Alt+Shift+L" data-secondary_eclipse="⌃ ⌥ L" data-primary_gnome="Ctrl+Alt+L" data-secondary_emacs="N/A" data-secondary_macos_system_shortcuts="⌥ ⌘ L" data-primary_netbeans="Alt+Shift+F" data-secondary_netbeans="⌥ ⇧ F" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇧ ⌘ F" data-primary_visual_studio="Ctrl+Alt+Enter" data-secondary_visual_studio="⌃ ⌥ ⏎" data-primary_windows="Ctrl+Alt+L" data-secondary_sublime_text_macos="⌥ ⌘ L" data-secondary_sublime_text="⌃ ⌥ L" data-primary_sublime_text="Ctrl+Alt+L" data-secondary_intellij_idea_classic="⌥ ⌘ L" data-primary_xwin="Ctrl+Alt+L" data-primary_eclipse="Ctrl+Alt+L"> Ctrl+Alt+L </kbd> . </p> </li> <li> <p> Чтобы переформатировать файл или папку, выберите их в окне инструментов проекта и нажмите <kbd data-secondary_macos="⌥ ⌘ L" data-primary_kde="Alt+Shift+L" data-secondary_eclipse="⌃ ⌥ L" data-primary_gnome="Ctrl+Alt+L" data-secondary_emacs="N/A" data-secondary_macos_system_shortcuts="⌥ ⌘ L" data-primary_netbeans="Alt+Shift+F" data-secondary_netbeans="⌥ ⇧ F" data-primary_emacs="N/A" data-secondary_eclipse_macos="⇧ ⌘ F" data-primary_visual_studio="Ctrl+Alt+Enter" data-secondary_visual_studio="⌃ ⌥ ⏎" data-primary_windows="Ctrl+Alt+L" data-secondary_sublime_text_macos="⌥ ⌘ L" data-secondary_sublime_text="⌃ ⌥ L" data-primary_sublime_text="Ctrl+Alt+L" data-secondary_intellij_idea_classic="⌥ ⌘ L" data-primary_xwin="Ctrl+Alt+L" data-primary_eclipse="Ctrl+Alt+L"> Ctrl+Alt+L </kbd> .</p> </li> </ul> <p> Дополнительные сведения см. в разделе Переформатирование и изменение порядка кода. </p> <p> Кроме того, вы можете использовать средство форматирования Prettier, подробности см. в разделе Prettier. </p> <h3 data-toc="ws_style_sheets_refactoring"><span class="ez-toc-section" id="i-62"> Рефакторинг </span></h3> <ol> <li> <p> В редакторе поместите курсор на выражение, которое нужно преобразовать в переменную, и нажмите <kbd data-secondary_macos="⌥ ⌘ V" data-primary_kde="Alt+Shift+V" data-secondary_eclipse="⌥ ⇧ L" data-primary_gnome="Ctrl+Alt+V" data-secondary_emacs="⌃ ⌥ V" data-secondary_macos_system_shortcuts="⌥ ⌘ V" data-primary_netbeans="Alt+Shift+V" data-secondary_netbeans="⌥ ⇧ V" data-primary_emacs="Ctrl+Alt+V" data-secondary_eclipse_macos="⌥ ⌘ L" data-primary_visual_studio="Ctrl+R, V" data-secondary_visual_studio="⌃ R, V" data-primary_windows="Ctrl+Alt+V" data-secondary_sublime_text_macos="N/A" data-secondary_sublime_text="⌃ ⌥ V" data-primary_sublime_text="Ctrl+Alt+V" data-secondary_intellij_idea_classic="⌥ ⌘ V" data-primary_xwin="Ctrl+Alt+V" data-primary_eclipse="Alt+Shift+L"> Ctrl+Alt+V </kbd> или выберите из контекстного меню или из главного меню. </p> </li> <li> <p> Если найдено несколько вхождений выбранного выражения, выберите Заменить только это вхождение или Заменить все вхождения в списке Найдено несколько вхождений.</p> </li> <li> <p> Для .scss и .sass выберите глобальную или локальную область действия для переменной. </p> </li> <li> <p> В поле с красной рамкой примите предложенное имя переменной или укажите произвольное имя. Нажмите <kbd data-secondary_macos="⏎" data-primary_kde="Enter" data-secondary_eclipse="⏎" data-primary_gnome="Enter" data-secondary_emacs="⏎" data-secondary_macos_system_shortcuts="⏎" data-primary_netbeans="Enter" data-secondary_netbeans="⏎" data-primary_emacs="Enter" data-secondary_eclipse_macos="⏎" data-primary_visual_studio="Enter" data-secondary_visual_studio="⏎" data-primary_windows="Enter" data-secondary_sublime_text_macos="⏎" data-secondary_sublime_text="⏎" data-primary_sublime_text="Enter" data-secondary_intellij_idea_classic="⏎" data-primary_xwin="Enter" data-primary_eclipse="Enter">. Когда будете готовы, введите </kbd>. </p> </li> </ol> <p> С помощью IntelliJ IDEA вы можете создавать новые наборы правил из существующих объявлений в файлах CSS, SCSS, Sass или Less и даже перемещать целые наборы правил между файлами с помощью рефакторинга и действий намерения. </p> <ol> <li> <p> Выберите декларации для введения.Если вам нужно только одно объявление, просто поместите курсор внутри него. </p> </li> <li> <p> Нажмите <kbd data-secondary_macos="⌥ ⏎" data-primary_kde="Alt+Enter" data-secondary_eclipse="⌃ 1" data-primary_gnome="Alt+Enter" data-secondary_emacs="⌥ ⏎" data-secondary_macos_system_shortcuts="⌥ ⏎" data-primary_netbeans="Alt+Enter" data-secondary_netbeans="⌥ ⏎" data-primary_emacs="Alt+Enter" data-secondary_eclipse_macos="⌘ 1" data-primary_visual_studio="Alt+Enter" data-secondary_visual_studio="⌥ ⏎" data-primary_windows="Alt+Enter" data-secondary_sublime_text_macos="⌥ ⏎" data-secondary_sublime_text="⌥ ⏎" data-primary_sublime_text="Alt+Enter" data-secondary_intellij_idea_classic="⌥ ⏎" data-primary_xwin="Alt+Enter" data-primary_eclipse="Ctrl+1"> Alt+Enter </kbd> и выберите Ввести набор правил из списка. </p> </li> </ol> <p> IntelliJ IDEA создает новый набор правил с тем же селектором и перемещает в него выбранные объявления. Если выборка содержит комментарии, вложенные селекторы и т. д., они также перемещаются в новый набор правил. </p> <h4 data-toc="ws_css_move_ruleset"><span class="ez-toc-section" id="i-63"> Переместить наборы правил в другие файлы </span></h4> <ol> <li> <p> Поместите курсор в любое место в наборе правил для перемещения и нажмите <kbd data-secondary_macos="F6" data-primary_kde="F6" data-secondary_eclipse="⌥ ⇧ V" data-primary_gnome="F6" data-secondary_emacs="F6" data-secondary_macos_system_shortcuts="⌥ ⌘ I" data-primary_netbeans="Ctrl+M" data-secondary_netbeans="⌃ M" data-primary_emacs="F6" data-secondary_eclipse_macos="⌥ ⌘ V" data-primary_visual_studio="Ctrl+R, O" data-secondary_visual_studio="⌃ R, O" data-primary_windows="F6" data-secondary_sublime_text_macos="N/A" data-secondary_sublime_text="N/A" data-primary_sublime_text="N/A" data-secondary_intellij_idea_classic="F6" data-primary_xwin="F6" data-primary_eclipse="Alt+Shift+V"> F6 </kbd> .</p> </li> <li> <p> В открывшемся диалоговом окне укажите файл, в который необходимо переместить набор правил. Если указанный файл не существует, IntelliJ IDEA предложит его создать. </p> </li> <li> <p> По умолчанию IntelliJ IDEA автоматически открывает файл, в который перемещен набор правил. Чтобы изменить это поведение, снимите флажок «Открыть в редакторе». </p> </li> </ol> <p> Также доступны общие рефакторинги, такие как копирование, перемещение или переименование. </p> <h3 data-toc="ws_css_documentation_lookup_check_compatibility_inspection"><span class="ez-toc-section" id="i-64"> Проверка совместимости с браузерами </span></h3> <p> Помимо поиска во всплывающем окне документации, вы можете на лету проверить свойства таблицы стилей на совместимость с конкретными браузерами.Эта проверка основана на данных о совместимости браузера MDN и показывает вам предупреждение каждый раз, когда свойство не поддерживается в одном из целевых браузеров. </p> <h4 data-toc="ws_css_documentation_lookup_check_compatibility_procedure"><span class="ez-toc-section" id="i-65"> Включить проверку совместимости </span></h4> <ol> <li> <p> В диалоговом окне «Настройки/Настройки» ( <kbd data-secondary_macos="⌘ ," data-primary_kde="Ctrl+Alt+S" data-secondary_eclipse="⌃ ⌥ S" data-primary_gnome="Ctrl+Alt+S" data-secondary_emacs="⌃ ⌥ S" data-secondary_macos_system_shortcuts="⌘ ," data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃ ⌥ S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘ ," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃ ⌥ S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘ ," data-secondary_sublime_text="⌃ ⌥ S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘ ," data-primary_xwin="Ctrl+Alt+S" data-primary_eclipse="Ctrl+Alt+S"> Ctrl+Alt+S </kbd> ) перейдите к . </p> </li> <li> <p> Разверните узел CSS и выберите совместимость с браузером для свойств. В области «Параметры» выберите браузеры, на которые вы хотите настроить таргетинг, и минимальные версии для них. </p> </li> </ol> <h3 data-toc="ws_css_change_color_values" data-availability-limit="Ultimate"><span class="ez-toc-section" id="i-66"> Изменение значений цвета </span></h3> <p> С помощью IntelliJ IDEA вы можете легко изменять значения цвета в таблицах стилей, не вводя шестнадцатеричные коды.</p> <h4 data-toc="ws_css_change_color_values_choose_color"><span class="ez-toc-section" id="i-67"> Выбрать цвета </span></h4> <ol> <li> <p> Откройте нужную таблицу стилей для редактирования. </p> </li> <li> <p> Введите <code> color: </code> , а затем нажмите <kbd data-secondary_macos="⌃ Space" data-primary_kde="Ctrl+Space" data-secondary_eclipse="⌃ Space" data-primary_gnome="Ctrl+Space" data-secondary_emacs="⌥ /" data-secondary_macos_system_shortcuts="⌃ Space" data-primary_netbeans="Ctrl+Space" data-secondary_netbeans="⌃ Space" data-primary_emacs="Alt+/" data-secondary_eclipse_macos="⌃ Space" data-primary_visual_studio="Ctrl+Space" data-secondary_visual_studio="⌃ Space" data-primary_windows="Ctrl+Space" data-secondary_sublime_text_macos="⌃ Space" data-secondary_sublime_text="⌃ Space" data-primary_sublime_text="Ctrl+Space" data-secondary_intellij_idea_classic="⌃ Space" data-primary_xwin="Ctrl+Space" data-primary_eclipse="Ctrl+Space"> Ctrl+Пробел </kbd> . </p> </li> <li> <p> Выберите желаемое значение цвета из предлагаемого списка или выберите цвет..., чтобы выбрать собственный. </p> </li> </ol> <h4 data-toc="ws_css_change_color_values_change_color"><span class="ez-toc-section" id="i-68"> Изменить цвета </span></h4> <ol> <li> <p> Откройте нужную таблицу стилей для редактирования и найдите свойство цвета, которое вы хотите изменить. </p> </li> <li> <p> Щелкните значок цвета в поле.</p> <p> В качестве альтернативы, если значки не отображаются, нажмите <kbd data-secondary_macos="⌥ ⏎" data-primary_kde="Alt+Enter" data-secondary_eclipse="⌃ 1" data-primary_gnome="Alt+Enter" data-secondary_emacs="⌥ ⏎" data-secondary_macos_system_shortcuts="⌥ ⏎" data-primary_netbeans="Alt+Enter" data-secondary_netbeans="⌥ ⏎" data-primary_emacs="Alt+Enter" data-secondary_eclipse_macos="⌘ 1" data-primary_visual_studio="Alt+Enter" data-secondary_visual_studio="⌥ ⏎" data-primary_windows="Alt+Enter" data-secondary_sublime_text_macos="⌥ ⏎" data-secondary_sublime_text="⌥ ⏎" data-primary_sublime_text="Alt+Enter" data-secondary_intellij_idea_classic="⌥ ⏎" data-primary_xwin="Alt+Enter" data-primary_eclipse="Ctrl+1"> Alt+Enter </kbd> и выберите Изменить цвет из списка. См. раздел Отображение цветных значков в поле ниже. </p> </li> <li> <p> В открывшемся диалоговом окне «Выберите цвет» выберите нужный новый цвет и нажмите «Выбрать». </p> </li> </ol> <h4 data-toc="ws_css_color_preview_code"><span class="ez-toc-section" id="i-69"> Предварительный просмотр кода цветов </span></h4> <ul> <li> <p> IntelliJ IDEA помечает каждое свойство цвета <code> </code> значком поля соответствующего цвета. При наведении указателя мыши на значок цвета IntelliJ IDEA отображает всплывающее окно с предварительным просмотром цвета и его шестнадцатеричным кодом.</p> <p> Чтобы использовать код вместо удобочитаемого названия цвета, нажмите <kbd data-secondary_macos="⌥ ⏎" data-primary_kde="Alt+Enter" data-secondary_eclipse="⌃ 1" data-primary_gnome="Alt+Enter" data-secondary_emacs="⌥ ⏎" data-secondary_macos_system_shortcuts="⌥ ⏎" data-primary_netbeans="Alt+Enter" data-secondary_netbeans="⌥ ⏎" data-primary_emacs="Alt+Enter" data-secondary_eclipse_macos="⌘ 1" data-primary_visual_studio="Alt+Enter" data-secondary_visual_studio="⌥ ⏎" data-primary_windows="Alt+Enter" data-secondary_sublime_text_macos="⌥ ⏎" data-secondary_sublime_text="⌥ ⏎" data-primary_sublime_text="Alt+Enter" data-secondary_intellij_idea_classic="⌥ ⏎" data-primary_xwin="Alt+Enter" data-primary_eclipse="Ctrl+1"> Alt+Enter </kbd> и выберите Преобразовать цвет в <систему цветового кода> из списка, где <система цветового кода> — HEX, HSL, HWB или RGB. </p> </li> </ul> <h4 data-toc="css_show_color_icons_in_the_gutter"><span class="ez-toc-section" id="i-70"> Показать цветные значки в поле </span></h4> <p> По умолчанию IntelliJ IDEA отображает цветные значки в поле. Если они скрыты, вы можете вернуть их в любое время. </p> <ol> <li> <p> В диалоговом окне «Настройки/Настройки» (<kbd data-secondary_macos="⌘ ," data-primary_kde="Ctrl+Alt+S" data-secondary_eclipse="⌃ ⌥ S" data-primary_gnome="Ctrl+Alt+S" data-secondary_emacs="⌃ ⌥ S" data-secondary_macos_system_shortcuts="⌘ ," data-primary_netbeans="Ctrl+Alt+S" data-secondary_netbeans="⌃ ⌥ S" data-primary_emacs="Ctrl+Alt+S" data-secondary_eclipse_macos="⌘ ," data-primary_visual_studio="Ctrl+Alt+S" data-secondary_visual_studio="⌃ ⌥ S" data-primary_windows="Ctrl+Alt+S" data-secondary_sublime_text_macos="⌘ ," data-secondary_sublime_text="⌃ ⌥ S" data-primary_sublime_text="Ctrl+Alt+S" data-secondary_intellij_idea_classic="⌘ ," data-primary_xwin="Ctrl+Alt+S" data-primary_eclipse="Ctrl+Alt+S"> Ctrl+Alt+S </kbd>) перейдите к .Откроется страница значков желоба. </p> </li> <li> <p> В области Общие установите флажок Предварительный просмотр цвета. </p> </li> </ol> <h3 data-toc="ws_css_view_styles_for_tag" data-availability-limit="Ultimate"><span class="ez-toc-section" id="i-71"> Просмотр стилей, примененных к тегу </span></h3> <p> В файлах HTML, XHTML, JSP и JSPX IntelliJ IDEA может показать вам все стили, примененные к произвольному тегу. </p> <ul> <li> <p> В контекстном меню тега выберите . </p> <p> IntelliJ IDEA открывает окно инструмента «Стили CSS» с двумя панелями: на левой панели отображаются стили для тега, а на правой панели — их определения.Для каждого тега IntelliJ IDEA открывает отдельную вкладку. </p> <p> В окне инструментов можно перейти к тегам и определениям свойств в исходном коде. </p> <ul> <li> <p> Чтобы перейти к тегу, щелкните на панели инструментов левой панели. </p> </li> <li> <p> Чтобы перейти к определению свойства, выберите его на левой панели и щелкните на панели инструментов на правой панели. </p> </li> </ul> </li> </ul> <h3 data-toc="ws_css_syntax_highlighting"><span class="ez-toc-section" id="i-72"> Настройка подсветки синтаксиса </span></h3> <p> Вы можете настроить подсветку синтаксиса с учетом CSS в соответствии со своими предпочтениями и привычками.<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div><!-- .entry-content --> <footer class="entry-footer"> <span class="cat-links">Категория: <a href="https://forjobathome.ru/category/raznoe" rel="category tag">Разное</a></span> </footer><!-- .entry-footer --> </div> </article><!-- #post-21426 --> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://forjobathome.ru/raznoe/pajpal-vhod-vojdite-v-svoj-schet-paypal.html" rel="prev">Пайпал вход: Войдите в свой счет PayPal</a></div><div class="nav-next"><a href="https://forjobathome.ru/sajt/prodvizhenie-sajtov-obuchenie-onlajn-10-luchshih-kursov-po-seo-prodvizheniyu-sajtov-2021-goda-olga-gorbenko-na-vc-ru.html" rel="next">Продвижение сайтов обучение онлайн: 10 лучших курсов по SEO продвижению сайтов 2021 года — Ольга Горбенко на vc.ru</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="/raznoe/kak-sdelat-css-vvedenie-v-css-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://forjobathome.ru/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" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</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" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='21426' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> </div> </section> <footer class="wrapper wrap-footer"> <section class="wrapper footer-widget"> <div class="container"> <div class="row"> </div> </div> </section> <!-- footer site info --> <section id="colophon" class="wrapper site-footer" > <div class="container"> <div class="row"> <div class="xs-12 col-sm-6 col-md-6"> <div class="site-info"> <p class="endtext"><strong>© 2007-2019 forjobathome.ru<br></strong> Использование материалов сайта разрешено и <br>всячески приветствуется при одном условии:<br> <a href="./copyright.htm" title="" class="stext7">наличие гиперссылки</a> на данный ресурс! </p> </div><!-- .site-info --> </div> <div class="xs-12 col-sm-6 col-md-6"> <div class="footer-menu"> <nav id="footer-site-navigation" class="footer-main-navigation" role="navigation" aria-label="footer-menu"> <div class="menu-footer-menu-container"> </div> </nav><!-- #site-navigation --> </div> </div> </div> </div> </section><!-- #colophon --> </footer><!-- #colophon --> <!-- ***************************************** Footer section ends ****************************************** --> <a id="gotop" class="greenturtle-back-to-top" href="#page"><i class="fa fa-angle-up"></i></a> </div><!-- #page --> <div style="display:none"> </div> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://forjobathome.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.9.3' type='text/css' media='all' /> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://forjobathome.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.9.3' type='text/css' media='all' /> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/modernizr.js?ver=2.8.3' id='greenturtle-mag-jquery-modernizr-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.easing.js?ver=0.3.6' id='greenturtle-mag-jquery-easing-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.waypoints.js?ver=4.0.0' id='greenturtle-mag-jquery-waypoints-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/jquery.cycle.js?ver=2.1.6' id='greenturtle-mag-jquery-cycle-script-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/greenturtle-mag-custom.js?ver=5.9.3' id='greenturtle-mag-custom-js-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/navigation.js?ver=20151215' id='greenturtle-mag-navigation-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/themes/greenturtle-mag/js/skip-link-focus-fix.js?ver=20151215' id='greenturtle-mag-skip-link-focus-fix-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-includes/js/comment-reply.min.js?ver=5.9.3' id='comment-reply-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://forjobathome.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> </body> </html>