Поделиться
Создание и использование каскадных таблиц стилей.docx
Лабораторная работа.
Тема: Создание и использование каскадных таблиц стилей
1. Внутренние таблицы стилей задают стиль только одному элементу документа при помощи атрибута style в HTML теге. Напишите следующий код:
<html>
<head>
<title>Упражнение 13a</title>
</head>
<body>
<p color ="blue" size="3" face="Arial">
Пример физического форматирования.
</p>
<p style=”color:green; font-size:12pt; font-family:Arial”>
Пример встроенной таблицы стилей.
</p>
</body>
</html>
2. Сохраните документ с именем 4_name.html в рабочей папке.
3. Глобальные стили (внедренные таблицы) задают вид элементов всего документа. Для этого используется тег <style type="text/css">. Он размещается в заголовке документа.
<html>
<head>
<title>Каскадные таблицы стилей</title>
<style type="text/css">
h1{color:red; font-style:italic; font-size:32px;} p{color:blue}
</style>
</head>
<body>
<p>Пример внедренной таблицы стилей.</p>
<h1> Этот заголовок написан крупным красным курсивом. </h1>
<p> Это предложение выделено синим цветом.</p>
</body>
</html>
4. Сохраните документ с именем 5_name.html в рабочей папке.
5. Использование внешних стилевых таблиц — самый экономный и обобщающий способ задания правил оформления однотипных элементов для любого количества страниц. То есть одну таблицу стилей можно использовать для форматирования многих страниц, что приводит к единообразному отображению различных документов и придает некоторую системность серверу разработчика. Осуществляется связывание отдельного файла, содержащего стилевые правила, с множеством гипертекстовых документов. Связываемый файл содержит набор правил.
body{background:grey; font-size:14pt; color:red; font-family:Arial;} h1, p{color:green;}
6. Сохраните документ с именем example_styles.css в рабочей папке.
7. В самих же HTML документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так: <link rel="stylesheet" type="text/css" href="адрес файла со стилями">
<html>
<head>
<title> Упражнение </title>
<link rel="stylesheet" type="text/css" href="example_styles.css">
</head>
<body>
Пример внешней таблицы стилей
<h1> Этот заголовок выделен зеленым цветом. </h1>
<p> И это предложение тоже.</p>
</body>
</html>
Сохраните документ с именем 6_name.html в рабочей папке.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
