<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-748777295029581223</id><updated>2025-11-20T14:59:28.986+07:00</updated><category term="Blogger.com"/><category term="вёрстка"/><category term="css"/><category term="javascript"/><category term="правим шаблоны blogspot"/><category term="советы по настройке"/><category term="firefox"/><category term="блогеру на заметку"/><category term="утилиты онлайн"/><category term="перевод"/><category term="html для начинающих"/><category term="всячина"/><category term="личная эффективность"/><category term="экранирование символов"/><category term="экранирование строк"/><category term="notepad++"/><category term="сайтостроение новичкам"/><category term="системы счисления"/><category term="liveinternet.ru"/><category term="видео"/><category term="домены"/><category term="мотивация"/><category term="социальные сети"/><category term="хостинг"/><title type='text'>Уроки HTML и CSS | Создание сайтов | Личная эффективность</title><subtitle type='html'></subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default?start-index=26&amp;max-results=25&amp;redirect=false'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>60</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-1706437302081206920</id><published>2015-08-23T22:07:00.000+07:00</published><updated>2015-08-24T13:56:50.158+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="личная эффективность"/><title type='text'>Повышаем работоспособность. Как успевать больше и уставать меньше.</title><content type='html'>&lt;style&gt;
img.left {
    float: left;
    padding: 0.1em;
    padding-right: 1em;
}
&lt;/style&gt;

&lt;img src=&quot;https://lh3.googleusercontent.com/-n_OIfQBHhn4/VdSEOdGRHMI/AAAAAAAAAKY/3PwH1r4dphw/s400-Ic42/wpid-qXBVakkXKUQ.jpg&quot; class=&#39;left&#39;&gt;

&lt;p&gt;Лень и недостаточная работоспособность — проблема, с которой сталкивался каждый из нас. Особенно остро она стоит перед бизнесменами, фрилансерами, блог&amp;shy;ге&amp;shy;ра&amp;shy;ми, манимейкерами. В ин&amp;shy;тер&amp;shy;не&amp;shy;те вы можете найти огромное количество методик повышения про&amp;shy;дук&amp;shy;тив&amp;shy;нос&amp;shy;ти, основанных на самых раз&amp;shy;но&amp;shy;об&amp;shy;раз&amp;shy;ных подходах: приём стимуляторов, дробный сон, НЛП, «работа над мотивацией», методика малых дел, тайм-менеджмент, Getting Things Done и так далее. Я скажу вам просто: &lt;b&gt;большинство этих методов — полная херня&lt;/b&gt;.&lt;/p&gt;

&lt;p&gt;Почему херня? Потому что простые решения — наиболее эффективные. Вам не обязательно глотать таблетки или сидеть 3 часа в позе ло&amp;shy;то&amp;shy;са, вы&amp;shy;ра&amp;shy;ба&amp;shy;ты&amp;shy;вая правильную мотивацию, чтобы перестать чувствовать себя размазнёй на рабочем месте.&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2015/08/kak-uspevat-bolshe.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/1706437302081206920/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2015/08/kak-uspevat-bolshe.html#comment-form' title='Комментарии: 3'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/1706437302081206920'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/1706437302081206920'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2015/08/kak-uspevat-bolshe.html' title='Повышаем работоспособность. Как успевать больше и уставать меньше.'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-n_OIfQBHhn4/VdSEOdGRHMI/AAAAAAAAAKY/3PwH1r4dphw/s72-c-Ic42/wpid-qXBVakkXKUQ.jpg" height="72" width="72"/><thr:total>3</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-5997672402142263417</id><published>2015-07-21T10:56:00.000+07:00</published><updated>2015-08-31T11:15:29.936+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="firefox"/><category scheme="http://www.blogger.com/atom/ns#" term="советы по настройке"/><title type='text'>Как выделить и скопировать часть теста внутри ссылки в браузерах Firefox, Chrome и Opera</title><content type='html'>&lt;p&gt;В старой Опере была замечательная возможность: текст, являющийся ссылкой, можно было выделить мышкой и скопировать так же, как и обычный текст страницы сайта. При этом возможность перетащить ссылку мышкой на панель закладок или в другую программу также оставалась.&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2015/07/kak-vydelit-tekst-v-ssylke.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/5997672402142263417/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2015/07/kak-vydelit-tekst-v-ssylke.html#comment-form' title='Комментарии: 2'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5997672402142263417'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5997672402142263417'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2015/07/kak-vydelit-tekst-v-ssylke.html' title='Как выделить и скопировать часть теста внутри ссылки в браузерах Firefox, Chrome и Opera'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-2894169712865899572</id><published>2015-07-12T18:32:00.000+07:00</published><updated>2015-07-12T19:02:11.202+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="firefox"/><category scheme="http://www.blogger.com/atom/ns#" term="советы по настройке"/><title type='text'>Запуск Firefox в полноэкранном режиме</title><content type='html'>&lt;p&gt;В этой заметке я расскажу, как запускать Firefox в полноэкранном режиме.&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2015/07/zapusk-firefox-v-polnoekrannom-rezhime.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/2894169712865899572/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2015/07/zapusk-firefox-v-polnoekrannom-rezhime.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/2894169712865899572'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/2894169712865899572'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2015/07/zapusk-firefox-v-polnoekrannom-rezhime.html' title='Запуск Firefox в полноэкранном режиме'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-940423830818926065</id><published>2015-06-24T20:30:00.000+07:00</published><updated>2015-08-21T17:04:39.096+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="личная эффективность"/><category scheme="http://www.blogger.com/atom/ns#" term="мотивация"/><title type='text'>Мотивирующие картинки для работы и бизнеса</title><content type='html'>&lt;p style=&quot;text-align: center&quot;&gt;
    &lt;img src=&quot;https://lh3.googleusercontent.com/-EANXQ8m1ZbI/VdQbP1-m6ZI/AAAAAAAAACQ/nN5h8mwNSwk/s800-Ic42/J2d74kgyqbU.jpg&quot;&gt;
&lt;/p&gt;

&lt;p&gt;Подборка мотивационных картинок и цитат о работе, бизнесе и жизни. Мотивирующие картинки помогут вам настроиться на рабочий лад и продолжить двигаться в направлении успеха!&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2015/06/motiviruyushchie-kartinki.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/940423830818926065/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2015/06/motiviruyushchie-kartinki.html#comment-form' title='Комментарии: 16'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/940423830818926065'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/940423830818926065'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2015/06/motiviruyushchie-kartinki.html' title='Мотивирующие картинки для работы и бизнеса'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-EANXQ8m1ZbI/VdQbP1-m6ZI/AAAAAAAAACQ/nN5h8mwNSwk/s72-c-Ic42/J2d74kgyqbU.jpg" height="72" width="72"/><thr:total>16</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-3394326843894000949</id><published>2015-04-03T20:11:00.000+07:00</published><updated>2015-04-03T20:25:04.887+07:00</updated><title type='text'>Тест зрительной памяти</title><content type='html'>&lt;p&gt;Этот тест предназначен для проверки и тренировки вашей зрительной памяти. Знаете ли вы, что когда учёные провели тестирование зрительной памяти шимпанзе, они были поражены: эти обезьяны способны запоминать точное расположение 7 предметов менее чем за 200 миллисекунд (одна пятая доля секунды)! Этот удивительный навык помогает им выживать в дикой природе.&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2015/04/test-zritelnoy-pamyati.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/3394326843894000949/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2015/04/test-zritelnoy-pamyati.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/3394326843894000949'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/3394326843894000949'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2015/04/test-zritelnoy-pamyati.html' title='Тест зрительной памяти'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://img.youtube.com/vi/3N8Mg95uVSM/default.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-277360868836143824</id><published>2015-04-02T15:37:00.000+07:00</published><updated>2015-04-02T19:30:32.010+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="домены"/><category scheme="http://www.blogger.com/atom/ns#" term="сайтостроение новичкам"/><category scheme="http://www.blogger.com/atom/ns#" term="хостинг"/><title type='text'>Что такое домен и хостинг</title><content type='html'>&lt;p&gt;При общении с клиентами, заинтересованными в разработке сайта, время от времени приходится объяснять некоторые вещи, очевидные специалисту, но непонятные клиенту. Одна из таких вещей — понятия домен и хостинг. Что за этими понятиями стоит и зачем они нужны. Что ж, давайте разбираться. Я постараюсь объяснить всё максимально простым языком, но в то же время не упустив важных деталей.&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2015/04/chto-takoe-domen-i-hosting.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/277360868836143824/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2015/04/chto-takoe-domen-i-hosting.html#comment-form' title='Комментарии: 5'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/277360868836143824'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/277360868836143824'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2015/04/chto-takoe-domen-i-hosting.html' title='Что такое домен и хостинг'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>5</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-7302928919767963301</id><published>2014-11-05T17:59:00.000+07:00</published><updated>2015-08-21T18:07:06.298+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="личная эффективность"/><title type='text'>Эффективный способ поиска работы в сети Интернет</title><content type='html'>&lt;p&gt;Расскажу о паре нестандартных — и поэтому эффективных — способов поиска работы в интернете.&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2014/11/kak-najti-rabotu-v-seti.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/7302928919767963301/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/11/kak-najti-rabotu-v-seti.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/7302928919767963301'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/7302928919767963301'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/11/kak-najti-rabotu-v-seti.html' title='Эффективный способ поиска работы в сети Интернет'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-4039504060946336849</id><published>2014-08-23T16:10:00.000+08:00</published><updated>2015-09-01T16:13:18.296+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Делаем для сайта слайдер на CSS. Часть 4. Красивый слайдер с прокруткой.</title><content type='html'>&lt;p&gt;В предыдущей статье мы остановились на том что сделали симпатичный слайдер с прокруткой. В этой статье я покажу доработанный вариант этого слайдера, имеющий большее разнообразие эффектов анимации.&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/krasivyj-css-slider-chast-4.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/4039504060946336849/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/krasivyj-css-slider-chast-4.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/4039504060946336849'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/4039504060946336849'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/krasivyj-css-slider-chast-4.html' title='Делаем для сайта слайдер на CSS. Часть 4. Красивый слайдер с прокруткой.'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s72-c-Ic42/00099_manaisland_1920x1200.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-1205464188820173502</id><published>2014-08-23T13:51:00.000+08:00</published><updated>2015-09-01T13:52:41.739+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Делаем для сайта слайдер на CSS. Часть 3.</title><content type='html'>&lt;p&gt;Два рассмотренных ранее слайдера использовали эффект полупрозрачности для перехода от одного изображения к другому. Но что если мы хотим сделать листание изображений с эффектом прокрутки? Старое изображение уезжает за пределы слайдера, а новое выезжает с другой стороны — возможно ли добиться такой анимации? Возможно. Посмотрим, как это сделать.&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/css-slider-dlja-sajta-chast-3.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/1205464188820173502/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-slider-dlja-sajta-chast-3.html#comment-form' title='Комментарии: 4'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/1205464188820173502'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/1205464188820173502'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-slider-dlja-sajta-chast-3.html' title='Делаем для сайта слайдер на CSS. Часть 3.'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s72-c-Ic42/00099_manaisland_1920x1200.jpg" height="72" width="72"/><thr:total>4</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-7298348861525051652</id><published>2014-08-22T19:59:00.000+08:00</published><updated>2015-09-01T10:46:38.584+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Как сделать слайдер на CSS и HTML. Часть 2.</title><content type='html'>&lt;p&gt;В предыдущей статье мы рассмотрели, &lt;a href=&quot;http://www.helpful-stuff.ru/2014/08/kak-sdelat-slider-na-css.html&quot;&gt;как сверстать простой слайдер при помощи CSS без использования JS-скриптов&lt;/a&gt;. Сейчас разберём еще один вариант оформления слайдера — с кнопками «вперёд» и «назад».&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/kak-sdelat-slider-na-css-chast-2.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/7298348861525051652/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/kak-sdelat-slider-na-css-chast-2.html#comment-form' title='Комментарии: 10'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/7298348861525051652'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/7298348861525051652'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/kak-sdelat-slider-na-css-chast-2.html' title='Как сделать слайдер на CSS и HTML. Часть 2.'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s72-c-Ic42/00099_manaisland_1920x1200.jpg" height="72" width="72"/><thr:total>10</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-9101123487583857726</id><published>2014-08-22T15:12:00.000+08:00</published><updated>2015-08-31T15:25:21.469+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Как сделать слайдер на CSS и HTML, без Javascript</title><content type='html'>&lt;p&gt;В одной из предыдущих статей мы рассмотрели, &lt;a href=&#39;http://www.helpful-stuff.ru/2014/08/kak-sdelat-vkladki-na-css-chast-vtoraya.html&#39;&gt;как сделать вкладки на &lt;b&gt;CSS&lt;/b&gt; при помощи трюка с радио-кнопками&lt;/a&gt;. В этой статье мы при помощи аналогичного подхода создадим симпатичный слайдер, не требующий &lt;b&gt;Javascript&lt;/b&gt; для работы.&lt;/p&gt; 

&lt;p&gt;Слайдеры, как правило делаются с использованием &lt;b&gt;Javascript&lt;/b&gt;. Обычно для этого задействуют библиотеку &lt;b&gt;JQuery&lt;/b&gt;. Хотя &lt;b&gt;CSS&lt;/b&gt; и не позволяет создать полнофункциональный слайдер с кучей возможностей, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие продвинутые возможности и не требуются.&lt;/p&gt;

&lt;p&gt;Простой слайдер для блога гораздо проще сверстать на чистом &lt;b&gt;HTML&lt;/b&gt; и &lt;b&gt;CSS&lt;/b&gt;, чем задействовать для этого возможности &lt;b&gt;Javascript&lt;/b&gt;. Во-первых, код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Во-вторых, та часть пользователей, которая параноидально не доверяет сайтам и заходит на незнакомые сайты только с аддоном NoScript, вырезающим весь JS-код, тоже сможет воспользоваться вашим слайдером.&lt;/p&gt;

&lt;p&gt;Поехали!&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/kak-sdelat-slider-na-css.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/9101123487583857726/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/kak-sdelat-slider-na-css.html#comment-form' title='Комментарии: 18'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/9101123487583857726'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/9101123487583857726'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/kak-sdelat-slider-na-css.html' title='Как сделать слайдер на CSS и HTML, без Javascript'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s72-c-Ic42/00099_manaisland_1920x1200.jpg" height="72" width="72"/><thr:total>18</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-227346217223337088</id><published>2014-08-16T18:28:00.000+08:00</published><updated>2015-09-04T18:31:27.042+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Верстаем панель вкладок для сайта. Часть 4.</title><content type='html'>
&lt;style&gt;
    .notebookC &gt; h3 {
        font-size: 13px !important;
        color: #777 !important;
        font-weight: normal !important;
    }
&lt;/style&gt;

&lt;p&gt;В предыдущей статье мы смогли создать красивую и технологичную панель вкладок с использованием &lt;b&gt;:target&lt;/b&gt; и даже сделали приятную анимацию переключения вкладок. Однако панель вкладок получилась фиксированного размера. Можно ли её переверстать так, чтобы высота панели менялась в зависимости от содержимого вкладок?&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/delaem-vkladki-na-css-chast-4.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/227346217223337088/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/delaem-vkladki-na-css-chast-4.html#comment-form' title='Комментарии: 1'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/227346217223337088'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/227346217223337088'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/delaem-vkladki-na-css-chast-4.html' title='Верстаем панель вкладок для сайта. Часть 4.'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s72-c-Ic42/00099_manaisland_1920x1200.jpg" height="72" width="72"/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-7804663237837654421</id><published>2014-08-15T18:35:00.000+08:00</published><updated>2015-09-02T19:08:51.841+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Делаем на CSS панель вкладок для сайта. Часть 3.</title><content type='html'>&lt;style&gt;
    .notebookA  &gt; * &gt; *:first-child,
    .notebookA1 &gt; * &gt; *:first-child,
    .notebookA2 &gt; * &gt; *:first-child,
    .notebookA3 &gt; * &gt; *:first-child,
    .notebookA4 &gt; * &gt; *:first-child,
    .notebookB  &gt; * &gt; *:first-child {
        font-size: 13px !important;
        color: #777 !important;
        font-weight: normal !important;
    }
&lt;/style&gt;

&lt;p&gt;Ранее мы рассмотрели два способа создания панели вкладок для сайта: &lt;a href=&#39;http://www.helpful-stuff.ru/2012/10/kak-sdelat-vkladki-na-css-bez-javascript.html&#39;&gt;первый&lt;/a&gt; на основе якорей и свойства &lt;b&gt;overflow&lt;/b&gt;, и &lt;a href=&#39;http://www.helpful-stuff.ru/2014/08/kak-sdelat-vkladki-na-css-chast-vtoraya.html&#39;&gt;второй&lt;/a&gt; на основе переключателей (радиокнопок).&lt;/p&gt;

&lt;p&gt;Существует также третий способ добиться переключения вкладок — при помощи селектора &lt;b&gt;:target&lt;/b&gt; и всё тех же якорей&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/delaem-vkladki-na-css-chast-3.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/7804663237837654421/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/delaem-vkladki-na-css-chast-3.html#comment-form' title='Комментарии: 1'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/7804663237837654421'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/7804663237837654421'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/delaem-vkladki-na-css-chast-3.html' title='Делаем на CSS панель вкладок для сайта. Часть 3.'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-6294974333097264701</id><published>2014-08-14T14:52:00.001+08:00</published><updated>2015-09-09T16:48:39.888+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Как сделать вкладки на чистом CSS и HTML (часть вторая)</title><content type='html'>&lt;style&gt;
.notebook {
    white-space: nowrap;
    overflow: hidden;
}

.notebook &gt; input {
    display: none;
}

.notebook &gt; input + label {
    display: inline-block;
    border: 1px solid gray;
    padding: 4px;
    cursor: pointer;
    position: relative;
}

.notebook &gt; input + label:not(:last-of-type) {
    border-right: none;
}

.notebook &gt; input + label:hover {
    color: blue;
}

.notebook &gt; input + label:last-of-type::after {
    display: block;
    border-bottom: 1px solid gray;
    width: 2000px;
    content: &amp;quot;&amp;quot;;
    position: absolute;
    bottom: -1px;
    left: 100%;
}

.notebook &gt; input:checked + label {
    color: blue;
    border-bottom: none;
    padding-bottom: 5px;
}

.notebook &gt; input:checked + label:last-of-type::after {
    bottom: 0px;
}


.notebook &gt; div {
    white-space: normal;
    display: none;
    border: 1px solid gray;
    border-top: none;
    margin: 0px;
    padding: 2px 20px;
}

.notebook &gt; input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook &gt; input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook &gt; input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook &gt; input:nth-of-type(4):checked ~ div:nth-of-type(4) {
    display: block;
}
&lt;/style&gt;

&lt;p&gt;В первой части мы рассмотрели, &lt;a href=&#39;http://izhurnal.blogspot.ru/2012/10/kak-sdelat-vkladki-na-css-bez-javascript.html&#39;&gt;как сделать вкладочный интерфейс при помощи свойства overflow и ссылок-якорей&lt;/a&gt;. Этот способ совместим со всеми браузерами, включая самые древние.&lt;/p&gt;

&lt;p&gt;Сегодня поговорим о том, как вкладки делаются при помощи небольшой магии с переключателями (радио-кнопками). Этот способ является более технологичным и гибким и более соответствует духу CSS.&lt;/p&gt;

&lt;p&gt;Чтобы запоминать выбранную пользователем вкладку, нам нужно хранить некоторое &lt;i&gt;состояние&lt;/i&gt;, то есть нам нужны &lt;i&gt;переменные&lt;/i&gt;. Работать с переменными мы можем из языков программирования, таких как JavaScript. Но поскольку наша задача — сделать вкладки без JavaScript, нужно придумать что-то еще. Как я говорил в предыдущей части, CSS является описательным языком и не имеет переменных. Тем не менее, запомнить «куда нажал пользователь» мы всё же можем, применив одну хитрость. Для этого используем имеющиеся в HTML элементы управления: флажки (англ. checkboxes) и переключатели (англ. radio buttons).&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/kak-sdelat-vkladki-na-css-chast-vtoraya.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/6294974333097264701/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/kak-sdelat-vkladki-na-css-chast-vtoraya.html#comment-form' title='Комментарии: 20'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/6294974333097264701'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/6294974333097264701'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/kak-sdelat-vkladki-na-css-chast-vtoraya.html' title='Как сделать вкладки на чистом CSS и HTML (часть вторая)'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/-6ac0fJDitng/VekGjxXrAZI/AAAAAAAAAUM/svkfw3ICSqA/s72-c-Ic42/1656410_6222d0c3.jpg" height="72" width="72"/><thr:total>20</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-2081214893835399529</id><published>2014-08-14T12:08:00.000+08:00</published><updated>2014-08-14T12:09:28.540+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Как при помощи CSS сделать оформление для флажков (checkboxes) и переключателей (radiobuttons)</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
Итак, сегодня мы рассмотрим, как делается оформление для чекбоксов и переключателей.&lt;br&gt;
&lt;/div&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/css-checkbox.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/2081214893835399529/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-checkbox.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/2081214893835399529'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/2081214893835399529'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-checkbox.html' title='Как при помощи CSS сделать оформление для флажков (checkboxes) и переключателей (radiobuttons)'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-8381547553461085715</id><published>2014-08-13T15:22:00.000+08:00</published><updated>2014-08-13T15:22:17.289+08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Про приоритет применения стилей CSS</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;text-align: left;&quot; trbidi=&quot;on&quot;&gt;
&lt;div&gt;
В каком порядке каскадные стили будут применены к тегам HTML вашей веб-страницы? Приоритет применения стилей определяется в три приёма: по источнику стиля, специфичности селектора и порядку следования стилей в файле.&lt;/div&gt;
&lt;div&gt;
&lt;h3 style=&quot;text-align: left;&quot;&gt;
Источник стиля (Origin) &lt;/h3&gt;
&lt;/div&gt;
&lt;div&gt;
Существует 3 источника стилей:&lt;br /&gt;
&lt;ul style=&quot;text-align: left;&quot;&gt;
&lt;li&gt;Стили браузера, заданные по умолчанию.&lt;/li&gt;
&lt;li&gt;Стили, определенные пользователем. (Например, к ним относятся стили, заданные через аддон Stylish Файрфокса.)&lt;/li&gt;
&lt;li&gt;Стили, определённые автором страницы.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Кроме того, стили пользователя и автора могут быть &lt;i&gt;обычные&lt;/i&gt; или &lt;i&gt;важные&lt;/i&gt; (ключевое слово &lt;b&gt;!important&lt;/b&gt;).&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Всё вместе это образует следующую иерархию стилей:&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;ol style=&quot;text-align: left;&quot;&gt;
&lt;li&gt;Стили браузера.&lt;/li&gt;
&lt;li&gt;Обычные стили пользователя.&lt;/li&gt;
&lt;li&gt;Обычные стили автора.&lt;/li&gt;
&lt;li&gt;Важные стили автора.&lt;/li&gt;
&lt;li&gt;Важные стили пользователя.&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Стили применяются в указанном порядке. То есть, &lt;i&gt;обычные стили пользователя&lt;/i&gt; перекрывают &lt;i&gt;стили браузера&lt;/i&gt;. &lt;i&gt;Обычные стили автора&lt;/i&gt; перекрывают &lt;i&gt;стили браузера&lt;/i&gt; и &lt;i&gt;обычные стили пользователя&lt;/i&gt;. Затем вступают в действие &lt;i&gt;важные стили автора&lt;/i&gt;. И наконец, &lt;i&gt;важные стили пользователя&lt;/i&gt; перекрывают стили из прочих источников. &lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;h3 style=&quot;text-align: left;&quot;&gt;
Специфичность (Specificity)&lt;/h3&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Стили из одного источника соревнуются по &lt;i&gt;специфичности&lt;/i&gt;. Специфичность можно представить как набор из четырёх чисел: &lt;i&gt;a, b, c, d&lt;/i&gt;. Специфичность вычисляется следующим образом:&lt;br /&gt;
&lt;br /&gt;
Если стиль внёдрён в тег HTML при помощи свойства &lt;i&gt;style&lt;/i&gt;, специфичность такого стиля считается равной 1-0-0-0.&lt;br /&gt;
&lt;br /&gt;
В ином случае (то есть когда стиль задан в таблице стилей) вычисляется специфичность селектора:&lt;br /&gt;
&lt;ul style=&quot;text-align: left;&quot;&gt;
&lt;li&gt;В число &lt;span style=&quot;color: red;&quot;&gt;&lt;i&gt;b&lt;/i&gt;&lt;/span&gt; записывается количество отсылок к &lt;span style=&quot;color: red;&quot;&gt;&lt;b&gt;#идентификатору&lt;/b&gt;&lt;/span&gt; тега.&lt;/li&gt;
&lt;li&gt;В число &lt;span style=&quot;color: lime;&quot;&gt;c&lt;/span&gt; записывается количество отсылок к &lt;span style=&quot;color: lime;&quot;&gt;&lt;b&gt;.классам&lt;/b&gt;&lt;/span&gt;, &lt;span style=&quot;color: lime;&quot;&gt;&lt;b&gt;:псевдоклассам&lt;/b&gt;&lt;/span&gt; и &lt;span style=&quot;color: lime;&quot;&gt;&lt;b&gt;[атрибутам]&lt;/b&gt;&lt;/span&gt;.&lt;/li&gt;
&lt;li&gt;В число &lt;span style=&quot;color: blue;&quot;&gt;d&lt;/span&gt; записывается количество отсылок к &lt;span style=&quot;color: blue;&quot;&gt;&lt;b&gt;элементам&lt;/b&gt;&lt;/span&gt; и &lt;span style=&quot;color: blue;&quot;&gt;&lt;b&gt;::псевдо-элементам&lt;/b&gt;&lt;/span&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Примеры:&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;br /&gt;
Внедрённый стиль: &lt;span style=&quot;font-family: monospace;&quot;&gt;&amp;lt;p style=&quot;color: green&quot;&amp;gt;&lt;/span&gt; — специфичность: &lt;span style=&quot;font-family: monospace;&quot;&gt;1-0-0-0&lt;/span&gt;.&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Селектор:&amp;nbsp;&lt;span style=&quot;font-family: monospace;&quot;&gt;&lt;span style=&quot;color: blue;&quot;&gt;li&lt;/span&gt;&lt;span style=&quot;color: lime;&quot;&gt;:first-child&lt;/span&gt; &lt;span style=&quot;color: blue;&quot;&gt;h2&lt;/span&gt; &lt;span style=&quot;color: lime;&quot;&gt;.title&lt;/span&gt;&lt;/span&gt; — специфичность: &lt;span style=&quot;font-family: monospace;&quot;&gt;0-&lt;span style=&quot;color: red;&quot;&gt;0&lt;/span&gt;-&lt;span style=&quot;color: lime;&quot;&gt;2&lt;/span&gt;-&lt;span style=&quot;color: blue;&quot;&gt;2&lt;/span&gt;&lt;/span&gt;.&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Селектор: &lt;span style=&quot;font-family: monospace;&quot;&gt;&lt;span style=&quot;color: red;&quot;&gt;#nav&lt;/span&gt; &lt;span style=&quot;color: lime;&quot;&gt;.selected&lt;/span&gt; &amp;gt; &lt;span style=&quot;color: blue;&quot;&gt;a&lt;/span&gt;&lt;span style=&quot;color: lime;&quot;&gt;:hover&lt;/span&gt;&amp;nbsp;&lt;/span&gt;— специфичность: &lt;span style=&quot;font-family: monospace;&quot;&gt;0-&lt;span style=&quot;color: red;&quot;&gt;1&lt;/span&gt;-&lt;span style=&quot;color: lime;&quot;&gt;2&lt;/span&gt;-&lt;span style=&quot;color: blue;&quot;&gt;1&lt;/span&gt;&lt;/span&gt;.&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Селектор: &lt;span style=&quot;font-family: monospace;&quot;&gt;&lt;span style=&quot;color: blue;&quot;&gt;body&lt;/span&gt; &lt;span style=&quot;color: red;&quot;&gt;#content&lt;/span&gt; &lt;span style=&quot;color: lime;&quot;&gt;.data&lt;/span&gt; &lt;span style=&quot;color: blue;&quot;&gt;img&lt;/span&gt;&lt;span style=&quot;color: lime;&quot;&gt;:hover&lt;/span&gt;&lt;/span&gt; — специфичность: &lt;span style=&quot;font-family: monospace;&quot;&gt;0-&lt;span style=&quot;color: red;&quot;&gt;1&lt;/span&gt;-&lt;span style=&quot;color: lime;&quot;&gt;2&lt;/span&gt;-&lt;span style=&quot;color: blue;&quot;&gt;2&lt;/span&gt;&lt;/span&gt;.&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Селектор: &lt;span style=&quot;font-family: monospace;&quot;&gt;&lt;span style=&quot;color: blue;&quot;&gt;div&lt;/span&gt;.article &lt;span style=&quot;color: blue;&quot;&gt;ul&lt;/span&gt; &lt;span style=&quot;color: blue;&quot;&gt;li&lt;/span&gt;&lt;/span&gt; — специфичность: &lt;span style=&quot;font-family: monospace;&quot;&gt;0-&lt;span style=&quot;color: red;&quot;&gt;0&lt;/span&gt;-&lt;span style=&quot;color: lime;&quot;&gt;1&lt;/span&gt;-&lt;span style=&quot;color: blue;&quot;&gt;3&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
Стили сортируются по специфичности. В наших примерах это будет:&lt;br /&gt;
&lt;ol style=&quot;text-align: left;&quot;&gt;
&lt;li&gt;0-0-1-3&lt;/li&gt;
&lt;li&gt;0-0-2-2&lt;/li&gt;
&lt;li&gt;0-1-2-1&lt;/li&gt;
&lt;li&gt;0-1-2-2&lt;/li&gt;
&lt;li&gt;1-0-0-0&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Именно в таком порядке стили и будут применены. То есть, из наших стилей &lt;i&gt;div.article ul li&lt;/i&gt; наименее специфичен (имеет наименьший приоритет). Затем идёт стиль &lt;i&gt;li:first-child h2 .title&lt;/i&gt;. Затем — &lt;i&gt;#nav .selected &amp;gt; a:hover&lt;/i&gt;. И так далее. Внедрённый в HTML-тег стиль всегда имеет максимальную специфичность.&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
&lt;b&gt;Важное уточнение:&lt;/b&gt;&lt;br /&gt;
Псевдо-класс &lt;b&gt;:not&lt;/b&gt; не принимает участие в подсчёте. Но селектор, находящийся внутри скобок &lt;b&gt;:not()&lt;/b&gt; принимает участие в подсчёте. Например: .article :not(p) — специфичность 0-0-1-1.&lt;br /&gt;
&lt;br /&gt;
&lt;b&gt;Еще одно уточнение:&lt;/b&gt;&lt;br /&gt;
Специфичность вычисляется только для &lt;i&gt;обычных&lt;/i&gt; стилей. Для &lt;i&gt;важных&lt;/i&gt; стилей специфичность не играет роли. Можно считать, что специфичность &lt;i&gt;важных&lt;/i&gt; стилей всегда максимальна.&lt;br /&gt;
&lt;div&gt;
&lt;h3 style=&quot;text-align: left;&quot;&gt;
Порядок следования стилей (order)&lt;/h3&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align: left;&quot;&gt;
Если у двух стилей одинаковы источник и специфичность, в дело вступает порядок следования стилей в документе. Стиль, расположенный &lt;i&gt;ниже&lt;/i&gt;, считается более &lt;i&gt;приоритетным&lt;/i&gt;, т.е. перекрывает стили, расположенные &lt;i&gt;выше&lt;/i&gt;.&lt;br /&gt;
&lt;br /&gt;
Стили, импортированные директивой &lt;b&gt;@import&lt;/b&gt; считаются расположенными &lt;i&gt;выше&lt;/i&gt; стилей в самом файле.&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/8381547553461085715/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-selector-priority.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/8381547553461085715'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/8381547553461085715'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-selector-priority.html' title='Про приоритет применения стилей CSS'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-2533870998459193124</id><published>2014-08-01T12:29:00.000+08:00</published><updated>2015-09-03T12:33:04.510+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Как сделать горизонтальное меню для сайта</title><content type='html'>&lt;p&gt;Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/08/css-horizontal-menu.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/2533870998459193124/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-horizontal-menu.html#comment-form' title='Комментарии: 6'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/2533870998459193124'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/2533870998459193124'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/08/css-horizontal-menu.html' title='Как сделать горизонтальное меню для сайта'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>6</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-5521688650210172238</id><published>2014-07-24T02:39:00.000+08:00</published><updated>2015-03-27T11:34:43.764+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="социальные сети"/><title type='text'>Как сделать ссылку В Контакте словом</title><content type='html'>&lt;p&gt;Многие пользователи сайта «В Контакте» замечали, что VK позволяет делать в постах и комментариях произвольные слова ссылкой на личную страницу или на группу, но не все знают, как это делается. Ведь «Вконтакте» не поддерживает в пользовательских постах и комментариях наиболее известные в интернете способы разметки текста: HTML и BB-код. Чтобы оформить ссылку, в VK надо использовать особый способ записи.&lt;/p&gt;&lt;a href=&quot;http://izhurnal.blogspot.com/2014/07/kak-sdelat-ssylku-vkontakte-slovom.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/5521688650210172238/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/07/kak-sdelat-ssylku-vkontakte-slovom.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5521688650210172238'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5521688650210172238'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/07/kak-sdelat-ssylku-vkontakte-slovom.html' title='Как сделать ссылку В Контакте словом'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-6081171510539455794</id><published>2014-07-07T19:07:00.000+08:00</published><updated>2015-09-12T19:12:33.259+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Как сделать div с прокруткой</title><content type='html'>&lt;p&gt;Иногда возникает потребность сделать на странице импровизированное «окно» небольшого размера, в котором отображается большой объем текста с полосой прокрутки. Рассмотрим, &lt;i&gt;как сделать блок div фиксированного размера с прокруткой по вертикали или горизонтали&lt;/i&gt;.&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/07/kak-sdelat-div-s-prokrutkoj.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/6081171510539455794/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/07/kak-sdelat-div-s-prokrutkoj.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/6081171510539455794'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/6081171510539455794'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/07/kak-sdelat-div-s-prokrutkoj.html' title='Как сделать div с прокруткой'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-6280801048660588810</id><published>2014-07-07T16:03:00.000+08:00</published><updated>2015-09-09T16:05:56.929+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Как запретить выделение текста при помощи CSS</title><content type='html'>&lt;p&gt;Бывает так, что на сайте желательно запретить выделение некоторых элементов страницы. Это можно сделать при помощи CSS.&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/07/kak-zapretit-vydelenie-teksta-css.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/6280801048660588810/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/07/kak-zapretit-vydelenie-teksta-css.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/6280801048660588810'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/6280801048660588810'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/07/kak-zapretit-vydelenie-teksta-css.html' title='Как запретить выделение текста при помощи CSS'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-4741473738506701276</id><published>2014-06-10T20:03:00.000+08:00</published><updated>2015-09-03T18:19:36.205+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html для начинающих"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Цвета в HTML</title><content type='html'>&lt;p&gt;В этой статье я расскажу о том, как задаются цвета в HTML и CSS.&lt;/p&gt;

&lt;p&gt;Как вы, вероятно, знаете, цвет каждой точки (пикселя) экрана формируется из трёх субпикселей: красного (R), зелёного (G) и синего (B). Яркость свечения каждого из субпикселей определяет итоговый цвет, который мы увидим на экране. Вот базовые цвета монитора:&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/06/html-colors.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/4741473738506701276/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/06/html-colors.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/4741473738506701276'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/4741473738506701276'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/06/html-colors.html' title='Цвета в HTML'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-5979715461383638303</id><published>2014-06-10T20:00:00.000+08:00</published><updated>2015-03-28T20:02:32.173+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="html для начинающих"/><category scheme="http://www.blogger.com/atom/ns#" term="вёрстка"/><title type='text'>Названия цветов в HTML</title><content type='html'>&lt;p&gt;Список названий цветов, поддерживаемых всеми браузерами:&lt;/p&gt; &lt;a href=&quot;http://izhurnal.blogspot.com/2014/06/html-color-names.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/5979715461383638303/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/06/html-color-names.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5979715461383638303'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5979715461383638303'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/06/html-color-names.html' title='Названия цветов в HTML'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-1340886315202521622</id><published>2014-05-11T16:28:00.000+08:00</published><updated>2015-08-30T16:32:26.179+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="системы счисления"/><category scheme="http://www.blogger.com/atom/ns#" term="утилиты онлайн"/><title type='text'>Сложение, вычитание и умножение и деление чисел в произвольной системе счисления</title><content type='html'>&lt;a href=&quot;http://izhurnal.blogspot.com/2014/05/numeral-system-arith.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/1340886315202521622/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/05/numeral-system-arith.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/1340886315202521622'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/1340886315202521622'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/05/numeral-system-arith.html' title='Сложение, вычитание и умножение и деление чисел в произвольной системе счисления'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-5627594127935815833</id><published>2014-05-07T15:54:00.000+08:00</published><updated>2015-08-30T16:32:26.184+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="системы счисления"/><category scheme="http://www.blogger.com/atom/ns#" term="утилиты онлайн"/><title type='text'>Перевод чисел из одной системы счисления в другую онлайн</title><content type='html'>&lt;a href=&quot;http://izhurnal.blogspot.com/2014/05/numeral-system.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/5627594127935815833/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2014/05/numeral-system.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5627594127935815833'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/5627594127935815833'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2014/05/numeral-system.html' title='Перевод чисел из одной системы счисления в другую онлайн'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-748777295029581223.post-4530939338196056638</id><published>2013-08-26T22:49:00.000+08:00</published><updated>2015-04-02T23:39:07.488+07:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="блогеру на заметку"/><title type='text'>Метод String.format() для форматирования строк в Javascript</title><content type='html'>&lt;p&gt;В различных языках программирования есть свои стандартные механизмы форматирования строк. Но в JavaSсript, увы, никакой стандартной функции нет. Более того, её нет и в самом распространённом фреймворке для JavaSсript — jquery.&lt;/p&gt;
&lt;a href=&quot;http://izhurnal.blogspot.com/2013/08/method-string-format-javascript.html#more&quot;&gt;Читать полностью&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://izhurnal.blogspot.com/feeds/4530939338196056638/comments/default' title='Комментарии к сообщению'/><link rel='replies' type='text/html' href='http://izhurnal.blogspot.com/2013/08/method-string-format-javascript.html#comment-form' title='Комментарии: 0'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/4530939338196056638'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/748777295029581223/posts/default/4530939338196056638'/><link rel='alternate' type='text/html' href='http://izhurnal.blogspot.com/2013/08/method-string-format-javascript.html' title='Метод String.format() для форматирования строк в Javascript'/><author><name>sdc</name><uri>http://www.blogger.com/profile/06009713622902465243</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>