0s3

разработка сайтов, игр, обучение

  • Я
  • Мечта
  • Философия

Работаю инженером проектировщиком, увлекаюсь веб программированием.

моё фотоЯ довольно уже древний, работаю на дядю, так как за плечами семья которую нужно обеспечивать. Мне нравится создавать сайты и игры, а когда это будет приносить достаточный доход я полностью погружусь в код.

Кормя свои мозги полезной информацией мечтаю не деградировать.

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

  • 1
  • 2
  • 3

Если вы хотите разместить свою рекламу на нашем сайте и сайтах наших друзей свяжитесь с администрацией tech@0s3.ru

более подробно.

Реклама


Веб сайт легко создать
Если все уроки выполнять

Митя



Принятые выделения на сайте 0s3.ru

Моя цель при создании различных выделений на сайте (выделение теста или фона), что бы информация была более наглядна. При этом хочется, что бы эти выделения на сайте на всех страницах были однотипны, (для этого я их свел в единый раздел "Выделения на сайте", может он больше для меня самого, хотя надеюсь данный раздел "Выделения на сайте" пригодится и Вам).Принятые выделения на сайте 0s3.ru

Раздел содержит официально принятые выделения на сайте 0S3.RU (интуитивно понятные условные обозначения). Выделения на сайте помогут вам лучше воспринять представленную информацию.

Простые выделения на сайте (обычно это изменения цвета теста и выделение его жирным текстом), я редактирую из панели веб мастера CMS в визуальном редакторе текста или непосредственно прописываю HTML код. Для более сложных выделений на сайте (что-бы в тексте не городить длинных и хитроумных конструкций, и если вдруг захочется что то изменить, достоточно будет один раз изменить стиль и все выделения на сайте относящиеся к даному стиль поменяются, да и гуру сайтостроя так и советуют делать) я залезаю в стили шаблона CMS и там один раз их прописываю присваиваю им имя (id или стиль), а в тексте вызываю их по имени. Данный способ будет описан в разделе Редактируем стили CSS

Я надеюсь Вы это давно знаете

Многие люди приходящие в раздел "Выделения на сайте" с различных поисковиков, на самом деле ищут как скопировать выделенный текст (некоторые ищут выделения на ранних сроках беременности, но эта тема на сайте 0S3.RU не рассматривается). Специально для тех, кто не знает как скопировать выделенный текст объясняю способов множество, а самый удобный и работающей во всех программах и не только с текстом данный: выделяем нужный текст мышкой, далее нажимаем на клавиатуре Ctrl и не отпуская пальца нажимаем английскую C (выделенный текст копируется в буфер обмена), а для вставке мышкой располагаем курсор в месте вставки, далее нажимаем на клавиатуре Ctrl и не отпуская пальца нажимаем английскую V
Применение: Копирование Ctrl+C, Вставка Ctrl+V

 
 

Полный перечень выделений на сайте 0S3.RU

Вкладка с дополнительной информацией

Данные вкладки содержат информацию дополняющие статью, а иногда содержащие излишние мои мысли или умные мысли других авторов.
Применение простой вкладки: {.jkefel kefelui=[sliders] title=[Заголовок вкладки]}Текст вкладки{./jkefelend} (Работает только если удалите точки возле скобок и с компонентом jkefel, более подробно смотри статью Компонент jkefel )

Закладка 1.1
Данный модуль может содержать закладки для более лучшего логического разбиения информации. Закладки можно выводить в отдельный самостоятельный модуль
Применение модуля с двумя закладками: {.jkefel title=[Закладка 1.1] kefelui=[tabs]} Текст закладки 1.1 {/.jkefel} {.jkefel title=[Закладка 1.2]} Текст закладки 1.2 {/.jkefelend}
 
Закладка 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)
 
 
 
 

Простой отделитель - (простая сплошная горизонтальная линия) разделяет представленную информацию, улучшает визуально логическое восприятие текста.
Применение:

<hr />


Фигурный отделитель - (сплошная горизонтальная линия с красивой завитушкой по центру) разделяет блоки представленной информации, улучшает визуально логическое восприятие текста.

Применение

Код CSS:

/* =============== Фигурный отделитель =============== */
hr.line-dots {/* Нормальное состояние */
  border: none;/* Отказ от обрамления */
  padding: 1em 0;/* Поля вокруг текста */
  background: url(../images/bg_pattern.png) center no-repeat;/* Путь к рисунку с красивой завитушкой */
}
 

Код HTML

<hr class="line-dots" />

 
 

Самое важное – слово на котором акцентируется внимание пользователя выделяется красным "red" (#FF0000) жирным шрифтом, а при новедении мышки увеличивается размер, меняется цвет текста и фона.

Применение

Код 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

<span class="text-best">Самое важное </span>

 
 

Главное – слова к которым привлекается внимание пользователя выделяется красным "red" (#FF0000) жирным шрифтом, а при новедении мышки меняется цвет текста и фона.

Применение

Код 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

<span class="text-glav">Главное в тексте</span>
 

 
 

Будущий раздел - тема заслуживающая полного развернутого пояснения, но по тем или иным причинам ещё не освещенная на сайте , выделяется оливковым "olive" (#808000) жирным шрифтом, при наведении мышкт текст становится наклонным.

Применение

Код CSS:

/* =============== Будующий раздел =============== */
.text-bydy {/* Нормальное состояние */
  font-weight: 600;/* Жирное начертание */
  color: #808000;/* Цвет текста */
}
.text-bydy:hover {/* Состояние при новедении мышки */
  font-style: oblique;/* Наклон текста */
}
 

Код HTML

<span class="text-bydy">Будующий раздел</span>
 

 
 

Ключевые словосочетания – для поисковой оптимизации в тексте Ключевые словосочетания выделяются темно зеленым "dark green" (#003300) жирным шрифтом. В SEO оптимизации сайта ключевые словосочетания желательно использовать как Мета-тег Keywords.

Применение

Код CSS:

/* =============== Ключевые словосочетания =============== */
.text-klych {/* Нормальное состояние */
  font-weight: 600;/* Жирное начертание */
  padding: 1px 2px;/* Размер отступов от теста для блока */
  color: #003300;/* Цвет текста */
}
.text-klych:hover {/* Состояние при новедении мышки */
  color: #000099; /* Цвет текста */
}
 

Код HTML

<span class="text-klych">Ключевые словосочетания</span>
 

 
 

Примечания - небольшие пометки полезные посетителям сайта 0S3.RU выделяется зеленым морским "sea green" (#339966) шрифтом.

Применение

Код 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

<span class="text-prim">Примечание</span>
 

 
 

Дополнения - информация для служебного пользования, но также полезная посетителям сайта 0S3.RU.

Применение

Код 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

<span class="text-dop">Дополнения</span>
 

 
 

  • Стиль не нумерованного списка, применяется для улучшения визуального восприятия списка
  • Также можно изменить расцветки стрелочек(вместо red указываем синий цвет blue или зеленый green )

Применение

Код 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> 
 

 
 

  • 1 Стиль нумерованного списка, применяется для улучшения визуального восприятия списка
  • 2Также можно изменить расцветки фона блоков(вместо orange указываем по английски синий цвет blue , зеленый green , красный red , или фиолетовый violet )

Применение

Код 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> 
 

 
 

выделения на сайте 2


Аннотация – краткая характеристика и основные выводы приведенного текста, (дополняется рисунком). В SEO оптимизации сайта аннотацию желательно использовать как мета-тег Description.

Применение

Код CSS:

/* =============== Блок анатации =============== */
.text-info {
  border-top: 2px solid #B7D2F2;/* Линия сверху текста */
  border-bottom: 2px solid #B7D2F2;/* Линия снизу текста */
  background: #DBE7F8  no-repeat;/* Цвет фона и отменяем повторение фона */
}
 

Код HTML

<span class="text-info">Блок анатации</span>
 

 
 

Важная информация - используется при необходимости сообщить посетителю веб ресурса важную информацию.

Применение

Код 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

<span class="text-alert">Блок важной информации</span>
 

 
 

Внутренняя ссылка– ссылка на какой либо ресурс (раздел или статью) данного сайта выделяются темно зеленым "dark green" ( #003300) подчеркнутым жирным шрифтом, при наведении мышкой ссылка берется в коричневый прямоугольник.

Применение

Код 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

<a class="link-vnut" href="http://0s3.ru/">Внутренняя ссылка</a>
 

 
 

Внешняя ссылка– ссылка на какой либо ресурс (раздел или статью) стороннего сайта выделяются синим "blue" (#0000ff) подчеркнутым жирным шрифтом, при наведении мышкой ссылка меняет свой цвет на вишневый.

Применение

Код 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

<a class="link-vneh" href="http://0s3.ru/">Внешняя ссылка</a>