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

27.06.2018
404

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

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

Синтаксис CSS.  

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


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

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

CSS могут быть написаны как в самом HTML с помощью тегов <style></style>, 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 — наследует значение свойства от родительского элемента.

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

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

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

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

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

    Контакты

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


    614060, Россия, г. Пермь,
    ул. Крупской, д. 34, офис 510.
    +7 (342) 277-43-93