{"id":3826,"url":"\/distributions\/3826\/click?bit=1&hash=aa8ae934c4b405b2d10a14343e22e97821fd478e8a4a31defae61d161d040867","title":"\u041e\u0444\u0444\u0435\u0440 \u0434\u043b\u044f \u0434\u0436\u0430\u0432\u0438\u0441\u0442\u0430-\u043c\u0438\u0434\u0434\u043b\u0430 \u0437\u0430 \u043e\u0434\u0438\u043d \u0434\u0435\u043d\u044c","buttonText":"\u0413\u0434\u0435 \u0442\u0430\u043a\u043e\u0435?","imageUuid":"2b70606f-740c-5d85-8a71-8a33c5f66557","isPaidAndBannersEnabled":false}
Vladimir Shaitan

Урок - Подключение CSS

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

Способ #1 - inline styles

Одним из общих атрибутов для каждого тега, является атрибут style, внутри которого мы и можем писать наш CSS код.

<h1 style="color: red">Some Title - <a href="#">link</a></h1>

Способ #2 - тег <style>

Внутри тега <style> мы можем писать стили, идентифицируя нужные нам теги по их атрибутам, именам и тд. (селектору тега). Тег <style> должен быть расположен внутри тега <head>.

<head> <style> div { max-width: 1200px; margin: 0 auto; background-color: antiquewhite; padding: 10px 20px; } </style> </head>

Способ #3 - отдельный файл

Самое лучшее что можно придумать, это подключение отдельного CSS файла к нашему проекту. Делается это через тег <link>, который также должен быть вложен внутрь тега <head>.

Атрибуты:

rel - должен иметь значение stylesheet

href - ссылку или путь к файлу .css

Тег <link> имеет больше атрибутов, на данном этапе их рассматривать не будем.

<link rel="stylesheet" href=".././css/style.css">

Способ #4 - отдельный файл через тег <style>

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

<style> @import '.././css/style2.css'; </style>

P.S. Больше уроков у меня на канале

P.P.S. Файлы с урока

0
Комментарии
Читать все 0 комментариев
null