Каскадні таблиці стилів. Стильове оформлення сторінок

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












Зміст слайдів
Номер слайду 1

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Каскадні таблиці стилів. Стильове оформлення сторінок

Номер слайду 2

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Основи мови HTMLПідключення зовнішньої таблиці стилів Робота з комп'ютером. Завдання 1. Способи зв'язку каскадних стилів із HTML-документом

Номер слайду 3

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Основи мови HTMLЗавдання 2. Способи зв'язку каскадних стилів із HTML-документом. Використання стилів внутрішньої таблиціРобота з комп'ютером

Номер слайду 4

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Основи мови HTMLЗавдання 3. Способи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Робота з комп'ютером

Номер слайду 5

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Основи мови HTMLЗавдання 4. Способи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Робота з комп'ютером

Номер слайду 6

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Розробіть веб-сторінку «Моя маленька батьківщина»Заповнити словничок Каскадні таблиці стилів. Стильове оформлення сторінок

Перегляд файлу

Тема. Застосування каскадних стилів у HTML-документах. Підключення зовнішньої таблиці.

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

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

Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад:

         P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}

Тут задано параметри для тегу абзацу <P>, які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - Comic Sans MS. У документі достатньо ввести теги <P> … </P> із текстом абзацу, щоб автоматично адати йому зазначеного оформлення.

Параметрів форматування, які можна задавати за допомогою стилів, досить багато. Це зокрема:

  • background – колір тла;
  • font-family – стиль шрифту (гарнітура);
  • font-size – розмір шрифту;
  • font-weight – жирність шрифту;
  • color – колір шрифту;
  • text-decoration –оздоблення тексту;
  • text-align – вирівнюваня тексту;
  • margin-top – відступ від верхнього рядка абзацу;
  • line-height – міжрядкова відстань.

Застосування каскадних стилів у HTML-документах. Є три способи зв’язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів; безпосередньо в тегах абзаців і заголовків.

Підключення зовнішньої таблиці стилів. Зовнішня таблиця стилів (External Style Sheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад:

<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут  HREF задає адресу файлу (mystyle.css).

Вправа 5.1.

Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів.

  1. Відкрийте текстовий редактор Блокнот і введіть таке визначення тегу <P>:

         P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}

  1. Збережіть файл з іменем mystyle.css.
  2. Створіть у Блокноті файл такого змісту:

<HTML>

<HEAD>

     <LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

    <TITLE> Приклад використання CSS</TITLE>

    </HEAD>

<BODY>

<P>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту – зелений, а гарнітура - Comic Sans MS. </P>

</BODY>

<HTML>

  1. Збережіть цей файл з іменем pryklad1.html  у тій самій папці, що і mystyle.css.
  2. Відкрийте файл pryklad1.html  у вікні браузера. Як бачите, хоча в цьому докуметі не задано жодних параметрів для тегу <P> … </P>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.

Рис1. Результат застосування таблиці каскадних стилів

 

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

Перегляд файлу

Тема. Застосування каскадних стилів у HTML-документах. Підключення зовнішньої таблиці.

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

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

Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад:          P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}

Тут задано параметри для тегу абзацу <P>, які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - Comic Sans MS. У документі достатньо ввести теги <P> … </P> із текстом абзацу, щоб автоматично адати йому зазначеного оформлення.

Параметрів форматування, які можна задавати за допомогою стилів, досить багато. Це зокрема:

¨     background – колір тла;

¨     font-family – стиль шрифту (гарнітура);

¨     font-size – розмір шрифту;

¨     font-weight – жирність шрифту;

¨     color – колір шрифту;

¨     text-decoration –оздоблення тексту;

¨     text-align – вирівнюваня тексту;

¨     margin-top – відступ від верхнього рядка абзацу; line-height – міжрядкова відстань.

Застосування каскадних стилів у HTML-документах. Є три способи зв’язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів; безпосередньо в тегах абзаців і заголовків.

Підключення зовнішньої таблиці стилів. Зовнішня таблиця стилів (External Style Sheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу

<LINK>, який записують у розділі <HEAD>, наприклад: 

<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут  HREF задає адресу файлу (mystyle.css).

Вправа 5.1.

Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів. 

1. Відкрийте текстовий редактор Блокнот і введіть таке визначення тегу <P>:

         P {font-size: 40pt; color: green; font-family: “Comic Sans MS”} 2. Збережіть файл з іменем mystyle.css.

3.      Створіть у Блокноті файл такого змісту:

<HTML>

<HEAD>

     <LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

    <TITLE> Приклад використання CSS</TITLE>

    </HEAD>

<BODY>

<P>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту – зелений, а гарнітура - Comic Sans MS. </P>

</BODY>

<HTML>

4.      Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css.

5.      Відкрийте файл pryklad1.html у вікні браузера. Як бачите, хоча в цьому докуметі не задано жодних параметрів для тегу <P> … </P>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.

 

Рис1. Результат застосування таблиці каскадних стилів

 

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

Перегляд файлу

Підключення зовнішньої таблиці

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

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

Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад:

P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}

Тут задано параметри для тегу абзацу <P>, які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - Comic Sans MS. У документі достатньо ввести теги <P> … </P> із текстом абзацу, щоб автоматично адати йому зазначеного оформлення.

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

background – колір тла;

font-family – стиль шрифту (гарнітура);

font-size – розмір шрифту;  

font-weight – жирність шрифту;  

color – колір шрифту;

text-decoration –оздоблення тексту;  

text-align – вирівнюваня тексту;

margin-top – відступ від верхнього рядка абзацу;

line-height – міжрядкова ідстань.

Застосування каскадних стилів у HTML-документах. Є три способи зв’язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів; безпосередньо в тегах абзаців і заголовків.

Підключення зовнішньої таблиці стилів. Зовнішня таблиця стилів (External Style Sheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад: 

<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут  HREF задає адресу файлу (mystyle.css).

Хід роботи

Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів. 

1. Відкрийте текстовий редактор Блокнот і введіть таке визначення тегу <P>:

         P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}

2. Збережіть файл з іменем mystyle.css. 

3. Створіть у Блокноті файл такого змісту:

<HTML>

<HEAD>

     <LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>

    <TITLE> Приклад використання CSS</TITLE>

    </HEAD>

<BODY>

<P>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту – зелений, а гарнітура - Comic Sans MS. </P>

</BODY>

<HTML>

  1. Збережіть цей файл з іменем pryklad1.html  у тій самій папці, що і mystyle.css. 
  2. Відкрийте файл pryklad1.html  у вікні браузера. Як бачите, хоча в цьому докуметі не задано жодних параметрів для тегу <P> … </P>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.

 

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

  1. Створіть власні CSS – правила для оформлення тексту, фонового малюнка, гіперпосилань.

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

  1. Як підключити зовнішню таблицю стилів?
  2. Перелічіть властивості для роботи з текстом
  3. Перелічіть властивості для роботи з фоном
Перегляд файлу

Підключення зовнішньої таблиці

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

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

Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад: 

P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}

Тут задано параметри для тегу абзацу <P>, які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - Comic Sans MS. У документі достатньо ввести теги <P> … </P> із текстом абзацу, щоб автоматично адати йому зазначеного оформлення. 

Параметрів форматування, які можна задавати за допомогою стилів, досить багато. Це зокрема background – колір тла; 

font-family – стиль шрифту (гарнітура);  font-size – розмір шрифту;   font-weight – жирність шрифту;   color – колір шрифту; text-decoration –оздоблення тексту;   text-align – вирівнюваня тексту; margin-top – відступ від верхнього рядка абзацу;  line-height – міжрядкова ідстань.

Застосування каскадних стилів у HTML-документах. Є три способи зв’язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів; безпосередньо в тегах абзаців і заголовків. 

Підключення зовнішньої таблиці стилів. Зовнішня таблиця стилів (External Style Sheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад:  

<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>  

Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут  HREF задає адресу файлу (mystyle.css).

Хід роботи 

Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів.  

1.      Відкрийте текстовий редактор Блокнот і введіть таке визначення тегу <P>:           P {font-size: 40pt; color: green; font-family: “Comic Sans MS”} 

2.      Збережіть файл з іменем mystyle.css.

3.      Створіть у Блокноті файл такого змісту: 

<HTML>

<HEAD>

<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”> 

<TITLE> Приклад використання CSS</TITLE> 

</HEAD> 

<BODY>

<P>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту – зелений, а гарнітура - Comic Sans MS. </P>  </BODY> 

<HTML>

4.      Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css.  

5.      Відкрийте файл pryklad1.html у вікні браузера. Як бачите, хоча в цьому докуметі не задано жодних параметрів для тегу <P> … </P>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css. 

 

 

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

6.      Створіть власні CSS – правила для оформлення тексту, фонового малюнка, гіперпосилань.  Контрольні питання 

1.      Як підключити зовнішню таблицю стилів? 

2.      Перелічіть властивості для роботи з текстом 

3.      Перелічіть властивості для роботи з фоном 

Перегляд файлу
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Пригадайте: Проектування та верстка веб-сторінок. Що таке HTML?Що таке структура веб-сторінки?Які Вам відомі теги форматування веб-сторінки?
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Ти дізнаєшся: Проектування та верстка веб-сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Каскадні таблиці стилів. Стильове оформлення сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття про таблиці каскадних стилів. Стиль — це набір правил оформлення та форматування, який можна застосувати до різних елементів веб-документа. У разі використання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться задавати ці властивості для кожного елемента. Використання таблиць стилів дає змогу оптимізувавши розробку веб-сайтів. Таблиці стилів часто використовують під час створення динамічних сторінок. Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття про таблиці каскадних стилів. Таблиці каскадних стилів — це набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначеннями тегів. Р {font-size: 40pt; color: green; font-family: розмір шрифту 40 пунктівколір шрифту — зелений. Гарнітура — Comic Sans MSУ документі достатньо ввести теги <Р>... із текстом абзацу, щоб автоматично надати йому зазначеного оформлення." title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття про таблиці каскадних стилів. Таблиці каскадних стилів — це набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначеннями тегів. Р {font-size: 40pt; color: green; font-family: "Comic Sans MS"}тег абзацу <Р>розмір шрифту 40 пунктівколір шрифту — зелений. Гарнітура — Comic Sans MSУ документі достатньо ввести теги <Р>... із текстом абзацу, щоб автоматично надати йому зазначеного оформлення.">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття про таблиці каскадних стилів. Параметри форматування стилівbackground — колір тлаfont-family — стиль шрифту (гарнітура)font-size — розмір шрифтуfont-weight — жирність шрифтуcolor — колір шрифтуtext-decoration — оздоблення текстуtext-align — вирівнювання тексту
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLЗастосування каскадних стилів у HTML-документах. Способи зв'язку каскадних стилів із HTML-документом. Підключення зовнішньої таблиці стилів Розташування опису стилів у розділі HEAD документа. Задавання властивостей стилів в тегах абзаців чи заголовків
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Підключення зовнішньої таблиці стилів Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>: Застосування каскадних стилів у HTML-документах<LINK REL=REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут HREF задає адресуфайлу (mystyle.css)Вправа 5.1" title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Підключення зовнішньої таблиці стилів Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу , який записують у розділі : Застосування каскадних стилів у HTML-документахREL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут HREF задає адресуфайлу (mystyle.css)Вправа 5.1">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Підключення зовнішньої таблиці стилів Застосування каскадних стилів у HTML-документах. Вправа 5.1
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Використання стилів внутрішньої таблиціВнутрішню таблицю стилів (Embedded Style Sheet) розміщуютьбезпосередньо в розділі HEAD, у блоці, який обмежений тегами<STYLE> та </STYLE>Застосування каскадних стилів у HTML-документах<HEAD><STYLE>Тег1 { властивість11: значення11; властивість12: значення12; ...;властивість1n: значення1n }Тег2 { властивість21: значення21; властивість22: значення22; ...;властивість2m : значення2m}</STYLE></HEAD>Приклад. Використання стилів внутрішньої таблиціВнутрішня таблиця стилів — це послідовність визначень тегів, кожне з яких записується з нового рядка. Визначення тегу містить його ім'я без кутових дужок, за яким у фігурних дужках через крапку з комою перелічують властивості тегів та їхні значення, розділені двокрапками
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Використання стилів внутрішньої таблиціЗастосування каскадних стилів у HTML-документах. Приклад. Використання стилів внутрішньої таблиці
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до такого стилю за іменем, використовуючи атрибут. Застосування каскадних стилів у HTML-документах. СLASS=ім'я_стилю. Приклад. Застосування атрибуту CLASS тегу </Р>де ім'я записують вже без крапки. Для одного тегу можна використовувати декілька стилів форматування
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Застосування каскадних стилів у HTML-документах. Приклад. Застосування атрибуту CLASS тегу </Р>
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Ефект об'ємного тексту або накладання (часткового перекриття) фрагментів сторінки. Застосування каскадних стилів у HTML-документах. Приклад. Накладання рядків текстуmargin-top — відступ згори (за від'ємних значень)color — колірfont-size — розмір шрифтуfont-family — гарнітураline-height — висота рядка
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Застосування каскадних стилів у HTML-документах. Приклад. Накладання рядків тексту
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Вбудовані стиліЗастосування каскадних стилів у HTML-документах. Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>...<Н6>, абзацу <Р>, тіла <BODY>, а також у теги <DIV>, <IMG> тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення<Р STYLE=Використання атрибута STYLE для форматування заголовка другого рівня:<Н2 STYLE="font-size: 48pt; font-family: Arial">Текст..." title="Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Вбудовані стиліЗастосування каскадних стилів у HTML-документах. Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>...<Н6>, абзацу <Р>, тіла , а також у теги
, тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення<Р STYLE="font-size: 48pt; color: yellow">Використання атрибута STYLE для форматування заголовка другого рівня:<Н2 STYLE="font-size: 48pt; font-family: Arial">Текст...">
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Розробіть веб-сторінку «Моя маленька батьківщина»Заповнити словничок Каскадні таблиці стилів. Стильове оформлення сторінок
Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Працюємо за комп’ютером
Зміст слайдів
Номер слайду 1

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк

Номер слайду 2

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок

Номер слайду 3

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Пригадайте: Проектування та верстка веб-сторінок. Що таке HTML?Що таке структура веб-сторінки?Які Вам відомі теги форматування веб-сторінки?

Номер слайду 4

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Ти дізнаєшся: Проектування та верстка веб-сторінок

Номер слайду 5

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Каскадні таблиці стилів. Стильове оформлення сторінок

Номер слайду 6

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття про таблиці каскадних стилів. Стиль — це набір правил оформлення та форматування, який можна застосувати до різних елементів веб-документа. У разі використання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться задавати ці властивості для кожного елемента. Використання таблиць стилів дає змогу оптимізувавши розробку веб-сайтів. Таблиці стилів часто використовують під час створення динамічних сторінок. Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету

Номер слайду 7

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття про таблиці каскадних стилів. Таблиці каскадних стилів — це набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначеннями тегів. Р {font-size: 40pt; color: green; font-family: "Comic Sans MS"}тег абзацу <Р>розмір шрифту 40 пунктівколір шрифту — зелений. Гарнітура — Comic Sans MSУ документі достатньо ввести теги <Р>... із текстом абзацу, щоб автоматично надати йому зазначеного оформлення.

Номер слайду 8

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLПоняття про таблиці каскадних стилів. Параметри форматування стилівbackground — колір тлаfont-family — стиль шрифту (гарнітура)font-size — розмір шрифтуfont-weight — жирність шрифтуcolor — колір шрифтуtext-decoration — оздоблення текстуtext-align — вирівнювання тексту

Номер слайду 9

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLЗастосування каскадних стилів у HTML-документах. Способи зв'язку каскадних стилів із HTML-документом. Підключення зовнішньої таблиці стилів Розташування опису стилів у розділі HEAD документа. Задавання властивостей стилів в тегах абзаців чи заголовків

Номер слайду 10

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Підключення зовнішньої таблиці стилів Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу , який записують у розділі : Застосування каскадних стилів у HTML-документахREL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут HREF задає адресуфайлу (mystyle.css)Вправа 5.1

Номер слайду 11

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Підключення зовнішньої таблиці стилів Застосування каскадних стилів у HTML-документах. Вправа 5.1

Номер слайду 12

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Використання стилів внутрішньої таблиціВнутрішню таблицю стилів (Embedded Style Sheet) розміщуютьбезпосередньо в розділі HEAD, у блоці, який обмежений тегамиЗастосування каскадних стилів у HTML-документахПриклад. Використання стилів внутрішньої таблиціВнутрішня таблиця стилів — це послідовність визначень тегів, кожне з яких записується з нового рядка. Визначення тегу містить його ім'я без кутових дужок, за яким у фігурних дужках через крапку з комою перелічують властивості тегів та їхні значення, розділені двокрапками

Номер слайду 13

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Використання стилів внутрішньої таблиціЗастосування каскадних стилів у HTML-документах. Приклад. Використання стилів внутрішньої таблиці

Номер слайду 14

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. У таблицях можна створювати нові стилі, надаючи їм імена з крапкою перед першим символом. У тегах звертаються до такого стилю за іменем, використовуючи атрибут. Застосування каскадних стилів у HTML-документах. СLASS=ім'я_стилю. Приклад. Застосування атрибуту CLASS тегу де ім'я записують вже без крапки. Для одного тегу можна використовувати декілька стилів форматування

Номер слайду 15

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Застосування каскадних стилів у HTML-документах. Приклад. Застосування атрибуту CLASS тегу

Номер слайду 16

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Ефект об'ємного тексту або накладання (часткового перекриття) фрагментів сторінки. Застосування каскадних стилів у HTML-документах. Приклад. Накладання рядків текстуmargin-top — відступ згори (за від'ємних значень)color — колірfont-size — розмір шрифтуfont-family — гарнітураline-height — висота рядка

Номер слайду 17

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Задавання властивостей стилів в тегах абзаців чи заголовків. Застосування каскадних стилів у HTML-документах. Приклад. Накладання рядків тексту

Номер слайду 18

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Проектування та верстка веб-сторінок. Основи мови HTMLСпособи зв'язку каскадних стилів із HTML-документом. Вбудовані стиліЗастосування каскадних стилів у HTML-документах. Вбудовані стилі (Inline Styles) вставляють у теги заголовків <Н1>...<Н6>, абзацу <Р>, тіла , а також у теги

, тощо за допомогою атрибута STYLE, в якому перелічують властивості та їх значення<Р STYLE="font-size: 48pt; color: yellow">Використання атрибута STYLE для форматування заголовка другого рівня:<Н2 STYLE="font-size: 48pt; font-family: Arial">Текст...

Номер слайду 19

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Домашнє завдання. Вивчити тему. Розробіть веб-сторінку «Моя маленька батьківщина»Заповнити словничок Каскадні таблиці стилів. Стильове оформлення сторінок

Номер слайду 20

Чашук О. Ф., вчитель інформатики ЗОШ№23, Луцьк. Працюємо за комп’ютером

zip
До підручника
Інформатика (рівень стандарту) 10 клас (Морзе Н.В., Вембер В.П., Кузьмінська О.Г.)
Додано
6 березня 2019
Переглядів
8120
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку