Атрибут style.

Практически каждый HTML тег имеет атрибут style, который говорит о том, что к этому тегу применяется некое стилевое описание.

Пишется так:

< p style=" " > это параграф с индивидуальным стилем < /p>

Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента < p>

Ну например:

< p style=" color: #ff0000; font-size: 12px" > это параграф с индивидуальным стилем< /p>

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

По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Атрибут style< /title>
< /head>
< body style=" background-color: #c5ffa0" >
< h1 style=" color: #0000ff; font-size: 18px" > Всё о слонах< /h1>
< p style=" color: #ff0000; font-size: 14px" > На этом сайте Вы найдёте любую информацию о слонах.< /p>
< h2 style=" color: #0000ff; font-size: 16px" > Купить слона< /h2>
< p style=" color: #ff0000; font-size: 14px" > У нас Вы можете по выгодным ценам приобрести лучших слонов!! < /p>
< h2 style=" color: #0000ff; font-size: 16px" > Взять слона на прокат< /h2>
< p style=" color: #ff0000; font-size: 14px" > Только у нас Вы можете взять любых слонов на прокат!! < /p>
< /body>
< /html>

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

Тег < style>

Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег < style> < /style> (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Взгляните на пример, ниже к нему будут комментарии.

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< title> Тег style< /title>
< style type=" text/css" >
body {background-color: #c5ffa0}
h1 {color: #0000ff; font-size: 18px}
h2 {color: #0000ff; font-size: 16px}
p {color: #ff0000; font-size: 14px}
< /style>
< /head>
< body>
< h1> Всё о слонах< /h1>
< p> На этом сайте Вы найдёте любую информацию о слонах.< /p>
< h2> Купить слона< /h2>
< p> У нас Вы можете по выгодным ценам приобрести лучших слонов!! < /p>
< h2> Взять слона на прокат< /h2>
< p> Только у нас Вы можете взять любых слонов на прокат!! < /p>
< /body>
< /html>

Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в " голову" документа тем самым, указав, что все заголовки < h1>, < h2> - будут синими, а параграфы < p> - красными. Представьте, как мы облегчили бы себе работу, будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет " удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.

Теперь обещанные комментарии:

Тег < style> принято внедрять в заголовок HTML документа между тегами < head> < /head>.

Атрибут тега < style> type - сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type должно равняться text/css.

Внутри тега < style> < /style> идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

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