DevGang
Авторизоваться

Урок - Подключение 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. Файлы с урока

Источники:

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В этом месте могла бы быть ваша реклама

Разместить рекламу