Инструменты пользователя

Инструменты сайта


css

Основы CSS

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

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

Каждый элемент на странице представляет собой блок, в который вложен ещё один подблок, в который вложен ещё один подблок, в котором находится основной контент. Визуально это выглядит вот так: Контент – это то, что ты хочешь разместить на странице. Для примера возьмём форму новой записи из дефолтной темы. Здесь контент – текстовое поле, галочка «анонимно» и кнопка, граница контента проходит по крайним точкам элементов. Всё пустое место за его пределами - паддинги. Если бы паддинги были выключены (равны нулю), фиолетовая граница совпадала бы с границой контента и плотно прилегала бы к внутренним элементам вот так: Думаю, ты уже понял, что делают отступы. Они отодвигают фиолетовую границу от границы и других элементов родительского элемента. Если выключить и их, получится совсем наркоманская штука: Рисовать границу приходится часто, поэтому нужно разделять отступы и паддинги. Если хочешь, просто отступы – это внешние отступы, вне границы, а паддинги – внутренние. Эффекта внешних отступов можно достигнуть, указав равные им паддинги родительского элемента. Если ты заметил, все эти блочные ящики на сайте иногда имеют разнуют толщину вверху, справа, снизу и слева. Действительно, можно задать абсолютно разные значения по всем четырём сторонам. Давай для примера вернём паддинг нашей формы, но только справа: Теперь насчёт границы. Здесь она совсем тонкая, всего один пиксель, но, как ты заметил, внутренние элементы не накладываются на неё и не заходят за неё. Она – полноценный ящик со стенками ненулевой ширины, так же как и отступы и паддинги. Но ягодка в том, что её, в отличие от последних, можно всячески кастомизировать, ей задавая кроме ширины цвет, пунктир, закругление углов и даже своё изображение. Чтобы окончательно убить форму, сделаем её пунктирным эллипсоидом шириной 30 пикселей. Кстати, элементы, волею сатаны скрывшиеся за краями границы, можно сделать видимыми, наложив поверх неё, но об этом позже, когда мы будем рассматривать свойства.

Селекторы

Как же задаются эти правила отображения? CSS-код чуть больше, чем целиком состоит из селекторов и чуть-чуть комментариев. Комментариев коснёмся после, а пока расскажу главное. Каждый селектор включает свойства отображения и информацию о том, к каким элементам на странице они относятся. Абстрактно это выглядит вот так:
ЭЛЕМЕНТЫ {
    СВОЙСТВО 1;
    СВОЙСТВО 2;
    СВОЙСТВО 3;
}

Свойств в селекторе может быть сколько угодно, ровно как и селекторов в коде. Главное, чтобы они друг другу не противоречили. После каждого свойства необходима точка с запятой, как в сишных языках программирования (на самом деле, после последнего свойства её можно опустить, но лучше не нарушать принятый всем стандарт). После селектора (после закрывающей фигурной скобки) никакая точка с запятой не нужна, достаточно перевести на новую строку и начать новый селектор. Отступы перед свойствами не обязательны, но желательны для лучшей читаемости кода. Что же это за свойства такие? Каждое свойство состоит из имени задаваемого свойства и через двоеточие его значения. У разных свойств разные формы значений: числа, строки, ключевые слова итд, а некоторым даже нужно задавать несколько значений через пробел. Вот как теперь это для тебя выглядит:
ЭЛЕМЕНТЫ {
    СВОЙСТВО-1: 1rem;
    СВОЙСТВО-2: black;
    СВОЙСТВО-3: 5px solid #808;
}

Что такое rem и зачем перед 808 нужна решётка, разберёмся потом. А сейчас рассмотрим, какие бывают элементы.
element {…}
Применяет заданные свойства ко всем элементам на странице с тегом element. Тег – что то вроде типа элемента, например, тегом «p» на странице размечаются абзацы, тегом «img» – пикчи, а «div» – универсальный блочный тег, в который можно помещать другие элементы и как угодно его оформлять. Все теги имеют происхождение из английского языка и пишутся латиницей (АХХ, КУРВА!)
#id {…}
Применяет заданные свойства к одному-единственному элементу с идентификатором «id», перед которым ставится решётка без пробела. Такой элемент может быть только один на странице. Примеры: аватарка в профиле, стена, открытая запись. В отличие от тегов, у идентификаторов нет предопределённых имён, верстальщик сам задаёт элементам любые идентификаторы. Здесь уже можно применить патриотические навыки и даже сочинить все идентификаторы на русском наречии, но тогда белые люди твой код не поймут. Тебе же и придумывать ничего не нужно, все идентификаторы я уже расставил, их описания ты найдёшь здесь. Переходим дальше.
.class {…}
Применяет заданные свойства ко всем элементам на странице с классом «class», перед которым ставится точка без пробела. Классы похожи на теги, но не зависят от них и задаются верстальщиком. Например, все комментарии под открытой пикчей имеют тег «div», но его же имеет и её описание, и весь список комментариев, и даже сам фрейм пикчи. Чтобы разделять эти элементы, нужны классы. Каждый комментарий имеет класс «comment», каждый список в открытых пикчах – «image-comments», а каждый открытый фрейм – «image-frame». Как ты заметил, пробелы в именах классов обычно заменяются дефисом, хотя можно их заменить и подчёркиванием, и неразрывным пробелом, но только не обычным пробелом, обычный пробел используется для другого. Это же относится и к идентификаторам. Классы я тебе тоже уже сочинил и расставил по страницам, их описание по ссылке выше.
mark:hover {…}
А это составной элемент, подмножество элементов с тегом mark, но только тех, что имеют псевдокласс hover. Псевдокласс задаётся сразу имени основной выборки через двоеточие без пробела. В данном случае «hover» означает те элементы mark, на которые в текущий момент наведён курсор мыши. Все псевдоклассы имеют предопределённые имена, их нельзя задавать вручную. Вот список псевдоклассов, который тебе понадобится при вёрстке Sodesu:
:hover – на элемент наведён курсор мыши
:focus – элемент выбран на странице с помощью табов или перетаскиванием мыши, советую применять его там же, где и :hover.
:active – элемент активен, обычно это означает, что на нём нажата кнопка мыши. Нужен для оформления кнопок, чекбоксов, ссылок и другой подобной мелочи, чтобы они были похожи на живые.
:checked – применяется к чекбоксам и переключателям, задавая их вид во включенном состоянии.
:disabled – применяется к заблокированным элементам на странице, которые как бы есть, но с ними нельзя взаимодействовать. Это например чекбокс «анонимно», если юзер не вошёл в сеть.
:enabled – обратный к предыдущему псевдокласс, применяется к юзабельным элементам.
:link – применяется к ссылкам, ещё не посещённым. По умолчанию они синие.
:visited – применяется к уже посещённым ссылкам. По умолчанию они фиолетовые.
:first-of-type – применяется только к первому элементу выборки. Например, к первому комментарию.
:last-of-type – наоборот, только к последнему.
:not – переворачивает выборку, применяя правила ко всем элементам, которые не соответствуют выборке. Хз зачем тебе это может понадобиться, но на всякий случай оставлю.
* {…}
А этот селектор применяется вообще ко всем элементам на странице. Может пригодиться. Кстати, он используется в сбросе стилей.

Продолжение завтра…


Вернуться к описанию селекторов

Вернуться к основной инструкции

Вернуться на главную страницу сайта

css.txt · Последние изменения: 2019/10/25 20:54 (внешнее изменение)