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

Обновлено: 21.11.2024

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

Связывание таблиц стилей с HTML

Стили могут быть связаны с HTML-документом одним из трех способов:

1. Встроенный стиль

2. Встроенный стиль

3. Внешний стиль

Как подключить таблицу стилей CSS к HTML-странице?

1. Встроенный стиль

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

Например, если вы хотите добавить стили, вы можете использовать следующий код:

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

вывод

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

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

2. Встроенный стиль

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

Вы можете поместить тег стиля в файл . сразу после тега HTML-страницы.

Вы должны начать с открывающего тега стиля, как показано ниже:

вывод

3. Внешний стиль

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

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

Значением атрибута rel должна быть таблица стилей. Атрибут href указывает расположение и имя файла таблицы стилей. В приведенном выше коде имя внешнего файла — «style.css», и оно хранится в том же каталоге, что и ваш HTML-файл. Если вы хотите сохранить файл .css в другом месте каталога, вам следует указать путь к вашему файлу css в href.

Связывание веб-страницы с таблицей стилей CSS

Для тестирования внешней таблицы стилей необходимо создать один файл CSS и один файл HTML.

Шаги по созданию файла CSS

Откройте простой текстовый файл, скопируйте и вставьте следующие правила css.

Сохраните файл как "styles.css"

Шаги по созданию файла HTML

Откройте обычный текстовый файл, скопируйте и вставьте следующий HTML-код.

Сохраните файл как «external.html» в той же папке, что и «styles.css». Обратите внимание, что тег соединяет этот файл HTML с внешним файлом CSS "styles.css".

После сохранения обоих файлов (html и css) в одной папке откройте файл «external.html» в веб-браузере. При открытии браузера вы можете увидеть стили, примененные к тегам H1 и H2, как на следующем изображении:

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

Visual Studio Code обеспечивает базовую поддержку программирования HTML по умолчанию. Имеется подсветка синтаксиса, интеллектуальное завершение с помощью IntelliSense и настраиваемое форматирование. VS Code также включает отличную поддержку Emmet.

IntelliSense

По мере ввода HTML мы предлагаем подсказки с помощью HTML IntelliSense. На изображении ниже вы можете увидеть предлагаемое закрытие HTML-элемента

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

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

Вы можете вызвать предложения в любое время, нажав ⌃Пробел (Windows, Linux Ctrl+Пробел ) .

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

Закрыть теги

Элементы тега автоматически закрываются при вводе > открывающего тега.

Соответствующий закрывающий тег вставляется при вводе / из закрывающего тега.

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

Автоматическое обновление тегов

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

Палитра цветов

Пользовательский интерфейс палитры цветов VS Code теперь доступен в разделах стилей HTML.

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

Наведите

Наведите указатель мыши на теги HTML или встроенные стили и JavaScript, чтобы получить дополнительную информацию о символе под курсором.

Проверка

Поддержка языка HTML выполняет проверку всех встроенных JavaScript и CSS.

Вы можете отключить эту проверку с помощью следующих настроек:

Складывание

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

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

Если вы предпочитаете сворачиваться на основе отступов для использования HTML:

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

Чтобы улучшить форматирование исходного HTML-кода, вы можете использовать команду «Формат документа» ⇧⌥F (Windows Shift+Alt+F , Linux Ctrl+Shift+I ) для форматирования всего файла или «Форматировать выделение» ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F ), чтобы просто отформатировать выделенный текст.

Форматировщик HTML основан на js-beautify. Параметры форматирования, предлагаемые этой библиотекой, отображаются в настройках VS Code:

  • html.format.wrapLineLength : максимальное количество символов в строке.
  • html.format.unformatted : список тегов, которые не следует переформатировать.
  • html.format.contentUnformatted : список тегов, разделенных запятыми, в которых содержимое не следует переформатировать.
  • html.format.extraLiners : список тегов, перед которыми должен быть дополнительный символ новой строки.
  • html.format.preserveNewLines : следует ли сохранять существующие разрывы строк перед элементами.
  • html.format.maxPreserveNewLines : максимальное количество разрывов строк, которое должно быть сохранено в одном фрагменте.
  • html.format.endWithNewline : заканчивается новой строкой.
  • html.format.indentInnerHtml : отступ и разделы.
  • html.format.wrapAttributes : стратегия переноса атрибутов:
    • auto : перенос при превышении длины строки
    • force : перенос всех атрибутов, кроме первого
    • force-aligned : перенос всех атрибутов, кроме первого, и выравнивание атрибутов
    • force-expand-multiline : перенос всех атрибутов
    • aligned-multiple: перенос при превышении длины строки, выравнивание атрибутов по вертикали.
    • preserve : сохранить перенос атрибутов
    • preserve-aligned: сохранить перенос атрибутов, но выровнять

    Совет. Средство форматирования не форматирует теги, перечисленные в настройках html.format.unformatted и html.format.contentUnformatted. Встроенный JavaScript форматируется, если не исключены теги script.

    В Marketplace есть несколько альтернативных средств форматирования. Если вы хотите использовать другой модуль форматирования, определите «html.format.enable»: false в настройках, чтобы отключить встроенный модуль форматирования.

    Фрагменты Эммета

    VS Code поддерживает расширение фрагмента кода Emmet. Сокращения Emmet перечислены вместе с другими предложениями и фрагментами в списке автозаполнения редактора.

    Совет. Допустимые сокращения см. в разделе HTML шпаргалки Emmet.

    Если вы хотите использовать сокращения HTML Emmet с другими языками, вы можете связать один из режимов Emmet (например, css , html ) с другими языками с помощью параметра emmet.includeLanguages. Параметр принимает идентификатор языка и связывает его с идентификатором языка режима, поддерживаемого Emmet.

    Например, чтобы использовать HTML-аббревиатуры Emmet внутри JavaScript:

    Пользовательские данные HTML

    Вы можете расширить поддержку HTML в VS Code с помощью декларативного пользовательского формата данных. Задав html.customData список файлов JSON, следующих за пользовательским форматом данных, вы можете улучшить понимание VS Code новых HTML-тегов, атрибутов и значений атрибутов. Затем VS Code предложит языковую поддержку, такую ​​как информация о завершении и наведении для предоставленных тегов, атрибутов и значений атрибутов.

    Подробнее об использовании пользовательских данных можно прочитать в хранилище vscode-custom-data.

    HTML-расширения

    Установите расширение, чтобы добавить дополнительные функции. Перейдите в представление «Расширения» ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) и введите «html», чтобы просмотреть список соответствующих расширений, которые помогут в создании и редактировании HTML.

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

    Дальнейшие шаги

    Читайте дальше, чтобы узнать о:

      - VS Code имеет первоклассную поддержку CSS, включая Less и SCSS. - Узнайте о мощной встроенной поддержке Emmet в VS Code. - Emmet, необходимый набор инструментов для веб-разработчиков.

    Частые вопросы

    Есть ли в VS Code предварительный просмотр HTML?

    Нет, в VS Code нет встроенной поддержки предварительного просмотра HTML, но в VS Code Marketplace доступны расширения. Откройте представление «Расширения» ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) и выполните поиск «предварительный просмотр в реальном времени» или «предварительный просмотр html», чтобы увидеть список доступных расширений предварительного просмотра HTML.

    В этой статье мы рассмотрим шаги, необходимые для загрузки популярного текстового редактора Visual Studio Code, также называемого VS Code. К концу статьи вы сможете создать в Visual Studio Code папку, содержащую HTML-документ, который можно открыть в веб-браузере.

    Я. Введение

    Что такое «текстовые редакторы»?

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

    Использование текстового редактора является частью создания вашей "среды разработки", набора инструментов, которые вы используете для работы над проектами кодирования. Это позволит вам взять то, чему вы научились на Codecademy, и применить это на практике, когда вы работаете над проектами на своем компьютере. Это не только познакомит вас с инструментами, которые обычно используются профессиональными разработчиками, но также означает, что вы выросли как разработчик и готовы начать работать самостоятельно — отличная работа!

    Текстовые редакторы, предназначенные для написания кода, имеют ряд преимуществ:

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

    Возможно, вы также читали или слышали об интегрированных средах разработки или «интегрированных редакторах разработки». IDE позволяет не только редактировать, но также компилировать и отлаживать код с помощью одного приложения или интерфейса. Хотя текстовый редактор, который мы рекомендуем, не считается IDE, он имеет множество функций, подобных IDE, которые упрощают жизнь разработчика, не требуя большого количества ресурсов, которые обычно требуются для IDE. Лучшее из обоих миров!

    Выбор текстового редактора

    На выбор предлагается несколько текстовых редакторов. Например, Visual Studio Code — один из самых популярных текстовых редакторов, используемых разработчиками. (Это Visual Studio Code, а не Visual Studio, который немного отличается. Нам нужен первый, тот, в названии которого есть «Code».) Другими популярными текстовыми редакторами, о которых вы, возможно, слышали, являются Atom и Sublime Text.

    • Бесплатно
    • Открытый исходный код (это означает, что код программы можно просматривать, изменять и публиковать)
    • Функции, подобные IDE
    • Поддерживается большим сообществом пользователей и Microsoft

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

    II. Установка кода Visual Studio

    Итак, мы выбрали наш текстовый редактор, теперь нам просто нужно установить его на наш компьютер!

    Видеоинструкции

    В этом видео показано, как загрузить и установить Visual Studio Code. Письменные инструкции приведены ниже.

    Этапы установки

    Процесс установки для компьютеров под управлением macOS, Windows и Linux (в частности, Ubuntu и Debian) будет очень похожим, и использование Visual Studio Code на всех них будет одинаковым.

    Посетите веб-сайт Visual Studio Code, чтобы загрузить последнюю версию Visual Studio Code.

    Вы должны увидеть, что отображается операционная система вашего компьютера, но если она неверна, нажмите стрелку вниз и найдите параметр, соответствующий вашей операционной системе, в раскрывающемся меню, а затем щелкните значок стрелки вниз в разделе «Стабильная».< /p>

    Пользователи Windows: будет загружена последняя версия Visual Studio Code в виде файла .exe.

    Пользователи Mac: будет загружена последняя версия Visual Studio Code для Mac в виде ZIP-файла.

    Пользователи Linux: .deb и .rpm — это разные типы файлов для хранения данных. Мы предлагаем вам скачать файл .deb, чтобы автоматические обновления работали так, как предлагает документация Visual Studio Code.

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

    Пользователи Windows: откройте файл .exe, щелкнув его, и запустите программу установки. Продолжайте нажимать «Далее», а затем «Готово».

    Пользователям Mac: загруженный ZIP-файл должен находиться в папке «Загрузки». Откройте файл. Если вы видите это сообщение, выберите «Открыть».

    Пользователям Linux: загруженный файл должен находиться в папке «Загрузки».

    Найдите его в файловом менеджере, дважды щелкните и выберите «Установить» в центре программного обеспечения с графическим интерфейсом или выполните следующие команды по одной в терминале:

    Убедитесь, что ваше приложение Visual Studio Code сохранено в месте, где, как вы знаете, вы легко сможете его найти.

    Пользователи Windows: он будет автоматически помещен в меню "Пуск".

    Пользователи Mac: нажмите и перетащите значок Visual Studio Code из папки "Загрузки" в папку "Приложения".

    Пользователи Linux: он должен появиться на панели задач программ.

    Вот и все, вы успешно установили текстовый редактор и готовы приступить к написанию кода!

    III. Практика: используйте Visual Studio Code для запуска проекта вне платформы

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

    Для этого нам понадобится текстовый редактор, который мы установили выше. Давайте на минутку попробуем Visual Studio Code.

    Что такое «папки разработки»?

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

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

    Практика: создадим проект

    Ниже приведены шаги, которые необходимо выполнить, чтобы создать новую папку для всех ваших программных проектов. Вы также узнаете, как загрузить новую папку проекта в Visual Studio Code и создать свой первый HTML-проект «Hello World».

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

    1. Создайте папку разработки.

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

    Пользователи Mac: это может быть ваша учетная запись пользователя или папка «Домашняя».

    Пользователи Windows: вы можете сохранить это на диск C.

    Пользователям Linux: вы можете сохранить это в папке пользователя в папке «Домашняя».

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

    2. Откройте код Visual Studio
    3. Откройте папку разработки

    Нажмите значок «Проводник» в меню слева, затем нажмите кнопку «Открыть папку» и выберите папку разработки. Это запустит ваш файловый менеджер.

    Перейдите к папке HelloWorld и выберите Открыть. Папка откроется на боковой панели Visual Studio Code. На данный момент в папке не должно быть содержимого. Мы добавим файл на следующем шаге.

    4. Добавьте файл.

    Прежде чем вы научитесь добавлять файлы в папку проекта, важно понять назначение расширений файлов. Расширение файла — это суффикс имени файла (последние 3 или 4 символа в имени файла, которым предшествует точка) и описывает тип содержимого, содержащегося в файле. Например, расширение HTML-файла — .html, и оно указывает браузеру (и другим приложениям) интерпретировать содержимое файла как HTML-документ. После того как Visual Studio Code загрузит папку проекта, вы можете добавлять файлы. Шаги ниже описывают, как добавить файлы. Не беспокойтесь о том, чтобы сделать это на своем собственном компьютере. Мы вернемся к этому позже.

    На панели проводника Visual Studio Code щелкните имя папки разработки.Вы увидите четыре значка справа от имени папки. Щелкните значок «Новый файл». Введите имя нового файла с соответствующим расширением (например, .html, .css, .csv). Крайне важно указать правильное расширение файла, чтобы такие программы, как линтеры, знали, как интерпретировать его содержимое. Когда закончите, нажмите Enter.

    5. Начинайте программировать!

    Скопируйте и вставьте следующий стандартный HTML-код:

    Почаще сохраняйте файл с помощью функции автоматического сохранения и отслеживайте изменения с помощью системы контроля версий, если вы знаете, как ею пользоваться. (Чтобы включить автосохранение, нажмите «Файл», а затем «Автосохранение». Когда оно включено, вы увидите галочку рядом с «Автосохранение».) Это уменьшит вероятность потери несохраненной работы.

    Расширения файлов и подсветка синтаксиса

    Синтаксис – это набор правил, которые говорят нам, как создавать правильно написанный код. Visual Studio Code и другие текстовые редакторы могут интерпретировать расширения файлов и обеспечивать подсветку синтаксиса для конкретного языка. Подсветка синтаксиса — это инструмент, облегчающий чтение кода. Взгляните на свой файл index.html. Текст и теги разного цвета. Вот как Visual Studio Code выделяет синтаксис .html. С каждым новым языком, который вы изучаете, Visual Studio Code будет выделять текст таким образом, чтобы ваш код было легко читать. Это может отличаться от других текстовых редакторов, а также отличаться от того, как ваш код выделяется в Codecademy.

    Необязательно: измените цветовую схему

    Хотя Visual Studio Code поставляется с подсветкой синтаксиса по умолчанию, вы можете изменить используемые цвета. Хорошие цветовые темы сделают чтение всех этих строк кода легким для ваших глаз. (Попробуйте низкоконтрастные темные темы, такие как «Solarized Dark» или «Dracula Dark».)

    Для этого выберите «Цветовая тема» на странице приветствия при первом открытии Visual Studio Code или нажмите «Код» в строке меню в верхней части окна рабочего стола, затем нажмите «Настройки», а затем «Цветовая тема». Вы также можете искать цветовые темы для установки с помощью меню «Расширения».

    6. Просмотрите свой HTML-файл в браузере

    На этом этапе ваш файл готов для просмотра в веб-браузере. Следующие шаги следует предпринять вне Visual Studio Code:

    Перейдите к файлу index.html в папке Hello World с помощью файлового менеджера или терминала.

    Дважды щелкните или откройте index.html. Страница должна открыться в веб-браузере по умолчанию. Восхищайтесь своей работой на втором месте — вы создали свой первый проект с помощью Visual Studio Code.

    Расширьте возможности Visual Studio Code

    Если вы уже освоились с предыдущими шагами, изучите следующие функции для дальнейшей настройки среды разработки. Вам не нужно использовать эти предложения для завершения проектов в Codecademy, но они могут помочь вам повысить эффективность при написании кода, и это то, что делает Visual Studio Code таким полезным редактором!

    Отладка кода в редакторе: правильно, вы можете запускать и тестировать код из редактора!

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

    Встроенный терминал: вы можете запускать команды командной строки из своего редактора с помощью Visual Studio Code.

    IV. Подведение итогов

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

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

    CSS определяет объявления стилей и применяет их к документам HTML. Существует три разных способа связать CSS с HTML на основе трех разных типов стилей CSS:

    • Встроенный – использует атрибут стиля внутри HTML-элемента.
    • Внутренний – записывается в разделе HTML-файла.
    • Внешний – связывает документ HTML с внешним файлом CSS.

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

    Как связать файл CSS с файлом HTML — видеоурок

    Ищете визуальное руководство? Посмотрите это видео.

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

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

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

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

    Не добавляйте пробел между значением свойства. Например, вместо margin-right: 30px напишите margin-right: 30 px .

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

    Для лучшего понимания приведем разбивку атрибутов, содержащихся в теге:

    • rel — определяет отношение между связанным документом и текущим. Используйте атрибут rel только при наличии атрибута href.
    • тип — определяет содержимое связанного файла или документа между тегами. Он имеет текст или css в качестве значения по умолчанию.
    • href — указывает расположение файла CSS, который вы хотите связать с HTML. Если файлы HTML и CSS находятся в одной папке, введите только имя файла. В противном случае укажите имя папки, в которой хранится файл CSS.
    • media — описывает тип носителя, для которого оптимизированы стили CSS. В этом примере мы поместили screen в качестве значения атрибута, чтобы подразумевать его использование для экранов компьютеров. Чтобы применить правила CSS к печатным страницам, установите значение print .

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

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

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

    Причины использования CSS

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

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

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

    С другой стороны, у CSS есть несколько недостатков, например:

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

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

    Заключение

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

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

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

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

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

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