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

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

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

Видеоурок

Информация про 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, доступный по этой ссылке.

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

Загрузка...

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

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

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


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

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

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


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

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

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

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

Изучение технологии Bootstrap (верстка сайта)
16 уроков
Изучение HTML5 от нуля до гуру!
21 урок
Создание адаптивного сайта
4 урока
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Изучение препроцессора SASS / SCSS
7 уроков
Верстка сайта на HTML5 и CSS3
13 уроков
Комментарии для сайта Cackle