Уроки CSS3 | #1 - Создание стилей на сайте

Уроки CSS3 | #1 - Создание стилей на сайте

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

Видеоурок

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


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


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 Во время создания стилей нередко появляются неясности в отношении правильности их указания и корректности. В данном случае на помощь приходит валидатор CSS, доступный по ссылке.

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

Загрузка...

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

Немного теории
Перед изучением CSS стоит четко понимать что такое CSS и для чего они нужны на сайте. Расскажите зачем нужен CSS и что такое CSS3?
Посмотреть ответ
CSS это стили, которые мы можем добавлять к различным объектам на сайте чтобы придать им совершенно другой вид. Без стилей сайты будут выглядеть как просто набор HTML элементов.

CSS3 это просто одна из версий этого языка и эта версия на данный момент является последней.

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

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

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

Изучение ASP.NET Core MVC. Создание сайтов на C#
6 уроков
Изучение HTML5 от нуля до гуру!
21 урок
Верстка сайта на HTML5 и CSS3
13 уроков
Создание адаптивного сайта
4 урока
Видеокурс по PHP, MySQL / Создание динамического сайта
Изучение технологии Bootstrap (верстка сайта)
16 уроков