• Гідрологія і Гідрометрія
• Господарське право
• Економіка будівництва
• Економіка природокористування
• Економічна теорія
• Земельне право
• Історія України
• Кримінально виконавче право
• Медична радіологія
• Методи аналізу
• Міжнародне приватне право
• Міжнародний маркетинг
• Основи екології
• Предмет Політологія
• Соціальне страхування
• Технічні засоби організації дорожнього руху
• Товарознавство продовольчих товарів

Контрольні запитання

Якщо задати контейнеру конкретні розміри, то може виникнути ситуація, коли вміст сторінки повністю не поміститься в цей контейнер. Виникає переповнення контейнера. Його поведінка при цьому залежить від атрибутів, які ми задамо.

План

Морфологічна культура ЗМІ на рівні прикметника.

Прикметники переважно вживані у друкованих ЗМІ, інформаційні тележурналісти використовують їх не так часто, оскільки вони змушені висловлюватися лаконічно, вкладатися в стислий хронометраж прямоефірного мовлення. На телебаченні багато зображень, тому прикметники переважно не використовуються.

Типові помилки у вживанні прикметникових форм:

1. Невміння творити різні форми ступенів порівняння, які автоматично скопійовані з російських:

Сама велика перемога «Мілана» в цьому сезоні.

Надійно діє досвідченіший Шовковський.

Попереду все саме цікаве.

А зараз настає най хвилюючий момент.

2. Надлишкове підкреслення ступенів порівняння, застосування комбінованих форм (простої і складеної):

Рахунок був ще більш принизливішим для львів’ян.

А яка форма більш перспективніша для України?

Зустріла одного з найбільш бажаніших людей.

Другий тайм у нас менш цікавіший, ніж перший.

3. Неправильне визначення групи прикметників (твердої чи м'якої):

Дорожний затор розтягнувся на кілька кілометрів.

Попередня природня причина смерті найпопулярніша.

Увага!Прикметники вищого ступеня зазвичай мають після себе залежні від них звороти, що вказують на об’єкт порівняння і вводяться словами за, від, ніж, як, проти, пор.: Воля дорожча за життя. Від рідною краю в світі кращого краю нема. Нема мудріших, ніж народ, учителів. Я вдвічі молодший проти батька.Уведення таких зворотів без прийменників чи сполучників (воля дорожча життя, я молодший брата) суперечить нормі.

УВАГА!Слово самий у формах найвищого ступеня порівняння прикметників не використовується.

УВАГА!Вживання форм вищого ступеня порівняння замість найвищого (головніші правила замість найголовніші правила, кращий гравець замість найкращий гравець) суперечить нормі.

1. Поняття про стилі CSS та їх створення.

2. Основні види таблиць стилів.

3. Правила каскадності.

3. Контейнери та основи контейнерного дизайну.

1.Сучасна концепція Web-дизайну вимагає розділяти вміст сторінки, її оформлення (представлення) та поведінку (реакцію на дії користувача). До цих пір ми фактично займалися наповненням нашої сторінки даними, згрупованими у різні структури (абзаци, списки, таблиці тощо). Тепер розглянемо як грамотно організувати оформлення нашої інформації.

Для створення оформлення Web-сторінки призначена технологія каскадних таблиць стилів (Cascading Style Sheets, CSS), або просто таблиця стилів. Вона містить набір правил (стилів), що описують оформлення самої сторінки та її окремих фрагментів. Ці правила визначають кольори тексту та фону, накреслення, відступи і т.д.

Кожен стиль повинен бути прив’язаний до відповідного елементу Web-сторінки чи до неї самої. Після прив’язки відповідні параметри стилю починають застосовуватися до даного елемента. Прив’язки є явні (коли ми самі вказуємо який стиль до якого елементу слід застосувати) та неявні, коли стиль автоматично прив’язується до всіх елементів, створених конкретним тегом. Таблиця стилів може описуватися як в самій сторінці, так і в зовнішньому файлі. Крім того окремі стилі можна включати безпосередньо в тег.

Таблиці стилів пишуть на спеціальній мові – CSS. Стандарт першої версії CSS1 з’явився в 1996 році. Зараз широко використовують CSS2 та ведеться розробка CSS3.

Формат визначення стилю має вигляд:

<селектор> {

<атрибут стилю 1>: <значення 1>

<атрибут стилю 2>: <значення 2>

….

<атрибут стилю n>: <значення n>

}

Наведемо основні правила створення стилів.

- Визначення стилю містить селектор і список атрибутів стилю з їх значеннями.

- Селектор використовується для прив’язки стилю до елементу сторінки, на який він повинен розповсюджуватися.

- За селектором, через пробіл, вказують список атрибутів стилю та їх значень, поміщаючи їх у фігурні дужки.

- Атрибут стилю є параметром елемента: колір, вирівнювання, відступ тощо. Значення атрибуту записують через двокрапку (деколи в лапках).

- Пари <атрибут стилю 1>: <значення 1> відділяють одна від одної крапкою з комою.

- Між останньою парою <атрибут стилю 1>: <значення 1> та закритими фігурними дужками крапка з комою не ставиться.

- Визначення різних стилів розділяють пробілами та переводами стрічки.

- Всередині селекторів та імен стилів не повинні бути пропуски та переводи стрічок. Інші пробіли браузер ігнорує.

2. Розглянемо види стилів.

Стиль перевизначення тегу. Його селектором є тег, елемент якого оформляється без символів < та >. Букви можуть бути як малі, так і великі. Наприклад,

P { color: blue}

EM { color: green;

font-weight: bold }

BODY { background: red;

color: #FFFFFF }

Стильовий клас.

Може бути прив’язаний до будь якого тегу. Селектором є ім’я стильового класу, що однозначно його ідентифікує. Ім’я повинно відповідати загальним правилам імен ідентифікаторів. Воно обов’язково містить спереду крапку.

.myStyle1 { color: blue}

.myStyle2 { font-align: center;

font-weight: bold }

Для прив’язки такого стилю до елемента використовують атрибут тега class із значенням селектора без крапки в лапках:

<P class="myStyle2">

<H1 class="myStyle1">

Якщо для атрибуту class вказати декілька імен стильових класів, то їх дія буде накладатися:

<P class="myStyle1 myStyle2 ">

Іменований стиль. Схожий на стильовий клас. Селектором є унікальне ім’я, що однозначно його ідентифікує. Прив’язка до тега – явна.

Відмінності іменованого стилю від стильового класу:

- У визначенні перед іменем ставлять знак решітки #.

- Прив’язку реалізують через атрибут ID, його значенням є ім’я потрібного іменованого стилю без #.

- Значення атрибута тега ID повинно бути унікальним в межах сторінки. Тому іменований стиль використовують, якщо є потреба прив’язати стиль до одного-єдиного елемента сторінки.

#myStyle1 { color: blue}

…

<P ID="myStyle"> ці букви будуть синіми </P>

Комбіновані стилі. Це стилі з довільною кількістю селекторів. Служать для прив’язки до тегів, що задовольняють декілька умов.

Правила написання:

- Селекторами можуть бути імена тегів, імена стильових класів та імена іменованих стилів.

- Селектори перераховують зліва направо і визначають рівень вкладеності відповідних тегів, теги, записані правіше, повинні бути вкладені в теги, записані лівіше.

- Якщо ім’я тега скомбіновано з іменем з іменем стильового класу чи іменованого стилю, значить для даного тега повинно бути вказане це ім’я стильового класу чи іменованого стилю.

- Селектори розділяють пробілами.

- Стиль прив’язують до тега, визначеного селектором, записаним найправіше.

Наприклад,

P EM { color: #0000FF}

….

<P> <EM> Тут - сині букви <EM> а ці вже ні </P>

<P> Ці теж ні… </P>

P.mini { color: red

font-size: smaller }

…

<P class="mini"> маленькі червоні букви </P>

<P> This text is’nt red</P>

Всі ці чотири стилі можуть бути присутні тільки в таблицях стилів. Якщо їх записати в код сторінки, браузер їх проігнорує.

Вбудовані стилі. Вони не мають селектора, бо ставляться зразу в потрібний тег. Крім того, в них немає фігурних дужок, оскільки немає потреби відділяти список атрибутів стилю від селектора. Вбудований стиль прив’язаний лише до одного тега – того, де він прописаний.

Визначення вбудованого стилю вказують як значення атрибуту STYLE.

<P STYLE="font-size: bigger; font-style: italic; font-family: Arial ‘Times New Roman’ " > Тут абзац великими курсивними літерами, записаний або шрифтом Arial або Times New Roman </P>

Вбудовані стилі зараз застосовують дуже рідко.

В залежності від місця розміщення таблиці стилів діляться на два види:

Зовнішні таблиці стилів – містяться окремо від коду сторінки у файлах з розширенням .css. Вони містять css- код конкретних стилів.

Прив’язка до сторінки зовнішньої таблиці стилів до сторінки здійснюється одинарним мета тегом <LINK>:

<HEAD>

…

<LINK REL="stylesheet" HREF="<адреса>" TYPE="text/css">

…

</HEAD>

Внутрішня таблиця стилів записується безпосередньо в коді сторінки в парному тезі <STYLE>, що прописується в заголовковій частині.

<HEAD>

…

<STYLE>

EM { color: green;

font-weight: bold }

BODY { background: red;

color: #FFFFFF }

#myStyle1 { color: blue}

.myStyle2 { font-align: center;

font-weight: bold }

</STYLE>

…

</HEAD>

Для багатьох сторінок одного сайту логічно припустити існування одного стильового оформлення, тому зазвичай використовують зовнішні таблиці стилів.

3. Наведемо правила каскадності стилів:

- Зовнішня таблиця стилів, посилання на яку (тег <LINK>) знаходиться в сторінці пізніше, має приорітет перед тією таблицею, що прив’язана раніше.

- Внутрішня таблиця стилів має приорітет перед зовнішньою.

- Вбудовані стилі мають найвищий приорітет на сторінці.

- Більш конкретні стилі мають приорітет перед менш конкретними: стильові класи – перед стилем пере визначення, комбінований стиль – перед стильовим класом.

- Якщо прив’язані до тега декілька стильових класів, то ті, що вказані правіше мають приорітет перед записаними лівіше.

У стилях можна також створити важливі атрибути, які мають перевагу над всіма аналогічними атрибутами стилю, заданих в інших стилях, навіть в тих, що мають вищий приорітет. Для цього після атрибуту та його значення після пробілу пишуть !important.

EM { color: green; !important

font-weight: bold }

Мова CSS також дозволяє записувати коментарі розробника: однорядкові – з символом / (слеш) на початку стрічки; багаторядкові – містяться між символами /* та */ .

4.Всі розглянуті атрибути стилів можна вказувати і для блокових, і для вбудованих елементів сторінки. Проте деколи виникає необхідність застосувати якийсь конкретний стиль до частини елемента, наприклад, до фрагменту абзацу.

HTML для цього створює особливі елементи – контейнери.

Контейнер – елемент Web-сторінки, призначений тільки для виділення фрагменту елемента. Це може бути частина елемента, весь елемент або навіть декілька блокових елементів. Браузер ніяк не виділяє контейнер на сторінці.

Метою створення контейнерів є:

- З його допомогою можна прив’язати до фрагменту, елементу чи сукупності елементів конкретний стиль.

- Він також може забезпечувати прив’язку певної поведінки (реакції) сторінки на дії користувача.

Контейнери є блокові та вбудовані. Розглянемо вбудовані.

Вони є частиною блокового елементу сторінки. Створюються за допомогою парного тега <SPAN>. Фрагмент поміщають безпосередньо в цей тег.

<P> Тут почався абзац з <SPAN> дуже важливою </SPAN> інформацією. </P>

До цього контейнера можна прив’язати якийсь стиль:

.bolded { font-weight: bold }

…

<P> Тут почався абзац з <SPAN class="bolded"> дуже важливою </SPAN> інформацією. </P>

Потреба в вбудованих контейнерах виникає рідко, якщо Web-сторінка є добре структурованою.

Розглянемо блокові контейнери. Вони можуть зберігати тільки блокові елементи (як один, так і декілька). Формуються з допомогою парного тега DIV, всередині якого поміщають код, що формує вміст контейнера:

<DIV STYLE="text-align=center">

<H1> Це заголовок </H1>

<P> Тут буде текст першого абзацу </P>

<P> Тут буде абзац під номером 2 </P>

</DIV>

<DIV>

<TABLE border=2>

<HEAD>

<TR> <ТD>Заголовок 1<ТD>Заголовок 2

<TFOOT>

<TR> <ТD>Нижній блок таблиці<ТD>&nbsp;

<ТВODY>

<TR> <ТD>Стрічка 1 <ТD> Комірка 1.2

<TR> <ТD>Стрічка 2 <ТD> комірка 2.2

<ТВODY>

</TABLE>

</DIV>

Використання блокових контейнерів визначає сучасний стиль дизайну Web-сторінок (на противагу текстовому, фреймовому та табличному) – контейнерний Web-дизайн. Контейнер використовують для розміщення окремих частин сторінки, не зв’язуючи їх між собою: заголовка сайту, полоси навігації, основного змісту, повідомлення про авторські права тощо.

Для задання різних параметрів блокового контейнера передбачені різні атрибути CSS: розмір (ширина та висота), місце розміщення та поведінка при переповненні, колір фону, відступи, рамки і т.д.

Основні переваги:

- Контейнери можна розмістити де завгодно на сторінці та помістити в них що завгодно.

- Контейнер дозволяє здійснювати підвантаження вмісту.

- Контейнери та відповідні теги є офіційно стандартизовані W3C і всіма браузерами відображаються однаково.

- HTML – код контейнера досить компактний і формується одним парним тегом <DIV>.

- Всі браузери відображають вміст контейнера прямо в процесі завантаження, візуально це досить швидко.

Недоліком контейнера є те, що з їх допомогою важко організувати сторінки складної структури (таблицями легше), оскільки для цього потрібно створювати складені контейнери з перехресними стилями.

Розглянемо параметри контейнера, що визначаються атрибутами стилю.

- Ширина і висота:

width: auto | <size> | inherit

height: auto | <size> | inherit

- Мінімальні розміри:

min-width: <size>

min-height: <size>

- Вирівнювання (задає тип вирівнювання елемента відносно батьківського, весь інший вміст сторінки обтікає кнтейнер):

Float: left | right | none | inherit

Якщо задати однаковий атрибут float для декількох послідовних елементів, то вони розмістяться один під одним відносно краю батьківського елемента. Такий атрибут застосовують для контейнерів, що формують дизайн сторінки і називають їх плаваючими.

- Розміщення знизу (щоб однозначно розмістити контейнер під тими, що були вирівнянні по краю батьківського елемента, наприклад для копірайту):

Clear: left | right | both | none | inherit

Overflow: visible | hidden | scroll | auto | inherit

Цей атрибут має смисл лише тоді, коли коли розміри контейнера мають абсолютне значення.

Аналогічно визначаються атрибути Overflow-x та Overflow-y, що визначають поведінку контейнера при переповненні по горизонталі та вертикалі відповідно.

У сучасному дизайні як правило, використовують контейнери з прокруткою.

1. Що таке каскадна таблиця стилів?
2. Що таке прив’язка? Які її види?
3. Де описують таблицю стилів?
4. Які правила створення стилів?
5. Які є види стилів? Опишіть кожен з них.
6. У чому відмінність іменованого стилю від стильового класу?
7. Які правила написання комбінованих стилів?
8. Що таке зовнішня та внутрішня таблиця стилів?
9. Наведіть правила каскадності стилів.
10. Що таке контейнер?
11. Які є види контейнерів? Опишіть їх.
12. Які переваги та недоліки контейнера?
13. Перерахуйте параметри контейнерів. Які атрибути їх описують?
14. Що таке переповнення контейнера? Які можливості для його усунення?

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

1. Бесіда за запитаннями.
2. Відповісти на запитання письмово.
3. Відповісти на запитання письмово.
4. Відповісти на запитання письмово.
5. Відповісти на запитання письмово.
6. Відповісти на запитання письмово.
7. Грошові кошти — готівка, кошти на рахунках у банку та депозити до запитання.
8. Дайте відповіді на контрольні питання
9. Закриті запитання
10. Запитання
11. ЗАПИТАННЯ
12. ЗАПИТАННЯ

Переглядів: 1448