1)Стили по-умолчанию

По-умолчанию к каждому документу применяются следующие css правила для

основного текста, заголовков (h1,h2,h3,h4),  ссылок и изображений :  

1.1)Стиль основого текста

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1.45;

}

1.2)Стиль заголовков

h1
{
  font-size:30px;
  padding:5px 0 5px 0px;
  margin:0px;
}

h2
{
  font-size:27px;
  padding:5px 0 5px 0px;
  margin:0px;
}

h3
{
  font-size:24px;
  padding:5px 0 5px 0px;
  margin:0px;
}

h4
{
  font-size:23px;
  padding:5px 0 5px 0px;
  margin:0px;
}

 1.3)Стиль ссылок

a
{
  border-bottom:1px dotted rgb(52, 134, 199);
  text-decoration:none;
  color:rgb(52, 134, 199);
}

a:visited
{
  color:rgb(52, 134, 199);
}

a:hover
{
  color:rgb(52, 134, 199);
  border-bottom: none;
}

1.4)Стиль изображений

img{
    max-width: 100%;
}

img.clickable:hover {
    opacity: 0.9;
}

2)Способы изменения стилей документа

Изменение стиля HTML элемента в документе возможно двумя способами  :

1)Изменение значения атрибута style документа. Например, изменить цвет абзаца текста можно так :

 <p style="color:green">Green text</p>

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

Но ответственность за корректное отображение документа лежит полностью на пользователе.

2)Использование встроенных стилей (css классов) Alterozoom, пример :

 Cписок встроенных стилей содержится ниже :

3)Встроенные стили

3.1)Простые блоки

Рамка :

.dashed_border
{
  border-style: dashed;
  border-width: 1px;
  border-color: lightgrey;
  border-radius: 5px;
}

.dashed_border:focus
{
  border-style: dashed;
  border-width: 1px;
  border-color: lightgrey;
  border-radius: 5px;
}

Простой блок :
.simple_block
{
  padding: 2px;
  margin: 2px;
}

Скрытый :
.hidden
{
  display: none;
}

Скрытый заголовок:
.hidden_header
{
  border: 1px solid #f0f0f0;
  background: #fcfcfc;
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
}

Скрытый блок:
.hidden_block
{
  border: solid darkgray 2px;
  border-radius: 5px;
  padding: 2px;
  margin: 2px;
}

Семантический блок:
.semantic_block
{
  padding: 5px 5px 5px 5px;
  border-radius: 4px;
}

Блок с комментариями :
.comment_block
{
  background: #f1f6f0;
  border: 2px solid #bed8bf;
}

Блок с важным текстом :
.important_block
{
  background: #f6f0f2;
  border: 2px solid #edcbca;
}

Блок с вопросом:
.question_block
{
  background: rgb(253,255,240);
  border: 2px solid rgb(249,255,182);
}

Блок с интересным текстом:
.interesting_block
{
  background: #f3f8fc;
  border: 2px solid #cadee9;
}

Блок с цитатой:
.quote_block
{
  background: rgba(197, 197, 197, 0.48);
  border: 2px solid rgb(224, 224, 224);
}

Кнопка "скрыть текст":
.hide_button
{
  border-style: outset;
  border-width: 5px;
  border-radius: 8px;
  border-color: #f0f0f0;
  background: #f0f0f0;
  height: 100%;
}

3.2)Стили для исходных кодов

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

текст программы нужно разместить внутри элементов pre и code, пример :

<pre><code class="language-css"> int main() {return 0;} </code></pre>

 Возможные значения класса для элемента code :

• language-css
• language-javascript
• language-php
• language-java
• language-coffeescript
• language-bash
• language-c
• language-c++
• language-python
• language-julia
• language-sql
• language-groovy
• language-http
• language-ruby
• language-csharp
• language-go
• language-aspnet
• language-scala
• language-haskell
• language-swift
• language-git
• language-perl
• language-matlab
• language-r
• language-less
• language-fortran
• language-erlang
• language-rust
• language-fsharp

 Примеры стилей исходных кодов

4)Служебные стили

Если один из этих стилей будет использован в документе,  то документ может быть отображен некорректно :

#relatedContainer

#controlContainer

.controlElements

#relative

.share_button a

div#_document_title

div._document_title

a._document_title

#hotkeys

#logoContainer

.tocElement

.selectedTocElement

.related

.category

.categoryImage

#related

#share

#_documentMetadata

.metadata

.metadataButton

5)Редактируемые блоки

Если HTML элемент в документе будет содержать атрибут data-editable="true", то при

просмотре документа в виде web-страницы данный элемент  будет редактируемым.

Пример : <p data-editable="true">This text will be editable</p>