Как запустить css в html

Подключение CSS к HTML

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

Внешние таблицы стилей. Создайте в блокноте файл style.css и сохраните его. Чтобы подключить style.css к уже существующей html-странице используется тег:

Внутренние таблицы стилей, которые задаются внутри HTML-документа при помощи атрибута style. К примеру:

>hello!

Встроенные таблицы стилей (таблица стилей встраивается в заголовок HTML-страницы):

«color:red

Также рекомендуем почитать:

Рубрики

of your page —>

Как вставить файл CSS в HTML

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а).

Количество просмотров этой статьи: 14 862.

В этой статье:

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

Метод 1 из 2:

Как уставить внешнюю таблицу стилей

Создайте файл CSS. Подготовьте и сохраните файл CSS с расшиернием «.css».

Загрузите файл CSS на сайт.

Хорошей практикой является удаление из адреса (URL) основного имени домена. Исходя из этого, адрес http://мойсайт.com/css/default.css будет сокращен до «/css/default.css». Не забудьте включить ведущий слэш («/»). Он называется относительным путем.

Вставьте в файл ссылку. Найдите в файле HTML метку и создайте пустую строку прямо над ней. Вставьте в эту строку , заменив «www.ваш. » на ссылку в файле CSS.

Сохраните файл HTML и загрузите его на сайт.

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

Метод 2 из 2:

Как вставить внутреннюю таблицу стиля

Создайте метку . Откройте файл HTML и найдите метку . Добавьте над ней несколько пустых строк и введите следующее:

STYLE type="text/css"> STYLE>

Вставьте все свои CSS между этими двумя метками.

Сохраните файл HTML (с расширением .HTML).

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

Всегда проверяйте внешний вид сайта в разных браузерах и на разных операционных системах. Некоторые браузеры подключаются к CSS немного по-разному. Это даже может произойти в одном и том же браузере, но на разных версиях Mac и Windows. Если в другом браузере ваш сайт выглядит иначе (например, промежуток между некоторыми объектами, такими как списки, имеет другой размер), тогда проблема заключается в настройках этого браузера. Найдите таблицу мастер-стилей и вставьте ее в начало файла CSS, чтобы изменить стандартные настройки браузера. Это делается для того, чтобы ваши настройки ничего не меняли в самом браузере.
Вставьте внешнюю таблицу стилей, если у вас есть такая возможность. Это позволит вам менять внешний вид сайта, изменяя код в исходном файле. Так вам не придется менять CSS на каждой странице сайта.
Если сайт не реагирует на CSS так, как вы того ожидали, перепроверьте всю кодировку, чтобы удостовериться в правильности ее написания. В частности, уделите особое внимание точкам с запятыми («;») и закрывающимся скобкам («>»). В CSS файле довольно просто пропустить один из этих символов.
Сохраните файл HTML на компьютер, чтобы потом открыть его в различных веб-браузерах и перепроверить его внешний вид перед дальнейшей загрузкой. Но чтобы его загрузить, файл CSS необходимо вставлять в HTML в качестве внешней таблицы стилей.
Если таблица стилей сама себе противоречит – например, сначала в ней говорится, что текст будет синим, а затем, что он будет красным – выполняться всегда будет последнее условие. Если одна команда представляет собой внешнюю таблицу стилей, а другая – внутреннюю, активной будет внутренняя таблица.

Предупреждения

Не используйте «открытую» постановку CSS, то есть CSS, который включен в метку HTML. (Пример: «align=’center’» является открытой постановкой CSS). Это устаревший вариант с плохой синтаксической конструкцией. Если через некоторое время вам придется обновлять сайт, эту постановку будет трудно изменить.

Не подключаются стили .css к .html файлу при переносе проекта на смартфон с компьютера

Дело обстоит следующим образом: Я создал небольшой .html файл, подключил к нему .css стили. Реализовывал всё это на компьютере. Открывал файл через Yandex Browser, Mozilla Firefox — всё работает исправно, все стили подключены. Прописывал внутри .css файла @media запросы, которые применяют соответственные стили под ширину экрана. Собственно, решил проверить, как это всё будет работать на смартфоне. (К слову, все файлы скинул туда в том порядке и папках, как и на компьютере, значит всё подключено по правильным путям). Но когда уже на смартфоне я открываю этот .html документ через любой браузер (Yandex Browser для мобильных, Google Chrome для мобильных), то никакие стили там не отображаются (выглядит файл, как просто вёрстка на html, без css. Значит стили не подключены). Как это понимать и как решить данную проблему: ведь просто перенёс всё на смартфон, но уже нету подключения. Если я не полностью описал проблему, то скажите, что нужно дополнить в комментариях. Заранее спасибо Путь к .css файлу:

Расположение папок и файлов проекта Содержимое папки css Только что все стили из .css файла на смартфоне помещал в:

Работает так то всё хорошо, но оставлять такие стили очень не хотелось бы. Да и вообще проблему решить хочется не таким способом. Не желательно бы все стили держать в одном файле .html. Как минимум это неудобно и не эргономично.

Почему я не могу подключить css к html?

Я почему то не могу подключить css к html. Вроде прописал все правильно, как в ролике на Youtube.
записывал в head.

7 ответов

Где у вас в проекте лежит файл style.css? В корне проекта?

Файл index.html запускаете? Если да, файл style.css лежит также, где и файл index.html на одном уровне или в другой папке, например css?

С index.html лежит файл main.css.

Вот по этой причине и не подключается style.css Вы в head пишите путь к файлу style.css так:

Это значит, что вы указываете, что файл style.css лежит на первом уровне в папке с index.html и пытаетесь его подключить. — ПАПКА ПРОЕКТА index.html style.css — assets — css main.css Если такая структура папок и файлов как я указал выше, нужно подключать файл main.css так:

Извините, но я не совсем понимаю, что мне нужно сделать)

Можно файл style.css разместить в одной папке с index.html и подключать к странице как и подключали:

Если совсем не получится, можно исходный код скачать от этого урока (справа вкладка Файлы) и запустить код: https://fructcode.com/ru/courses/html-and-css/create-header-include-css/

Я только начинаю это изучать, поэтому не совсем понимаю, что значит в корне проекта.
файл style.css лежит у меня в одной папке с html и всеми картинками и тд.

Файл index.html открывается
Файл style.css не лежит в одной папке с index.html. С index.html лежит файл main.css.

Извините, но я не совсем понимаю, что мне нужно сделать)
Мне нужно перетащить main.css в папку с проектом?

Начало работы, щелкнув правой кнопкой мыши HTML-файл

Используйте это руководство, чтобы узнать, как открыть и закрыть Средства разработки, щелкнув правой .html кнопкой мыши файл demo To Do в Обозреватель Visual Studio Code, не запуская веб-сервер.

Шаг 1. Установка средств разработки и необходимых компонентов

Если вы еще этого не сделали, выполните действия, описанные в разделе Установка расширения DevTools для Visual Studio Code, а затем выполните следующие действия. Для этого руководства не требуется устанавливать и запускать веб-сервер, но рекомендуется.

Шаг 2. Запустите средства разработки, щелкнув правой кнопкой мыши HTML-файл

Щелкнуть файл правой кнопкой .html мыши в Обозреватель Visual Studio Code — это main способ открыть средства разработки, если веб-страница не требует запуска на веб-сервере.

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

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

В Visual Studio Code выберите Файл>Открыть папку.
Перейдите в каталог, в который вы клонировали репозиторий Demos, откройте конкретный каталог для приложения demo-to-do , например C:\Users\username\Documents\GitHub\Demos\demo-to-do\ , и нажмите кнопку Выбрать папку :
Выберите Панель> действий Обозреватель () > правой кнопкой мыши index.html , а затем выберите Открыть в браузере Edge>Открыть с помощью средств разработки:

Шаг 3. Упорядочивание вкладок

Чтобы сэкономить место, используйте кнопку Закрыть средства разработки или Открыть средства разработки и кнопку Переключить экранную трансляцию , чтобы переключить (открыть или закрыть) вкладки DevTools.
1. В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию : Вкладка Edge DevTools: Browser (Инструменты разработки для Edge: браузер ) закрывается.
2. На вкладке Edge DevTools снова нажмите кнопку Переключить экранную трансляцию . Откроется вкладка Edge DevTools: Browser ( Браузер ).
3. В правом верхнем углу вкладки Edge DevTools: Браузер нажмите кнопку Закрыть средства разработки :
4. В правом верхнем углу вкладки Edge DevTools: Browser нажмите кнопку Открыть средства разработки .
5. Перетащите вкладку Edge DevTools: Browser, чтобы закрепить ее в любом месте Visual Studio Code, например группировать с помощью редактора исходного кода.
Шаг 4. Изменение CSS в средствах разработки, автоматическое обновление CSS-файла

На вкладке Edge DevTools на вкладке Стили инструмента >Элементы можно изменять селекторы CSS, правила и значения. Флажок css зеркало редактирования установлен по умолчанию, поэтому .css файл автоматически редактируется, но изменения не сохраняются, поэтому вы можете решить, следует ли сохранять изменения.
1. В инструменте Элементы на вкладке Стили щелкните значение CSS, например размер шрифта текста.
2. Измените значение CSS, например с помощью колесика мыши или нажатия клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Откроется связанный .css файл, например to-do-styles.css и прокручивается до строки, определяющей значение CSS, и автоматически изменяет .css файл, но не сохраняет изменения:
3. .css Закройте файл. Visual Studio Code выводится запрос на сохранение изменений.
4. Нажмите кнопку Не сохранять .
Шаг 5. Пошаговое выполнение кода JavaScript в отладчике
1. Выберите панель > действий Обозреватель ().
2. В каталоге demo-to-do щелкните to-do.js , чтобы открыть его. Прокрутите changeTask вниз до функции и щелкните влево от номера строки, чтобы задать точку останова:
3. Если боковая панель Выполнения и отладки не отображается, выберите Просмотреть>выполнение. Боковая панель запуска и отладки содержит панель контрольных значений и другие панели отладчика.
4. В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , введите задачу, например тест. Отладчик Visual Studio Code приостанавливает работу в точке останова to-do.js в файле:
5. На панели инструментов Отладка или с помощью меню Выполнить или нажатием клавиш выполните несколько строк кода в to-do.js .
6. В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , щелкните кружок «Готово» рядом с тестовой задачей. Отладчик Visual Studio Code приостанавливается в точке останова to-do.js в файле.
Шаг 6. Закрытие средств разработки

Чтобы завершить отладку и закрыть вкладки Edge DevTools :
1. На панели инструментов Отладка нажмите кнопку Остановить (SHIFT+F5). Или в меню Выполнить выберите Остановить отладку: Вкладка Edge DevTools закрывается, а вкладка Edge DevTools: Browser (Средства разработки для Edge: браузер ) закроется.
- Закрытие средств разработки в открывании средств разработки и в браузере DevTools.
Вы завершили работу с руководством «Начало работы, щелкнув правой кнопкой мыши HTML-файл». Рекомендуется также выполнить другие руководства. См. статью Начало работы с расширением DevTools для Visual Studio Code.

См. также
- Открытие средств разработки и браузера DevTools
- Расширение Средств разработки Microsoft Edge для Visual Studio Code
Github:
- demo-to-do — демонстрационного веб-приложения, работающего на сервере github.io .
- Исходный код для демонстрации
- Репозиторий MicrosoftEdge/Demos
Как запускать CSS-анимацию при прокрутке страницы

В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения – видимой части окна, с помощью Intersection Observer API.

Настройка CSS-анимации с помощью ключевых кадров

Начнем с создания CSS-анимации, которая определяется ключевыми кадрами @keyframes .
```
@keyframes wipe-enter < 0% < transform: scale(0, .025); >50% < transform: scale(1, .025); >>
```
Анимацию можно назвать как угодно, пусть будет wipe-enter . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.

После того, как определены ключевые кадры, можно использовать анимацию для элемента, установив свойству animation-name название ключевых кадров: wipe-enter . Кроме этого необходимо установить animation-duration – продолжительность анимации и animation-iteration-count – счетчик итераций, указывающий, сколько раз анимация должна воспроизводиться, например – бесконечно.
```
@media (prefers-reduced-motion: no-preference) < .square < animation-name: wipe-enter; animation-duration: 1s; animation-iteration-count: infinite; >>
```
CSS-класс .square пусть будет заключён в медиа-запрос prefers-reduce-motion: no-preference . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.

В этом примере будет анимирован HTML-элемент квадратной формы:

Для CSS-анимации можно использовать сокращённое написание свойства animation , например:
```
@media (prefers-reduced-motion: no-preference) < .square < animation: wipe-enter 1s infinite; >>
```
Управление анимацией с помощью CSS-класса

Допустим, не нужно, чтобы анимация воспроизводилась сразу. Воспроизведением анимации можно управлять, добавляя HTML-элементу CSS-класс переключатель только анимации, который не используется для остальной стилизации элемента.
```
.square < width: 200px; height: 200px; background: #e62a52; // и т.д. >@media (prefers-reduced-motion: no-preference) < .square-animation < animation: wipe-enter 1s 1; >>
```
CSS-анимация будет воспроизводиться, когда HTML-элементу будет добавлен CSS-класс .square-animation :

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

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

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

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

Вот три способа определить, когда элемент находится в видимой области окна:
1. Использовать Intersection Observer API
2. Измерять смещение элемента при скролле страницы
3. Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2
Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

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

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:
```
// Создать наблюдателя const observer = new IntersectionObserver(entries => < // Заполним метод обратного вызова позже. >); // Сообщить наблюдателю, какие элементы следует отслеживать observer.observe(document.querySelector('.square'));
```
По умолчанию корневым элементом, который будет проверяться на пересечение, является окно браузера, поэтому наблюдателю нужно только сообщить об анимируемом HTML-элементе.

Когда функция обратного вызова (callback) запускается, она возвращает массив записей из целевых (target) элементов, которые были запрошены, а также некоторую дополнительную информацию о них. В функцию всегда будет возвращаться массив, даже если наблюдение ведётся только за одним элементом, как здесь.

В функции обратного вызова можно перебрать массив записей, чтобы указать, что с ними нужно сделать. Каждая запись имеет свойство isIntersecting , которое может быть true или false . Если оно возвращает true , это означает, что элемент находится в видимой области окна (viewport).
```
entries.forEach(entry => < if (entry.isIntersecting) < // Элемент появился, // надо добавить CSS-класс для анимации >>);
```
Собираем всё вместе. Обратите внимание, что entry – это объект, предоставленный наблюдателем, а entry.target – это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации.
```
const observer = new IntersectionObserver(entries => < // перебор записей entries.forEach(entry => < // если элемент появился if (entry.isIntersecting) < // добавить ему CSS-класс entry.target.classList.add('square-animation'); >>); >); observer.observe(document.querySelector('.square'));
```
Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

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

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

Теперь надо наблюдать за HTML-элементом c CSS-классом square-wrapper а класс для анимации применять к элементу с классом square , как и прежде. Когда элемент-оболочка находится за пределами видимой области, нужно удалять CSS-класс у элемента .square , чтобы анимация перезапускалась каждый раз, когда элемент появляется в окне при скролле.
```
const observer = new IntersectionObserver(entries => < entries.forEach(entry => < const square = entry.target.querySelector('.square'); if (entry.isIntersecting) < square.classList.add('square-animation'); return; // если класс добавлен, продолжать уже не надо >// перемещение завершено, теперь надо удалить класс square.classList.remove('square-animation'); >); >); observer.observe(document.querySelector('.square-wrapper'));
```
Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:

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

Запуск CSS-transition при скролле

Если для анимации используется только один шаг и не требуется применение @keyframes , например, достаточно изменения прозрачности HTML-элемента от 0 до 1, можно использовать CSS-transition вместо CSS-animation.

Метод по сути тот же. Вместо определения ключевых кадров ( @keyframes ) для CSS-класса анимации указаны свойства для transition .
```
.square < width: 200px; height: 200px; background: #e62a52; border-radius: 8px; opacity: 0; transform: scale(1.2); >@media (prefers-reduced-motion: no-preference) < .square < transition: opacity 1.5s ease, transform 1.5s ease; >> .square-transition
```
Заставим HTML-элемент появляться, когда он перемещается в видимую область просмотра. Для этого в момент появления в окне при скролле ему надо добавить CSS-класс square-transition . Так пользователь, у которого заблокирован или не загружается JavaScript, должен всё-равно увидеть HTML-элемент в его окончательном состоянии.

Это особенно важно, поскольку анимация начинается с opacity: 0 . Если бы не было настройки CSS-класса square-transition и JavaScript не работал, пользователь вообще не увидел бы HTML-элемент! Но если эффект перехода заключается в том, чтобы что-то исчезло, наверное, это не понадобится делать.

При первом запуске JavaScript нужно удалить CSS-класс, чтобы затем, его можно было добавить обратно, когда действительно нужно запустить transition . Это должно быть сделано вне метода обработки наблюдения за скроллом, желательно в начале JavaScript. Вот полный код:
```
// Удалить CSS-класс square-transition const square = document.querySelector('.square'); square.classList.remove('square-transition'); // Добавить наблюдение за появлением элемента const observer = new IntersectionObserver(entries => < entries.forEach(entry => < if (entry.isIntersecting) < square.classList.add('square-transition'); return; >square.classList.remove('square-transition'); >); >); observer.observe(document.querySelector('.square-wrapper'));
```
В этом примере CSS-transition запускается, когда элемент-оболочка при скролле появляется в окне. Если Javascript не запустился, элемент всё-равно будет виден.

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

Редактор для HTML: пишем код, чтобы было удобно

Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если Mac OS или Linux — нажмите Other platforms.

Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

Шаг 2. Запускаем редактор и осматриваемся

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

Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

По шагам на скриншоте:
1. Add workspace folder — открывает меню выбора папки.
2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
3. Нажмём Add.
После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

Шаг 3. Добавляем файлы

После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

Шаг 4. Делаем работу удобнее

Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.

Шаг 5. Добавляем код

Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.
```
   Сайт начинающего верстальщика   На главную
 
  Взгляд упал на кота.
 Здесь могла быть ваша реклама.
 
 Подвал сайта
   
```
Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

Шаг 6. Запускаем код и смотрим на результат

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

Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

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

Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

Что мы сделали
1. Установили и настроили редактор кода.
2. Создали рабочую папку и добавили туда файлы нашего проекта.
3. Научились редактировать и сохранять файлы с кодом.
4. Установили расширение, чтобы сразу видеть результат вёрстки.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Используем Atom для первой вёрстки

Инструкция по установке, настройке и использованию самого передового на сегодняшний день редактора кода

Published in
7 min read
Mar 4, 2015

Почему я выбираю Atom

Не так давно все переходили с какого-нибудь TextMate на SublimeText и это было реально своевременно круто. Но когда в индустрию редакторов кода вошёл GitHub, сразу стало понятно за кем будущее.

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

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

Установка

Для установки вам необходимо быть обладателем одной из описанных на сайте Atom систем:

OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linux

Так как я работаю на Mac, то большая часть инструкции будет для него, иногда с информацией для Windows.

Скачайте дистрибутив и установите его как полагается в вашей системе. На Mac OS X нужно перенести приложение в папку приложений (Applications), на Windows запустить установочный дистрибутив.

После этого откройте Atom и давайте перейдём к настройке.

Настройка

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

Настройка Atom

После установки Atom сразу готов к работе и настроен в соответствии с последними тенденциями. Вам нужно настроить всего две вещи.

Добавьте разметку отступов
Зайдите в настройки Atom → Preferences → Settings и поставьте галочку на Show Indent Guide. Это включит отображение специальных полосочек, которые помогают видеть вложенность кода.

(UPDATE: не актуально) Настройте правильную работу autocomplete
Autocomplete — это инструмент для автоматического написания кода. Зайдите в Atom → Open Your Keymap и вставьте в конец документа следующий код:

Настройка Mac OS X

В современных редакторах кода можно раздвигать курсор на несколько строк. Что бы это делать на Mac, нужно выключить пару стандартных сочетаний клавиш. Зайдите в системные настройки  → System Preferences → Keyboard → Shortcuts → Mission Control и снимите галочки на двух пунктах:

Mission Control
Занимает сочетание клавиш ^↑

Application windows
Занимает сочетание клавиш ^↓

Теперь, когда будете играться с кодом, попробуйте по нажимать Shift-Ctrl-↑ и Shift-Ctrl-↓. Вы можете редактировать несколько строк одновременно. Также можно вставлять дополнительные курсоры в любые места в коде зажав Cmd и просто кликая в необходимое место.

Установка пакетов

Packages — это небольшие, но очень удобные дополнения, которые расширяют возможности Atom.

Для установки пакетов зайдите в Atom → Preferences → Install и через строку поиска найдите и установите следующие пакеты:

Atom-color-highlight
Подсвечивает цветовые величины в коде

Autocomplete-css
Упрощает написание CSS

Autocomplete-paths
Упрощает написание путей к файлам проекта

Autocomplete-plus
Упрощает автоматическое написание кода

Emmet
Незаменимый инструмент дзен коддера, ускоряет написание HTML кода в разы

Выбор темы подсветки кода

Моя любимая тема Twilight не поставляется с Atom, скорей всего потому, что эта тема пришла из другого редактора кода TextMate. Несмотря на новизну Atom, к сожалению, я пока не нашёл для себя ни одной нормальной темы поставляемой с ним.

Для установки Twilight, нужно опять зайти в установку как в прошлый раз, только в этот раз в строке поиска нужно выбрать Themes, вместо Packages. Найти Twilight и установить.

После того, как пакеты и темы поставлены, перезагрузите Atom для того, что бы всё точно заработало (полностью закройте программу и откройте снова).

Как всё работает

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

Emmet в действии

Создайте новый файл и сохраните его, назовите “index.html”, естественно без кавычек. Для правильной работы всех помощников Atom, так называемых сниппетов (snippets) и для правильной подсветки кода (syntax highlighting) обязательно нужно указывать правильное расширение файла (.html в данном случае).

Итак, пишем в документе восклицательный знак и нажимаем Tab. Emmet развернёт вам базовую структуру HTML.

Подробней об использовании Emmet читайте в документации на официальном сайте.

Autocomplete Paths в действии

Положите в папку, в которой лежит ваш index.html какие-нибудь картинки, для удобства, создайте дополнительную папку images и положите картинки в неё.

В index.html между тэгами и напишите “img”, и нажмите Tab. У вас появится немного кода и курсор будет стоять внутри кавычек атрибута src. Атрибут src обозначает source (источник, исходник) тэга img, что обозначает image (изображение). В значении атрибута scr вам нужно указать путь к картинке, для этого напишите название папки “images” и далее слэш “/”. Autocomplete Paths предложит вам выбрать название картинок из указанной папки.

Autocomplete CSS в действии

Создайте новый файл и сохраните его, назовите “style.css”, без кавычек. Для того, что бы увидеть autocomplete в действии создайте CSS селектор. Напишите html и откройте фигурную скобку “

Теперь на новой строке внутри скобок начните писать, например “font”. Вы увидите выпадающие предложения по написанию кода. Перемещайтесь по ним стрелочками, выбирайте нужное нажатием Enter.

Atom Color Highlight в действии

Напишите “color: red;” и вы увидите, что red будет окрашен в соответствующий цвет. Напишите “background-color: #EEEEEE;” или “white” и вы увидите, что значение будет окрашено в белый.

Заключение

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

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

Жду вас у себя на курсе основ HTML и CSS в Moscow Coding School для быстрой прокачки.

Для тех, кто меня не знает

Меня зовут Захар День, я дизайнер и веб-разработчик, занимаюсь созданием цифровых продуктов (приложений) от идеи до реализации, развиваю в Школе дизайна НИУ ВШЭ кафедру «Дизайн и программирование», наши студенты уже работают в таких компаниях, как: Сбербанк Технологии, Aic, Ценципер, Тинькофф Банк, Wylsacom, и некоторых других. Подробнее о результатах этой деятельности смотрите в нашем видео «Hello, World!».

Я также являюсь создателем курса-бестселлера в Moscow Coding School, который прошли сотрудники многих известных компаний: Look At Media, Kaspersky Lab, МТС, Avito, Leo Burnett, BBDO, Ad Index, Readymag, Yandex, и т.д. Подробнее об этом вы можете прочитать в моей статье «Мой путь от самообразования до преподавания за последние пять лет».

Вы можете узнать подробней обо мне в моих Facebook и Instagram, также я иногда пишу статьи на Medium. Публичные стримы будут проходить на YouTube, подпишитесь и нажмите на колокольчик, если вы хотите, чтобы вам пришло оповещение. Также, я публикую информацию на моём сервисе Hack Exchange, на странице Hack Exchange в Facebook и в Vk.

Делитесь знаниями с друзьями. Знания должны быть доступны!

Дополнение

На сегодняшний день редакторы кода совершенно не персонализированы. Что я имею в виду?

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

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

На много удобней было бы иметь аккаунт (а он уже есть на GitHub), к которому были бы привязаны настройки Atom. Я поднял эту тему на Atom Discuss и получил в ответ гиковское решение, которое работает. Хотя хорошим UX там пока не пахнет.

Синхронизация настроек Atom

Через установку пакетов как описано выше установите sync-settings.

Зарегистрируйтесь или войдите на GitHub. И создайте новый personal access token. Для этого перейдите по ссылке, введите название токена, например Atom Configuration, снимите все галочки, кроме gist, и нажмите Generate Token.

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

Скопируйте токен (шифр) и идите в меню Atom → Preferences Packages → sync-settings → Settings и там вставляйте скопированный токен в поле Personal Access Token.

Теперь идите на сервис GitHub Gist и если вы там не залогинены, то логиньтесь. Создавайте новый Gist — это как экземпляр кода. Всё что нужно для создания пустого гиста — поставить любой символ, например пробел, в большом белом поле для написания кода. После этого кнопки Create Secret Gist и Create Public Gist станут доступными для нажатия. Выбирайте любую, которую считаете нужной. Я храню свою конфигурацию в Public доступе.

После создания гиста, в адресе будет его Gist Id. В моём случае ссылка на мой гист с конфигурацией Atom выглядит так:

Где “10250d74c35cd9fcc630” — это Gist Id, который нужно скопировать и вставить в настройки sync-settings в поле Gist Id.

Перезагрузите Atom. Нажимайте Ctrl-Alt-U. Вы должны увидеть оповещение:

sync-settings: Your settings were successfully uploaded.

Если не увидели, попробуйте в верхнем меню Atom выбрать Packages → Synchronize Settings → Upload. Должно сработать.

Когда вам понадобится загрузить все настройки в новый Atom, вам нужно будет установить sync-settings скопировать Gist Id и Personal Access Token и в меню выбрать Packages → Synchronize Settings → Download или нажать Ctrl-Alt-D.

Спасибо за внимание!

Ссылки на сопутствующую информацию
- Мой курс «Основы веб-вёрстки» на Bang Bang Education
- Статья «Мой путь от самообразования до преподавания за последние пять лет»
- Подкаст Frontend Weekend «Захар День о том, как и где научиться кодингу»
- Мой стрим на Twitch «Изучаем JavaScript и React на веб-синтезаторах» и статья о нём
- Мой стрим на Patreon «Изучаем продвинутую веб-вёрстку, дизайн и программирование»
- Мой лайфстайл и анонсы в Instagram, полезная и не очень информация в Telegram, лекции на YouTube
- Эксклюзивный контент, ревью твоих проектов и консультации на Patreon
Похожие публикации: