Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

Как убрать стрелочки в поле <input type="number">

CSS HTML
Чтобы убрать стрелочки у поля number добавьте свойство CSS:
Выделить
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

Для браузера Firefox можно использовать:
Выделить
input[type='number'] {
	-moz-appearance: textfield;
}
...

Стиль маркировочного списка

CSS HTML
Чтобы составить список, используют тег <li> внутри <ul> или <ol>:
Выделить
<ul>
	<li>1 элемент списка.</li>
	<li>2 элемент списка.</li>
	<li>3 элемент списка.</li>
</ul>

<ol>
	<li>элемент списка.</li>
	<li>элемент списка.</li>
	<li>элемент списка.</li>
</ol>

В этом случае, браузер отобразит списки стандартного вида:
  • 1 элемент списка.
  • 2 элемент списка.
  • 3 элемент списка.


  1. элемент списка.
  2. элемент списка.
  3. элемент списка.

Чтобы изменить марке, установите тегу <ul> CSS свойство list-style-type:
Выделить
ul {
	list-style-type: disc;
}

Вместо значения disc можно использовать circle, в таком случае, маркеры будут в виде кругляшков, а не жирных точек.

Если необходимо изменить цвет маркера, используйте свойство:
Выделить
li::marker {
	color: #008800;
}

Вместо зеленного цвета (#008800) можете написать любой другой.

Можно использовать свою картинку, как маркер. И для этого существует свойство:
Выделить
li {
	list-style-image: url('marker.png');
}

Где marker.png - это Ваша картинка....

Продвинутые CSS-селекторы

CSS HTML
Чтобы задать стиль элементу, мы используем атрибут class и id, например, у нас есть два блока, один с классом class_block, второй с идентификатором id_block:
Выделить
<div class="class_block">
    <!-- Содержимое блока -->
</div>

<div id="id_block">
    <!-- Содержимое блока -->
</div>

Зная этот класс и идентификатор, мы можем стилизовать оба блока, как нам вздумается:
Выделить
.class_block {
    /* Свойства блока с классом class_block */
}

#id_block {
    /* Свойства блока с идентификатором id_block */ 
}

Но что делать, если нам не известны названия класса и идентификатор? Возможно потому, что часть значения атрибута генерируется динамически. На помощь могут придти, так сказать продвинутые CSS-селекторы. Привожу пример динамически созданного идентификатора: 123_block - _block - постоянная часть названия идентификатора, цифры: 123 сгенерированы скриптом, в другом блоке эти цифру уже будут другие, одинаковых чисел в пределах одного документа не должно быть:
Выделить
<div id="123_
...

Как подключить highlight.js (Подсветка синтаксиса)

CSS JavaScript
Подключить highlight.js на сайте довольно просто, для этого переходим на сайт: https://highlightjs.org/ выбираем все языки, которые необходимо посветить на вашем сайте и скачиваем архив (https://highlightjs.org/download/).
Распаковываем архим, файл highlight.pack.js и один из файлов стиля (css) помещаем на вашем сайте, далее между тегами <head> и </head> подключаем файл highlight.pack.js, прописывая:
Выделить
<script type="text/javascript" src="js/highlight.pack.js"></script>

И файл стиля, например vs.css:
Выделить
<link rel="stylesheet" href="css/vs.css" />

Еще один код, который надо вставить между тегами <head> и </head>:
Выделить
<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

Теперь тот код, что надо подсветить помещаем между тегами:
Выделить
<pre><code>
    <!-- Тут код, который необходимо подсветить -->
</code></pre>

Вот и всё!

Спасибо за внимание!...
Реклама