Как открыть файл css в браузере

Обновлено: 21.11.2024

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

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

Просмотр исходного кода веб-страницы HTML, CSS, JavaScript в Google Chrome

В этой статье мы рассмотрим следующие темы:

Различные компоненты веб-страницы
Просмотр исходного кода HTML, встроенного и внутреннего CSS
Просмотр внешних таблиц стилей на веб-странице
Ярлык Chrome для просмотра исходного кода страницы
Использование инструментов разработчика
Получение CSS для мобильных устройств
Нахождение красивого печатного представления минимизированных CSS и JavaScript
Редактирование веб-страницы в Интернете

Давайте подробно обсудим каждую тему в следующих разделах.

1. Компоненты веб-страницы

Веб-страница в целом состоит из следующих частей:

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

CSS можно использовать на веб-странице тремя различными способами:

Встроенные стили — влияют на внешний вид отдельного элемента.
Внутренние стили — влияют на все элементы на странице.
Внешние таблицы стилей, влияющие на все элементы веб-сайта.

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

2. Просмотр HTML, встроенных и внутренних стилей CSS

Чтобы просмотреть содержимое HTML, встроенные и внутренние стили веб-страницы, откройте веб-страницу в браузере Chrome. Щелкните правой кнопкой мыши в любом месте страницы и выберите параметр Просмотр исходного кода страницы, как показано на рисунке ниже:

Примечание. Если щелкнуть правой кнопкой мыши внутри iframe, браузеры отобразят параметр «Просмотреть исходный код кадра» вместо «Просмотреть исходный код страницы».

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

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

3. Просмотр внешних таблиц стилей

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

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

Хотя ссылки отображаются как относительные в исходном коде, щелчок по ним откроет исходную таблицу стилей с абсолютным URL-адресом (полный URL-адрес с доменным именем).

4. Ярлык Chrome для просмотра исходного кода страницы

Вы можете просмотреть исходный код любой страницы непосредственно из адресной строки браузера Chrome, добавив префикс "view-source:" к URL-адресу любой страницы. Таким образом, вы даже можете просмотреть исходный код страниц, защищенных щелчком правой кнопки мыши.

5. Просмотр исходного кода с помощью инструментов разработчика

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

Как и другие браузеры, Google Chrome предлагает инструменты разработчика для доступа к коду CSS, связанному с любым конкретным элементом на веб-странице. Щелкните правой кнопкой мыши любой элемент на веб-странице и выберите параметр «Проверить элемент» или «Проверить», чтобы открыть консоль разработчика внизу веб-страницы, как показано на рисунке ниже. . Вы также можете открыть консоль разработчика из пути меню «Настройки > Дополнительные инструменты > Инструменты разработчика».

Щелкните элемент правой кнопкой мыши и выберите параметр «Проверить».
Просмотр HTML и встроенных стилей на вкладке Элементы.
Просмотрите внешние стили в разделе Стили.
Нажмите значок "мобильный", чтобы просмотреть сайт на мобильных устройствах и проверить соответствующий исходный код HTML/CSS для мобильного контента.

Консоль разделена на две части, в каждой из которых доступны различные вкладки. В левой части отображается содержимое HTML страницы на вкладке «Элементы», а в правой части отображается CSS на вкладке «Стили». При нажатии на любую ссылку CSS откроется таблица стилей в левой части на вкладке "Источники".

Чтобы просмотреть код CSS любого конкретного элемента, выберите «Стрелку» в верхнем левом углу (на платформе Windows найдите линзу внизу) консоли и щелкните любой элемент, который будет выделен при наведении курсора мыши. . Это автоматически отобразит код CSS, связанный с выбранным элементом.

6. Просмотр мобильного CSS

Поскольку стили элементов на настольных и мобильных устройствах могут различаться, в консоли разработчика есть возможность переключать отображение на большинство популярных устройств, таких как iPhone, iPad, Samsung Galaxy и Google Nexus. После выбора необходимого устройства из раскрывающегося списка отображаются соответствующие коды CSS, доступные на этой странице для этого устройства.

Нажмите кнопку переключения устройств на панели инструментов.
Выберите устройство из раскрывающегося списка или нажмите кнопку «Изменить», чтобы добавить собственное устройство, недоступное в списке по умолчанию. Вы можете проверить размер выбранного устройства.
Увеличьте или уменьшите процентное значение для настройки отображения в браузере.
Нажмите кнопку Повернуть, чтобы переключиться между книжной и альбомной ориентацией.
Проверьте предварительный просмотр вашего выбора. Щелкните правой кнопкой мыши элемент, который вы хотите просмотреть в мобильном источнике, и выберите параметр «Проверить».
Измените элемент, чтобы просмотреть исходный код. При наведении курсора на HTML-код соответствующий элемент будет выделен на панели предварительного просмотра браузера.
Найти исходный код CSS выбранного элемента. Мобильный CSS должен начинаться с правила «@media». Если правила «@media» нет, то на мобильных устройствах также будет применяться общий CSS.

7. Красивое представление для печати уменьшенных файлов CSS и JavaScript

В настоящее время на веб-сайтах принято использовать уменьшенные версии файлов CSS и JavaScript. Это удалит ненужные комментарии, пробелы, разрывы строк и сделает файл .min.css или .min.js. Также механизм кэширования, используемый на веб-сайте, выполняет аналогичное удаление пространства. Хотя все это делается для повышения скорости страницы, это делает CSS и скрипты нечитаемыми для тех, кто ищет исходный код страницы. Chrome решает эту проблему, предлагая кнопку «Красивая печать». При нажатии на кнопку "Красивая печать" уменьшенные файлы будут восстановлены до удобочитаемой версии, чтобы вы могли легко просмотреть ее.

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

Вы увидите красивый печатный вид сценария, как показано ниже:

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

8. Изменение интерактивного содержания веб-страницы

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

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

Щелкните правой кнопкой мыши элемент HTML и отредактируйте напрямую, используя параметр «Редактировать как HTML», чтобы добавить или удалить содержимое в Интернете.

Заключительные слова

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

Я понимаю концепцию сохранения текстового файла в формате html, но как я могу просмотреть свой html, отрендеренный с помощью css? Как сохранить файл ccs? Как связать это с моим html? и как просмотреть оба в браузере?

Ответ 4faf9415d66f8f000300a908

Просто откройте html-файл в любом браузере (двойной щелчок). Некоторые текстовые редакторы также позволяют запускать код в браузере.

И чтобы сохранить файл как файл css, вы сохраняете его с расширением .css .

Ответ 4faff0c4e34b3000030113e4

Привет, спасибо за помощь, но я попробовал это, и это все еще не работает. Я не получаю никаких копий, мои изображения не отображаются и полны тире ///. Я даже пытался включить (type=”text/css”), как они использовали в уроке. Я думаю, проблема в том, что когда я открываю html-файл в браузере, ccs просто остается в папке. Я даже не уверен, что что-то его ищет! Это кажется странной системой, позволяющей запускать файлы одного типа с файлами совершенно другого типа! Я знаю, что код хорош, потому что он полностью скопирован из моего последнего урока. Есть другие идеи?

Ответ 4faffc7d9665500003012b76

Покажите мне свой соответствующий HTML-код и некоторый код из вашего файла .css (вы уверены, что он называется something.css и компьютер распознает его как «документ с каскадной таблицей стилей»?).

И это не "ccs", а "css", что означает каскадные таблицы стилей.

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

<р>). В этом примере браузеру будет предложено искать CSS-файл styleForSite2.css в папке site2 (которая является подпапкой папки public).

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

Ответ 4fb014aacbb69c00030027cd

Я признаю, что сначала я по ошибке набрал .ccs, но вскоре понял свою ошибку и увидел, что файл изменился на .css. Спасибо за советы, буду пробовать дальше.

Ответ 4fb01f1172d6850003015ea1

Добро пожаловать и удачи!

Ответ 4fb021f96154580003015ce5

Обновление: я только что скачал tumult hyperedit и протестировал там свой код, и все выглядит нормально! Так что проблема должна заключаться в том, что браузер интерпретирует мой код! Может быть, это потому, что я использую сафари, и ему нужен другой код ссылки? Завтра попробую Internet Explorer.

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

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

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

Полученная HTML-страница с цветами и макетом, все сделано с помощью CSS.

Обратите внимание, я не утверждаю, что это красиво ☺

Разделы, которые выглядят так, являются необязательными. Они содержат дополнительные пояснения к кодам HTML и CSS в примере. «Внимание!» Знак в начале указывает на то, что это более сложный материал, чем остальной текст.

Шаг 1: написание HTML

В этом руководстве я предлагаю вам использовать только самые простые инструменты. Например, Блокнот (в Windows), TextEdit (в Mac) или KEdit (в KDE) вполне подойдут. Как только вы поймете принципы, вы, возможно, захотите переключиться на более продвинутые инструменты или даже на коммерческие программы, такие как Style Master, Dreamweaver или GoLive. Но для вашей самой первой таблицы стилей CSS лучше не отвлекаться на слишком много расширенных функций.

Не используйте текстовый процессор, например Microsoft Word или OpenOffice. Обычно они создают файлы, которые веб-браузер не может прочитать. Для HTML и CSS нам нужны простые текстовые файлы.

Шаг 1 – откройте текстовый редактор (Блокнот, TextEdit, KEdit или любой другой на ваш вкус), начните с пустого окна и введите следующее:

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

(Если вы используете TextEdit на Mac, не забудьте сообщить TextEdit, что текст действительно является обычным текстом, перейдя в меню «Формат» и выбрав «Сделать обычным текстом».)

Первая строка вышеприведенного файла HTML сообщает браузеру, какой это тип HTML (DOCTYPE означает ТИП ДОКУМЕНТА). В данном случае это HTML версии 4.01.

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

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

Редактор KEdit, показывающий исходный код HTML.

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

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

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

Теперь выберите «Сохранить как…» в меню «Файл», перейдите в каталог/папку, куда вы хотите его поместить (подойдет рабочий стол), и сохраните файл как «mypage.html». Пока не закрывайте редактор, он нам еще понадобится.

(Если вы используете TextEdit в Mac OS X до версии 10.4, вы увидите параметр Не добавлять расширение .txt в диалоговом окне Сохранить как. Выберите этот параметр, поскольку имя «mypage.html» уже включает расширение. Более новые версии TextEdit автоматически заметят расширение .html.)

Затем откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл с помощью файлового менеджера (Windows Explorer, Finder или Konqueror) и щелкните или дважды щелкните файл «mypage.html». Он должен открыться в веб-браузере по умолчанию. (Если это не так, откройте браузер и перетащите в него файл.)

Как видите, страница выглядит довольно скучно…

Шаг 2: добавление цветов

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

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

Нам нужно добавить [и т.д.]

В первой строке говорится, что это таблица стилей и что она написана на CSS («текст/css»). Вторая строка говорит о том, что мы добавляем стиль к элементу «тело». Третья строка задает пурпурный цвет текста, а следующая строка задает фон в зеленовато-желтом цвете.

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

но так как оба правила влияют на тело, мы написали «тело» только один раз и объединили свойства и значения.Дополнительные сведения о селекторах см. в главе 2 книги Lie & Bos.

Фон элемента body также будет фоном всего документа. Мы не дали другим элементам (p, li, address…) какой-либо явный фон, поэтому по умолчанию они не будут иметь никакого фона (или: будут прозрачными). Свойство 'color' устанавливает цвет текста для элемента body, но все остальные элементы внутри body наследуют этот цвет, если только он явно не переопределен. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте «Сохранить» в меню «Файл») и вернитесь в окно браузера. Если вы нажмете кнопку «Перезагрузить», дисплей должен измениться со «скучной» страницы на цветную (но все же довольно скучную) страницу. Помимо списка ссылок вверху, текст теперь должен быть фиолетовым на зеленовато-желтом фоне.

Как один браузер показывает страницу после добавления некоторых цветов.

Шаг 3: добавление шрифтов

Еще одна вещь, которую легко сделать, — это выделить шрифты для различных элементов страницы. Итак, давайте установим текст шрифтом «Georgia», за исключением заголовка h1, которому мы дадим «Helvetica».

В Интернете вы никогда не можете быть уверены, какие шрифты установлены на компьютерах ваших читателей, поэтому мы также добавляем несколько альтернативных вариантов: если Georgia недоступен, подойдет Times New Roman или Times, а если ничего не помогает, браузер может использовать любой другой шрифт с засечками. Если Helvetica отсутствует, Geneva, Arial и SunSans-Regular очень похожи по форме, и если ни один из них не работает, браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7–8 и 11–13):

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

Теперь основной текст отличается от заголовка шрифтом.

Шаг 4. Добавление панели навигации

Список в верхней части HTML-страницы должен стать меню навигации. На многих веб-сайтах есть своего рода меню вверху или сбоку страницы, и на этой странице тоже должно быть такое меню. Мы поместим его слева, потому что там немного интереснее, чем вверху…

Поэтому нам нужно переместить список влево, а остальную часть текста немного вправо, чтобы освободить для него место. Для этого мы используем следующие свойства CSS: padding-left (для перемещения основного текста) и position, left и top (для перемещения меню).

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

В окне редактора добавьте в файл HTML следующие строки (строки 7 и 12–16):

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

Основной текст перемещен вправо, а список ссылок теперь находится слева от него, а не над ним.

Позиция: absolute указывает, что элемент ul позиционируется независимо от любого текста, который идет до или после него в документе, а 'left' и 'top' указывают, какова эта позиция. В данном случае 2em сверху и 1em с левой стороны окна.

'2em' означает 2-кратный размер текущего шрифта. Например, если меню отображается шрифтом размером 12 пунктов, то «2em» — это 24 пункта. 'em' — очень полезная единица в CSS, поскольку она может автоматически адаптироваться к шрифту, который использует читатель. В большинстве браузеров есть меню для увеличения или уменьшения размера шрифта: вы можете попробовать и увидеть, что размер меню увеличивается по мере увеличения шрифта, чего не было бы, если бы мы вместо этого использовали размер в пикселях.

Шаг 5. Оформление ссылок

Меню навигации по-прежнему выглядит как список, а не как меню. Давайте добавим к нему немного стиля. Мы удалим маркер списка и переместим элементы влево, туда, где был маркер. Мы также дадим каждому элементу свой собственный белый фон и черный квадрат. (Почему? Никаких особых причин, просто потому, что мы можем.)

Мы также не сказали, какого цвета должны быть ссылки, поэтому добавим и это: синий для ссылок, которые пользователь еще не видел, и фиолетовый для уже посещенных ссылок (строки 13-15 и 23- 33) :

Шаг 6: добавление горизонтальной линии

Последнее дополнение к таблице стилей — горизонтальная линейка, отделяющая текст от подписи внизу. Мы будем использовать 'border-top', чтобы добавить пунктирную линию над элементом (строки 34-37):

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

Шаг 7: размещение таблицы стилей в отдельном файле

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

Чтобы создать файл таблицы стилей, нам нужно создать еще один пустой текстовый файл. Вы можете выбрать «Создать» в меню «Файл» в редакторе, чтобы создать пустое окно. (Если вы используете TextEdit, не забудьте снова сделать его обычным текстом, используя меню «Формат».)

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

Выберите «Сохранить как…» в меню «Файл», убедитесь, что вы находитесь в том же каталоге/папке, что и файл mypage.html, и сохраните таблицу стилей как «mystyle.css».

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

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

Конечный результат

Следующим шагом будет размещение обоих файлов, mypage.html и mystyle.css, на вашем веб-сайте. (Ну, вы можете сначала немного изменить их…) Но как это сделать, зависит от вашего интернет-провайдера.

Дополнительная литература

Для ознакомления с CSS см. главу 2 книги Lie & Bos или введение Дейва Рэггетта в CSS .

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

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

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