 |
Групування елементів (span і div).
|
|
|
|
Елемент span можна назвати нейтральним елементом, який нічого не додає до вмісту документа. Але, у поєднанні з CSSspan може використовуватися для візуальних ефектів застосовуваних до окремих блоків тексту.
У файлі style.css створимо правило для елементів span.
span.citata{
color: blue;
}
span.citata1{
color: green;
background-color: yellow;
font-style: italic;
font-weight: bold;
}
<html>
<head>
<title>Приклад №9</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<p>Елемент span можна назвати <span class="citata">нейтральним елементом,</span> <span class="citata1">який нічого не додає до вмісту документа.</span></p>
</body>
</html>
На відміну від елементу span, який використовується в елементах рівня блоку, елемент div застосовується для групування одного або більш блок-елементів.
Окрім цієї відзнаки, групування з допомогою div працює більш менш аналогічно. Поглянемо на приклад - два списки згрупованих за їх категоріями.
#list1{
color: blue;
}
#list2{
color: green;
}
<html>
<head>
<title>Приклад №10</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="list1">
<p>Список №1:</p>
<ul>
<li><a href="link1_1.htm">Посилання 1,1</a></li>
<li><a href="link1_2.htm">Посилання 1,2</a></li>
<li><a href="link1_3.htm">Посилання 1,3</a></li>
</ul>
</div>
<div id="list2">
<p>Список №2:</p>
<ul>
<li><a href="link2_1.htm">Посилання 2,1</a></li>
<li><a href="link2_2.htm">Посилання 2,2</a></li>
<li><a href="link2_3.htm">Посилання 2,3</a></li>
</ul>
</div>
</body>
</html>
Хід роботи
1. Здійсніть ознайомлення з теоретичними відомостями до виконання лабораторної роботи.
|
|
|
2. Створіть документ lab6.html (лістинг якого приведений нижче) та розгляньте на його основі приклад використанням атрибута style.
Лістинг документа lab6.html
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
</head>
<body>
<div style="font:Georgia, 'Times New Roman', Times, serif; color:#FF00FF; font-size:18pt; background-color:#FFCCFF">
<table border="4" align="center" frame="rhs" >
<tr style="color:#00FFFF; border-color:#0000FF; font-family:Arial; font-size:20px; font-style:oblique; background-color:#FFCC66" >
<td colspan="2" align="center">Список студентів групи ПНК-21</td>
</tr>
<tr bordercolor="#0000CC" height="40">
<td width="50"> прізвище </td>
<td width="265">ім'я</td>
</tr>
<tr style="color:#0033FF; background-color:#00FFFF; font-size:16px; font-style:italic" align="center">
<td>Іванов</td>
<td>Іван</td>
</tr>
<tr style="color:#0033FF; background-color:#00FFFF; font-size:16px; font-style:italic" align="center">
<td>Сидоров</td>
<td>Сергій</td>
</tr>
</table>
<cite> Лабораторна робота № 6: Стилі відображення гіпертексту CSS </cite>
</div>
<div align="center" style=" background-color:#FFFFCC; border-color:#CCFFCC; border-style:double; font:Verdana; font-size:20px;">
Виконав: ст. гр. ПНК-21 Іванов Петро<br>
</div>
</body>
</html>
- Наберіть HTML-документ (lab6_1.html) за допомогою кожного з редакторів, виділіть селектори типу, селектори класу, селектори id. З'ясуйте в чому різниця між використанням селекторів. Визначте область дії селекторів, де й чому не спрацювали аркуші стилів.
Лістинг документа lab6_1.html
<head>
<title>Untitled Document</title>
<meta http-equiv=" Content-Type" content="text/html; charset= windows-1251">
<style type="text/css">
h2 { font-size:16pt; color:#0033FF; font-family:Geneva, Arial}
h2.curs { font-size:18pt; font-style:italic; font-family: "Courier New", Courier, mono; color:#006699}
h2.normal { font-size:16pt; font-style:normal; color:#FF0000}
#bgmagenta{ background-color:#CC66FF; color:#FFFF00}
#fishka{ background-color:#CC99FF; color:#3300FF; font-family:serif; font-size:20pt; font-style:oblique}
#bgyellow{ background-color:#FFFF00; color:#0000FF; font-family:Verdana, Arial}
div { font-family:"serif"; font-size:15pt; background-color:#99FFFF; color:#000000; font-style:oblique}
|
|
|
</style>
</head>
<body bgcolor="#FFCC99">
<h2>Приємно на пари з ранку приходити</h2>
<h2 class="curs"> Приємно бачити добрі очі екзаменатора</h2>
<h2 id="bgmagenta"> Приємно зайти в деканат після сесії</h2>
<p id="bgmagenta"> Приємно не мати "хвостів", <br> бути успішним і <br id="fishka"> упевненим у завтрашньому дні</p>
<h2 class="curs"> Приємно вчасно захищати лабораторні роботи...</h2><br><br>
<div align="center"> Життя світле й безхмарне, коли тобі 20 років і попереду <p class="normal"> море надій, </p> <hr id="bgyellow" size="8">
усе тіло наповнене енергією й готове до <p id="bgmagenta"> звершень, щастя, любові </p></div>
<h3 class="curs"> Життя повне приємних моментів</h1>
<h3 id="fishka" align="center"> Тільки варто небагато попрацювати</h3>
<hr id="bgmagenta" align="center" width="200" size="5">
<hr id="bgyellow" align="center" width="150" size="5">
<h2 id="bgyellow" align="center"> Мрії прогульника</h2>
<h2 class="normal"> Том 2. Повне зібрання студентських снів</h2>
</body> </html>
|
|
|
II. Оцінка стійкості об'єкта (його елементів) до дії ударної хвилі
А. Оцінка стійкості елементів об’єкту до зміщення ударною хвилею
А. структурований тип даних, що складається з деякого числа елементів одного типу
В. Оцінка стійкості елементів об’єкту до ударних перенавантажень (інерційне зруйнування)
Вибір елементів пускового (гальмівного) реостата для двигунів змішаного збудження
Вибір елементів шунтового реостата
Вибір основних конструктивних елементів систем живлення
Вивчення методів визначення зносу елементів трибосполучень
Виділення елементів формули
Визначення рівня фізичного старіння основних конструктивних елементів і будівлі в цілому.
