3 способа как задать (добавить) css на html страницу сайта

У каждого тега можно задать индивидуальный, цвет, фон, окантовку и прочие свойства. Формат визуального оформления называется css (Cascading Style Sheets), что в переводе означает: «каскадные таблицы стилей».

В данной статье рассмотрим 3 способа как подключить css стили в html код страницы сайта для изменения внешнего вида.

1 Способ. Подключить отдельный файл css в html коде страницы

В данном файле прописываются свойства для тегов. Это наиболее удобный и практичный способ установить css стили для html, особенно если на сайте более чем 1 страница. Изменив всего 1 файл можно сменить оформления всех страниц, на которых он подключен. Старайтесь свойства писать в отдельном файле.

Как установить файл стилей css на html

Установить css стили в html код страницы сайта из файла можно с помощью тега <link>, который должен располагаться между тегами <head> и </head>. Общепринятое расширение файла: .css.

Пример подключения файла(код страницы .html)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="my_css/my_style.css">
</head>
<body>
<p>Текстовое содержание</p>
</body>
</html>

Пример кода самого файла стилей(код страницы .css)

p {color:green;}

В примере выше, файл называется my_style.css и располагается в папке /my_css.

В данном файле написано свойство для тега <p>. Код p {color:green;} означает: сделать цвет текста внутри тега <p> зеленым. В данном примере подключен только один файл, но при необходимости вы можете подключать их неограниченное количество.

2 Способ. Написать вначале самой страницы

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

• У вас одностраничный сайт;
• Данное визуально оформление предназначено только для текущей страницы. Например, для визуального оформления элементов, которых нет на других страницах.

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

Как добавить css стили в html код страницы сайта

Добавить стили сcs на html страницу сайта, можно так же как и у файла, а именно между <head> и </head>. Только вместо ссылки на файл прописываются теги <style> и </style>, внутри, которых пишутся сами стили.

Пример добавления свойств тегов вначале(код страницы .html)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<style>
p {color:green;}
</style>
</head>
<body>
<p>Текстовое содержание</p>
</body>
</html>

3 Способ. Написать стиль в атрибуте style для каждого тега отдельно

Данный способ широко применяется, когда внутри одной страницы есть элементы, не сильно отличающиеся между собой, например, только цветом(отступом, размером и т. п.). В этом случае быстрее и удобнее подключить один общий css стиль в html с помощью отдельного файла, а небольшие изменения добавлять у конкретных элементов. Атрибут style обладает наивысшим приоритетом, поэтому тег получит все свойства, указанные в style, даже если они ранее были указаны другими способом.

По сути, логика следующая: общие и наиболее часто используемые стили, мы прописываем в файле(1 способ), а детальные корректировки в самих элементах. Например, если у вас на странице 5 заголовков, отличающихся цветом, то лучше прописать общие свойства в файле, определяющие размеры и отступы этих заголовков, а цвет в самих элементах, по данному способу.

Как задать стили css на html странице через атрибут style

Чтобы задать css стили на html странице достаточно написать атрибут style со свойствами внутри начального тега необходимого элемента.

Пример задания внешнего вида в атрибуте style(код страницы .html)

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
</head>
<body>
<p style="color:green;">Текстовое содержание</p>
</body>
</html>

Таблица приоритетов

3 способ обладает наивысшим приоритетом, поэтому тег получит свойства, указанные в атрибуте style=»», даже если они ранее были указаны с помощью другого метода.