Подключение стилей CSS к странице HTML разными способами

Подключение стилей CSS к HTML документу. Как подключить CSS файл

Каскадные таблицы стилей CSS (Cascading Style Sheets) нужны для оформления страниц вашего сайта в соответствии с разработанным стилем, дизайном.

Таблицы стилей CSS являются неотъемлемой частью страниц современного сайта. Рассмотрим как подключить CSS к HTML странице сайта.

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

Подключение CSS через внешний файл стилей тегом link

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

Чтобы подключить CSS файл, в head области страницы используйте следующую конструкцию:

В атрибуте href необходимо указать URL адрес файла, содержащего набор стилей CSS. Атрибуты rel=»stylesheet» и type=»text/css» указывают, что указанный файл является таблицей стиля в формате CSS.

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

Добавление CSS с помощью тега style

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

CSS стили для конкретного тега атрибутом style

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

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

Inline-стили также обычно используются, когда вы редактируете контент через программы — визуальные редакторы WYSIWYG .

Стили CSS через JavaScript

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

В JavaScript, при использовании библиотеки jQuery, есть много различных функций для управления стилями HTML элементов. Например, функция .css() — задает CSS стиль для элемента, .hide() — добавление элементу CSS свойства display: none; (скрытие элемента) и др.

При использовании этих функций CSS свойства добавляются в style атрибут тега.

Пример подключения CSS к HTML странице описанными выше способами

Ниже приведен код простой HTML страницы с подключением CSS стилей различными способами.

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

 
 
 
 
 
 
 
  
 
Таблица моделей некоторых смартфонов Samsung.

 
 
 
 
.model_table margin: 10px; 
width: 100%; 
> 
.model_table tr:nth-child(even) background-color: #efefef; 
> 
.model_table tr:hover background-color: #cfcfcf; 
> 
 
 
 
Скрыть модели февраля
 
 
 
Модели февраля 
 
Samsung Galaxy A10 
2019, февраль 
 
Samsung Galaxy A30 
2019, февраль 
 
Samsung Galaxy A50 
2019, февраль 
  
 
Модели марта 
 
Samsung Galaxy A20 
2019, март 
 
Samsung Galaxy A40 
2019, март 
 
 
 
*В таблице указаны предварительные данные.

 
 
 
document.getElementById('model_table_hide_btn').addEventListener("click", function () document.getElementById('model_table_winter').style.display = 'none'; 
>); 

Результат приведенного выше кода:

Таблица моделей некоторых смартфонов Samsung.

Скрыть модели февраля

Модели февраля
Samsung Galaxy A10	2019, февраль
Samsung Galaxy A30	2019, февраль
Samsung Galaxy A50	2019, февраль

Модели марта
Samsung Galaxy A20	2019, март
Samsung Galaxy A40	2019, март

*В таблице указаны предварительные данные.

Источник

Link to CSS and JavaScript in an HTML File

The purpose of this tutorial is to teach you how to link to CSS and JavaScript files within an HTML file. It is possible to write CSS and JavaScript directly inside an HTML document, but it is generally best to keep these three languages in their own separate files.

Contents

1. Directory and File Structure

It is a good idea to keep your HTML, CSS, and JavaScript files in separate directories. Create a directory for your project called css-and-js . Inside this directory, create three additional directories. Call them html , css , and javascript .

Inside your html directory, create a file called css-and-js.html . Inside your css directory, create a file called styles.css . And inside your javascript directory, create a file called script.js .

2. HTML

In order to link to your CSS and JavaScript files, you will need an HTML document within which to work. Open css-and-js.html and enter the following HTML:

  lang='en'>  charset='UTF-8'/> Linking to CSS and JavaScript   

Be sure to save your work any time you add code to your files. In the next two sections, we will go over what you need to add to your HTML document in order to link to your CSS and JavaScript.

3. CSS

First, you will need to add something in the body of your HTML to apply styling to. On the next line after the opening tag, indent and add the following:

 If this text is red, then you successfully linked your CSS file! 

As it stands, this text will appear in the color defined as the root color in the browser’s default stylesheet – usually black. In order to change the color of the text, open your styles.css file and add:

The final step in this section is to link to the CSS file inside your HTML document. Enter the following in the section on the line after the closing tag:

 rel='stylesheet' href='../css/styles.css'> 

The element must be placed in the section of the document. Notice that the element is an empty element, so it does not need a closing tag.

The rel attribute defines the relationship between the resource and the HTML document. The href attribute points to your CSS file.

Since the file is located in another directory, you must specify the path by going up one directory using two dots ( .. ), followed by a slash ( / ), the directory your CSS file is in ( css ), another slash, and then your CSS file name ( styles.css ): href=‘../css/styles.css’ .

This is what your HTML document should look like so far:

  lang='en'>  charset='UTF-8'/> Linking to CSS and JavaScript  rel='stylesheet' href='../css/styles.css'>   If this text is red, then you successfully linked your CSS file!   

4. JavaScript

Next, you will need to add some code to your JavaScript file. Open script.js and add:

alert('You successfully linked your JavaScript file!'); 

Save your work and navigate back to your HTML document. The final step is to link to the JavaScript file inside your HTML document. Enter the following in the section on the line after the element:

It is considered the best practice to place the element in the section just before the closing tag.

The src attribute points to your JavaScript file.

Since the JavaScript file is located in another directory, you must specify the path in the src attribute: src=’../javascript/script.js’ .

That’s the last bit of code you will need to enter. This is what your HTML document should look like:

  lang='en'>  charset='UTF-8'/> Linking to CSS and JavaScript  rel='stylesheet' href='../css/styles.css'>   If this text is red, then you successfully linked your CSS file!  src='../javascript/script.js'>   

Be sure to save your work in each of your three files. Now it’s time to see if the links work. Open your css-and-js.html file in the browser of your choice. When you open the file in your browser, you should first encounter an alert box with the message you wrote in your JavaScript file. After clicking OK, the text you entered in the of your HTML should appear red.

If the alert box does not appear or if the text is not red, go back through the steps in this tutorial to ensure everything is entered exactly as shown here.

Congratulations! You’ve now linked to CSS and JavaScript files within an HTML document.

Источник

Подключение стилей и скриптов к сайту. Внешняя (CDN) и внутренняя (местная) прописка стиля

Рассмотрим варианты подключения стилей и скриптов к сайту в соответствии с современными 2020 требованиям оформления HTML5 кода.

Подключить css стили можно несколькими способами:
1. Через свой внешний файл: путь/css/style.css
2. Используя чужой внешний файл (CDN) со стороннего сайта: https://чужой-сайт.com/. /style.css
3. Местная прописка на конкретной странице при использовании style=». » напрямую, вместо

Подключение js скриптов выполняется аналогично, несколькими способами:
1. Можно использовать свой внешний файл: путь/js/script.js
2. Файл с чужого сайта: https://чужой-сайт.com/../script.js
3. Подключение на конкретной странице:

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

Пример подключение стиля из внешних файлов:

Чужой внешний файл:

— не рекомендую (может ругаться подключение по HTTPS протоколу). В зависимости от настройки браузеров, у пользователя может появляться сообщение о нарушении безопасности соединения. Особенно это относится к CDN подключению сторонних js файлов. Надёжнее скачать сторонний файл и подключить его внутренними средствами.

Подключение имени стиля в страницу из внешнего файла:

текст

name-out — класс прописанный в файле css.

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

Быстрое (ленивое, тестовое) подключение, когда лень заходить во внешний файл

текст

name-local — имя класса прописанного между тегами .

Подключение .js скриптов перед заключительными тегами

Местное подключение на странице или активация команд:

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

Скачать примеры страниц сайта с подробными комментариями в коде. В архиве три папки с файлами разных вариантов подключения CSS стилей: Connectivity_options_styles.rar [6,3 Kb] (cкачиваний: 24)

Галерея фото и видео, обратная связь

Автор: Саков | Просмотров: 3 174 | 2020-05-23

Источник