Добавление CSS. Подключение нескольких CSS-файлов к одному HTML-документу
18.04.2019
Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.
Данный раздел построен по принципу пошагового изучения материала, поэтому перед каждым названием урока по HTML и CSS, стоит цифра соответствующая порядковому номеру урока. Это естественно на тот случай если вы хотите изучить все от самых основ и не сделать себе кашу в голове. Если же вы уже знаете, что-либо о языках HTML и CSS, то вы так же можете найти здесь недостающие вам знания, или же, углубить уже изученное.
В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .
Наверное, каждый человек, который хоть раз в своей жизни сталкивался с созданием сайта, безусловно, слышал о такой связке как html и css я могу с уверенностью заявить, что если вы хотите делать сайты самостоятельно, то вам ни как не обойтись без знаний этих двух вещей.
После того как вы получили общие понятия о том, что такое html у вас в голове, явно сложилась неоднозначная картина, и я думаю это не удивительно. Пора переходить непосредственно к практике и создать-таки свой первый html документ.
Как и в языке html, так и в CSS есть свои особенности, правила и структура. В этом уроке я расскажу вам об основных понятиях языка CSS, о его структуре, устройстве и мы сделаем с вами первую CSS таблицу стилей и узнаете, как подключить таблицу стилей к html документу.
Селекторы в CSS являются основой самого языка и их изучение и понимание очень важно, поэтому в этом уроке я вам расскажу еще о нескольких видах селекторах и опишу их возможности.
Очень важным моментом в создании сайта, является работа с текстом, и как вы понимаете, с текстом в html так же необходимо уметь работать, и знать какие теги бывают и как их можно использовать.
После того как вы узнали все html теги для работы с текстом, теперь пора перейти непосредственно к CSS работе с текстом, которая уже значительно расширит ваши познания и возможности.
В CSS огромное количество всевозможных удобных и качественно меняющих внешний вид свойств и мы продолжаем изучать CSS работу с текстом и в этом уроке, мы углубимся в тему работы с текстом и рассмотрим новые свойства текста.
Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.
CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.
Блочная верстка частенько используется при создании сайта или блога. Как следствие этого — часто требуется делать отступы у блоков. По этой причине о том, как сделать отступы в CSS
подробно описано в данном уроке. Для браузера каждый тег является контейнером, у которого есть содержимое, внутренний отступ, внешние поля, а также рамка. В данном уроке мы научимся делать внутренние и внешние отступы, рассмотрим основные их параметры.
На рисунке ниже наглядно представлены параметры отступов блоков:
Как видно, отступы можно делать в четырех направлениях: верхний отступ (top), нижний отступ (bottom), левый отступ (left) и правый отступ (right). В качестве единиц измерения могут быть пиксели, проценты и другие единицы CSS — подробнее о них . В уроке используются пиксели.
Внутренние отступы блоков
За внутренние отступы в CSS отвечает свойство padding
. Итак, давайте рассмотрим пример задания внутренних отступов у блока:
В данном примере внутренние отступы задаются отдельно для каждой стороны блока. Кроме этого, существует несколько способов задания отступов в CSS:
margin: 5px 8px 5px 8px; /*верхний, правый, нижний, левый внешние отступы*/
margin: 5px 8px 5px; /*описывает верхний, левый и правый, нижний отступы*/
margin: 5px 8px; /*описывает верхний и нижний, правый и левый отступы*/
margin: 7px; /*описывает все внутренние отступы по 7px*/
Запомнить проще первый и последний способы. В первом случае отступы ставятся по часовой стрелке (верхний, правый, нижний, левый) - величину отступа мы можем указать любую, в последнем случае отступы со всех сторон будут одинаковые.
Внешние отступы блоков
За внешние отступы в CSS отвечает свойство margin
. Примеры внешних отступов в CSS:
padding: 5px 10px 5px 10px; /*верхний, правый, нижний, левый внешние отступы*/
padding: 5px 10px 5px; /*описывает верхний, левый и правый, нижний отступы*/
padding: 5px 10px; /*описывает верхний и нижний, правый и левый отступы*/
padding: 7px; /*описывает все внешние отступы по 7px*/
Таким образом, как сделать отступы в CSS
— вопрос не сложный, но весьма актуальный. Чтобы лучше усвоить описанную выше информацию следует запомнить, что существует два свойства: padding — внутренние отступы и margin — внешние отступы. Также, как вы уже знаете, способов задания отступов существует несколько, можно их использовать.
Сайт на самом деле представляет собой набор файлов из кода на нескольких языках. А код можно писать в любом нормальном текстовом редакторе, даже в блокноте. Конечно, лучше использовать более продвинутый софт, вроде Notepad++ или полноценных программ для разработки. Ну да ладно, давайте посмотрим, как сделать сайт в блокноте средствами html и css.
Как создать сайт с нуля на html в блокноте — пошаговая инструкция
А вот оно и наше ключевое слово – HTML. Именно с этого языка начинается создание сайта. Без него невозможно представить себе веб-разработку. Это все равно что пытаться сварить суп без воды. Не спешите закрывать страницу, если вы абсолютный ноль в html. В этой пошаговой инструкции мы вместе создадим простой сайт, а я попробую объяснить те куски кода, которые мы будем добавлять в блокнот.
Шаг 1. Создание файлов
Создание html сайта в блокноте нужно начать с того, что создать два текстовых документа в какой-нибудь пустой папке. Один должен получить расширение.html, а второй.css. Имена могут быть любыми. Заметьте, не site.html.txt , а именно site.html .
Для этого, сохраняя документ вручную, допишите ему расширение через точку. Такую же манипуляцию проделываем со вторым файлов, но ему даем расширение.css. Ах да, не забудьте выбрать кодировку UTF-8
.
Шаг 2. Закладываем структуру
Файлы созданы и можно приступать к работе. Открывайте html-документ. В нем будет происходить основная работа. Строительным элементом в этом языке являются теги – это специальные слова в угловых скобках, которые указывают браузеру, что нужно отобразить на веб-странице.
Давайте и мы вставим что-то в наш документ, а то совсем пусто.
Hello, world!
Привет, мир!
Итак, мы вставили сразу кучу тегов и может быть вы ничего не понимаете. Попробуйте открыть страничку в браузере. Там вы увидите слова “Привет, мир”
если все сделано правильно. Это и есть, по сути, простейшая веб-страничка.
html – контейнер для всех остальных тегов. В нем содержится вся веб-страница. В самом верху мы указали тип документа. Тег head – это служебная информация о странице. Тут мы с помощью тега
задали название страницы, которое будет выводиться в строке браузера вверху. Далее задали кодировку и подключили css-файл с помощью тега <link> .</p>
<p>Как видите, есть теги парные и есть одинарные. Сейчас я не буду на этом подробно останавливаться, это зависит от того, какие функции выполняет команда.</p>
<h3>Шаг 3. Планирование</h3>
<p>Сейчас давайте на минутку оставим код в покое и подумаем. Из чего, по вашему, состоит типичный веб-ресурс? Конечно, в сети их много и все они разные, но есть же какие-то одинаковые элементы структуры, не так ли? Например, вертикальные и <a href="/kak-dobavit-vydvigayushchie-menyu-v-html-css3-gorizontalnoe-plavno.html">горизонтальные меню</a>, боковые колонки, шапки (самый верх, где располагается логотип) и подвал (низ сайта).</p>
<p>Так вот, давайте и мы распланируем, как бы сделать наш первый простой сайт. В этом деле все нужно начинать с планирования. Нужно выделить структурные части будущего шаблона, из чего он будет состоять. Допустим, в нашем простом шаблоне будет шапка, часть с основным содержимым, боковая колонка и футер или подвал (одно и то же).</p>
<h3>Шаг 4. Начинаем!</h3>
<p>Значит, нам нужно 4 основных блока. В html есть возможность в парный тег вкладывать неограниченное количество других тегов, поэтому я предлагаю следующий метод:<br>Создать один общий контейнер, в котором будут расположены все наши 4 основных блока.</p>
<p>Итак, вернемся к коду. Писать мы его будем в <a href="/html-tegi-html-head-body-tegi-kotorye-est-v-lyuboi-stranichke-interneta-pishem.html">теге body</a>, так как он и являет собой <a href="/razmetka-veb-stranicy-v-html-budushchee-css-razmetki-podhody-k-sozdaniyu.html">будущую страницу</a>. Можете смело удалить надпись <b>«Привет, мир»
</b>, и напишем вот что:</p><p>
<div id="main">
<div id="header">Это наша шапка</div>
<div id="sidebar">Это боковая колонка</div>
<div id="content">Это - контент</div>
<div id="footer">Подвал</div>
</div>
</p><p>Таким образом мы создали один большой блок, в которой поместили остальные 4. Блок в html создается парным <a href="/raznica-mezhdu-class-i-id-na-primere-tega-div-chem-otlichayutsya-id-i.html">тегом div</a> , который не имеет <a href="/kak-predstavlyayutsya-giperssylki-v-html-dokumente-href-obyazatelnyi.html">обязательных атрибутов</a>, но я сразу добавил каждому из них уникальный id (идентификатор), чтобы позднее оформить внешний вид через CSS.</p>
<p>Скопируйте этот код себе и обновите страничку в браузере. Пока вы видите перед собой просто 4 строчки текста, но ничего, щас мы их превратим в сайт!</p>
<p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/2-1.jpg' height="89" width="160" loading=lazy><br></p>
<h3>Шаг 5. Нам поможет CSS</h3>
<p>Теперь начнем оформлять наши блоки. Конечно же, нужно начать с самого большого контейнера. Мы создали css-файл в самом начале, но так и не написали в него ничего. Самое время это исправить. Добавим туда такой код:</p><p>
*{
box-sizing: border-box
}
#main{
width: 810px;
margin: 0 auto;
border: 5px solid black
}
</p><p>Первое правило устанавливает такое поведение для блоков, чтобы отступы и рамки не увеличивали их ширину. Дальше по коду мы обращаемся к блоку с идентификатором main , для этого достаточно поставить решетку и дописать имя идентификатора. Сразу после этого открываются фигурные скобки, где перечисляются правила внешнего вида, которые применятся к элементу.</p>
<p>Мы установили общему контейнеру ширину в 810 пикселей, правило margin: 0 auto устанавливает блок по центру, то есть наш сайт будет отображаться красиво по центру, а не прижат к левому краю. Последнее <a href="/krossbrauzernyi-border-radius-vybor-resheniya-css-border-radius-color-style-i-drugie-css-svoistva.html">свойство border</a> добавляет черную сплошную рамку с каждой стороны блока.</p>
<p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/3-1.jpg' height="98" width="181" loading=lazy><br></p>
<p>Что ж, стили для главного контейнера мы сделали. На веб-страничке у нас по-прежнему отображается 4 строчки с текстом, но уже в черной рамке. Идем дальше.</p>
<p>Теперь самое время настроить внешний вид четырех основных структурных блоков нашей страницы. Я сразу приведу код, а ниже буду его комментировать.</p><p>
#header{
height: 100px;
border-bottom: 5px solid black
}
#sidebar{
width: 200px;
height: 500px;
float: left;
border-right: 5px solid black
}
#content{
width: 600px;
float: right;
height: 500px
}
#footer{
height: 75px;
clear: both;
border-top: 5px solid black;
}
</p><p>Как вы понимаете, я просто обращаюсь к элементам с разными идентификаторами, описывая их сверху вниз. Сначала стили задаются для шапки – я поставил высоту в 100 пикселей и рамку снизу, чтобы она была отделена от остальных блоков.</p>
<p>А вот дальше все становится интересней. Дело в том, что по умолчанию блоки отображаются сверху вниз, если их просто написать в html-коде и никаких дополнительных правил не задавать. Но ведь боковая колонка на то и боковая, чтобы отображаться сбоку от основной части страницы. А как это сделать? Смотрите, мы сайдбару задаем высоту, ширину, рамку и еще одно свойство (float: left).</p>
<p>Это правило означает, что элемент будет прижат к левому краю родителя (то есть <a href="/tehniki-raboty-s-dom-roditelskie-dochernie-i-sosednie-elementy-vyborka.html">родительского элемента</a> – блока #main). Отлично, теперь такое же свойство зададим блоку с контентом и он тоже прижмется к левому краю, но уже вслед за боковой колонкой.</p>
<p>Конечно, контент получает больше ширины, потому что так и должно быть, а вот высоту мы поставили одинаковую. На реальном сайте обычно в основном блоке будет много информации, поэтому высоту можно вообще не задавать. То же самое и с боковой колонкой, если в нее постоянно добавляется информация. Но мы для примера явно прописали высоту, чтобы было наглядно видно размеры блоков.</p>
<p>Наконец, осталось описать последний блок – <b>footer
</b>. Он получает небольшую высоту, рамку с высоту и еще одно новое для нас свойство. Это свойство clear со значением both . Зачем его писать? Мы с вами прижали два предыдущих блока к левому краю. Они стали так называемыми плавающими блоками, но по умолчанию обычные блоки могут не замечать плавающие и наезжать на них.</p>
<p>Чтобы этого не происходило наш подвал получил вот такую команду – мол, смотри, обычный блок, выше тебя располагаются два плавающих. Заметь их и расположись ниже, чем они. Вот такую команду, по сути, дает свойство clear: both , которое заставляет обычный блок расположиться ниже всех плавающих.</p>
<p>Отлично, а теперь обновите страницу в браузере. Ну что, уже намного больше похоже на сайт, хотя бы по структуре.</p>
<p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-v-bloknote.jpg' width="100%" loading=lazy></p>
<h3>Шаг 6. Разукрашиваем сайт</h3>
<p>Следующий, очень интересный этап – давайте добавим каких-то цветов нашему сайту. Пусть у него будет не сплошной <a href="/chernyi-fon-sdelat-belym-vopros-kak-sdelat-chernyi-fon-v-fotoshope.html">белый фон</a>, а что-то поинтереснее. Задать фон можно двумя способами:</p>
<ul><li>Общий фон сразу всему сайту, прописав его общему контейнеру #main</li>
<li>Если каждый из основных блоков должен иметь свой оттенок цвета, то тогда нужно каждому задать цвет отдельно. Но лучше сильно не увлекаться – красная шапка, зеленый контент и желтый подвал будут смотреться не очень, сразу скажу</li>
</ul><p>Предлагаю сделать по первому методу. Я тут нашел в онлайн-сервисе приятный светло-синий оттенок, который и предлагаю сделать фоном сайта. Добавьте к стилям общего контейнера такое свойство:</p><p>
#main{ background: #B3C1E6 }
</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/fon.jpg' width="100%" loading=lazy></p>
<p>Обновляем страничку и убеждаемся в том, что наш сайт получил приятную светло-синюю гамму. Теперь предлагаю немного продвинуть уровень дизайна – пусть фон шапки и подвала будет потемнее, чем у остальных блоков. Можно добавить такие строчечки кода:</p><p>
#header, #footer{ background: #9091DA }
</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/4-1.jpg' width="100%" loading=lazy></p>
<p>Тут мы применили <a href="/tehnologiya-led-televizora-chto-led-televizory-kachestvennaya-tehnika-po.html">новую технику</a> – через запятую записали два блока и <a href="/kak-izmenit-cvet-startovoi-stranicy-yandeks-novye-fony-dlya.html">новый фон</a> применится к им обоим.</p>
<h3>Шаг 7. Работаем над шапкой</h3>
<p>Дальнейшая работа будет заключаться в оформлении отдельных блоков до более привлекательного состояния. Начнем с шапки. Что у нас обычно в шапке? Правильно, <a href="/nik-solnce-krasivymi-bukvami-krasivye-nazvaniya-dlya-pochty-kak-pridumat.html">красивое название</a> сайта и логотип. Вот это мы и добавим.</p>
<p>Начать я предлагаю с логотипа. Поскольку сайт мы создаем с <a href="/prosteishaya-forma-otpravki-dannyh-na-pochtu-pri-pomoshchi-html-i-php.html">помощью html</a>, поместим логотип этого языка в левый угол шапки. В интернете я нашел вот такой вот милый логотипчик.</p>
<p>Его нужно скачать и положить в ту же папку, где хранится html-документ.<br>Теперь смотрим:</p><p>
#header{ background: #9091DA url(html.jpeg) no-repeat 5% center }
</p><p>Картинку я назвал html , а ее формат – jpeg , поэтому такая запись. Дальше мы также указали такие команды: картинка-фон не должна повторяться, а разместиться должна со смещением с 5% по горизонтали от начала блока и по центру по вертикали. Сначала всегда записывается горизонтальная позиция, а потом вертикальная.</p>
<p>Естественно, если у вас картинка называется по-другому или имеет другой формат, то вы должны немного изменить приведенный код. Отлично, логотип у нас есть. Пора убрать надпись – это шапка сайта и поставить вместо нее красивый заголовок. Удалим из шапки текст и вставим туда <a href="/html-makety-novye-elementy-maketa-v-html5-dvuhkolonochnyi-shablon-s.html">новый элемент</a>:</p><p>
<div id="header">
<div id="title">Название сайта</div>
</div>
</p><p>Теперь его нужно оформить:</p><p>
#title{
font-size: 32px;
float: left;
margin-left: 200px;
font-family: Tahoma;
color: yellow;
padding-top: 20px;
text-shadow: 0 0 5px orange;
}
</p><p>Мы задали приличное количество стилей: размер шрифта, семейство шрифта, прижатие заголовка к левому краю, левый отступ, цвет, верхний внутренний отступ и тень текста. Объяснять работу каждого свойства сейчас нет смысла, поэтому просто скопируйте код и вставьте в таблицу стилей (css-файл).</p>
<p>Все, простая шапка готова. Конечно, на реальном сайте в ней могут находиться еще какие-то ссылки, адреса и т.д. Ну чтож, давайте что ли добавим для реализма. Этот html-код нужно вставить в содержимое шапки сайта.</p><p>
<ul id="about">
<li>О нас</li>
<li>Блог</li>
<li>Обратная связь</li>
</ul>
</p><p>Он формирует список их трех ссылок. В действительности они должны куда-то вести, но у нас это просто пустые ссылки. Также оформим список и ссылки в нем.</p><p>
#about{
float: right;
list-style: none;
margin-right: 50px
}
#about a{
color: yellow;
}
</p><h3>Шаг 8. Делаем меню в боковой колонке</h3>
<p>Обычно боковая колонка содержит меню сайта и еще много разных виджетов. Давайте сделаем там простейшее меню. Опять же, в этом нам поможет список, с помощью которого мы уже вывели ссылки в шапке, но поскольку главное меню по идее объемнее, то ссылок будет больше.</p><p>
<ul class="menu">
<li>Пункт меню1</li>
<li>Пункт меню2</li>
<li>Пункт меню3</li>
<li>Пункт меню4</li>
<li>Пункт меню5</li>
<li>Пункт меню6</li>
</ul>
</p><p>Menu{ list-style: none }
</p><p>Собственно, тут я прописал только одно правило – убрал маркеры у пунктов списка, все остальное и так устраивает. Также перед меню можно добавить заголовок и как-нибудь его оформить. Можете этим сами заняться. Заголовки пишутся в парных тегах <h1> - <h6> , где первый – самый большой (заголовок статьи), а последний – самый маленький, часто он вообще не применяется. Для заголовка меню в боковой колонке оптимально брать <h3>.</p>
<h3>Шаг 9. Оформляем контентный блок</h3>
<p>Ну а что его там оформлять? Нужно добавить немного текста, чтобы было похоже на реальный сайт со статьей.</p><p>
<h1>Заголовок статьи</h1>
<p>А здесь будет какая-нибудь статья...</p>
<p>Содержимое в статье разбивается на абзацы и подзаголовки...</p>
<h2>Подзаголовок статьи</h2>
</p><p>Любое содержимое можно вставить в блок с контентом. Абзацы в нем формируют основное содержимое, а теги h1-h2 – заголовки и подзаголовки. Тег <b>h1
</b> должен быть единственным на странице.</p>
<p>Оформление в <a href="/kak-razblokirovat-naidennyi-aifon-5-se-esli-dannye-ne-vazhny-v.html">данном случае</a> заключается в том, чтобы определить цвет текста. Например, можно поставить коричневый. Заголовки можно выделить немного другим оттенком. Тут я не буду приводить никакого кода, сами уже сможете додуматься.</p>
<h3>Шаг 10. Оформляем подвал</h3>
<p>Если честно, у меня нет желания сейчас что-то пихать в подвал. На реальных сайтах в нем размещаются сведения об авторских правах, иногда там размещают меню и ссылки на другие сайты. Я напишу там просто слово копирайт и выровняю его по центру вот так:</p><p>
#footer{ text-align: center }
</p><h3>Шаг 11. А нет, нет больше шагов</h3>
<p>Вот, собственно, и все. Процесс создания <a href="/prostoi-adaptivnyi-shablon-html-besplatnye-adaptivnye-shablony-s.html">наипростейшего шаблона</a> на html можно считать законченным. У нас есть логотип, есть название сайта, меню, статья, подвал. В общем, это очень примитивный, но все же сайт.</p>
<p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-tselikom.jpg' width="100%" loading=lazy></p>
<p>Конечно, сайт выглядит так, что хочется никогда на него больше не смотреть, но сути это не меняет. Хороший внешний вид это работа веб-дизайнера.</p>
<h3>А что с ним дальше делать?</h3>
<p>Целью этой статьи было просто показать вам, как создается простейший сайт с помощью html и css. Можно поработать над его дизайном и в результате может получиться что-то привлекательное. Но все же нужно помнить, что это статический сайт. Если на него и добавлять новые страницы, то это делается вручную, с помощью создания новых html-документов.</p>
<p>Такой способ управления сайтом давно в прошлом, хотя и имеет свои плюсы. Чтобы выложить сайт в сеть, вы должны все html-файлы, таблицу стилей и необходимые картинки забросить на какой-нибудь хостинг, платный или бесплатный. Также нужно зарегистрировать имя сайта, чтобы он как-то назывался. Домен третьего уровня можно получить бесплатно у многих компаний, а вот за домен второго уровня придется заплатить <b>(.ru, .com, .ua и т.д.)
</b></p>
<p>То, что мы делали с вами по ходу этой статьи, называется версткой сайта. Если вы хотите управлять сайтом с помощью удобного <a href="/skachat-programmu-dlya-html-redaktor-vizualnyi-html-redaktor.html">визуального редактора</a>, то уже сделанную верстку нужно будет интегрировать с любым из популярных движков. Лучше всего с <b>WordPress
</b>.</p>
<p>Это отдельная тема – интеграция во многом намного сложнее самой верстки. Чтобы научиться создавать сайты под движок, нужно пройти хороший обучающий курс. <a href="/uznat-vse-o-kompyutere-programma-rukovodstvo-po-bystromu-vyboru.html">Бесплатной информации</a> на просторах интернета вам может не хватить. Процесс создания сайта на wordpress я описал , но там вы не найдете сведений, как интегрировать <a href="/skachat-shablon-html-s-podderzhkoi-retiny-besplatnye-adaptivnye.html">html шаблон</a> с движком.</p>
<p>В статье приводился так называемый блочный метод верстки, то есть все содержимое мы разместили в блоках. Сегодня это все еще самый популярный метод. Вообще при этом в процессе желательно использовать теги HTML5 , а не просто блоки, но ради простоты в этой статье был применен самый простой вариант.</p>
<p>Надеюсь, у вас сложилось хотя бы минимальное представление о том, как сделать сайт html в блокноте или любом другом текстовом редакторе.</p>
<p>В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.</p>
<p>Осуществить <a href="/vstavit-izobrazhenie-v-pdf-onlain-jpg-to-pdf-converter-konvertirovat.html">данную задачу</a> можно тремя способами:</p>
<ul><li>Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в <a href="/chto-takoe-html-struktura-dokumenta-html-standarty-kodirovaniya-v.html">HTML документ</a>е который нуждается в отдельном стилевом описании.</li><li>Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).</li><li>Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее <a href="/obzor-socialnoi-seti-pinterest-chto-eto-i-kak-sozdat-svoi-piny-effektivnoe-ispolzovanie-pintere.html">эффективным использованием</a> таблицы каскадных стилей.</li>
</ul><p>Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.</p>
<h2>Атрибут style.</h2>
<p>Практически каждый HTML тег имеет атрибут <b>style
</b> , который говорит о том, что к этому тегу применяется некое стилевое описание.</p>
<p>Пишется так:</p><p>
<p <b>style=""
</b>> </p>
</p><p>Всё что будет написано между кавычками атрибута <b>style
</b> и будет являться стилевым описанием для <a href="/statisticheskoi-obrabotki-mozhno-zaklyuchit-chto-prezentaciya-na.html">данного элемента</a>, в данном случае элемента <b>
<p>Ну например:</p><p>
<p <b>style="color: #ff0000; font-size:12px"
</b>> это параграф с индивидуальным стилем</p>
</p><p>В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках, сейчас же <a href="/rasprostranennye-problemy-s-kompyuterom-vyyavlyaem-nepoladki-kompyuter.html">речь идет</a> о том как применить CSS к какому либо HTML тегу.</p>
<p>По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.</p>
<p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <br>
<html> <br>
<head> <br>
<title>Атрибут style
style="background-color: #c5ffa0"
>
style="color: #0000ff; font-size:18px"
>Всё о слонах
Купить слона
style="color: #ff0000; font-size:14px"
>
style="color: #0000ff; font-size:16px"
>Взять слона на прокат
