Презентацию к данной лекции Вы можете скачать здесь.
В начале 90-х годов различные
Термин "каскадные таблицы стилей" был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать
В отличие от многих существовавших на тот момент языков стиля,
Параметры внешнего вида документа можно задать с помощью
С помощью
{font-family: Comic Sans MS; font-size: 36pt; color:Purple}.
Код web-странички, содержащей афоризм Козьмы Пруткова, будет выглядеть таким образом [:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Применение каскадной таблицы стилей</title>
<style type="text/css">
h2 {font-family: Comic Sans MS; font-size: 36pt; color:Purple}
</style>
</head>
<body>
<h2>Глядя на Мир, не перестаешь удивляться...</h2>
</body>
</html>
(рис 4.1) В фигурных скобках заключен список таких параметров, как начертание, цвет шрифта и размер шрифта.
Одно и то же правило можно применить к различным элементам, и, наоборот, для одного и того же элемента может быть задано несколько правил. Следующее правило определяет одинаковые стилевые параметры одновременно для заголовков второго и третьего уровней [3]:
h2, h3 {font-family:Calibri; color:Teal;}.
(рис 4.2) Здесь шрифт Calibri и цвет Teal применяются как для тэгов h2, так и для тэгов h3.
Приведем пример каскадного задания стилевых параметров [3]:
h2, h3 {font-size: 36pt; color: Fuchsia} h1 {font-family: Arial CYR} h2 {font-family: Century Gothic}
(рис 4.3) Здесь сначала задаются размер и цвет шрифта для обоих заголовков, а затем для каждого из них определяется своя гарнитура шрифта (имя шрифта).
Стилевые параметры, заключенные в фигурные скобки, можно назначить не только именам тегов, но и тегам по значениям их атрибута id (идентификатора элемента). Так можно изменить представление не всех, например, абзацев (тегов <p> ), а только тех, которые имеют указанное значение атрибута id.
В предлагаемом ниже примере показаны стили для двух абзацев [3]. Причем в одном случае стиль можно применять только к конкретному тэгу, имеющему .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
#t1 {color:Purple; font-size:20pt; font-family:Comic Sans MS}
p{color:Blue;font-family:Calibri;font-size:16pt}
</style>
</head>
<body>
<p id="t1">Бердыш в руках воина то же, что меткое слово в руках писателя</p>
<p align="center">Если бы тени предметов зависели не от величины сих последних, а имели бы свой произвольный рост,
то, может быть, вскоре не осталось бы на всём земном шаре ни одного светлого места</p>
</body>
</html>
(рис 4.4) Для одного и того же элемента можно назначить несколько разнообразных стилей, называемых классами. При этом селектор можно сформировать как имя тэга, за которым через разделительную точку следует имя класса, или же как просто имя класса, перед которым указывается точка. В первом случае класс применяется только с указанными в селекторах элементами. Во втором случае создается класс без предварительных указаний на то, к каким элементам он должен быть применен. Класс применяется к тем элементам, у которых значением атрибута class является имя этого класса.
В предлагаемом примере создаются два класса ( .
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
h2.red {color:Red}
h2.blue {color:Blue}
</style>
</head>
<body>
<h2>Черный</h2>
<h2 class="red">Красный</h2>
<h2 class="blue">Голубой</h2>
</body>
</html>
(рис 4.5) <style type="text/css"> …</style>. В наших предыдущих примерах мы использовали как раз такой подход. Во втором случае <head> размещают тэг <link href="URL css-файла"/> или в контейнер <style> - вставляют директиву @import url ("url css-файла").
Создадим файл mystyle.css. Добавим в него следующий код:
body {background-color: Aqua;}
h1{font-family:Verdana;color:Navy;font-size:36pt}
Затем создадим web-страничку со следующим содержимым [:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
@import url("mystyle.css");
</style>
</head>
<body>
<h1>Не всякому человеку даже гусарский мундир к лицу.</h1>
</body>
</html>
(рис 4.6) Каскадные таблицы стилей позволяют разделять код и представление web-страниц, что очень важно при работе над крупными проектами. Стили можно размещать не только в самой web-странице, но и в отдельном файле. В этом случае дизайнер может разработать единый стиль оформления сайта, который будет автоматически применяться на всех web-страницах. Параметры стиля можно применять не только к определенным тэгам
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.