CSS (что в переводе с английского означает - Каскадные Таблицы Стилей (Cascading Style Sheets)) - из названия понятно, что его главное предназначение - оформление чего-либо каким-то каскадным образом.
С помощью CSS можно изменить, практически, любой элемент сайта до неузнаваемости (кроме тега <input type="file"> и элементов в <canvas> и WebGL)
CSS к HTML странице можно подключить тремя способами:
(способы расположены по возрастанию обоснованности использования)
1 способ:
Записать CSS-оформление напрямую в теге. Например:
При таком способе записи любое изменение оформления сайта повлечёт за собой ощутимые трудозатраты по перезаписи оформления в каждом теге.
Данный вариант следует применять только в крайнем случае.
2 способ:
Записать CSS-оформление в отдельном теге, но в одном файле с HTML. Пример:
Такой вариант записи CSS подходит только для очень маленьких проектов и на ранних стадиях.
Такой стиль записи CSS плохо вписывается в его основное назначение - разделить логическую структуру документа.
У этого способа есть преимущество - загрузка CSS будет происходить не отдельным запросом, а придёт вместе с ответом с сервера (не придётся делать дополнительные запросы). Это положительно сказавается на производительности, но плохо для читаемости исходного кода.
И, наконец, 3 способ записи:
Создание двух файлов(файл с логической структурой HTML документа, и файл с визуальным оформлением). Делается это следующим образом:
Файл style.css:
Файл index.html
Такая форма подключения CSS к HTML документу является наиболее предпочтительной, т.к. логическая и визуальная часть сайта разделена, что позволяет улучшить читаемость документов. Всё это положительно сказывается на понятности исходного кода.
Спасибо за внимание.
1 | <div style="width:100px;height:100px;background:black;"> |
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <style> div.my-button{ background:#fc0; } </style> </head> <body> <div class=my-button> Text </div> </body></html> |
1 2 3 4 5 | div.class-name{ width:100px; height:100px; background:red;} |
1 2 3 4 5 6 7 8 | <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div class="class-name"></div> </body></html> |