русс | укр

Программирование:

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог1С

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании

Обучение

Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Атрибут style.

Дата добавления: 2015-07-09; просмотров: 646; Нарушение авторских прав

Практически каждый 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" "http://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" "http://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 элементов согласно следующему синтаксису:

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


<== предыдущая лекция | следующая лекция ==>
Что такое CSS? | CSS в отдельном внешнем файле.

Карта сайта Карта сайта укр

Видео
Уроки php mysql Программирование
Онлайн сервисы
Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские
Полезное

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных

 


Не нашли то, что искали? Google вам в помощь!

  
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.
Генерация страницы за: 0.464 сек.