CSS Основы

Это первая часть учебника по CSS, будет рассказываться про основы этого языка, например, узнаете о синтаксисе и зачем вообще нужен этот язык.

Также если вы не знаете или плохо знаете HTML, то зайдите посмотрите наш учебник по нему, по этой ссылке.

Зачем нужен CSS:

Для начала разберу зачем нужен язык CSS, а нужен он для того, что бы сайт выглядел максимально понятно и красиво.

Например, если HTML это кузов, то CSS это весь его дизайн, всё что вы видите, как то так.

Также если хотите узнать что такое вёрстка вообще, то прочитайте:
Что такое вёрстка и зачем она нужна.

Что нужно для работы с CSS:

Для работы с CSS, нужно только две программы, первое, текстовой редактор, хотя подойдёт даже обычный блокнот, но в нём не удобно работать, поэтому стоит скачать тестовой редактор.

Если вы не знаете какой тестовой редактор выбрать, то посмотрите статью:
Топ 5 лучших текстовых редакторов для программистов.

А второе что нужно, это браузер, даже несколько, это что бы проверять как отображается сайт в разных браузерах, например, Google Chrome и FireFox будет достаточно, но также можете установить себе старую версию какого-нибудь браузера, что бы точно быть уверенным, в том, что ваш сайт везде хорошо отображается.

Базовый синтаксис CSS:

Теперь перейдём к синтаксису, он очень простой и думаю у вас с ним не должно возникнуть проблем, вот из чего он состоит.

Как видите, действительно не чего сложного, селектор, это HTML элемент которому нужно применить стили, свойство это что нужно изменить, например цвет текста или размер, а со значением думаю и так всё понятно, это значение свойства.

Также, свойств для одного селектора может быть хоть сколько, неограниченное количество.

Пример:

Теперь перейдём к не большому примеру, в нём я поменяю размер шрифта и цвет текста для заголовка h1, но сначала нужно создать и  подключить CSS файл в HTML.

Если со созданием CSS файла всё просто, вы просто создаёте файл с расширением .css, например style.css, то с подключением есть пару нюансов.

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

Ещё нужно сказать, что подключать CSS файл нужно внутри тега <head>, или в самом начале внутри тега <body>, что бы у вас сначала погружались стили, а потом уже контент.

Вот теперь пример.

Как вы возможно заметили, в качестве селектора у нас выступает название HTML тега/элемента, также есть и другие типы селекторов, кроме названия самого тега, но об этом в другой части.

Также есть два свойства, первой color со значением «red», что значит цвет текста будет красным, второй, font-size, для размера текста, со значение «16px», это значение стандартное для элемента абзаца <p>, поэтому заголовок у нас должен быть как обычный текст.

основы языка css

Как видите, действительно цвет заголовка красный и его размер как у обычного текста или абзаца.

Вывод:

В это первой части учебника про CSS, вы изучили основы этого языка, надеюсь вы всё поняли и вам было это полезно.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно: