Изучение CSS для новичков / Урок #1 – Введение в CSS. Что это и как с ним работать?

Изучение CSS для новичков / Урок #1 – Введение в CSS. Что это и как с ним работать?

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

Видеоурок

Полезные ссылки:


Информация про CSS

CSS является языком, что отвечает за оформление вида страницы. Он позволяет указать стилевое оформление каждого из HTML элементов. Также за счёт CSS можно указывать стили для файлов с XML-разметок: XUL, SVG и прочие.


Чистый HTML-документ выглядит ужасно без использования стилей. Каскадные таблицы стилей или же CSS помогает указать всё оформление для веб сайта. Используя лишь HTML и CSS можно создать любой дизайн сайта, какой вам только будет нужен.


Написание CSS

CSS-стиль – это определённое правило, что подсказывает веб-обозревателю правила форматирования для каждого элемента. Под форматированием подразумевается: изменение цвета текста, фона элемента, шрифта, теней, позиции на экране и тому прочее.



Чтобы создать рабочий CSS-стиль, нужно правильно указать 2 основные части:

  • Селектор – указывает целевой элемент, которому назначается стиль;
  • Блок стилей – подсказывает браузеру нужные правила форматирования.


Пример:

div {
	background-color:red;
	width: 100px;
	height: 60px;
}

В примере селектором выступает тег div. Это означает, что все стили в блоке будут применены к каждому div-элементу на странице.


В фигурных скобках всегда указываются стили. Они должны стоять строго в скобках, а не за их пределами. В представленном примере на выходе получится div блок c красным фоном, шириной 100 и высотой 60 пикселей. 


Все команды имеют свойство, а за ним идёт значение. Иллюстрация на основании того же примера:

background-color:red; /* , где
background-color – это свойство;
red – значение. */

Свойство задаёт определённый стиль. Подобных свойств очень много, в нашем случае – это цвет фона. Значение всегда указывается после двоеточия. По примеру, свойству background-color установлено значение red. Таким образом перекрашивается цвет фона в красный.


По завершению команды всегда ставится точка с запятой. Этот символ является делителем, который отделяет между собой команды.


Список различных стилей принято называть таблицей стилей или CSS. Есть несколько разных методов указания стилей. 


Атрибуты html и стили css

Большинство HTML-элементов поддерживают установку стилей посредством атрибутов. Пример, отдельным элементам есть возможность указать атрибуты width и height (ширина с высотой). Атрибуты указываются прямо в HTML-файле. С ними нужно быть осторожными. 



С одной стороны – это удобный способ указать стили для конкретного блока (значения в атрибутах имеют высший приоритет), все прочие теги, подпадающие под общие селекторы, будут иметь стили с CSS-файла. 

С другой стороны – это портит HTML-код, он перестаёт быть чистым. В случае редактирования неудобно находить и менять стили по разным файлам, появляется излишняя путаница.


Проверка валидности

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


План курса

В видеокурсе мы изучим множество HTML тегов и научимся применять их на практике. К концу курса у вас будут необходимые знания для построения разметки ваших веб сайтов.


Программа обучения

Также на нашем сайте есть более углубленная программа по изучению разработки веб сайтов. Ознакомится с программой обучения по Front-end можно по этой ссылке и с программой обучения Full Stack по этой ссылке.


Онлайн редактор кода

Загрузка...

Задание к уроку

Использование

В чём преимущества CSS и где он используется?

Посмотреть ответ

CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.


Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Немного теории

Что такое CSS и для чего он используется на сайте?


Чем CSS отличается от CSS3?

Посмотреть ответ

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


CSS3 от CSS отличается лишь версией. CSS3 является улучшенной версией языка CSS и именно CSS3 будет изучено в ходе курса.

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Верстка сайта на HTML5 и CSS3
13 уроков
Изучение препроцессора SASS / SCSS
7 уроков
Изучение HTML5 от нуля до гуру!
18 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Комментарии для сайта Cackle