Шпаргалка HTML и CSS

Значок ярлыка или Favicon

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

  • <link rel=’icon’ href=’/favicon.ico’>
  • <link rel=’icon’ href=’/favicon.gif’ type=’image/x-icon’/>
  • <link rel=’icon’ href=’/favicon.svg’ type=’image/svg+xml’/>
  • <link rel=«shortcut icon» href=’http://www.reks.biz/favicon.ico’ type=’image/x-icon’/>

дальнейшее содержание публикации является черновиком!

Стили

CSS

///

HTML

Стандарт предписывает размещать  определение <style> в заголовке <head>, тем не менее браузеры обрабатывают их и в <body>:

 

Элементы и свойства html-тегов

Комментарии

Комментарий в тексте HTML:

Комментарий в CSS может быть многострочным, но не допускает вложенности

 

Текстовые

<p> <div> <span>

Текст и Выравнивание по ширине

Текст и Фрагмент текста

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

Отступы

Общую область элемента формируют четыре вложенные друг в друга области: содержание, внутренний отступ padding, рамка border, внешний отступ margin.

Пример параметров стиля абзаца: width или max-width задает максимум ширины содержания абзаца; min-height задает минимум высоты содержания; padding задает отступ от содержания до рамки; border задает толщину, вид и цвет рамки; margin задает отступ за рамкой; background задает фон внутри рамки.

Кроме основных размеров padding, border и margin, для каждого могут быть заданы дополнительные размеры:

  • {padding, border, margin}-left
  • {padding, border, margin}-right
  • {padding, border, margin}-top
  • {padding, border, margin}-bottom

Другим способом дополнительные размеры могут быть заданы при указании нескольких значений через пробел:

  • два значения задают размеры {…}-top/{…}-bottom, {…}-left/{…}-right
  • три значения задают размеры {…}-top, {…}-left/{…}-right, {…}-bottom
  • четыре значения задают размеры {…}-top, {…}-right, {…}-bottom, {…}-left

Обтекание

<div style=»width: 400px; float: left; margin-right: 20px; margin-bottom: 20px; padding: 20px; border: 4px solid #4682B4; background: #FFB958;»>…

Если элементу страницы назначено стилевое свойство обтекания float, то определяемые следом за ним элементы будут пытаться использовать пространство не снизу, а с оставшейся свободной от элемента стороны справа или слева, в зависимости от значения: left или right. Заданное обтекание предполагает плотное прилегание, поэтому  необходимые отступы следует предусмотреть и назначить дополнительно.

Списки

Отступы в списках

Отступы содержания списка задаются в целом сочетанием свойств margin и paddin и в частности слева свойствами margin-left и paddin-left. Для изменения левого отступа в стиле тега <ul> или <ol> необходимо их переопределить

  • <ul style=’margin-left: 100px;’>… — увеличивает левый отступ списка до 100px
    • вложенные списки наследуют установленный стиль и отступ
  • <ul style=’padding: 0; margin-left: 100px;’>… — тоже с отменой действующего левого внутреннего отступа (рекомендуется, как более точный метод)
  • <li style=’padding-left: 100px;’>… — устанавливает в отдельном элементе списка левый отступ текста от маркера
Тип маркера

Тег маркированного списка <ul> и тег нумерованного списка <ol> позволяют отображать в списке маркеры нестандартного типа при помощи свойства type, однако более  надежным является задание типа в стиле. Назначение типа маркера по сути стирают отличие между тэгами <ul> и <ol>. Тип маркера может быть переназначен любому отдельному элементу списка:

  • <ul type=’circle’>… — задает тип маркера всему списку (может подавляться каскадными стилями и не работать)
  • <ul style=’list-style-type: circle;’>… — задает всему списку тип маркера через стиль
    • <li style=’list-style-type: square;’>… — задает маркер в виде квадрата для текущего элемента списка
    • <li style=’list-style-type: none;’>… — отменяет маркер для текущего элемента списка

В качестве значения типа маркера type и list-style-type допустимы следующие варианты:

  • disc — в виде круга (по умолчанию для <ul>)
  • circle — в виде окружности
  • square — в виде квадрата
  • armenian — традиционная армянская нумерация
  • decimal — арабские числа (1, 2, 3, 4,… по умолчанию для <ol>)
  • decimal-leading-zero — арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,…)
  • georgian — традиционная грузинская нумерация
  • lower-alpha — строчные латинские буквы (a, b, c, d,…)
  • lower-greek — строчные греческие буквы (α, β, γ, δ,…)
  • lower-latin — аналогично lower-alpha
  • lower-roman — римские числа в нижнем регистре (i, ii, iii, iv, v,…)
  • upper-alpha — заглавные латинские буквы (A, B, C, D,…)
  • upper-latin  — аналогично upper-alpha
  • upper-roman — Римские числа в верхнем регистре (I, II, III, IV, V,…)
  • none — отменяет маркеры для списка или элемента списка
  • inherit — устанавливает тип родительского списка

Колонки

Динамическое распределение содержания в несколько колонок задается для блочных элементов (кроме таблиц), ячеек и элементов, у которых display установлен как inline-block с помощью комбинации атрибутов:

  • column-count: <число> | auto устанавливает оптимальное число колонок
  • column-gap: : <значение> | normal ширина межколоночного интервала в единицах CSS (пикселах, процентах и пр)
  • column-width: <значение> | auto ширина колонки в абсолютных единицах CSS
  • column-rule: <border-width> || <border-style> || <цвет> устанавливает свойства разделительной линии в любом допустимом для CSS формате

Картинки

Скрытая картинка

Картинку можно отобразить на странице так, что браузер не будет считать ее картинкой и не предложит пользователю скопировать или сохранить. Для этого картинку следует разместить в фоне тега <img>, а в качестве картинки назначить пустую картинку или прозрачную картинку:

Аналогичного маскирования картинки на странице можно добиться, если разместить картинку в фоне пустого тега <div>:

Приведенные способы маскировки усложняют сохранение картинки, но не предотвращают его полностью. Опытный web-дазайнер путем анализа html-кода страницы в любом случае сможет найти url картинки и загрузить файл.

Картинка с внедренным data:URI

Двоичный код содержания картинки может быть включен в html-код страницы, что будет выглядеть довольно громоздко и исключит возможность кэширования картинки браузером, однако в ряде случаев для небольших и уникальных картинок это может оказаться полезным. Для внедрения исходный код картинки преобразуют в код base64 и вставляют в специальную форму свойства src:

Пример внедренной картинки GIF 16×16

Для data:URI предусмотрен формат:

<MIME-type> поддерживает форматы GIF, PNG, JPEG,

///

Координаты

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

  • screenX, screenY
  • pageX, pageY
  • clientX, clientY
    • scrollLeft, scrollTop
  • offsetX, offsetY

Манифест

Для того, чтобы браузер мог считать сайт приложением можно использовать JSON-манифест, который должен размещаться в отдельном файле, указанном в коде HTML-страницы следующим образом:

Спецификация JSON-файла манифеста позволяет гибко назначить параметры представления ярлыка и окна приложения:

Источник: Манифест? А? Что? Зачем? //medium.com

//

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