AozoraEpub3-1.1.1から電書協のスタイルシートを使っています。なので、電書協CSSで用意されている機能は、タグにclassに指定を入れると使えます。電書協の色文字や背景色は青空文庫にないので、説明をしようとお思います。独自注記なので青空文庫にこの説明はありません。
AozoraEpub3では、
［＃ここから銀背景］〇〇［＃ここで銀背景終わり］
というようにここから、ここで区切られているものが<div>タグに変換していて、複数行に渡って囲むことができます。
［＃水色］うえ［＃水色終わり］
終わりと書かれているものは、spanタグに変換して一行もしくは一行の一部に対して影響します。
●［＃「●」は赤背景］という書き方もありますが、内部的に［＃赤背景］●［＃赤背景終わり］に書き換えているので同じ表現となります。
電書協のスタイルシートを使っています。なので、電書協CSSで用意されている機能は、classに指定を入れると使えます。sigilのような直接EPUBを編集できるソフトウェアを使うとclassを変更して文字に装飾ができます。
上の画像のような表現をする場合の注記の例
↓ここから文字色・color-blue（「うえ」はcolor-red）
［＃ここから青色］
［＃小見出し］見出し あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定なし）［＃小見出し終わり］［＃小見出し］［＃灰色］見出し あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定あり）［＃灰色終わり］［＃小見出し終わり］
段 落 あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定なし）
［＃灰色］段 落 見出し あい［＃赤色］うえ［＃赤色終わり］お（見出しに色指定あり）［＃灰色終わり］
画像［＃sample（sample.jpg）入る］画像（透過png）
［＃ここで青色終わり］
↑ここまで文字色・color-blue
変換されたhtmlタグはこうなる。
<p>↓ここから文字色・color-blue（「うえ」はcolor-red）</p>
<div class="color-blue"><h3 id="kobo.23.1" class="font-1em10">見出し あい<span class="color-red">うえ</span>お（見出しに色指定なし）</h3><p><br/></p>
<h3 id="kobo.24.1" class="font-1em10"><span class="color-gray">見出し あい<span class="color-red">うえ</span>お（見出しに色指定あり）</span></h3><p>段 落 あい<span class="color-red">うえ</span>お（見出しに色指定なし）</p>
<p><span class="color-gray">段 落 見出し あい<span class="color-red">うえ</span>お（見出しに色指定あり）</span></p>
<p>画像画像（透過png）</p>
</div><p>↑ここまで文字色・color-blue</p>
上のような背景を銀色で、その中で文字を装飾したい場合は、次のような青空文庫で表現します。
#003-c ブロックに一括で指定
↓ここから背景色・bg-silver（「うえ」は bg-blue＋color-cyan）
［＃ここから銀背景］
［＃小見出し］見出し あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（見出しに色指定なし）［＃小見出し終わり］
［＃小見出し］［＃赤紫背景］見出し あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（見出しに色指定あり）［＃赤紫背景終わり］［＃小見出し終わり］
段 落 あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（段落に色指定なし）
［＃赤紫背景］段 落 あい［＃青背景］［＃水色］うえ［＃水色終わり］［＃青背景終わり］お（段落に色指定あり）［＃赤紫背景終わり］
画像画像（透過png）
［＃ここで銀背景終わり］
↑ここまで背景色・bg-silver
<p>#003-c ブロックに一括で指定</p>
<p><br/></p>
<p>↓ここから背景色・bg-silver（「うえ」は bg-blue＋color-cyan）</p>
<div class="bg-silver"><h3 id="kobo.51.1" class="font-1em10">見出し あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（見出しに色指定なし）</h3><h3 id="kobo.52.1" class="font-1em10"><span class="bg-magenta">見出し あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（見出しに色指定あり）</span></h3><p>段 落 あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（段落に色指定なし）</p>
<p><span class="bg-magenta">段 落 あい<span class="bg-blue"><span class="color-cyan">うえ</span></span>お（段落に色指定あり）</span></p>
<p>画像画像（透過png）</p>
</div><p>↑ここまで背景色・bg-silver</p>
電書協で用意されている機能を青空文庫注記を拡張して使えるようにしているわけです。
####文字色
黒色 <span class="color-black">
黒色終わり </span>
ここから黒色 <div class="color-black"> 1
ここで黒色終わり </div> 1
暗灰色 <span class="color-dimgray">
暗灰色終わり </span>
ここから暗灰色 <div class="color-dimgray"> 1
ここで暗灰色終わり </div> 1
灰色 <span class="color-gray">
灰色終わり </span>
ここから灰色 <div class="color-gray"> 1
ここで灰色終わり </div> 1
鼠色 <span class="color-darkgray">
鼠色終わり </span>
ここから鼠色 <div class="color-darkgray"> 1
ここで鼠色終わり </div> 1
銀色 <span class="color-silver">
銀色終わり </span>
ここから銀色 <div class="color-silver"> 1
ここで銀色終わり </div> 1
白鼠色 <span class="color-gainsboro">
白鼠色終わり </span>
ここから白鼠色 <div class="color-gainsboro"> 1
ここで白鼠色終わり </div> 1
白色 <span class="color-white">
白色終わり </span>
ここから白色 <div class="color-white"> 1
ここで白色終わり </div> 1
黒地白色 <span class="inverse">
黒地白色終わり </span>
ここから黒地白色 <div class="inverse"> 1
ここで黒地白色終わり </div> 1
透明色 <span class="color-transparent">
透明色終わり </span>
ここから透明色 <div class="color-transparent"> 1
ここで透明色終わり </div> 1
灰地透明色 <span class="color-transparent bg-gray">
灰地透明色終わり </span>
ここから灰地透明色 <div class="color-transparent bg-gray"> 1
ここで灰地透明色終わり </div> 1
赤色 <span class="color-red">
赤色終わり </span>
ここから赤色 <div class="color-red"> 1
ここで赤色終わり </div> 1
青色 <span class="color-blue">
青色終わり </span>
ここから青色 <div class="color-blue"> 1
ここで青色終わり </div> 1
水色 <span class="color-cyan">
水色終わり </span>
ここから水色 <div class="color-cyan"> 1
ここで水色終わり </div> 1
赤紫色 <span class="color-magenta">
赤紫色終わり </span>
ここから赤紫色 <div class="color-magenta"> 1
ここで赤紫色終わり </div> 1
橙色 <span class="color-orangered">
橙色終わり </span>
ここから橙色 <div class="color-orangered"> 1
ここで橙色終わり </div> 1
####背景
黒背景 <span class="bg-black">
黒背景終わり </span>
ここから黒背景 <div class="bg-black"> 1
ここで黒背景終わり </div> 1
暗灰背景 <span class="bg-dimgray">
暗灰背景終わり </span>
ここから暗灰背景 <div class="bg-dimgray"> 1
ここで暗灰背景終わり </div> 1
灰背景 <span class="bg-gray">
灰背景終わり </span>
ここから灰背景 <div class="bg-gray"> 1
ここで灰背景終わり </div> 1
鼠背景 <span class="bg-darkgray">
鼠背景終わり </span>
ここから鼠背景 <div class="bg-darkgray"> 1
ここで鼠背景終わり </div> 1
銀背景 <span class="bg-silver">
銀背景終わり </span>
ここから銀背景 <div class="bg-silver"> 1
ここで銀背景終わり </div> 1
白鼠背景 <span class="bg-gainsboro">
白鼠背景終わり </span>
ここから白鼠背景 <div class="bg-gainsboro"> 1
ここで白鼠背景終わり </div> 1
白背景 <span class="bg-white">
白背景終わり </span>
ここから白背景 <div class="bg-white"> 1
ここで白背景終わり </div> 1
透明背景 <span class="bg-transparent">
透明背景終わり </span>
ここから透明背景 <div class="bg-transparent"> 1
ここで透明背景終わり </div> 1
赤背景 <span class="bg-red">
赤背景終わり </span>
ここから赤背景 <div class="bg-red"> 1
ここで赤背景終わり </div> 1
青背景 <span class="bg-blue">
青背景終わり </span>
ここから青背景 <div class="bg-blue"> 1
ここで青背景終わり </div> 1
水背景 <span class="bg-cyan">
水背景終わり </span>
ここから水背景 <div class="bg-cyan"> 1
ここで水背景終わり </div> 1
赤紫背景 <span class="bg-magenta">
赤紫背景終わり </span>
ここから赤紫背景 <div class="bg-magenta"> 1
ここで赤紫背景終わり </div> 1
橙背景 <span class="bg-orangered">
橙背景終わり </span>
ここから橙背景 <div class="bg-orangered"> 1
ここで橙背景終わり </div> 1
/* 文字色
---------------------------------------------------------------- */
/* １Ｃ用文字色 */
.color-black { color: #000000; }
.color-dimgray { color: #696969; }
.color-gray { color: #808080; }
.color-darkgray { color: #a9a9a9; }
.color-silver { color: #c0c0c0; }
.color-gainsboro { color: #dcdcdc; }
.color-white { color: #ffffff; }
.color-transparent { color: transparent; }
/* 基本色 */
.color-red { color: #ff0000; }
.color-blue { color: #0000ff; }
.color-cyan { color: #00ffff; }
.color-magenta { color: #ff00ff; }
.color-orangered { color: #ff4500; }
/* 背景色
---------------------------------------------------------------- */
/* １Ｃ用背景色 */
.bg-black { background-color: #000000; }
.bg-dimgray { background-color: #696969; }
.bg-gray { background-color: #808080; }
.bg-darkgray { background-color: #a9a9a9; }
.bg-silver { background-color: #c0c0c0; }
.bg-gainsboro { background-color: #dcdcdc; }
.bg-white { background-color: #ffffff; }
.bg-transparent { background-color: transparent; }
/* 基本色 */
.bg-red { background-color: #ff0000; }
.bg-blue { background-color: #0000ff; }
.bg-cyan { background-color: #00ffff; }
.bg-magenta { background-color: #ff00ff; }
.bg-orangered { background-color: #ff4500; }
