Дизайн HTML-страниц. Язык CSS
@honey_and_moneyCSS используется для декора нашего сайта. Улучшает визуализацию, как следствие пользователю становится приятно воспринимать сайт.
В переводе с английского CSS - Cascading Style Sheets - каскадные таблицы стилей. То есть мы будем заниматься созданием таблицы стилей.
Данный язык так же как и HTML не является языком программирования. Это просто средство, которое применяется для описания дизайна страницы, написанной на HTML.
Писать на CSS мы будем в отдельном файле. Допустим вы написали простенькую HTML-страницу с формой авторизации (из прошлой статьи) и положили этот файл в какую-либо папку. В той же папке предлагаю вам создать файл с названием style.css (.css - это расширение. Как менять расширение файла через Блокнот я писал в первой части статей про HTML)
Создали файл, открываем его в обычном редакторе (Тот же Блокнот или любые другие удобные вам)
Разберем синтаксис CSS (синтаксис - это правила написания кода):
Я написал такой простенький стиль. Давайте разберем всё подробно.
form - название тега, который мы будем декорировать. То есть на нашей html-странице есть форма. Все данные формы заключаются между тегами <form> и </form> - следовательно, если мы применяем дизайн к тэгу <form>, то он будет применен ко всей форме.
Далее через пробел после названия тэга идет открывающая фигурная скобка - она показывает, с какого места начинается описание параметров дизайна.
Потом идут параметры - в нашем случае это background-color: red;
Ну и в конце закрывающая фигурная скобка на отдельной строке.
Параметров дизайна может быть бесконечно много. А вот правила с фигурными скобками надо строго соблюдать.
Итак, то что пишется перед открывающей фигурной скобкой (в нашем случае это form) - называется селектором по идентификатору.
Указанные нами параметры в фигурных скобках будут применены ко всем элементам html-страницы, которые заключены в данном тэге (идентификаторе)
Вернемся к нашему примеру: Селектором по идентификатору у нас является тэг form - следовательно ко всем формам на нашей html странице будет применен указанный нами дизайн.
Напишем еще какой-нибудь блок для другого элемента:
Теперь мы задали стиль для всех элементов с тэгом <button>
Так можно делать до бесконечности. Можно брать любой тэг из нашей html-страницы и тут присваивать ему определенные параметры.
Перейдем к самому важному:
Если вы сейчас сохраните ваш css-файл, и откроете вашу html-страницу в браузере, то ничего не изменится. Почему так? Все просто - мы не прикрепили наш созданный файл стилей к html-странице.
Для этого надо написать такую структуру между тэгами <head> и </head>:
<link rel="stylesheet" type="text/css" href="/style.css">, где
href - путь к вашему файлу стилей (в нашем случае это просто имя файла, т.к. файл стилей лежит в той же папке что и html страница)
rel - от английского relationship - то, каким указанный нами файл является по отношению к нашей html странице. В этом атрибуте мы точно написали: stylesheet - таблица стилей. Наш прикрепленный файл является таблицей стилей для html страницы.
type="text/css" - в более старых версиях html это был обязательный атрибут. Сейчас он устарел, но используется как эталон для понимания кода другими разработчиками.
Итак, мы подключили наш первый файл стилей. Можно обновить страницу и увидеть примененные стили к нашей форме (осторожно, могут вытечь глаза!):
Изменился цвет фона формы и размер шрифта на кнопке.
(Как раз мы и меняли параметры тэгов form и button)
Для начала изучения CSS думаю достаточно. Уверяю вас - язык легкий и учится быстро. Требуется просто побольше практиковаться и всё получится.
@honey_and_money - Далеко не все используют возможность реализовать себя, хотя она есть у каждого