У каждого тега можно задать индивидуальный, цвет, фон, окантовку и прочие свойства. Формат визуального оформления называется css (Cascading Style Sheets), что в переводе означает: «каскадные таблицы стилей».
В данной статье рассмотрим 3 способа как подключить css стили в html код страницы сайта для изменения внешнего вида.
В данном файле прописываются свойства для тегов. Это наиболее удобный и практичный способ установить css стили для html, особенно если на сайте более чем 1 страница. Изменив всего 1 файл можно сменить оформления всех страниц, на которых он подключен. Старайтесь свойства писать в отдельном файле.
Установить css стили в html код страницы сайта из файла можно с помощью тега <link>, который должен располагаться между тегами <head> и </head>. Общепринятое расширение файла: .css.
В примере выше, файл называется my_style.css и располагается в папке /my_css.
В данном файле написано свойство для тега <p>. Код p {color:green;} означает: сделать цвет текста внутри тега <p> зеленым. В данном примере подключен только один файл, но при необходимости вы можете подключать их неограниченное количество.
Этот способ практически идентичен подключению файла, но имеет существенный недостаток — если у вас несколько страниц, то для изменения их визуального оформления, нужно изменить каждую. Использовать данный способ имеет смысл только, если:
- У вас одностраничный сайт;
- Данное визуально оформление предназначено только для текущей страницы. Например, для визуального оформления элементов, которых нет на других страницах.
В остальных случаях добавить стили css на страницу лучше с помощью отдельного файла по способу, описанному выше. Но даже индивидуальный внешний вид во многих случаях удобнее задавать в отдельном файле, поэтому этот способ можно вообще не использовать.
Добавить стили сcs на html страницу сайта, можно так же как и у файла, а именно между <head> и </head>. Только вместо ссылки на файл прописываются теги <style> и </style>, внутри, которых пишутся сами стили.
Данный способ широко применяется, когда внутри одной страницы есть элементы, не сильно отличающиеся между собой, например, только цветом(отступом, размером и т. п.). В этом случае быстрее и удобнее подключить один общий css стиль в html с помощью отдельного файла, а небольшие изменения добавлять у конкретных элементов. Атрибут style обладает наивысшим приоритетом, поэтому тег получит все свойства, указанные в style, даже если они ранее были указаны другими способом.
По сути, логика следующая: общие и наиболее часто используемые стили, мы прописываем в файле(1 способ), а детальные корректировки в самих элементах. Например, если у вас на странице 5 заголовков, отличающихся цветом, то лучше прописать общие свойства в файле, определяющие размеры и отступы этих заголовков, а цвет в самих элементах, по данному способу.
Чтобы задать css стили на html странице достаточно написать атрибут style со свойствами внутри начального тега необходимого элемента.
| Способ подключения | Приоритет |
| 1. Подключить css стили в html код из отдельного файла .css | низкий |
| 2. Вначале страницы между тегами <style> и </style> | низкий |
| 3. В коде страницы через атрибут style="" у тега | высокий |
3 способ обладает наивысшим приоритетом, поэтому тег получит свойства, указанные в атрибуте style="", даже если они ранее были указаны с помощью другого метода.
