|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Инспектор
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 2:
Синтаксис CSS и примеры использования
Подключение таблицы стилей
Когда браузер считывает таблицу стилей, он форматирует документ согласно с этой таблицей. Существует три способа подключения таблицы стилей.
- Подключение внешней таблицы стилей
Этот способ обычно применяется в ситуациях, когда один стиль определяется для множества страниц. Если необходимо быстро поменять дизайн Web-сайта этот способ идеально подходит – редактируется только один файл с таблицей стилей. Для подключения внешней таблицы стилей предназначен тег <link>, который размещается в разделе заголовка:
<head> <link rel="stylesheet" type="text/css" href="first.css" /> </head>
Данный код указывает браузеру на то, что определение стиля хранится в файле first.css. Последний, в свою очередь, выполнит форматирование документа согласно с этим определением стиля.
Некоторые замечания:
- внешнюю таблицу стилей можно создать в любом текстовом редакторе;
- файл с внешней таблицей стилей не должен содержать никаких тегов html;
- файл с внешней таблицей стилей необходимо сохранить с расширением .css.
Пример:
ul {margin-left: 10pt} li {font-family: arial} body {background-color: blue}Для корректности отображения браузерами таблиц стилей необходимо исключить пробелы между значением свойства и единицами измерения, т.к. это будет работать правильно только в IE6, но не в Mozilla/Firefox или Netscape.
Пример с пробелом — "margin-left: 20 px";
пример без пробела — "margin-left:20px".
- Подключение внутренней таблицы стилей
Данный способ применяется тогда, когда один документ имеет уникальный стиль. Для определения внутренних стилей используют тег <style>, который размещается в разделе заголовка:
<head> <style type="text/css"> li {font-family: arial} p {font-size: 25%} h1 {margin-right: 10pt} </style> </head>В соответствии с определениями стиля браузер форматирует документ. Однако если он встретит незнакомые теги, то проигнорирует их. Например, старый браузер, который не поддерживает стили, проигнорирует тег <style>, но содержимое последнего будет выведено на странице. Чтобы этого не произошло, необходимо скрыть описание стиля в элементе комментария HTML:
<head> <style type="text/css"> <!-- body {background-color: green} table {border-style: dotted} --> </style> </head> - Встроенные стили
Данный способ используется в том случае, если необходимо применить стиль к одному появлению элемента. Метод обладает существенным недостатком, т.к. он смешивает содержимое документа с его представлением и теряет, соответственно, многие преимущества таблиц стилей.
Для определения встроенных стилей в соответствующем теге применяют атрибут style, который может содержать любое свойство CSS.
Пример:
<body style="background-color: blue" > <h1 style="color: yellow" >Заголовок H1</h1> </body>
В примере показано, как задать цвет фона документа и цвет заголовка h1.
Несколько таблиц стилей
В случае объединения или использования нескольких таблиц стилей могут возникнуть ситуации, когда некоторые свойства заданы для одного и того же селектора в разных таблицах стилей; тогда будут использованы значения из более конкретной таблицы стилей.
Например, внешняя таблица стилей имеет следующие свойства для селектора p:
p
{
font-family: "sans serif";
margin-left: 10pt;
font-style: italic;
font-weight: bold
}А внутренняя таблица стилей имеет для селектора p следующие свойства:
p
{
margin-left: 20pt;
font-style: normal;
font-weight: bolder
}Итак, при соединении внешней таблицы стилей с внутренней для селектора p будут определены следующие свойства:
font-family: "sans serif"; margin-left: 20pt; font-style: normal; font-weight: bolder
Таким образом, тип шрифта будет наследоваться из внешней таблицы стилей, а его стиль, вес и внешний отступ параграфа определяются внутренней таблицей стилей.
