Как делать заметки в css
Перейти к содержимому

Как делать заметки в css

  • автор:

Базовый синтаксис CSS

Стилевые правила записываются в собственном формате, отличном от HTML. Основным понятием выступает селектор — это шаблон, который используется для выбора одного или нескольких элементов HTML и применения к ним параметров форматирования. Общий способ записи имеет следующий вид.

Синтаксис CSS

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

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 1 показаны две разновидности оформления селекторов и их правил.

Пример 1. Использование стилей

Заголовки h1 h2

Заголовок 1

Заголовок 2

В данном примере свойства селектора h1 записаны в одну строку без пробелов, а для селектора h2 каждое свойство располагается на отдельной строке. Во втором случае проще отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объём данных за счёт активного использования пробелов и переносов строк. Обычно при разработке сайта используют наиболее удобную и наглядную форму записи, а уже перед публикацией сайта из стилевого файла для сокращения его объёма удаляются все пробелы и переносы строк.

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности, как это показано в примере 2.

Пример 2. Расширенная форма записи

td < background: olive; >td < color: white; >td

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому практичнее писать все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 3).

Пример 3. Компактная форма записи

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде CSS установлено ниже (пример 4).

Пример 4. Разные значения у одного свойства

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

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

Значения

У каждого свойства может быть только соответствующее его целям значение. Например, для color , который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

Комментарии

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* . */ (пример 5).

Пример 5. Комментарии в CSS-файле

/* Стиль для сайта webref.ru Сделан для ознакомительных целей */ div < width: 200px; /* Ширина блока в пикселях */ background: #f0f0f0; /* Серый цвет фона */ border: 1px solid olive; /* Оливковая рамка */ >

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

1234ru / notes-html-css.md

Save 1234ru/164eb0028ae6c54e3669869fb9894a41 to your computer and use it in GitHub Desktop.

Заметки об HTML и CSS

Классы в HTML: menu_main или main_menu ?

Скорее, menu_main — сначала что, потом — какое. Поскольку внутри чего-то — какого-то блока или модуля — список дочерних сущностей обычно состоит из элементов разного назначения, а не из однотипных элементов разного вида.

Как назвать главный шаблон блока: блок/_all.tpl или блок/блок.tpl ?

  • при переименовании блока/каталога не нужно переименовывать еще и шаблон
  • основной шаблон называется всегда одинаково
  • основной шаблон всегда идет первым в каталоге
  • по названию файла не видно, что за шаблон
  • название, начинающееся с подчеркивания, хуже воспринимается

Шаблоны и CSS — а не сделать ли вместо каталогов templates и css один общий каталог layout ?

И складывать всё туда, и scss — тоже?

Всё упирается в расположение подключаемых картинок. Конечные пути к ним должны указываться относительно конечного css-файла, а не относительно текущего scss. То есть, при структуре типа

  • layout/header/header.scss
  • layout/header/icon.svg
  • css/common.css

для иконки нужно указывать полный путь — /layout/header/header.svg , поскольку в конечном итоге подключается она из css/common.css .

Чтобы можно было пользоваться относительным путём в scss-файле, нужна какая-то конструкция, которая при импорте будет заменяться на путь импортируемого файла относительно импортирующего, причем каскадно — сохраняясь до самого последнего уровня импорта и заменяясь на статический путь только при конечной компиляции в CSS.

Похоже, Sass такое не умеет. Поэтому складывать шаблоны и стилевые файлы вместе неудобно — все равно придется где-то отдельно держать иконки (хотя их, возможно, и не обязательно раскладывать по модулям).

Так что такая схема сработает, только если для каждого блока делать отдельный css-файл — типа layout/header/header.css — и путь к нему использовать как корневой для иконок. Однако это приведет к образованию большого количества css-файлов, каждый из которых придется отдельно подключать на страницу и получать отдельным HTTP-запросом.

Кроме того, если есть некий подблок типа layout/header/someblock/someblock.scss , его иконки тоже должны будут подключаться относительно корневого header.scss .

Анимации: CSS vs jQuery

Недостатки анимаций на основе transition и классов CSS

  1. Анимация не работает, если одно из значений — auto .
    Например, height . Изменение размеров происходит мгновенно и эффект, аналогичный jQuery.slideDown() , не достигается.
  2. При анимации прозрачности элемент в прозрачном, невидимом, состоянии закрывает находящееся за ним содержимое.
    Избежать этого можно лишь с помощью visibility:hidden , которое, в свою очередь, не анимируется, и элемент исчезает сразу (а display:none вообще прекращает любую анимацию).
    Другой обходной путь — назначение видимому элементу больших значений z-index , а невидимому — маленьких отрицательных, и анимация этого свойства. В результате элемент основную часть времени будет виден (основную — если отрицательное значение сильно меньше положительного). Однако это хак, который может создавать неудобства. В частности, положительные значения z-index должны быть достаточно большими (иначе элемент будет невидим в течение заметной доли анимации), и об этом нужно помнить, чтобы не переписать их в какой-нибудь другой группе стилей, с анимацией не связанной. При использовании jQuery.show() всех этих проблем не возникает. upd: разработано решение на основе z-index : конкретно для этого свойства указывается easing-функция типа step-start/step-end , причем для видимого состояния она переназначается! таким образом удаётся сохранить положительное значение z-index на всём протяжении анимации. Реализация — fade-animation.scss.
    Решение применимо только для абсолютно или фиксированно спозиционированных элементов.

В jQuery эти проблемы, похоже, решают созданием элемента-копии (см. http://code.jquery.com/jquery-3.4.0.js, propTween ).

Недостатки анимаций на основе jQuery

  1. Если элемент изначально скрыт ( display:none ), то в результате показа с помощью анимации ему будет назначен display:block . Это не позволяет управлять конечным display , в отличие от анимаций на основе CSS.

Иконка «бургера» для вызова меню без изображений

Иконка состоит из трех окрашенных линий и двух прозрачных полос между ними, все пять элементов равной высоты — по 20% от общей высоты иконки.

Идея состоит в том, чтобы сделать верхнюю и нижнюю линии при помощи border , прозрачные — при помощи padding , а среднюю — как псевдоэлемент ::before с фоновым цветом currentColor .

border-width нельзя указывать в процентах — только фиксированные величины в пикселях — поэтому нужно заранее знать размер стороны иконки. В таком случае можно использовать вот такой набор правил для SCSS:

$side: 40px; $fr: 0.2*$side; width: $side; height: $side; border-width: $fr 0; border-style: solid; border-color: currentColor; box-sizing: border-box; padding: $fr 0; cursor: pointer; &::before < content: ""; display: block; height: $fr; background-color: currentColor; > /* также нужно указать цвет, в который будут окрашены три полоски */ color: red; &:hover < color: pink; >

Скролл с прилипшими header и footer

Идея в том, чтобы не нужно было точно знать высоту , как это бывает при схеме position:absolute у + margin у .

В реальности #scrollable распирает содержимое по высоте так, что header и footer искажаются. Или вообще не реагирует на высоту родителя (как в jsfiddle). Почему так происходит — непонятно.

header>This is a headerheader> div id pl-s">scrollable"> div id pl-s">content">This is contentdiv> footer>This is a footerfooter> div>
body < height: 100vh; display: flex; flex-direction: column; overflow-y: hidden; > #scrollable < overflow-y: scroll; display: flex; flex-direction: column; flex-grow: 1; // засчет этого занимает всю высоту при недостаточной высоте > footer < margin-top: auto; // это + flex у родителя обеспечивает расположение внизу >

Как создать файл стилей CSS?

Первый практический шаг, который необходимо сделать при работе со стилям CSS, это научиться создавать файл, в котором эти стили будут храниться. Давайте посмотрим, что для этого нужно сделать.

Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.

Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.

Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.

Для тех, кто любит видео:

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Способ 1. Создание файла CSS меняя расширение текстового файла.

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.css.

Если у Вас не отображается расширение файлов, вот заметка:

После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.

Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.

После данной операции вы получите файл стилей css.

Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).

Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.

Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.

После открытия программы появляется главное меню, в котором можно выбрать создание файла CSS.

После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».

Аналогичный процесс создания файлов CSS есть и в других редакторов кода.

На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Комментарии в CSS

Точно также как в языках HTML, различных языках программирования и.т.д. в технологии CSS также есть возможность делать заметки в коде.

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

Как вы уже, наверно, догадались, такие заметки называются комментариями.

Создаются они довольно просто, с помощью вот такой конструкции:

/* Код комментария */

Посмотрите на следующий скриншот одного файла стилей, на котором можно наглядно увидеть, как выглядят эти комментарии.

05-04-2014 15-39-19

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

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

К примеру, нам нужно сделать неработоспособным следующий стиль:

ol, ul < /*list-style: none;*/ >

Все он не работоспособный. Убираем комментарий:

ol, ul

и стиль снова в работе.

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

Дмитрий Ченгаев ��
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *