Моя цель при создании различных выделений на сайте (выделение теста или фона), что бы информация была более наглядна. При этом хочется, что бы эти выделения на сайте на всех страницах были однотипны, (для этого я их свел в единый раздел "Выделения на сайте", может он больше для меня самого, хотя надеюсь данный раздел "Выделения на сайте" пригодится и Вам).
Раздел содержит официально принятые выделения на сайте 0S3.RU (интуитивно понятные условные обозначения). Выделения на сайте помогут вам лучше воспринять представленную информацию.
Простые выделения на сайте (обычно это изменения цвета теста и выделение его жирным текстом), я редактирую из панели веб мастера CMS в визуальном редакторе текста или непосредственно прописываю HTML код. Для более сложных выделений на сайте (что-бы в тексте не городить длинных и хитроумных конструкций, и если вдруг захочется что то изменить, достоточно будет один раз изменить стиль и все выделения на сайте относящиеся к даному стиль поменяются, да и гуру сайтостроя так и советуют делать) я залезаю в стили шаблона CMS и там один раз их прописываю присваиваю им имя (id или стиль), а в тексте вызываю их по имени. Данный способ будет описан в разделе Редактируем стили CSS
{jkefel kefelui=[sliders] title=[Я надеюсь Вы это давно знаете]}
Многие люди приходящие в раздел "Выделения на сайте" с различных поисковиков, на самом деле ищут как скопировать выделенный текст (некоторые ищут выделения на ранних сроках беременности, но эта тема на сайте 0S3.RU не рассматривается). Специально для тех, кто не знает как скопировать выделенный текст объясняю способов множество, а самый удобный и работающей во всех программах и не только с текстом данный: выделяем нужный текст мышкой, далее нажимаем на клавиатуре Ctrl и не отпуская пальца нажимаем английскую C (выделенный текст копируется в буфер обмена), а для вставке мышкой располагаем курсор в месте вставки, далее нажимаем на клавиатуре Ctrl и не отпуская пальца нажимаем английскую V
Применение: Копирование Ctrl+C, Вставка Ctrl+V
{/jkefelend}
Полный перечень выделений на сайте 0S3.RU
{jkefel kefelui=[sliders] title=[Вкладка с дополнительной информацией ]}
Данные вкладки содержат информацию дополняющие статью, а иногда содержащие излишние мои мысли или умные мысли других авторов.
Применение простой вкладки: {.jkefel kefelui=[sliders] title=[Заголовок вкладки]}Текст вкладки{./jkefelend} (Работает только если удалите точки возле скобок и с компонентом jkefel, более подробно смотри статью Компонент jkefel )
{jkefel title=[Закладка 1.1 ] kefelui=[tabs]} Данный модуль может содержать закладки для более лучшего логического разбиения информации. Закладки можно выводить в отдельный самостоятельный модуль
Применение модуля с двумя закладками: {.jkefel title=[Закладка 1.1] kefelui=[tabs]} Текст закладки 1.1 {/.jkefel} {.jkefel title=[Закладка 1.2]} Текст закладки 1.2 {/.jkefelend} {/jkefel} {jkefel title=[Закладка 1.2 ]} В примере приведен код показанного на данной странице модуля
Применение вкладки с двумя закладками: {.jkefel kefelui=[sliders] title=[Вкладка 1]}Текст закладки 1 {.jkefel title=[Закладка 1.1] kefelui=[tabs]} Текст закладки 1.1 {/.jkefel} {.jkefel title=[Закладка 1.2]} Текст закладки 1.2 {/.jkefelend}{/.jkefelend} (повторюсь, работает только если удалите точки возле скобок и с компонентом jkefel){/jkefelend}{/jkefelend}
Простой отделитель - (простая сплошная горизонтальная линия) разделяет представленную информацию, улучшает визуально логическое восприятие текста.
Применение:
<hr />
Фигурный отделитель - (сплошная горизонтальная линия с красивой завитушкой по центру) разделяет блоки представленной информации, улучшает визуально логическое восприятие текста.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Фигурный отделитель =============== */
hr.line-dots {/* Нормальное состояние */
border: none;/* Отказ от обрамления */
padding: 1em 0;/* Поля вокруг текста */
background: url(../images/bg_pattern.png) center no-repeat;/* Путь к рисунку с красивой завитушкой */
}
Код HTML
<hr class="line-dots" />
{/jkefelend}
Самое важное – слово на котором акцентируется внимание пользователя выделяется красным "red" (#FF0000) жирным шрифтом, а при новедении мышки увеличивается размер, меняется цвет текста и фона.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Очень важное в тексте =============== */
.text-best {/* Нормальное состояние */
font-weight: 600;/* Жирное начертание */
padding: .1em .2em;/* Размер отступов от теста для блока */
color: #FF0000;/* Цвет текста */
}
.text-best:hover {/* Состояние при новедении мышки */
font-style: oblique;/* Наклон текста */
font-size: 110%;/* Размер шрифта */
font-variant: small-caps; /* Устанавливаем капитель для заголовка */
text-shadow: 2px 2px 1px #FFFFFF/* Параметры тени */, 0 0 1em #CCFFFF; /* Параметры расеивания */
background-color: #CC0000;/* Цвет фона */
color: #000066; /* Цвет текста */
}
Код HTML
Самое важное
{/jkefelend}
Главное – слова к которым привлекается внимание пользователя выделяется красным "red" (#FF0000) жирным шрифтом, а при новедении мышки меняется цвет текста и фона.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Главное в тексте =============== */
.text-glav {/* Нормальное состояние */
font-weight: 600;/* Жирное начертание */
padding: .2em .5em;/* Размер отступов от теста для блока */
color: #FF0000;/* Цвет текста */
}
.text-glav:hover {/* Состояние при новедении мышки */
font-style: oblique;/* Наклон текста */
font-variant: small-caps; /* Устанавливаем капитель для заголовка */
text-shadow: 2px 2px 1px #FFFFFF/* Параметры тени */, 0 0 1em #CCFFFF; /* Параметры расеивания */
background-color: #CC0000;/* Цвет фона */
color: #000066; /* Цвет текста */
}
Код HTML
Главное в тексте
{/jkefelend}
Будущий раздел - тема заслуживающая полного развернутого пояснения, но по тем или иным причинам ещё не освещенная на сайте , выделяется оливковым "olive" (#808000) жирным шрифтом, при наведении мышкт текст становится наклонным.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Будующий раздел =============== */
.text-bydy {/* Нормальное состояние */
font-weight: 600;/* Жирное начертание */
color: #808000;/* Цвет текста */
}
.text-bydy:hover {/* Состояние при новедении мышки */
font-style: oblique;/* Наклон текста */
}
Код HTML
Будующий раздел
{/jkefelend}
Ключевые словосочетания – для поисковой оптимизации в тексте Ключевые словосочетания выделяются темно зеленым "dark green" (#003300) жирным шрифтом. В SEO оптимизации сайта ключевые словосочетания желательно использовать как Мета-тег Keywords.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Ключевые словосочетания =============== */
.text-klych {/* Нормальное состояние */
font-weight: 600;/* Жирное начертание */
padding: 1px 2px;/* Размер отступов от теста для блока */
color: #003300;/* Цвет текста */
}
.text-klych:hover {/* Состояние при новедении мышки */
color: #000099; /* Цвет текста */
}
Код HTML
Ключевые словосочетания
{/jkefelend}
Примечания - небольшие пометки полезные посетителям сайта 0S3.RU выделяется зеленым морским "sea green" (#339966) шрифтом.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Примечание =============== */
.text-prim {/* Нормальное состояние */
padding: .2em .5em;/* Размер отступов от теста для блока */
color: #339966;/* Цвет текста */
}
.text-prim:hover {/* Состояние при новедении мышки */
text-shadow: 1px 1px 2px #000033/* Параметры тени */, 0 0 1em #000066; /* Параметры расеивания */
background-color: #CCFFFF;/* Цвет фона */
color: #FFFFFF; /* Цвет текста */
}
Код HTML
Примечание
{/jkefelend}
Дополнения - информация для служебного пользования, но также полезная посетителям сайта 0S3.RU.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Дополнения =============== */
.text-dop {/* Нормальное состояние */
padding: .1em .2em;/* Размер отступов от теста для блока */
background-color: #FFCC99;/* Цвет фона */
}
.text-dop:hover {/* Состояние при новедении мышки */
text-shadow: 1px 1px 1px #FFFFFF/* Параметры тени */, 0 0 2em #FFCCFF; /* Параметры расеивания */
background-color: #33CC33;/* Цвет фона */
color: #000033; /* Цвет текста */
}
Код HTML
Дополнения
{/jkefelend}
- Стиль не нумерованного списка, применяется для улучшения визуального восприятия списка
- Также можно изменить расцветки стрелочек(вместо red указываем синий цвет blue или зеленый green )
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* ----- Стиль не нумерованного списка ----- */
ul.list-arrow {
list-style: none;/* Стиль маркера */
}
ul.list-arrow li {
margin-left: 0;/* Отступ слева */
padding-left: 16px;/* Поле слева */
position: relative;/* Относительное позиционирование */
display: block;/* Устанавливаем как блочный элемент */
}
ul.list-arrow li:after {
content: '';/* Добавляемый текст */
height: 0;/* Высота блока */
position: absolute;/* Абсолютное позиционирование */
width: 0;/* Ширина блока */
border: 0.34em solid transparent; /* Параметры рамки */
left: 5px;/* Положение от левого края */
top: 4px;/* Положение от верхнего края */
}
ul.list-arrow.arrow-red li:after {
border-left-color: #AE0000;/* Цвет элимента слева */
}
ul.list-arrow.arrow-blue li:after {
border-left-color:#0060BF;/* Цвет элимента слева */
}
ul.list-arrow.arrow-green li:after {
border-left-color: #3AA655;/* Цвет элимента слева */
}
Код HTML
<ul class="list-arrow arrow-red">
<li>Текст строки</li>
<li>Текст строки</li></ul>
{/jkefelend}
- 1 Стиль нумерованного списка, применяется для улучшения визуального восприятия списка
- 2Также можно изменить расцветки фона блоков(вместо orange указываем по английски синий цвет blue , зеленый green , красный red , или фиолетовый violet )
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* ----- Стиль нумерованного списка ----- */
ul.list-number-bullet {
list-style: none; /* Стиль маркера */
}
ul.list-number-bullet li {
position: relative;/* Относительное позиционирование */
margin-left: 0;/* Отступ слева */
padding: 6px 0 6px 36px;/* Поля */
}
ul.list-number-bullet li .jsn-listbullet {
display: block;/* Устанавливаем как блочный элемент */
width: 32px;/* Ширина блока */
font-weight: bold;/* Полу жирное начертание */
position: absolute;/* Абсолютное позиционирование */
left: 0;/* Положение от левого края */
top: -2px;/* Положение от верхнего края */
}
ul.list-number-bullet li .jsn-listbullet {
height: 32px;/* Высота блока */
line-height: 32px;/* Межстрочный интервал */
text-align: center;/* Выравнивание по центру */
font-size: 14px;/* Размер текста */
color: #fff;/* Цвет текста */
background: url(../images/icons/icons-bullet.png) no-repeat 0 top;/* Цвет фона, путь к фоновому изображению и отменяем повторение фона */
}
ul.list-number-bullet.bullet-blue li .jsn-listbullet {
background-position: 0 0;/* Положение фона */
}
ul.list-number-bullet.bullet-green li .jsn-listbullet {
background-position: 0 -102px;/* Положение фона */
}
ul.list-number-bullet.bullet-grey li .jsn-listbullet {
background-position: 0 -204px;/* Положение фона */
}
ul.list-number-bullet.bullet-orange li .jsn-listbullet {
background-position: 0 -306px;/* Положение фона */
}
ul.list-number-bullet.bullet-red li .jsn-listbullet {
background-position: 0 -408px;/* Положение фона */
}
ul.list-number-bullet.bullet-violet li .jsn-listbullet {
background-position: 0 -510px;/* Положение фона */
}
/* ----- Отдельно прописываются цвета ----- */
ul.list-number-digit.digit-blue li .jsn-listbullet {
color: #009aca;/* Цвет фона */
}
ul.list-number-digit.digit-green li .jsn-listbullet {
color: #429e00;/* Цвет фона */
}
ul.list-number-digit.digit-grey li .jsn-listbullet {
color: #999999;/* Цвет фона */
}
ul.list-number-digit.digit-orange li .jsn-listbullet {
color: #e66000;/* Цвет фона */
}
ul.list-number-digit.digit-red li .jsn-listbullet {
color: #bf0000;/* Цвет фона */
}
ul.list-number-digit.digit-violet li .jsn-listbullet {
color: #9e0084;/* Цвет фона */
}
(необходимо ещё небольшой скрипт прописать)
Код HTML
<ul class="list-number-bullet bullet-orange">
<li><span class="jsn-listbullet"> № строки (1)</span> Текст строки</li>
<li><span class="jsn-listbullet"> № строки (2)</span> Текст строки</li>
</ul>
{/jkefelend}
Аннотация – краткая характеристика и основные выводы приведенного текста, (дополняется рисунком). В SEO оптимизации сайта аннотацию желательно использовать как мета-тег Description.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Блок анатации =============== */
.text-info {
border-top: 2px solid #B7D2F2;/* Линия сверху текста */
border-bottom: 2px solid #B7D2F2;/* Линия снизу текста */
background: #DBE7F8 no-repeat;/* Цвет фона и отменяем повторение фона */
}
Код HTML
Блок анатации
{/jkefelend}
Важная информация - используется при необходимости сообщить посетителю веб ресурса важную информацию.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* =============== Блок важной информации =============== */
.text-alert {
border-top: 2px solid #FEABAB;/* Линия сверху текста */
border-bottom: 2px solid #FEABAB;/* Линия снизу текста */
background: #FFDFDF url(../images/icons/icon-text-alert.png) no-repeat;/* Цвет фона, путь к изображению и отменяем повторение фона (изображения) */
}
Код HTML
Блок важной информации
{/jkefelend}
Внутренняя ссылка– ссылка на какой либо ресурс (раздел или статью) данного сайта выделяются темно зеленым "dark green" ( #003300) подчеркнутым жирным шрифтом, при наведении мышкой ссылка берется в коричневый прямоугольник.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* ----- Внутрение ссылки----- */
.link-vnut {/* Нормальное состояние */
font-weight: 600;/* Жирное начертание */
color: #003300;/* Цвет текста */
padding: 2px 5px;/* Размер отступов от теста для блока */
text-decoration: underline;/* Подчеркивание текста */
}
.link-vnut:hover {/* Состояние при новедении мышки */
color: #ffffff;/* Цвет текста */
text-decoration: underline;/* Подчеркивание текста */
background-color: #330000;/* Цвет фона */
}
.link-vnut:visited {/* Состояние после посещения */
color: #FF0000;/* Цвет текста */
text-decoration: underline;/* Подчеркивание текста */
}
Код HTML
Внутренняя ссылка
{/jkefelend}
Внешняя ссылка– ссылка на какой либо ресурс (раздел или статью) стороннего сайта выделяются синим "blue" (#0000ff) подчеркнутым жирным шрифтом, при наведении мышкой ссылка меняет свой цвет на вишневый.
{jkefel kefelui=[sliders] title=[Применение]}
Код CSS:
/* ----- Внешние ссылки----- */
.link-vneh {/* Нормальное состояние */
font-weight: 600;/* Жирное начертание */
color: #0000FF;/* Цвет текста */
padding: 2px 5px;/* Размер отступов от теста для блока */
text-decoration: underline;/* Подчеркивание текста */
}
.link-vneh:hover {/* Состояние при новедении мышки */
color: #FFFF99;/* Цвет текста */
text-decoration: underline;/* Подчеркивание текста */
background-color: #0000FF;/* Цвет фона */
}
.link-vneh:visited {/* Состояние после посещения */
color: #003333;/* Цвет текста */
text-decoration: underline;/* Подчеркивание текста */
}
Код HTML
Внешняя ссылка
{/jkefelend}