38 клавиатурных сокращений, которые работают в любом браузере

Работа с вкладками :

• Ctrl+1-8 – Переключение на вкладку, положение которой на панели вкладок соответствует нажатой вами цифре.
• Ctrl+9 – Переключение на последнюю вкладку независимо от ее номера.
• Ctrl+Tab – Переключение на следующую вкладку, то есть на одну вправо.
• Ctrl+Shift+Tab – Переключение на предыдущую вкладку, то есть на одну влево.
• Ctrl+W, Ctrl+F4 – Закрыть текущую вкладку.
• Ctrl+Shift+T – Открыть повторно последнюю закрытую вкладку.
• Ctrl+T – Открыть новую вкладку.
• Ctrl+N – Открыть новое окно браузера.

Навигация:

• Alt+Стрелка Влево, Backspace – Назад.
• Alt+Стрелка Вправо, Shift+Backspace – Вперед.
• F5 – Обновить.
• Ctrl+F5 – Обновить с игнорированием кэша, то есть загрузить страницу по новой.
• Escape – Остановить загрузку.
• Alt+Home – Открыть домашнюю страницу.

Масштабирование:

• Ctrl+»+», Ctrl+Колесо мышки вверх – Увеличить.
• Ctrl+»-», Ctrl+Колесо мышки вниз — Zoom out.
• Ctrl+0 – Вернуть исходный масштаб.
• F11 – Полноэкранный режим.

Скроллинг:

• Space, Page Down – На один экран вниз.
• Shift+Space, Page Up – На один экран вверх.
• Home – В начало страницы.
• End – В конец страницы.

Адресная строка:

• Ctrl+L, Alt+D, F6 – Выделить текст в адресной строке.
• Ctrl+Enter – Автоматически добавит www. в начало и .com в конце введенного вами слова и откроет эту страницу.
• Alt+Enter – Откроет набранный адрес в новой вкладке.

Поиск:

• Ctrl+K, Ctrl+E – Фокусировка на встроенном в браузер поле поиска для ввода запроса.
• Alt+Enter – Открыть результаты поиска в новой кладке.
• Ctrl+F, F3 – Открыть инструмент поиска по текущей странице.
• Ctrl+G, F3 – Найти следующее значение при поиске по странице.
• Ctrl+Shift+G, Shift+F3 – Найти предыдущее значение при поиске по странице.

История & закладки:

• Ctrl+H – Открыть просмотр истории.
• Ctrl+J – Открыть загрузки.
• Ctrl+D – Сохранить закладку на текущий сайт
• Ctrl+Shift+Del – Открыть инструмент очистки истории, кэша, загрузок и т.д.

Другие функции:

• Ctrl+P – Печать текущей страницы.
• Ctrl+S – Сохранить страницу на жесткий диск.
• Ctrl+O – Открыть файл.
• Ctrl+U – Посмотреть код текущей страницы. (Кроме IE).

                                                                                                                                                             

Как добавить картинку вместо маркеров в списке.

Мы с вами уже изменяли, некоторым образом, оформление наших списков. Про это я рассказывал в прошлом посте: «Как изменить оформление списка»

Иногда бывают ситуации,  когда нам нужно изменить не просто стиль и цвет маркера, но и вообще сам маркер. Например, поставить вместо него какую - либо картинку.

Для этого нам понадобится сама картинка. Я рекомендую использовать небольшие изображения, примерно 16х16 рх . Следует помнить, что сам сюжет на картинке, если там таковой имеется, лучше расположить ближе к левому краю. Так  у вас будет лучше смотреться вся конструкция.

Сделать картинку можно самому. Как это сделать я рассказывал в отдельном посте. Посмотрите здесь. «Как сделать прозрачный фон укартинки»

Теперь, когда у нас есть готовая картинка, нам нужно загрузить ее в интернет и получить ссылку. Это я подробно рассказывал в посте«Как загрузить картинку в интернет и получить ссылку»

Теперь остается перейти к самому главному – редактированию нашего кода. Как вы помните из поста «списки» состоят из li ( открывающего и закрывающего) внутри  ul

<ul>

<li><a href=”Адрес”></a></li>

<li><a href=” Адрес”></a></li>

<li><a href=” Адрес”></a></li>

</ul>

Теперь, для того, чтобы поставить вместе маркера картинку, в наши список, нам остается прописать только  CSS код :

ul {

    list-style-image: url(images/book.png); /* Путь к изображению маркера */

   }

  

Все готово. Осталось только напомнить, что CSS код вставляется в блоге в разделе Шаблон – Настроить – Дополнительные – Добавить  СSS.

От себя добавлю, что код , который вы добавляете, лучше всего комментировать текстом (что это и для чего добавлено). Для добавления комментария в  CSS используйте /*---Здесь комментарий---*/ ,а в HTML <!--<комментарий>- ->
 

Сейчас рассмотрим случай, когда вам нужно изменить только один список, а не все списки в блоге.

Для этого, нам нужно присвоить списку какой либо класс. Например, вот так:

<ul class="news">

<li><a href=” Адрес”></a></li>

<li><a href=” Адрес”></a></li>

<li><a href=” Адрес”></a></li>

</ul>

А уже в  CSS написать :

.news li{

list-style-image: url(https://sites.google.com/site/youmorestop/home/arrow_1.png);

}

.news a:hover{

color:red;

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

маркером перед всеми тегами li , которые расположены внутри класса news, будет картинка, которая находится по этому адресу: https://sites.google.com/site/youmorestop/home/arrow_1.png
При наведении курсора (a:hover) на ссылку «а», которая находится внутри класса  news , цвет ссылки меняется на красный.

Результат можете посмотреть в блоге «Трейдер», раздел «Новости».Я сделал, таким образом, там страницу.
 
Вы можете использовать любые свои значения или такие де как у меня.

Бывают случаи, когда в списке нужен:
 

Нужен квадратный маркер:
list-style-type: square;

Если нам не нужен вообще маркер, то ставим:

list-style-type: none;
 

Если хотим символ вместо маркера, то например так:

li {

    list-style-type: none; /* Убираем маркеры у списка */

   }

   li:before {

    content: "ƥ "; /* Добавляем в качестве маркера символ */

   }

Надеюсь, что вам пригодится эта информация, и вы сможете красиво оформить ваш сайт. Буду рад, вашим предложениям, вопросам и комментариям. Пишите, о чем бы вы хотели прочитать в следующий раз.

                                                                                                                                                             

Как изменить оформление списка

     

Часто бывает необходимость создавать списки.

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

"Ссылки. Виды ссылок.Якоря.Всплывающие подсказки"

 

Обычный список состоит из открывающего и закрывающего тегов  ul. содержимого внутри тегов  li.

Пример простого списка:

<ul  style="color:red">

<li><a href="https://www.google.ru/">Триccc российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/" style="color:red">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

</ul>

Красным выделен тег отвечающий за цвет маркера (кружочек в данном случае). Иногда возникает необходимость изменить цвет, шрифт и фон  (background) , да и мало ли чего.
Например, у вас в блоге цвет ссылок задан голубым, а при создании меню вы хотите сделать их черными, а отдельные ссылки зелеными.

Для этого мы можем использовать class для <div>   и обернуть в него весь список.

Например:

<div class="eko"  style="border-radius: 40px 10px">

<ul style="color:red">

<li><a href="https://www.google.ru/">Триccc российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/" style="color:red">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

</ul>

</div>

А значение прописать в  CSS так:

.eko a {

width: 500px;

    background: #F3F2EE;

    padding: 5px;

    padding-right: 20px;

    border: solid 7px #94F3E9;

    border-radius: 50px

    float: left;

}

Вы обратили внимание, что вторую ссылку <li>я прописал красным непосредственно в html. И для отображения кружков перед списком красным <ul style=”color:red”>

Получается вот так: см фото.

Можно сделать весь список в одном фоне. (фото ниже)

css

.eko  {

width: 500px;

    background: #F3F2EE;

    padding: 5px;

    padding-right: 20px;

    border: solid 7px #94F3E9;

    border-radius: 50px

    float: left;

}

.eko a {

color:black;

}

Html

<div dir="ltr" style="text-align: left;" trbidi="on">

<div class="eko"  style="border-radius: 40px 10px">

<ul style="color:red">

<li><a href="https://www.google.ru/">Триccc российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/" style="color:red">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

<li><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

<br/>

</ul>

</div>

<br /></div>

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

Можно выделить только одну строку через идентификатор и задать его в CSS
Например: Добавить идентификатор в строку :

<li id="white"><a href="https://www.google.ru/">Три российских кризиса - сходства и различия</a></li>

Прописать его в CSS  так:

#white a{

color: white;

}

Получите вот так,, Я уже изменил основной текст на зеленый см.фото

               

В общем если знать,  как и что менять и что куда подставлять, то простор для творчества неограничен!