Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Групування елементів (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>

 

  1. Наберіть 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>

Поделиться:





Читайте также:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...