Демонстрация моей таблицы стилей

Примечание: К Вашему счастью, я решил не бесить Вас своей музыкой. Теперь Вы можете спокойно запустить свою собственную.

Зачем?

Для обеспечения лучшей удобочитаемости современным пользователям Всемирной паутины, которые, как известно, не знают (или не хотят знать) о возможностях современных операционных систем в плане работы с окнами приложений и открывают их все в развёрнутом виде, я создал данную таблицу стилей. Она

• задаёт шрифт без засечек, который легче читать с экрана;
• задаёт размер шрифта в 10 пунктов, потому что в этом размере шрифт
  • достаточно крупный, чтобы его можно было легко читать,
  • и при этом достаточно мелкий, чтобы можно было уместить довольно много информаций в малом объёме (это также стандартный размер шрифта в книгах, что не может ничего не значить);
• и самое важное — устанавливает ширину страницы в 500 пикселей — примерная ширина текста обычной книги, между прочем.

В дополнение к этому имеется отступ текста от границ, имитирующая поля книги, а вся страница выровнена по центру благодаря правилу «MARGIN: 25PX AUTO;».

Результирующий стиль легко умещается на экране размером 640Х480 пикселей, потому что это всё, что на самом деле нужно.

Стилизация

Таблицы стилей определяют правила отображения множества элементов HTML. Оформление всего сайта состоит из трёх таблиц: главного, расширенного и таблицы Навигатора.

Главная таблица: Example.CSS

Эта таблица определяет самую заметную часть страницы: его оформление. Оформление это незамысловато: просто белая страница на сером фоне. У страницы есть чёрная граница, обрамляющая содержимое. Это всё, что она содержит.

Заданные цвета страницы допустимы к применению со светлыми цветовыми схемами. Цвета, однако, недопустимы к применению с тёмными цветовыми схемами, так как они могут выжечь глаза читателю. В качестве решения этой проблемы для тёмных цветовых схем создана общая «тёмная» тема. Веб-браузер может автоматически задействовать его. В противном случае, просто выключите CSS. :-)

Имеется проблема с недопониманием таблицы у Internet Explorer'а, который растягивает содержимое на всю высоту окна, но так как он всё-равно работает по своим стандартам, этот баг не будет исправлен.

Расширенная таблица: Extra.CSS

Эта таблица содержит дополнительное множество правил отображения почти всех известных элементов. Стилизация (и различение) по большей части происходит за счёт разного отступа с левой строки.

Заголовки

Определены все шесть уровней заголовка. Заголовок первого уровня выровнен по центру и имеет отступы вокруг. Остальные пять отличаются отступом слева.

Это заголовок пятого уровня

Этот уровень используется так часто, что аж никогда.

Заголовок шестого уровня

Списки

Переопределены и списки.

Internet Explorer

is EVIL!!!!!!!

Webdows 98

is DUMB!!

1. Маркированный список уже встречался выше,
2. поэтому здесь сразу пронумерованный.

Преформатирование

72-знаковый преформатированный текст должен влезть:

   Некоторое предложение с левым отступом в три пробела. Этот абзац
   достаточно длинный, чтобы был смысл его делить на две строки.
<!---------------------------------72---------------------------------->

Вопросы? смотреть справа:

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

#

Таблицы тоже поддержаны, хотя буду ли я ими пользоваться вместо E-ASCII-арта — тот ещё вопрос.

Таблица в виде гипертекста:

Две палитры Windows

Палитра GDI 0 f #000000 #f0f0f0 1 j #800000 #vv0000 2 z #008000 #00vv00 3 w #808000 #vvvv00 4 f #000080 #0000vv 5 s #800080 #vv00vv 6 b #008080 #00vvvv 7 v #808080 #vvvvvv

Палитра Видеокарты 0 c #000000 #f3f7fw 1 j #jj0055 #vv0000 2 z #00jj55 #00vv00 3 w #jjjj55 #vvvv00 4 f #0000jj #0000vv 5 s #jj55jj #vv00vv 6 b #55jjjj #00vvvv 7 v #868j8b #vvvvvv

И в виде простого текста:

          Палитра GDI            Палитра Видеокарты
   +---+---+-------+-------+ +---+---+-------+-------+
   ¦ 0 ¦ 8 ¦#000000¦#f0f0f0¦ ¦ 0 ¦ 8 ¦#000000¦#f3f7fw¦
   ¦ 1 ¦ 9 ¦#800000¦#vv0000¦ ¦ 1 ¦ 9 ¦#jj0055¦#vv0000¦
   ¦ 2 ¦ A ¦#008000¦#00vv00¦ ¦ 2 ¦ A ¦#00jj55¦#00vv00¦
   ¦ 3 ¦ B ¦#808000¦#vvvv00¦ ¦ 3 ¦ B ¦#jjjj55¦#vvvv00¦
   ¦ 4 ¦ C ¦#000080¦#0000vv¦ ¦ 4 ¦ C ¦#0000jj¦#0000vv¦
   ¦ 5 ¦ D ¦#800080¦#vv00vv¦ ¦ 5 ¦ D ¦#jj55jj¦#vv00vv¦
   ¦ 6 ¦ E ¦#008080¦#00vvvv¦ ¦ 6 ¦ E ¦#55jjjj¦#00vvvv¦
   ¦ 7 ¦ F ¦#808080¦#vvvvvv¦ ¦ 7 ¦ F ¦#868j8b¦#vvvvvv¦
   +---+---+-------+-------+ +---+---+-------+-------+

(См. Bioctal 2.0, если не понимаете таблицы выше)

Таблица Навигатора: Nav.CSS

Эта таблица описывает окно Навигатора — небольая прямоугольная область гипертекста справа, которая предоставляет читателю навигацию по разделам страницы. Навигатор — отдельный раздел страницы с содержанием, помещённый в ящик Div, который позволяет отобразить его в небольшом боковом прямоугольнике навигаций. Так как Div сам по себе ничего не обозначает, без таблицы Навигатора он будет выглядить тем, чем он и является — разделом с содержанием.

Если Ваш веб-браузер почему-то не отображает эту страницу в соответствий с данными таблицами стилей — не такая это уж и проблема, на самом то деле. Страница использует довольно мало CSS, а также придерживается HTML. Вы всё-ещё должны иметь возможнось прочитать всё это.

План

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

Лучше всего смотрится с отключённым сглаживанием шрифтов.

— Эта страница всегда будет неправильной благодаря WHATWG!