Изучаем CSS за час!

27.06.2018
1236

Алоха, спортсмены! Сегодня мы с вами будем изучать CSS или каскадные таблицы стилей. Это будет одна из самых интересных частей нашего курса, ведь с помощью CSS мы можем сделать очень много интересных вещей.


CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) – это формальный язык описания внешнего вида документа, написанного с помощью HTML. Если провести параллель с написанием картины и сказать просто, то с помощью HTML мы делаем набросок карандашом, а с помощью CSS наносим мазки масляными красками.


Синтаксис CSS.  



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


Селектор {
	Свойство1: значение1;
	Свойство2: значение2;
	Свойство3: значение3;
	…
	СвойствоN: значениеN;
}

Селектор (от англ. select — выбирать) – это формальное правило, которое применяется к одному элементу или набору элементов.


CSS могут быть написаны как в самом HTML с помощью тегов , inline – способом, с помощью атрибута style у HTML – тега и могут быть подключены как внешний файл. Чтобы не было беспорядка и хаоса, лучше CSS подключать к HTML как отдельный файл. Подключается он следующей конструкцией:


<link rel="stylesheet" href="{путь до файла с CSS}"/>

Размещается данная конструкция обычно в разделе head HTML-документа.


Основные селекторы CSS.



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


Селектор HTML-тега.



Данный тип селекторов применяется ко всему набору элементов определенного тега. Например, чтобы все ссылки на странице сделать зелеными, вы напишите:


a {
	color: green;
}

Селектор класса.



Чтобы выбрать на странице все элементы с определенным классом, нужно написать класс элементов с точкой впереди. Например, чтобы все элементы с классом red сделать красными, мы напишем:


.red {
	color: red;
}

Селектор идентификатора.



Также у нас на странице может встретиться элемент с определенным идентификатором, чтобы нам его получить, необходимо написать идентификатор с символом # впереди. Например, сделать фон у элемента с идентификатором ident черным:


#ident {
	background: black;
}

Мультиселектор.



С помощью мультиселектора мы можем выбрать абсолютно все элементы на нашей странице, пишется он с помощью символа *. Например, сделаем у всех элементов на странице прозрачность равную 0:


* {
	opacity: 0;
}

Селектор потомка.



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


div p {
	text-decoration: underline;
}

Селектор первых потомков.



Обычно данный селектор пригождается, когда у нас есть многоуровневая вложенность однотипных элементов, например, многоуровневое меню. Пишется данный селектор как селектор потомка, только между элементами добавляется символ >. Например, нам нужно выбрать все элементы li первого уровня и сделать им кегль 18px:


ul > li {
	font-size: 18px;
}

Селектор правого соседа.



Данный тип селекторов тоже помогает при работе со списками. Например, вам необходимо добавить слева отступ 10px у всех элементов кроме первого:


li + li {
	margin-left: 10px;
}

Селектор атрибута



Допустим, вам необходимо выбрать все элементы input с атрибутом type равным text:


input[type=text]{
	border: 1px solid #000;
}

Составные селекторы.



Представьте, что вам нужно написать правило для нескольких элементов с разными селекторами, тогда вы напишите следующую конструкцию:


.red, a{
	color: red;
}

Отлично! Мы прошли с вами основные селекторы CSS.


Каскадность.



Именно из-за свойства каскадности таблица стилей получила свое название. Так что же такое каскадность? Все дело в том, что правила для одного элемента могут быть прописаны в нескольких местах одного файла или в нескольких файлах стилей. Поэтому браузер берет все правила и комбинирует их, получая новый набор правил, опираясь на приоритетность и специфичность.


Например, селектор идентификатора имеет приоритет над селектором класса, а более точно заданный селектор будет иметь приоритет над селектором более общим.


Псевдоклассы.



У каждого элемента есть псевдоклассы, которые мы можем также использовать для наших селекторов. Вот примеры псевдоклассов:


  • :not(селектор) – все, кроме подходящих под селектор.
  • :focus – в фокусе.
  • :hover – под мышью.
  • :empty – без детей (даже без текстовых).
  • :checked, :disabled, :enabled – состояния INPUT.
  • :target – этот фильтр сработает для элемента, ID которого совпадает с анкором #… текущего URL.

Соответственно, если мы, например, хотим задать другой цвет ссылки при наведении мыши, то мы будем использовать следующую конструкцию:


a:hover {
	color: red;
}

Также есть еще следующие псевдоклассы:


  • :first-child – первый потомок своего родителя.
  • :last-child – последний потомок своего родителя.
  • :only-child – единственный потомок своего родителя, соседних элементов нет.
  • :nth-child(a) – потомок номер a своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1.
  • :nth-child(an+b) – расширение предыдущего селектора через указание номера потомка формулой, где a,b – константы, а под n подразумевается любое целое число.
  • Этот псевдокласс будет фильтровать все элементы, которые попадают под формулу при каком-либо n. Например: -:nth-child(2n) даст элементы номер 2, 4, 6…, то есть чётные.
  • :nth-child(2n+1) даст элементы номер 1, 3…, то есть нечётные.
  • :nth-child(3n+2) даст элементы номер 2, 5, 8 и так далее.

Псевдоэлементы.



Также мы можем использовать вспомогательные элементы, которые называются “псевдоэлементы”. При помощи них мы можем добавлять содержимое в конец и начало элемента при помощи конструкции ::before и ::after.


Например, таким образом можно добавить кавычки ссылке, которые не будут подчеркнуты:


a::before{
	content: “\””
}
a::after{
	content: “\””
}

Блочные и строчные элементы.



В CSS существуют два основных типа элементов:


  • Блочные – это элементы высшего уровня, которые форматируются как блоки и генерируют новые блоки контента. Примеры блочных элементов: div, p, h1-h6, header, section и так далее.
  • Строчные – это элементы, которые генерируют внутристрочные контейнеры. Они не создают новых блоков контента. Примеры строчных элементов: a, em, strong, label, small, span и так далее.

Блочная модель.



В блочной модели CSS элемент рассматривается как прямоугольный контейнер, имеющий область содержимого и необязательные рамки и отступы (внутренние и внешние). Если объяснить более простым языком, то можно представить себе картину, которая висит на стене:


  • Расстояние от потолка, стен и пола до рамки картины – это внешние отступы (margin).
  • Расстояние от рамки до изображения – это внутренние отступы (padding).
  • Само изображение это содержимое, которое имеет высоту (height) и ширину (width).
  • Рамка и ее толщина – это границы блока (border).

Позиционирование.



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


  • static – это значение по умолчанию, означает отсутствие позиционирования.
  • relative – относительно позиционированный элемент. Сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал не исчезает.
  • absolute – абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера. Блок-контейнер – это ближайший предок, у которого свойство position отлично от static.
  • fixed — фиксирует элемент в указанном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, то есть элемент всегда фиксируется относительно окна браузера и не меняет своего положения во время прокрутки страницы. Сам элемент при этом полностью удаляется из основного потока документа и создаётся в новом потоке документа.
  • Initial — устанавливает значение свойства в значение по умолчанию.
  • Inherit — наследует значение свойства от родительского элемента.

Оцените статью:

Проголосовало: 158

Комментарии ()

Ваш комментарий будет первым!

Написать комментарий

Наши клиенты

Многие компании уже доверяют нам. Будьте в их числе!

Хотите реализовать проект?

Контакты

Напишите нам - мы расскажем вам много интересного!


Пермь, ул. Крупской 34, офис 510