tag:blogger.com,1999:blog-69442738822379402822024-03-21T14:32:09.847-07:00Популярно о CSSУчимся преображать сайт, используя CSS.maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-6944273882237940282.post-33751060718178702472020-09-11T01:00:00.001-07:002020-09-11T13:56:59.006-07:00 Что такое CSS<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<h1 style="text-align: center;">
Что значит CSS? </h1>
Множество начинающих вебмастеров не могут понять, <b>что значит CSS</b>. Где находит применение CSS? Данный сайт поможет как можно подробней это объяснить. В примерах будет показано <b>что такое CSS</b>. Также узнаете как надо правильно применять <b>каскадные таблицы стилей</b>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtjPWLGPR1sLI1j8uNP2wHbJBwv3W9HO1OgZF6lzH0UuaL1V7BdgoIJHc6IlYP05ozLtA44KlvPxab3tzRXn42z_aAJBWC-7Tfbl0YDYZ0NYeBf41LTC46d200WFR0IsXO9SPHLDDOw/s1600/CSS_img.jpg" style="clear: left; float: left; margin-right: 1em; margin-top: 1em;"><img alt="Chto takoe CSS" border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtjPWLGPR1sLI1j8uNP2wHbJBwv3W9HO1OgZF6lzH0UuaL1V7BdgoIJHc6IlYP05ozLtA44KlvPxab3tzRXn42z_aAJBWC-7Tfbl0YDYZ0NYeBf41LTC46d200WFR0IsXO9SPHLDDOw/s1600/CSS_img.jpg" title="Что такое CSS" width="200" /></a></div>
Что значит CSS? CSS это сокращение от "Cascading Style Sheets" и означает "каскадные таблицы стилей". Они являются мощным и удобным средством по изменению внешнего вида страниц сайта. Любая страница сайта представляет собой HTML-документ. Язык программирования CSS содержит набор свойств, которые дают возможность форматировать любой HTML-документ. Поэтому, перед тем, как начать знакомство с CSS, надо иметь представление о языке программирования HTML. Если же такие знания отсутствуют, то пройдите <a href="http://html-b.blogspot.ru/" target="_blank">изучение HTML</a>.<br />
Каскадные таблицы стилей необходимы для разделения содержимого веб-страниц, написанных в HTML, и форматирования (представления) документа (CSS). Таким образом, код HTML-страницы содержит информацию, которая просматривается пользователем, загрузившим данную страницу с помощью своего браузера. А уже то, как ему будет представлена эта информация на мониторе задаётся файлом каскадных таблиц стилей <b>style.css</b>.<br />
Для чего нужен CSS? Предположим, что вы <a href="http://www.vlakov.ru/" target="_blank">владелец</a> простого HTML-сайта страниц на 150. Любая страница этого сайта представлена в HTML коде. Теперь по каким-либо причинам необходимо срочно поменять только цвет текста с черного на синий. Тогда придётся на каждой иэ 150 страниц менять текст черного цвета, записанного в HTML-коде:<br />
<span style="color: blue;"><body text="black"></span><br />
на синий текст:<br />
<span style="color: blue;"><body text="blue"></span>.<br />
Понятно, что времени и труда будет потрачено очень много. Поэтому, чтобы не терять впустую своё время надо просто разместить на сайте каскадную таблицу стилей в виде файла style.css со следующим кодом:<br />
<span style="color: blue;">body {color: blue;}.</span><br />
Смыслом каскадных таблиц стилей является то, что в них задают <a href="http://css-u.blogspot.ru/2013/05/principi-sozdaniya-css-pravil.html" target="_blank">определенные правила</a>, которыми прописывают нужные свойства c необходимыми значеними. Это правило обладает своим именем (селектор), а в нашем случае - BODY. Селектор у нас любой HTML тэг. Свойство для правила body - color. Свойство же color принимает в данном случае значение blue.<br />
В итоге, применяя данное правило будет изменён цвет текста в тэге <body> с черного на синий во всех страницах, без потери времени и сил.<br />
Каскадная таблица стилей на сайте чаще всего представлена в виде файла с названием <b>style.css</b>. Именно с помощью расширения CSS браузер опознаёт данный файл как таблицу стилей и обрабатывает его содержание должным образом. Обычно одним файлом таблицы стилей обслуживаются все HTML-файлы сайта. Расположен он чаще в корневом каталоге сайта вместе с главной страницей сайта. <br />
Чтобы подключить файл таблицы стилей в код HTML-страницы надо <a href="http://css-u.blogspot.ru/2013/05/podklyuchenie-tablici-stiley.html" target="_blank">прописать МЕТА-тег</a> со следующим содержанием:<br />
<span style="color: blue;"><link rel="stylesheet" href="style.css" type="text/css"></span><br />
Имя файла каскадной таблицы стилей style.css и путь до него должен быть указан в атрибуте HREF. Внимание: следите за правильностью пути до файла таблицы стилей, поскольку на страницах он может разниться! <br />
Также можно использовать и абсолютный путь в виде<br />
<span style="color: blue;"><link rel="stylesheet" href="http://yousite.ru/style.css" type="text/css"></span><br />
В этом случае обязательно учитывайте, что с этой записью файл не будет работать в локальном режиме, когда отсутствует подключение к Интернету.<br />
Собственно, всё преимущество применения каскадной таблицы стилей именно в том, что все данные форматирования для всего сайта содержатся в единственном CSS-файле - style.css! Легко понять, что, изменяя несколько строчек, содержащихся в файле style.css, вы мгновенно преображаете весь сайт. Это применимо ко всем сайтам созданных и с помощью CMS (Системы управления сайтом или Движки для сайтов). Как пример можете посмотреть сайт о <a href="http://superrjob.ru/" target="_blank">заработке в интернете</a>.<br />
Теперь, надеюсь, Вам стало понятно что значит CSS и что такое CSS.<br />
Информация, которая представлена на этом блоге CSS имеет значительное число примеров. Он нацелен, в первую очередь, на то, чтобы как можно понятней изложить основные знания по каскадным таблицам стилей с приведением примеров. Вам же надо будет подкрепить практикой полученные знания, используя дополнительно <a href="http://css-b.blogspot.ru/" target="_blank">справочник CSS</a>.<br />
А теперь можете переходить к изучению первого раздела данного блога - <a href="http://css-u.blogspot.ru/2013/05/osnovnoe.html">Основы</a>. <br />
<br /></div>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-50512697349053648652013-05-21T01:00:00.000-07:002014-09-16T07:29:09.342-07:00Популярно о CSS<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name">
</h3>
<div class="post-header">
</div>
<div dir="ltr" style="text-align: left;">
<h2>
Популярно о CSS</h2>
<ul>
<li><a href="http://css-u.blogspot.ru/2013/05/osnovnoe.html" target="">Основы</a>
<ul>
<li><a href="http://css-u.blogspot.ru/2013/05/podklyuchenie-tablici-stiley.html" target="_blank">Способы подключения таблицы стилей</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/edinici-izmereniya.html" target="">Единицы измерения</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/principi-sozdaniya-css-pravil.html">Общие принципы создания CSS-правил</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/vlozhennost-pravil.html">Вложенность правил</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/pravila-sostoyaniy.html">Правила состояний</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/sokrashennaya-zapis-svoystv.html">Сокращенная запись свойств</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/css-haki.html">CSS-хаки</a></li>
</ul>
</li>
<li><a href="http://css-u.blogspot.ru/2013/05/svoystva.html">Свойства</a>
<ul>
<li><a href="http://css-u.blogspot.ru/2013/05/rabotaem-s-fonom.html">Работаем с фоном</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/rabota-s-tekstom.html">Работаем с текстом</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/rabota-s-tekstom.html">Создание рамок</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/sozdanie-otstupov.html">Создание отступов</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/plavayushiy-obekt.html">Плавающий объект</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/upravlenie-spiskami.html">Управление списками</a></li>
<li><a href="http://css-u.blogspot.ru/2013/05/absolyutnoe-pozicionirovanie.html">Абсолютное позиционирование</a></li>
</ul>
</li>
</ul>
</div>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-87632437896924151242013-05-20T01:00:00.000-07:002014-09-16T09:45:46.070-07:00Основное<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Популярно о CSS - Основы</h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0b2yhadJT4FcohVgnqLj64R1x2VVCOA09aQ3WvL70AcaA91-vpu2YzBCKyrUnZU7gak39p8oK4hWRpUau_WnXvQJVxv6VenzqfqU7N9fq0VEmguhPo3mgNGAiCgKe_-cZ-CbAn9rQkA/s1600/Kaskad04-200.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Populyarno o CSS" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0b2yhadJT4FcohVgnqLj64R1x2VVCOA09aQ3WvL70AcaA91-vpu2YzBCKyrUnZU7gak39p8oK4hWRpUau_WnXvQJVxv6VenzqfqU7N9fq0VEmguhPo3mgNGAiCgKe_-cZ-CbAn9rQkA/s1600/Kaskad04-200.jpg" height="152" title="Популярно о CSS" width="200" /></a></div>
В этом разделе <a href="http://css-u.blogspot.ru/2013/05/chto-takoe-css.html">блога о CSS</a> рассматриваются главные моменты в создании правила таблицы стилей.<br />
<ul>
<li><a href="http://css-u.blogspot.ru/2013/05/podklyuchenie-tablici-stiley.html">Способы подключения таблицы стилей</a></li>
Как нужно выполнять подключение таблицы стилей в документе.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/edinici-izmereniya.html">Единицы измерения</a></li>
Что такое абсолютные и относительные единицы измерений в размерах.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/principi-sozdaniya-css-pravil.html">Общие принципы создания CSS-правил</a></li>
Как изменить готовые тэги, создать определенные правила по конкретным тэгам, дополнения по существующим правилам.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/vlozhennost-pravil.html">Вложенность правил</a></li>
Как поменять стиль тэгов, которые вложены в других тегах.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/pravila-sostoyaniy.html">Правила состояний</a></li>
Как поменять вид элементу с разными состояниями.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/sokrashennaya-zapis-svoystv.html">Сокращенная запись свойств</a></li>
Сокращения в записи у свойств background, font, margin, border, padding, list-style.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/css-haki.html">CSS-хаки</a></li>
Что представляют из себя CSS-хаки. Применение CSS-хаков для браузеров Firefox, Opera, Google Chrome, Safari, IE6 и IE7.</ul>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-74815650213105255092013-05-19T01:00:00.000-07:002014-09-16T10:14:19.757-07:00Подключение таблицы стилей<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Подключение таблицы стилей </h1>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6yDpDPnbcq4ptZMoIOm8A_sDn5nyaILFEAAPYo5eYjT7nzwh2BId1UpVOOYhD4arPDQEKY4Akpc2WBe_RBmSM0iuhW0hr7hFG1RA1oOoMe_d4s7gLmyGI6FLyQdWZfta9pEO99C8wQ/s1600/CSS_style.jpg" imageanchor="1" style="clear: left; float: left; margin-right: 1em; margin-top: 1em;"><img alt="Podklyuchenie tablicyi stilej" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6yDpDPnbcq4ptZMoIOm8A_sDn5nyaILFEAAPYo5eYjT7nzwh2BId1UpVOOYhD4arPDQEKY4Akpc2WBe_RBmSM0iuhW0hr7hFG1RA1oOoMe_d4s7gLmyGI6FLyQdWZfta9pEO99C8wQ/s1600/CSS_style.jpg" height="131" title="Подключение таблицы стилей" width="200" /></a></div>
По способу подключения правил CSS, таблицы стилей подразделяются на 3 вида:<br />
<ul>
<li>Связанные Таблицы Стилей (из внешнего файла style.css);</li>
<li>Глобальные Таблицы Стилей (находятся внутри страниц);</li>
<li>Внутренние Таблицы Стилей (расположены в HTML-тэгах).</li>
</ul>
<h3>
</h3>
<h3 style="text-align: center;">
Связанные Таблицы Стилей</h3>
Для того, чтобы работал внешний файл CSS надо между тэгами <head> ... </head> прописать тэг <link>, в котором дать три атрибута:<br />
<ul>
<li>href - показывает место расположения для таблицы стилей;</li>
<li>type - тип (text/css);</li>
<li>rel - связь (stylesheet).</li>
</ul>
Например:<br />
<span style="color: blue;"><link href="style.css" type="text/css" rel="stylesheet"></span><br />
Здесь правилом CSS указано, что файл style.css располагается в корневом каталоге сайта.<br />
Применяется с целью придания для всех страниц на сайте единого стиля.<br />
<h3>
</h3>
<h3 style="text-align: center;">
Глобальные Таблицы Стилей</h3>
Эти CSS-правила должны быть расположены в HTML-коде на самой странице
между тэгами:<br />
<span style="color: blue;"><head> ... </head></span><br />
и обязательно заключаются в тэгах<br />
<span style="color: blue;"><style type="text/css"> ... </style></span>.<br />
Например:<br />
<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>CSS Правило</title><br />
<style type="text/css"><br />
...<br />
</style>HTML<br />
</head><br />
<body><br />
...<br />
<body><br />
</html> </span></code><br />
<br />
<code> </code> Используется для создания стиля в нужном документе.<br />
<h3>
</h3>
<h3 style="text-align: center;">
Внутренние Таблицы Стилей</h3>
<div style="text-align: justify;">
Данные правила CSS прописываются непосредственно в HTML-тэгах. Чтобы правила работали надо к тэгу дописать атрибут style, где и указать необходимые изменения:</div>
<div style="text-align: justify;">
<span style="color: blue;"><p style="..."></span><span style="color: blue;">Текст</p></span><br />
<div style="text-align: justify;">
<span style="color: blue;"><div style="..."></span><span style="color: blue;">Текст</</span><span style="color: blue;"><span style="color: blue;">div</span>> </span></div>
</div>
<div style="text-align: justify;">
Например:</div>
<div style="text-align: justify;">
<span style="color: blue;"><p style="text-align: justify; text-indent: 15px;"> Текст в абзаце </p></span></div>
<div style="text-align: justify;">
В примере правилом CSS установлено выравнивание текста по ширине строки и начало абзаца с отступом (с красной строки).</div>
<div style="text-align: justify;">
Используется в нужном тэге. Практически никак не отличимо от типичных HTML-атрибутов.</div>
<br /></div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-4930308918857016442013-05-18T01:00:00.000-07:002016-05-19T00:41:24.330-07:00Единицы измерения<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Единицы измерения в CSS</h1>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxWIeOEczbsUIzrYihj37r9PlUag92gYy-JwF0b5Mr4_W52P4r2HV_ugsdGa9AAOp4rOvb8Y2YY17dMw_tSUkumph89fe24fTkHK5eqnFzre09OEuY_e_7eIzbcBalgS3deE8NLgbtw/s1600/Ed_izmer.jpg" imageanchor="1" style="clear: left; float: left; margin-right: 1em; margin-top: 1em;"><img alt="Edinicyi izmereniya" border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxWIeOEczbsUIzrYihj37r9PlUag92gYy-JwF0b5Mr4_W52P4r2HV_ugsdGa9AAOp4rOvb8Y2YY17dMw_tSUkumph89fe24fTkHK5eqnFzre09OEuY_e_7eIzbcBalgS3deE8NLgbtw/s1600/Ed_izmer.jpg" title="Единицы измерения" width="150" /></a></div>
Для того, чтобы в CSS определить размеры шрифтов, изображений, таблиц и их ячеек, а также других объектов используются <b> </b>определённые единицы измерения. Они могут иметь как <b>абсолютные</b> значения, то есть раз и навсегда заданного размера - это Абсолютные единицы измерения, так и <b>относительные</b> значения, которые всегда должны соотноситься с каким-либо основным размером и представляют из себя какую-то его часть - это Относительные единицы измерения.</div>
<br />
<h2 style="text-align: center;">
Абсолютные единицы измерения</h2>
<div style="text-align: justify;">
<i> Абсолютные единицы</i> не зависят от устройства вывода.</div>
К абсолютным единицам относятся:<br />
<ul>
<li> <b>in</b> - дюймы, 1 in = 25,4 mm;</li>
<li> <b>cm</b> - сантиметры;</li>
<li><b>mm</b> - миллиметры;</li>
<li><b>pt</b> - пункты (типографский пункт), 1 pt = 1/72 in = 0,353 mm;</li>
<li><b>pc</b> - пики (типографская пика), 1 pc = 12 pt = 4,236 mm.</li>
</ul>
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;"><b><span style="background-color: #ffe599;"><span style="background-color: #ffe599;"><b> </b></span>HTML-код </span></b><span style="background-color: #ffe599;"><b> </b></span></td>
<td style="text-align: center; width: 50%;"><span style="background-color: #ffe599;"><b><span style="background-color: #ffe599;"><b> </b></span>CSS-код</b></span><span style="background-color: #ffe599;"><b> </b></span></td>
</tr>
<tr>
<td style="vertical-align: top; width: 50%;"><code>
<html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="in">Шрифт 0,2 дюйма</p><br />
<p class="cm">Шрифт 0,5 сантиметра</p><br />
<p class="mm">Шрифт 5 миллиметров</p><br />
<p class="pt">>Шрифт 15 пунктов</p><br />
<p class="pc">Шрифт 1,2 пика</p><br />
<body><br />
</html>
</code>
</td>
<td style="vertical-align: top; width: 50%;"><code>
p .in {<br />
font-size: 0.2in;<br />
}<br />
p .cm {<br />
font-size: 0.5cm;<br />
}<br />
p .mm {<br />
font-size: 5mm;<br />
}<br />
p .pt {<br />
font-size: 15pt;<br />
}<br />
p .pc {<br />
font-size: 1.2pc;<br />
}<br />
</code>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><b>Что получилось</b></td>
</tr>
<tr>
<td colspan="2"><div style="font-size: 0.2in;">
Шрифт 0,2 дюйма</div>
<div style="font-size: 0.5cm;">
Шрифт 0,5 сантиметра</div>
<div style="font-size: 5mm;">
Шрифт 5 миллиметров</div>
<div style="font-size: 15pt;">
Шрифт 15 пунктов</div>
<div style="font-size: 1.2pc;">
Шрифт 1,2 пика</div>
</td>
</tr>
</tbody></table>
<br />
<div style="text-align: justify;">
Абсолютные единицы измерения для указания размеров на страницах сайтов используются крайне редко.</div>
<br />
<h2 style="text-align: center;">
Относительные единицы измерения</h2>
<div style="text-align: justify;">
<i> Относительные единицы</i> указывают размер относительно другого размера, зависят от устройства вывода.</div>
К относительным единицам относятся:<br />
<ul>
<li><b>px</b> – пикселы - размер точки на экране;</li>
<li><b>%</b> – проценты;</li>
<li><b>em</b> – высота шрифта;</li>
<li><b>ex</b> – высота символа "x";</li>
<li><b>ch</b> – высота символа ноль "0";</li>
<li><b>rem</b> – смесь px и em;</li>
<li><b>vw</b> – 1% ширины окна;</li>
<li><b>vh</b> – 1% высоты окна;</li>
<li><b>vmax</b> – наибольшее из vw и vh;</li>
<li><b>vmin</b> – наименьшее из vw и vh;</li>
<li><b>vm</b> – так для IE9 обозначается <u>vmax</u>.</li>
</ul>
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;"><span style="background-color: #ffe599;"><b><span style="background-color: #ffe599;"><b> </b></span>HTML-код </b></span></td>
<td style="text-align: center; width: 50%;"><span style="background-color: #ffe599;"><b><span style="background-color: #ffe599;"><b> </b></span>CSS-код</b></span><span style="background-color: #ffe599;"><b> </b></span><span style="background-color: #ffe599;"><b></b></span></td>
</tr>
<tr>
<td style="vertical-align: top; width: 50%;"><code>
<html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="em">Шрифт 2 em</p><br />
<p class="ex">Шрифт 4 ex</p><br />
<p class="px">Шрифт 22 пиксела</p><br />
<p class="percent">Шрифт 200 процентов</p><br />
<body><br />
</html>
</code>
</td>
<td style="vertical-align: top; width: 50%;"><code>
p .em {<br />
font-size: 2em;<br />
}<br />
p .ex {<br />
font-size: 4ex;<br />
}<br />
p .px {<br />
font-size: 22px;<br />
}<br />
p .percent {<br />
font-size: 200%;<br />
}<br />
</code>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><b>Что получилось</b></td>
</tr>
<tr>
<td colspan="2"><div style="font-size: 2em;">
Шрифт 2 em</div>
<div style="font-size: 4ex;">
Шрифт 4 ex</div>
<div style="font-size: 22px;">
Шрифт 22 пиксела</div>
<div style="font-size: 200%;">
Шрифт 200 процентов</div>
</td>
</tr>
</tbody></table>
<br />
<div style="text-align: justify;">
Чаще всего, чтобы меньше путаться, для задания размеров принимают относительные единицы - пикселы (px) и проценты (%), реже высоту шрифта (em).</div>
<br /></div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-29568821683076765012013-05-17T01:00:00.000-07:002014-09-16T11:24:28.784-07:00Принципы создания CSS-правил<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<h1 style="text-align: center;">
Общие принципы<br />создания CSS-правил</h1>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHJ9dnAFH8wVW4zYEM-69OjWfryQcHPEFJeo-kYpXGPFRQN6dvtHPg2NHT4WAd2NnrGcwSb3GVs6WnzLO5sbMo6HECrTiskfxebvul9QpivsLJhlthjKukP02Iz2Vwes3lLukI5rWCiA/s1600/CSS-pravila.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHJ9dnAFH8wVW4zYEM-69OjWfryQcHPEFJeo-kYpXGPFRQN6dvtHPg2NHT4WAd2NnrGcwSb3GVs6WnzLO5sbMo6HECrTiskfxebvul9QpivsLJhlthjKukP02Iz2Vwes3lLukI5rWCiA/s1600/CSS-pravila.jpg" height="128" title="Принципы создания CSS-правил" width="200" /></a></div>
Если необходимо, то все уже готовые тэги мы в любое время можем изменить. Используя правила CSS, например, можно при надобности прописать как будут выглядеть все тэги <p>, которые представляют из себя все абзацы на страницах сайта. В этом случае у нас должен получиться примерно такой код CSS:</div>
<code>
<span style="color: blue;">p {<br />
color: #424242;<br />
font-size: 12px;<br />
font-family: Tahoma;<br />
}</span></code><br />
<div style="text-align: justify;">
<code> </code> Из данного примера получается, что все абзацы страницы примут шрифт Tahoma серого цвета с размером в 12 пикселей.</div>
<div style="text-align: justify;">
Помимо этого можно создать определенное правило, которое мы можем присвоить конкретному тэгу. Тогда надо создать следующее правило:</div>
<code>
<span style="color: blue;">p.title {<br />
font-weight: bold;<br />
color: #cc0000;<br />
}</span></code><br />
Присвоим атрибут class с названием правила первому тэгу <p> (первому абзацу)<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="title">Этому абзацу присвоили атрибут class="title".</p><br />
<p>Здесь второе предложение.</p><br />
<h1>Здесь заголовок.</h1><br />
<p>Здесь третье предложение.</p><br />
<body><br />
</html></span>
</code><br />
После того как мы присвоили правило "p.title" первому абзацу, он принял свойства, прописанные в правиле и стал выглядеть так:<br />
<div style="color: #cc0000; font-weight: bold;">
Этому абзацу присвоили атрибут class="title".</div>
<br />
<div style="text-align: justify;">
Правило "p.title" можно присвоить любому тэгу <p>. Также можно создать определенное правило, которое мы можем присвоить ЛЮБОМУ тэгу, например правило</div>
<code>
<span style="color: blue;">.new {<br />
color: #00cc00;<br />
}</span></code><br />
<div style="text-align: justify;">
можно присвоить как тэгу <p>, так и тэгу <h1> (главному заголовку)</div>
<span style="color: blue;"><code>
<html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="title">Этому абзацу присвоили атрибут class="title".</p><br />
<p>Здесь второе предложение.</p><br />
<h1 class="new">Этому заголовку присвоили правило ".new".</h1><br />
<p class="new">Этому абзацу присвоили правило ".new".</p><br />
<body><br />
</html></code></span><br />
<div style="text-align: justify;">
<code> </code>
В результате тэги, к которым применили правило ".new", стали выглядеть так:</div>
<h1 style="color: #00cc00; text-align: center;">
Этому заголовку присвоили правило ".new".</h1>
<div style="color: #00cc00;">
Этому абзацу присвоили правило ".new".</div>
<br />
<div style="text-align: justify;">
Также существуют индивидуально именованные стили (ID). Они применяются, чтобы придать элементам одного класса индивидуальные
свойства.</div>
<div style="text-align: justify;">
Например, создадим индивидуально именованный стиль "#add", в котором укажем жирный шрифт (свойство font-weight: bold;)</div>
<code>
<span style="color: blue;">#add {<br />
font-weight: bold;<br />
}</span></code><br />
теперь присвоим атрибут id третьему абзацу<br />
<span style="color: blue;"><code><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="title">Этому абзацу присвоили атрибут class="title".</p><br />
<p>Здесь второе предложение.</p><br />
<h1 class="new">Этому заголовку присвоили правило ".new".</h1><br />
<p class="new" id="add">Этому абзацу присвоили правило ".new".</p><br />
<body><br />
</html></code></span><br />
<code> </code>
В итоге предложение в третьем абзаце приняло зеленый цвет как в правиле ".new" и жирность как в правиле "#add":Получили следующее:<br />
<div style="color: #00cc00; font-weight: bold;">
Этому абзацу присвоили правило ".new".</div>
<div style="text-align: justify;">
<br />
Это значит, что нет необходимости создавать новое правило и дублировать код,
достаточно создать индивидуально именованный стиль и добавлять его там,
где это необходимо. Если вы хотите применить один и тот же стиль сразу к двум и более
тэгам, то не обязательно создавать для каждого тэга свое правило:</div>
<code>
<span style="color: blue;">p {<br />
color: #424242;<br />
font-size: 12px;<br />
font-family: Tahoma;<br />
}<br />
h1 {<br />
color: #424242;<br />
font-size: 12px;<br />
font-family: Tahoma;<br />
}</span></code><br />
<div style="text-align: justify;">
<code> </code>
Достаточно просто тэги с одинаковыми стилями перечислить через запятую:</div>
<span style="color: blue;"><code>
p, h1 {<br />
color: #424242;<br />
font-size: 12px;<br />
font-family: Tahoma;<br />
}
</code></span></div>
<br /></div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-47928597911243695882013-05-16T01:00:00.000-07:002014-09-16T03:27:00.176-07:00Вложенность правил<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<h1 style="text-align: center;">
Вложенность правил</h1>
Допустим, что возникла такая ситуация. Нужно поменять только стиль
слов с жирным шрифтом, находящихся внутри абзаца. В этих ситуациях
надо использовать вложенные правила. Если нужно изменить стиль только у тех
слов, что находятся в тэгах <strong> внутри абзаца (тэга
<p>), то в правило нужно записать:<br />
<code>
<span style="color: blue;">p strong {<br />
...<br />
}</span></code><br />
<div style="text-align: justify;">
<code> </code>Пример: слово "второе" во втором предложении выделим жирным (для этого используется тэг <strong>):</div>
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p>Здесь первое предложение.</p><br />
<p>Здесь <strong>второе</strong> предложение.</p><br />
<p>Здесь третье предложение.</p><br />
<body><br />
</html></span></code><br />
<div style="text-align: justify;">
<code> </code>
Добавим какой-либо текст вне абзаца и также выделим его жирным:</div>
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p>Здесь первое предложение.</p><br />
<p>Здесь <strong>второе</strong> предложение.</p><br />
<p>Здесь третье предложение.</p><br />
<strong>Текст вне абзаца.</strong><br />
<body><br />
</html></span></code><br />
<div style="text-align: justify;">
<code> </code> Создадим правило в таблице стилей, где в абзацах изменим цвет слов с жирным шрифтом:</div>
<code>
<span style="color: blue;">p strong {<br />
color: #0000cc;<br />
}</span></code><br />
<div style="text-align: justify;">
<code> </code> Таким образом получилось, что текст в тэге <strong>, находящийся, в свою очередь,
внутри абзаца, приобрёл синий цвет. Цвет же текста за пределами абзаца не поменялся:</div>
Здесь <b style="color: #0000cc;">второе</b> предложение.<br />
<b>Текст вне абзаца.</b></div>
<br /></div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-15143942904578701742013-05-15T01:00:00.000-07:002014-07-17T11:42:22.339-07:00Правила состояний<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Правила состояний</h1>
Правила, регулирующие внешний вид тэгов, которые могут принимать разные состояния - это правила состояний.<br />
Как пример тэга состояния можно привести тэг <a> (гиперссылка). Он
может принимать разное состояние - при непосещённой ссылке, при наведении
на нее указателя мышки, в момент нажатия на ссылку и после посещения ссылки.<br />
Cостояние до посещения сылки записывается так:<br />
<code>
<span style="color: blue;">a:link {<br />
...<br />
}</span></code><br />
<code> </code>
Так записывается состояние, уже посещенной ссылки:<br />
<code>
<span style="color: blue;">a:visited {<br />
...<br />
}</span></code><br />
<code> </code>
Cостояние, когда над ссылкой находится указатель мышки:<br />
<code>
<span style="color: blue;">a:hover {<br />
...<br />
}</span></code><br />
<code> </code>
Cостояние ссылки при нажатии на неё (то есть ссылка активируется):<br />
<code>
<span style="color: blue;">a:active {<br />
...<br />
}</span></code><br />
<code> </code>
Пример:<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<a href="...">Первая ссылка</a><br />
<a href="...">Вторая ссылка</a><br />
<body><br />
</html></span></code><br />
<code> </code>
Для не посещенной ссылки изменим цвет на черный (color: #000;) с добавлением нижнего подчеркивания (text-decoration: underline;):<br />
<code>
<span style="color: blue;">a:link {<br />
color: #000;<br />
text-decoration: underline;<br />
}</span></code><br />
<code> </code>
Для посещённой ссылки уберём подчеркивание (text-decoration: none;) и изменим цвет на красный (color: #cc0000;):<br />
<code>
<span style="color: blue;">a:visited {<br />
color: #cc0000;<br />
text-decoration: none;<br />
}</span></code><br />
<code> </code>
Для ссылки под указателем мыши изменим цвет на оранжевый (color: orange;) и добавим нижнее подчеркивание:<br />
<code>
<span style="color: blue;">a:hover {<br />
color: orange;<br />
text-decoration: underline;<br />
}</span></code><br />
<code> </code>
Для активной ссылки заменим цвет на зеленый (color: #00cc00;) и добавим верхнее подчеркивание (text-decoration: overline;):<br />
<code>
<span style="color: blue;">a:active {<br />
color: #00cc00;<br />
text-decoration: overline;<br />
}</span></code><br />
<code> </code>
Ссылки приняли такой вид:<br />
<a class="links" href="http://css-u.blogspot.ru/2013/05/vlozhennost-pravil.html" target="_blank">Первая ссылка</a><br />
<a class="links" href="http://css-u.blogspot.ru/2013/05/vlozhennost-pravil.html" target="_blank">Вторая ссылка</a>
<br />
<br />
Примечание: В правиле состояния можно прописать не только вид подчеркивания и цвет, но и другие свойства (font-size и т.д.).<br />
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-46743861643800722342013-05-14T01:00:00.000-07:002014-07-17T11:58:02.204-07:00Сокращенная запись свойств<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Сокращенная запись свойств</h1>
Свойства, которые принадлежат к одной группе свойств можно записывать сокращенно.<br />
Существуют следующие группы свойств:<br />
<ul>
<li>font
<ol>
<li>font-style</li>
<li>font-variant</li>
<li>font-weight</li>
<li>font-size/line-height</li>
<li>font-family</li>
</ol>
</li>
<li>background
<ol>
<li>background-color</li>
<li>background-image</li>
<li>background-repeat</li>
<li>background-attachment</li>
<li>background-position</li>
</ol>
</li>
<li>margin
<ol>
<li>margin-top</li>
<li>margin-right</li>
<li>margin-bottom</li>
<li>margin-left</li>
</ol>
</li>
<li>padding
<ol>
<li>padding-top</li>
<li>padding-right</li>
<li>padding-bottom</li>
<li>paddung-left</li>
</ol>
</li>
<li>border
<ol>
<li>border-width</li>
<li>border-style</li>
<li>border-color</li>
</ol>
</li>
<li>border-top
<ol>
<li>border-top-width</li>
<li>border-top-style</li>
<li>border-top-color</li>
</ol>
</li>
<li>border-right
<ol>
<li>border-right-width</li>
<li>border-right-style</li>
<li>border-right-color</li>
</ol>
</li>
<li>border-bottom
<ol>
<li>border-bottom-width</li>
<li>border-bottom-style</li>
<li>border-bottom-color</li>
</ol>
</li>
<li>border-left
<ol>
<li>border-left-width</li>
<li>border-left-style</li>
<li>border-left-color</li>
</ol>
</li>
<li>list-style
<ol>
<li>list-style-type</li>
<li>list-style-position</li>
<li>list-style-image</li>
</ol>
</li>
</ul>
Пример:<br />
Запишем правило как обычно:<br />
<code>
<span style="color: blue;">p {<br />
color: #0000cc;<br />
font-size: 12px;<br />
font-family: Verdana;<br />
font-weight: bold;<br />
}</span></code><br />
Теперь это же записываем для свойств из группы свойств font в сокращённом виде:<br />
<code>
<span style="color: blue;">p {<br />
color: #0000cc;<br />
font: bold 12px Verdana;<br />
}</span></code><br />
Как видно, получилось на две строки короче.<br />
<br />
Примечание: Последовательность записи значений в сокращенном свойстве очень важна. Если её нарушить, то свойство будет работать неправильно. То есть, для последнего примера, нельзя записывать так:<br />
<code><span style="color: blue;">font: </span></code><code><span style="color: blue;"><code><span style="color: blue;"> Verdana </span></code>bold 12px;</span></code><br />
<br />
<br />
<br /></div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-36112909763946027362013-05-13T01:00:00.000-07:002014-09-16T03:41:27.598-07:00CSS-хаки<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<h1 style="text-align: center;">
CSS-хаки</h1>
<div style="text-align: justify;">
В браузерах одинаково отображаются не все html-тэги. Поэтому и используемые стили к таким тэгам, в разных браузерах будут видны
по-разному. Чтобы отобразить такие тэги во всех браузерах одинаково, нужно для каждого менять стили.</div>
Для решения данной проблемы имеются 2 пути:<br />
<ul>
<li>отдельный файл со стилями для каждого браузера</li>
<li>использование CSS-хаков</li>
</ul>
<div style="text-align: justify;">
<b>Отдельный файл со стилями для каждого браузера </b>использовать это не лучший вариант. Тогда, как правило, приходится менять несколько свойств. Все же остальные свойства остаются неизменными. Такое приводит к повторению
кода. Поэтому рассмотрим подробнее <b>использование хаков</b>.</div>
<div style="text-align: justify;">
CSS-хак - это правило, понимаемое или игнорируемое браузером, которому оно написано. Как и все правила CSS-хаки пишутся в
таблице стилей.</div>
<h3>
Синтаксис хаков для Internet Explorer 6</h3>
<code>
* html Имя_правила {<br />
...<br />
} /*только для IE6, валидный код*/<br />
</code>
<code>
Имя_правила {<br />
_Свойство;<br />
} /*только для IE6*/<br />
</code>
<br />
<h3>
Синтаксис хаков для Internet Explorer 7</h3>
<code>
*+html Имя_правила {<br />
...<br />
} /*только для IE7, валидный код*/<br />
</code>
<code>
*:first-child+html Имя_правила {<br />
...<br />
} /*только для IE7*/<br />
</code>
<code>
html>body Имя_правила {<br />
...<br />
}<br />
</code>
<br />
<h3>
Синтаксис хаков для Opera</h3>
<code>
html:first-child Имя_правила {<br />
...<br />
} /* только для Opera < 9.5, валидный код */<br />
</code>
<code>
@media all and (min-width: 0) {<br />
Имя_правила {...}<br />
} /*только для Opera*/<br />
</code>
<br />
<h3>
Синтаксис хаков для Firefox</h3>
<code>
html:root Имя_правила {<br />
...<br />
} /*только для Firefox*/<br />
</code>
<code>
@-moz-document url-prefix() {<br />
Имя_правила {...}<br />
}<br />
</code>
<br />
<h3>
Синтаксис хаков для Safari</h3>
<code>
html[xmlns*=""] body:last-child Имя_правила {<br />
...<br />
}<br />
</code>
<br />
<h3>
Синтаксис хаков для Safari и Google Chrome</h3>
<code>
body:last-child:not(:root:root) Имя_правила {<br />
...<br />
}</code></div>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-29789708522709256782013-05-12T01:00:00.000-07:002014-09-16T07:37:57.716-07:00CSS свойства<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;">
<div id="content">
<h1 style="text-align: center;">
CSS свойства</h1>
<div style="text-align: justify;">
В этом разделе <a href="http://css-u.blogspot.ru/2013/05/chto-takoe-css.html">блога о CSS</a> Вы познакомитесь с основными <b>CSS свойствами</b>. Здесь в примерах показаны основы и приёмы работы с основными свойствами таблиц стилей.</div>
<ul style="text-align: justify;">
<li><a href="http://css-u.blogspot.ru/2013/05/rabotaem-s-fonom.html">Работаем с фоном</a></li>
Узнаете о том, как присвоить элементу фон, фон из текстуры, фон
повторяющийся по горизонтали, фон повторяющийся по вертикали, свойство
background.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/rabota-s-tekstom.html">Работаем с текстом</a></li>
Изложено о том, как создать правила для выравнивания текста, красной строки,
зачеркивания, придания буквам различной величины, различного расстояния
между словами, буквами и строками, свойства: text-align, text-indent,
text-decoration, text-transform, word-spacing, letter-spacing,
line-height.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/sozdanie-ramok.html">Создание рамок</a></li>
Написано о том, как применить рамку к тэгу, добавить рамке стиль, добавить определенную рамку с какой-либо стороны, свойство border.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/sozdanie-otstupov.html">Создание отступов</a></li>
Информация о том, как создать внешние и внутренние отступы, свойсва margin и padding.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/plavayushiy-obekt.html">Плавающий объект</a></li>
Что такое плавающий объект, о том как задать объекту обтекание, свойство float.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/upravlenie-spiskami.html">Управление списками</a></li>
О возможностях с помощью каскадных таблиц стилей управлять
внешним видом списка. Свойства list-style-type, list-style-position,
list-style-image.<br />
<li><a href="http://css-u.blogspot.ru/2013/05/absolyutnoe-pozicionirovanie.html">Абсолютное позиционирование</a></li>
Каким образом можно с помощью абсолютного позиционирования расположить
любой объект в любом месте экрана. Свойство position: absolute;</ul>
</div>
</div>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-20262115289835245912013-05-11T01:00:00.000-07:002014-09-16T07:48:38.258-07:00Изменение фона страницы<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Изменение фона страницы</h1>
Если Вы решили изменить фон всего документа, то внесите изменения в тег body<br />
<code>
<span style="color: blue;">body {<br />
...<br />
}</span></code><br />
<code> </code>
Задайте цвет фона с помощью свойства background-color<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
}</span></code><br />
<code> </code>
Если необходимо сделать фоном какую-либо картинку, то сделайте это через свойство
background-image, в значении которого указывается url(путь к картинке)<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
background-image: url(textura.gif);<br />
}</span></code><br />
<code> </code>
Если текстура имеет небольшие размеры, то она будет растиражирована
по горизонтали и вертикали, и займет все пространство. Данное
тиражирование можно ограничить при помощи свойства background-repeat.<br />
Для тиражирования текстуры только по горизонтали, свойству background-repeat нужно присвоить значение repeat-x<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
background-image: url(textura.gif);<br />
background-repeat: repeat-x;<br />
}</span></code><br />
<code> </code>
Для тиражирования текстуры только по вертикали, свойству background-repeat нужно присвоить значение repeat-y<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
background-image: url(textura.gif);<br />
background-repeat: repeat-y;<br />
}</span></code><br />
<code> </code>
По умолчанию тиражирование начинается сверху слева. Чтобы это
изменить, применим к правилу свойство background-position. Это свойство
имеет 4 значения:<br />
<ul>
<li>top</li>
<li>right</li>
<li>bottom</li>
<li>left</li>
<li>значение отступа в пикселях от левого и верхнего краев</li>
</ul>
К примеру, для того чтобы тиражировать изображение сверху справа, надо присвоить свойству background-position значение top right<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
background-image: url(textura.gif);<br />
background-repeat: repeat-y;<br />
background-position: top right;<br />
}</span></code><br />
<code> </code>
Для того чтобы вообще не повторять изображение, свойству background-repeat нужно присвоить значение no-repeat<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
background-image: url(textura.gif);<br />
background-repeat: no-repeat;<br />
background-position: top right;<br />
}</span></code><br />
<code> </code>
Если Вы хотите расположить изображение не в правом углу страницы, а в
правом углу браузера (картинка будет постоянно видна за текстом и не
уедет при прокручивании страницы), то необходимо воспользоваться
свойством background-attachment: fixed;<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
background-image: url(textura.gif);<br />
background-repeat: no-repeat;<br />
background-position: top right;<br />
background-attachment: fixed;<br />
}</span></code><br />
<code> </code>
А чтобы расположить изображение в любом месте, а не только в
каком-либо из углов, присвоим свойству background-position значение
отступа в пикселях от левого и от верхнего краев, к примеру, по 200 и
150 пикселей соответственно<br />
<code>
<span style="color: blue;">body {<br />
background-color: #f2f2f2;<br />
background-image: url(textura.gif);<br />
background-repeat: no-repeat;<br />
background-position: 200px 150px;<br />
background-attachment: fixed;<br />
}</span></code><br />
<code> </code>
Полный список свойств для работы с фоном можно посмотреть в <a href="http://css-b.blogspot.ru/" target="_blank">справочнике</a>.</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-70294365175552547322013-05-10T01:00:00.000-07:002014-09-16T08:04:01.407-07:00Оформление текста<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Оформление текста</h1>
Чтобы выполнить выравнивание текста примените свойство text-align. Оно может принимать следующие значения:<br />
<ul>
<li>left - выравнивание по левому краю</li>
<li>right - выравнивание по правому краю</li>
<li>center - выравнивание по центру</li>
<li>justify - выравнивание по ширине</li>
</ul>
Если надо выровнять по правому краю не весь текст, а только несколько
абзацев, то лучше будет создать определенное правило. Это правило можно
будет присвоить необходимым абзацам. Подробнее о <a href="http://css-u.blogspot.ru/2013/05/edinici-izmereniya.html" target="_blank">создании правил</a>.<br />
Cоздаём правило, в котором указываем свойство text-align: right;<br />
<code>
<span style="color: blue;">p.text {<br />
text-align: right;<br />
}</span></code><br />
<code> </code>
и присвоим необходимым абзацам атрибут class="text"<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p>Здесь первое предложение.</p><br />
<p class="text">Здесь второе предложение.</p><br />
<p>Здесь третье предложение.</p><br />
<body><br />
</html></span></code><br />
<code> </code>
После того как мы применили ко второму абзацу правило "p.text", текст стал выглядеть так:<br />
<span style="color: red;">Здесь первое предложение.</span><br />
<div style="text-align: right;">
<span style="color: red;">Здесь второе предложение.</span></div>
<span style="color: red;">Здесь третье предложение.</span><br />
<br />
Для "красной строки" применяется свойство text-indent.<br />
Присвоим первому абзацу "красную строку" 30 пикселей. Для этого создадим правило "p.ab" со свойством text-indent: 30px<br />
<code>
<span style="color: blue;">p.ab {<br />
text-indent: 30px;<br />
}</span></code><br />
<code> </code>
и присвоим его первому абзацу<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="ab">Здесь первое предложение.</p><br />
<p class="text">Здесь второе предложение.</p><br />
<p>Здесь третье предложение.</p><br />
<body><br />
</html></span></code><br />
<code> </code>
После того как мы применили к первому абзацу правило "p.ab", текст будет выглядеть так:<br />
<div style="text-indent: 30px;">
<span style="color: red;">Здесь первое предложение.</span></div>
<div style="text-align: right;">
<span style="color: red;">Здесь второе предложение.</span></div>
<span style="color: red;">Здесь третье предложение.</span><br />
<br />
Если нужно зачеркнуть какое-либо слово или последовательность слов в
предложении, то удобно использовать тэг <span>, который сам по
себе никакой нагрузки не несет.<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="ab">Здесь первое предложение.</p><br />
<p class="text">Здесь второе предложение.</p><br />
<p>Здесь <span>третье</span> предложение.</p><br />
<body><br />
</html> </span></code><br />
<div style="text-indent: 30px;">
Получим результат:<br />
<span style="color: red;">Здесь первое предложение.</span></div>
<div style="text-align: right;">
<span style="color: red;">Здесь второе предложение.</span></div>
<span style="color: red;"><code></code></span><br />
<span style="color: red;">Здесь третье предложение.</span><br />
Как видно из примера, выделенное тэгами <span></span> слово "третье" не изменилось.<br />
Сделаем зачеркнутым слово "третье" в третьем предложении. Для этого создадим правило ".cherta" со свойством text-decoration: line-through;<br />
<code>
<span style="color: blue;">.cherta {<br />
text-decoration: line-through;<br />
} </span></code><br />
<code> </code>
и применим его к тэгу <span><br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="ab">Здесь первое предложение.</p><br />
<p class="text">Здесь второе предложение.</p><br />
<p>Здесь <span class="cherta">третье</span> предложение.</p><br />
<body><br />
</html></span>
</code><br />
После того как мы применили к слову "третье" правило ".cherta", текст стал выглядеть так:<br />
<div style="text-indent: 30px;">
<span style="color: red;">Здесь первое предложение.</span></div>
<div style="text-align: right;">
<span style="color: red;">Здесь второе предложение.</span></div>
<span style="color: red;">Здесь <span style="text-decoration: line-through;">третье</span> предложение.</span><br />
<br />
Для придания буквам различной величины, используется свойство text-transform. Оно принимает значения:<br />
<ul>
<li>capitalize - делает первую букву каждого слова прописной</li>
<li>uppercase - делает все буквы прописными</li>
<li>lowercase - делает все буквы строчными</li>
</ul>
Теперь сделаем прописными первые буквы всех слов в абзаце.<br />
Cоздадим правило "p.tr" со свойством text-transform: capitalize;<br />
<code>
<span style="color: blue;">p.tr {<br />
text-transform: capitalize;<br />
}</span>
</code><br />
и присвоим его третьему абзацу<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="ab">Здесь первое предложение.</p><br />
<p class="text">Здесь второе предложение.</p><br />
<p class="tr">Здесь <span class="cherta">третье</span> предложение.</p><br />
<body><br />
</html>
</span></code><span style="color: blue;"> </span><br />
После того как мы применили к третьему абзацу правило "p.tr", текст стал выглядеть так:<br />
<div style="text-indent: 30px;">
<span style="color: red;">Здесь первое предложение.</span></div>
<div style="text-align: right;">
<span style="color: red;">Здесь второе предложение.</span></div>
<div style="text-transform: capitalize;">
<span style="color: red;">Здесь <span style="text-decoration: line-through;">третье</span> предложение.</span></div>
Свойство word-spacing указывает расстояние между словами.<br />
Зададим расстояние 10 пикселей между словами. Добавим свойство word-spacing со значением 10px в правило "p.ab"<br />
<code>
<span style="color: blue;">p.ab {<br />
text-indent: 30px;<br />
word-spacing: 10px;<br />
} </span></code><br />
<code> </code>
Расстояние между словами первого абзаца стало 10 пикселей:<br />
<div style="text-indent: 30px; word-spacing: 10px;">
<span style="color: red;">Здесь первое предложение.</span></div>
<div style="text-align: right;">
<span style="color: red;">Здесь второе предложение.</span></div>
<div style="text-transform: capitalize;">
<span style="color: red;">Здесь <span style="text-decoration: line-through;">третье</span> предложение.</span></div>
Если Вы хотите увеличить расстояние между буквами, то используйте свойство letter-spacing<br />
<code>
<span style="color: blue;">p.ab {<br />
text-indent: 30px;<br />
word-spacing: 10px;<br />
letter-spacing: 5px;<br />
}</span> </code><br />
<code> </code>
Расстояние между буквами первого абзаца стало 5 пикселей:<br />
<div style="letter-spacing: 5px; text-indent: 30px; word-spacing: 10px;">
<span style="color: red;">Здесь первое предложение.</span></div>
<div style="text-align: right;">
<span style="color: red;">Здесь второе предложение.</span></div>
<div style="text-transform: capitalize;">
<span style="color: red;">Здесь <span style="text-decoration: line-through;">третье</span> предложение.</span></div>
Если Вы хотите увеличить расстояние между строками, то используйте свойство line-height.<br />
Полный список свойств для работы с текстом можно посмотреть в <a href="http://css-b.blogspot.ru/" target="_blank">справочнике</a>.</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-1106747309130554372013-05-09T01:00:00.000-07:002014-09-16T08:10:48.506-07:00Создание рамок<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Создание рамок </h1>
Каждому html-тэгу предназначается своя рамка.<br />
Для настройки внешнего вида рамки существуют 3 свойства:<br />
<ul>
<li>border-width - по ширине рамки</li>
<li>border-style - по стилю рамки</li>
<li>border-color - по цвету рамки</li>
</ul>
<div style="text-align: justify;">
Если, например, нужно создать рамку для абзаца. Первое, что надо сделать это создать правило, придумав его название, к примеру - ".ram", где
указываем ширину - 2 пикселя (2px), её стиль - сплошная (solid) и цвет рамки - синий
(blue).</div>
<br />
<code>
<span style="color: blue;">.ram {<br />
border-width: 2px;<br />
border-style: solid;<br />
border-color: </span></code><span style="color: blue;"><code>blue;<br />
}</code></span><br />
<code> </code>
и присвоим его первому предложению<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="ram">Запись первого предложения.</p><br />
<p>Запись второго предложения.</p><br />
<p>Запись третьего предложения.</p><br />
<body><br />
</html></span></code><br />
<br />
<code> </code>
Наша рамка будет иметь следующий вид:<br />
<br />
<div style="border: 2px solid blue;">
Запись первого предложения.</div>
Запись второго предложения.<br />
Запись третьего предложения.<br />
<br />
<div style="text-align: justify;">
Поскольку свойства border-width, border-style и border-color находятся в одной группе свойств border, то наше правило ".ram" можно записать короче</div>
<br />
<code>
<span style="color: blue;">.ram {<br />
border: 2px solid blue;<br />
}</span></code><br />
<br />
<div style="text-align: justify;">
<code> </code> Более подробно о сокращенной записи можно прочитать в разделе <a href="http://css-u.blogspot.ru/2013/05/sokrashennaya-zapis-svoystv.html" target="_blank">"Сокращенная запись свойств".</a></div>
<div style="text-align: justify;">
Полный список значений, применяемых к группе свойств border, можно посмотреть в <a href="http://css-b.blogspot.ru/" target="_blank">справочнике</a>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Любая рамка имеет четыре стороны. Чтобы какую-либо сторону рамки сделать с нужными шириной, стилем и цветом, надо использовать нижеследующие свойства CSS:</div>
<ul style="text-align: justify;">
<li>border-top - для вехней стороны рамки</li>
<li>border-right - для правой стороны рамки</li>
<li>border-bottom - для нижней стороны рамки</li>
<li>border-left - для левой стороны рамки</li>
</ul>
<div style="text-align: justify;">
Например, понадобилось вместо первоначального варианта рамки сделать верхнюю и нижнюю стороны рамки в первом абзаце в виде зелёных (green) точек (dotted), диаметром в 3 пикселя (3px), левую же и правую
стороны рамки сделать сплошными (solid) синими (blue), шириной 4 пикселя (4px). Для
этого дополним старое правило ".ram" нужными нам свойствами:</div>
border-bottom: 3px dotted green;<br />
border-top: 3px dotted green;<br />
border-left: 4px solid blue;<br />
border-right: 4px solid blue;<br />
<br />
Получится следующее:<br />
<code>
<span style="color: blue;">.ram {<br />
border: 2px solid </span></code><span style="color: blue;"><code>blue;<br />
border-bottom: 3px dotted </code><code>green;<br />
border-top: 3px dotted </code><code>green;<br />
border-left: 4px solid </code><code>blue;<br />
border-right: 4px solid </code><code>blue;<br />
}</code></span><br />
<br />
<div style="text-align: justify;">
<code> </code> После того, как определены рамки для всех четырех сторон, свойство border: 2px solid blue; убираем из этого правила и получаем старое правило с новыми сойствами:</div>
<br />
<code>
<span style="color: blue;">.ram {<br />
</span></code><span style="color: blue;"><code><code>border-bottom: 3px dotted </code><code>green;<br />
border-top: 3px dotted </code><code>green;<br />
border-left: 4px solid </code><code>blue;<br />
border-right: 4px solid </code><code>blue;</code><br />
}</code></span><br />
<br />
<code> </code> Наша рамка примет уже новый вид:<br />
<br />
<div style="border-bottom: 3px dotted green; border-left: 4px solid blue; border-right: 4px solid blue; border-top: 3px dotted green;">
Запись первого предложения.</div>
Запись второго предложения.<br />
Запись третьего предложения.<br />
<br /></div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-91820287329022071192013-05-08T01:00:00.000-07:002014-09-16T08:19:21.840-07:00Создание отступов<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Создание отступов</h1>
При создании отступов используют следующие 2 свойства:<br />
<ul>
<li>margin - для внешних отступов</li>
<li>padding - для внутренних отступов</li>
</ul>
Чтобы задать внешние отступы для абзаца, создадим правило и назовём его, например, ".otstup". В нём пропишем свойство margin и значение в пикселях: <br />
<code>
<span style="color: blue;">.otstup {<br />
margin: 40px;<br />
border: 1px solid gray;<br />
}
</span></code><span style="color: blue;"> </span><br />
Это правило присвоим первому абзацу<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="otstup">Здесь первое предложение.</p><br />
<p>Здесь второе предложение.</p><br />
<body><br />
</html></span></code><br />
<br />
<code> </code>
Тэг <p> получил внешние отступы в 40 пикселей со всех сторон:<br />
<div style="border: 1px solid gray; margin: 40px;">
Здесь первое предложение.</div>
Когда нужен отступ с конкретных сторон, то можно использовать следующие свойства:<br />
<ul>
<li>margin-top - отступ сверху</li>
<li>margin-right - отступ справа</li>
<li>margin-bottom - отступ снизу</li>
<li>margin-left - отступ слева</li>
</ul>
К примеру зададим внешние отступы в 40 пикселей сверху и слева. Для
этого используем свойства margin-top и margin-left со значениями 40px.<br />
<code>
<span style="color: blue;">.otstup {<br />
margin-top: 40px;<br />
margin-left: 40px;<br />
border: 1px solid gray;<br />
}</span></code><br />
<code> </code>
Либо можно воспользоваться сокращенной записью свойства margin<br />
<code>
<span style="color: blue;">.otstup {<br />
margin: 40px 0 0 40px;<br />
border: 1px solid gray;<br />
}
</span></code><span style="color: blue;"> </span><br />
Подробнее о <a href="http://css-u.blogspot.ru/2013/05/sokrashennaya-zapis-svoystv.html" target="_blank">сокращенной записи свойств</a>.<br />
Тэг <p> получил внешние отступы в 40 пикселей сверху и слева:<br />
<div style="border: 1px solid gray; margin: 40px 0 0 40px;">
Здесь первое предложение.</div>
Теперь зададим абзацу внутренние отступы. Для этого создадим правило
".otstup2", в котором укажем свойство padding и значение в пикселях<br />
<code>
<span style="color: blue;">.otstup2 {<br />
padding: 40px;<br />
border: 1px solid gray;<br />
}</span></code><br />
<br />
<code> </code>
и присвоим его второму абзацу<br />
<code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="otstup">Здесь первое предложение.</p><br />
<p class="otstup2">Здесь второе предложение.</p><br />
<body><br />
</html></span></code><br />
<code> </code>
Тэг <p> получил внутренние отступы в 40 пикселей со всех сторон:<br />
<div style="border: 1px solid gray; padding: 40px;">
Здесь второе предложение.</div>
Если нужен отступ с конкретных сторон, то можно использовать следующие свойства:<br />
<ul>
<li>padding-top - отступ сверху</li>
<li>padding-right - отступ справа</li>
<li>padding-bottom - отступ снизу</li>
<li>padding-left - отступ слева</li>
</ul>
К примеру зададим внутренние отступы в 40 пикселей сверху и слева.
Для этого используем свойства padding-top и padding-left со значениями
40px.<br />
<code>
<span style="color: blue;">.otstup2 {<br />
padding-top: 40px;<br />
padding-left: 40px;<br />
border: 1px solid gray;<br />
}</span></code><br />
<br />
<code> </code>
Либо можно воспользоваться сокращенной записью свойства padding<br />
<code>
<span style="color: blue;">.otstup2 {<br />
padding: 40px 0 0 40px;<br />
border: 1px solid gray;<br />
}</span></code><br />
<br />
<code> </code>
Подробнее о <a href="http://css-u.blogspot.ru/2013/05/sokrashennaya-zapis-svoystv.html" target="_blank">сокращенной записи свойств</a>.<br />
Тэг <p> получил внутренние отступы в 40 пикселей сверху и слева:<br />
<div style="border: 1px solid gray; padding: 40px 0 0 40px;">
Здесь второе предложение.</div>
Полный список значений, применяемых к группам свойств margin и padding, можно посмотреть в <a href="http://css-b.blogspot.ru/" target="_blank">справочнике</a>.</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-41451252633848433612013-05-07T01:00:00.000-07:002014-09-16T08:29:57.928-07:00Плавающий объект<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Плавающий объект</h1>
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;"><b>HTML-код</b></td>
<td style="text-align: center; width: 50%;"><b>CSS-код</b></td>
</tr>
<tr>
<td style="vertical-align: top; width: 50%;"><code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="obj">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p><br />
<body><br />
</html>
</span></code>
</td>
<td style="vertical-align: top; width: 50%;"><code>
<span style="color: blue;">.obj {<br />
width: 200px;<br />
border: 1px solid gray;<br />
}
</span></code>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><b>Получилось следующее:</b></td>
</tr>
<tr>
<td colspan="2"><div style="border: 1px solid gray; width: 200px;">
Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</td>
</tr>
</tbody></table>
В данном тексте все элементы расположены обособленно, т.е. по-порядку идут: первый абзац, второй абзац, третий абзац.<br />
Если нужно, чтобы оставшийся текст обтекал первый абзац, то задайте для первого абзаца свойство float. Это означает, что данный абзац будет не
жестко закреплён, а плавающим.<br />
В свойстве float применяются следующие значения:<br />
<ul>
<li>top - ставит объект сверху</li>
<li>right - ставит объект справа</li>
<li>bottom - ставит объект снизу</li>
<li>left - ставит объект слева</li>
</ul>
Для задания по первому абзацу обтекания слева, расположите сам абзац справа (свойство float: right;)<br />
<table border="1" style="width: 100%;"><tbody>
<tr>
<td style="text-align: center; width: 50%;"><b>HTML-код</b></td>
<td style="text-align: center; width: 50%;"><b>CSS-код</b></td>
</tr>
<tr>
<td style="width: 50%;"><code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p class="obj">Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p><br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p><br />
<body><br />
</html>
</span></code>
</td>
<td style="vertical-align: top; width: 50%;"><code>
<span style="color: blue;">.obj {<br />
float: right;<br />
width: 200px;<br />
border: 1px solid gray;<br />
}
</span></code>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><b>Получилось следующее:</b></td>
</tr>
<tr>
<td colspan="2"><div style="border: 1px solid gray; float: right; width: 200px;">
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</td></tr>
</tbody></table>
<div class="post-footer-line post-footer-line-1">
<span class="post-comment-link">
</span>
<span class="post-icons">
</span>
<br />
<div class="post-share-buttons goog-inline-block">
<a class="goog-inline-block share-button sb-email" href="http://www.blogger.com/share-post.g?blogID=8064909496405082985&postID=959396234557773861&target=email" target="_blank" title="Отправить по электронной почте"><span class="share-button-link-text"><br /></span></a><span class="share-button-link-text"></span>
</div>
</div>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-83345043249176074562013-05-06T01:00:00.001-07:002014-09-16T08:38:22.966-07:00Абсолютное позиционирование<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Абсолютное позиционирование</h1>
Используя абсолютное позиционирование можно поместить любой объект в нужном месте экрана.<br />
Например, возьмем какое-нибудь изображение и разместим его.<br />
<div dir="ltr" style="text-align: left;">
Для абсолютного позиционирования применяется свойство position: absolute; затем указываются отступы:<br />
<ul>
<li>top - сверху</li>
<li>right - справа</li>
<li>bottom - снизу</li>
<li>left - слева</li>
</ul>
и все размеры элемента для позиционирования:<br />
<ul>
<li>width - ширина</li>
<li>height - высота</li>
</ul>
Затем помещаем изображение на фон позиционируемого элемента. Для этого указываем свойство background-image: url(путь_к_картинке);<br />
Добавляем сам элемент в код страницы. Для этого можно пользоваться
пустыми тегами: <span> или <div>. Если не знаете как это делать, то прочитайте <a href="http://css-u.blogspot.ru/2013/05/principi-sozdaniya-css-pravil.html" target="_blank">общие принципы создания правил CSS</a>.<br />
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;">HTML-код</td>
<td style="text-align: center; width: 50%;">CSS-код</td>
</tr>
<tr>
<td style="vertical-align: top;"><code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p><br />
... <br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p><br />
<div id="abs"></div><br />
<body><br />
</html>
</span></code>
</td>
<td style="vertical-align: top;"><code>
<span style="color: blue;">#abs {<br />
position: absolute;<br />
top: 220px;<br />
right: 120px;<br />
width: 200px;<br />
height: 200px;<br />
background-image: url(img/tack.gif);<br />
}
</span></code>
</td>
</tr>
</tbody></table>
<a href="http://css-u.blogspot.ru/2013/09/lorem-ipsum-dolor-sit-amet-consectetur_26.html" target="_blank">Пример абсолютного позиционирования.</a></div>
<div class="post-footer-line post-footer-line-1">
<span class="post-comment-link">
</span>
<span class="post-icons">
</span>
<br />
<div class="post-share-buttons goog-inline-block">
<br />
<a class="goog-inline-block share-button sb-facebook" href="http://www.blogger.com/share-post.g?blogID=8064909496405082985&postID=8896907076002690084&target=facebook" target="_blank" title="Опубликовать в Facebook"><span class="share-button-link-text"></span></a>
</div>
</div>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-10230817319909335152013-05-06T01:00:00.000-07:002014-09-16T08:46:16.398-07:00Управление списками<div dir="ltr" style="text-align: left;" trbidi="on">
<h1 style="text-align: center;">
Управление списками</h1>
Любой список имеет только три основных свойства:<br />
<ul>
<li>list-style-type - тип маркера</li>
<li>list-style-position - позиция</li>
<li>list-style-image - картинка</li>
</ul>
<div style="text-align: justify;">
Чтобы задать тип маркера пользуются свойством list-style-type. Даже при ненумерованном списке (<ul>), с применением к списку свойства
list-style-type со значением decimal, список становится нумерованным.</div>
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;"><b>HTML-код</b></td>
<td style="text-align: center; width: 50%;"><b>CSS-код</b></td>
</tr>
<tr>
<td style="vertical-align: top; width: 50%;"><code>
<span style="color: blue;"><html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<ul class=list><br />
<li>Первый элемент</li><br />
<li>Второй элемент</li><br />
<li>Третий элемент</li><br />
<li>Четвертый элемент</li><br />
<li>Пятый элемент</li><br />
</ul><br />
<body><br />
</html>
</span></code>
</td>
<td style="vertical-align: top; width: 50%;"><code>
<span style="color: blue;">ul.list {<br />
border: 1px solid gray;<br />
list-style-type: decimal;<br />
}
</span></code>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><b>Получилось следующее:</b></td>
</tr>
<tr>
<td colspan="2"><ul style="border: 1px solid gray; list-style-type: decimal;">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>
</td>
</tr>
</tbody></table>
Видно, что маркеры находятся вне контейнера с объектами списка. Если
нужно поместить маркеры внутрь, то это делается с помощью свойства
list-style-position: inside; По умолчанию это свойство имеет значение
outside (снаружи).<br />
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;"><b>HTML-код</b></td>
<td style="text-align: center; width: 50%;"><b>CSS-код</b></td>
</tr>
<tr>
<td style="vertical-align: top; width: 50%;"><code>
<html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<ul class=list><br />
<li>Первый элемент</li><br />
<li>Второй элемент</li><br />
<li>Третий элемент</li><br />
<li>Четвертый элемент</li><br />
<li>Пятый элемент</li><br />
</ul><br />
<body><br />
</html>
</code>
</td>
<td style="vertical-align: top; width: 50%;"><code>
ul.list {<br />
border: 1px solid gray;<br />
list-style-type: decimal;<br />
list-style-position: inside;<br />
}
</code>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><b>Получилось следующее:</b></td>
</tr>
<tr>
<td colspan="2"><ul style="border: 1px solid gray; list-style-position: inside; list-style-type: decimal;">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>
</td>
</tr>
</tbody></table>
Когда надо заменить маркеры на картинку, к примеру на <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsizkTVFFrMWa7sX9bywN_NOfpBHku-iZg93DWKxyWoA2HmG54vETp6FsfuLvtUBxjRRDNTzMOdo4OO54hV_VqGS5V9vdNAZfpWLsnmnMsKV0tby7j0a9JH2_pDtrkLIPSiOdReFeCw/s1600/Ok.gif"><img alt="Картинка для замены маркеров" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsizkTVFFrMWa7sX9bywN_NOfpBHku-iZg93DWKxyWoA2HmG54vETp6FsfuLvtUBxjRRDNTzMOdo4OO54hV_VqGS5V9vdNAZfpWLsnmnMsKV0tby7j0a9JH2_pDtrkLIPSiOdReFeCw/s1600/Ok.gif" /></a>, то используйте свойство list-style-image: url(путь_к_картинке);<br />
<table border="1" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;">HTML-код</td>
<td style="text-align: center; width: 50%;">CSS-код</td>
</tr>
<tr>
<td style="vertical-align: top; width: 50%;"><code>
<html><br />
<head><br />
<title>Пример CSS</title><br />
</head><br />
<body><br />
<ul class=list><br />
<li>Первый элемент</li><br />
<li>Второй элемент</li><br />
<li>Третий элемент</li><br />
<li>Четвертый элемент</li><br />
<li>Пятый элемент</li><br />
</ul><br />
<body><br />
</html>
</code>
</td>
<td style="vertical-align: top; width: 50%;"><code>
ul.list {<br />
border: 1px solid gray;<br />
list-style-type: decimal;<br />
list-style-position: inside;<br />
list-style-image: url(img/ok.gif);<br />
}
</code>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">Что получилось</td>
</tr>
<tr>
<td colspan="2"><ul style="border: 1px solid gray; list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcsizkTVFFrMWa7sX9bywN_NOfpBHku-iZg93DWKxyWoA2HmG54vETp6FsfuLvtUBxjRRDNTzMOdo4OO54hV_VqGS5V9vdNAZfpWLsnmnMsKV0tby7j0a9JH2_pDtrkLIPSiOdReFeCw/s1600/Ok.gif); list-style-position: inside; list-style-type: decimal;">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
<li>Четвертый элемент</li>
<li>Пятый элемент</li>
</ul>
</td>
</tr>
</tbody></table>
С полным списоком значений, принимаемых группой свойств list-style, можно ознакомиться в <a href="http://cssonline.net.ru/cssprop.php">справочнике</a>.</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.comtag:blogger.com,1999:blog-6944273882237940282.post-75603278937434450252013-05-01T10:09:00.000-07:002013-09-26T10:13:30.497-07:00<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<b>Пример абсолютного позиционирования</b></div>
<br /></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br />
<div style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG9TbXwYSGkUsMiqtG7iPkRCEqD2mqRbmixckTEM0s8JHv4SgKL7UBsK-DzLHECMEuBYUE1o7gOhh4RF723MrPQ_8o6zZh0bP2tzrLSBXWc2bESIkMPE0NVCBLUK7mI-_n41feWFbSyg/s1600/Thupa-Paravoz-5.jpg); height: 139px; position: absolute; right: 120px; top: 220px; width: 200px;">
</div>
</div>
maildmishttp://www.blogger.com/profile/14736075632257987999noreply@blogger.com