Это первая часть учебника по CSS, будет рассказываться про основы этого языка, например, узнаете о синтаксисе и зачем вообще нужен этот язык.
Также если вы не знаете или плохо знаете HTML, то зайдите посмотрите наш учебник по нему, по этой ссылке.
Зачем нужен CSS:
Для начала разберу зачем нужен язык CSS, а нужен он для того, что бы сайт выглядел максимально понятно и красиво.
Например, если HTML это кузов, то CSS это весь его дизайн, всё что вы видите, как то так.
Также если хотите узнать что такое вёрстка вообще, то прочитайте:
Что такое вёрстка и зачем она нужна.
Что нужно для работы с CSS:
Для работы с CSS, нужно только две программы, первое, текстовой редактор, хотя подойдёт даже обычный блокнот, но в нём не удобно работать, поэтому стоит скачать тестовой редактор.
Если вы не знаете какой тестовой редактор выбрать, то посмотрите статью:
Топ 5 лучших текстовых редакторов для программистов.
А второе что нужно, это браузер, даже несколько, это что бы проверять как отображается сайт в разных браузерах, например, Google Chrome и FireFox будет достаточно, но также можете установить себе старую версию какого-нибудь браузера, что бы точно быть уверенным, в том, что ваш сайт везде хорошо отображается.
Базовый синтаксис CSS:
Теперь перейдём к синтаксису, он очень простой и думаю у вас с ним не должно возникнуть проблем, вот из чего он состоит.
1 2 3 4 | селектор { свойство: значение; ... } |
Как видите, действительно не чего сложного, селектор, это HTML элемент которому нужно применить стили, свойство это что нужно изменить, например цвет текста или размер, а со значением думаю и так всё понятно, это значение свойства.
Также, свойств для одного селектора может быть хоть сколько, неограниченное количество.
Пример:
Теперь перейдём к не большому примеру, в нём я поменяю размер шрифта и цвет текста для заголовка h1, но сначала нужно создать и подключить CSS файл в HTML.
Если со созданием CSS файла всё просто, вы просто создаёте файл с расширением .css, например style.css, то с подключением есть пару нюансов.
1 | <link rel="stylesheet" href="style.css"> |
Это делается через тег <link>, внутри которого есть два атрибута, первый, rel, который определяет отношение между документом который подключается и HTML документом, к которому подключают, в нашем случаете это отношение стили, атрибут href, хранит путь до файла.
Ещё нужно сказать, что подключать CSS файл нужно внутри тега <head>, или в самом начале внутри тега <body>, что бы у вас сначала погружались стили, а потом уже контент.
Вот теперь пример.
1 2 3 4 | h1 { color: red; font-size: 16px; } |
Как вы возможно заметили, в качестве селектора у нас выступает название HTML тега/элемента, также есть и другие типы селекторов, кроме названия самого тега, но об этом в другой части.
Также есть два свойства, первой color со значением «red», что значит цвет текста будет красным, второй, font-size, для размера текста, со значение «16px», это значение стандартное для элемента абзаца <p>, поэтому заголовок у нас должен быть как обычный текст.
Как видите, действительно цвет заголовка красный и его размер как у обычного текста или абзаца.
Вывод:
В это первой части учебника про CSS, вы изучили основы этого языка, надеюсь вы всё поняли и вам было это полезно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...