Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Стилі CSS. (Лекція 4)

Содержание

Основні поняття CSSРозшифровується CSS (англ. Cascading Style Sheets) як каскадні таблиці стилів і є технологією оформлення веб-сторінок.Основним поняттям CSS є стиль – тобто набір правил оформлення і форматування, який може бути застосований до різних елементів документа.
Лекція 4Стилі CSS1 Основні поняття CSS2 Синтаксис і елементи CSS3 Властивості шрифту4 Основні поняття CSSРозшифровується CSS (англ. Cascading Style Sheets) як каскадні таблиці стилів .newfont{font-size:24px; color:#CC9933}Классы для створення тегів. Заголовок Список властивостей, які можна змінити за допомогою CSS Синтаксис і елементи CSS Додавання стилів CSS в HTML-документ Існує декілька способів Скріплення. Iнформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді документа. Впровадження.Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині тега .el_cl_1{display:inline; z-index:1};	.el_lst{display:list-item; margin:-1%; background:#ff0000 url( Вбудовування в теги документа.Внимание!ІмпортуванняUntitled @import url('css/default.css'); 2.2 Групування H1 {font-family: Verdana}H2 {font-family: Verdana}  можна згрупувати і задати H2 {font-weight: bold}H2 {font-size: 14pt}H2 {font-family: Verdana} можна згрупувати у вигляді одного СелекториПравила каскадних таблиць стилів, в яких як селектор використовуються теги HTML, впливають КласиCSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково H1.red {color: red; } H1.blue (color:red; background-color: blue} У тексті документа посилання .red {color: red; }.blue (color:red; background-color: blue}   Тепер два класи red ІдентифікаториПривласнення стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному ідентифікатору Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи 3 Властивості шрифту B {font-weight: bolder;}.b {font-weight: bold;}.size {font-size: 200%;} Курсивный шрифтвсе букви заглавныеЖирный шрифт bolderЖирный Колір елементу і колір фону 5 Властивості тексту H4 {text-decoration: underline;}A {text-decoration: none;}i {text-decoration:line-through;}b {text-decoration:overline;}H5 {text-align: center}b.cap {text-transform:capitalize;}.otstup {text-indent: 50pt;}.interval {line-height: 50 %} Увеличим проміжки між словами Уменьшим проміжки між буквамиФормула спиртуC 2H 5OH 6 Одиниці вимірювання Умовно одиниці вимірювання можна розділити на три групи. Перша До другої групи можна віднести величини, які прийшли в CSS з друкарні. Третю групу складають величини, які є відносними, тобто реальний розмір елементу обчислюється
Слайды презентации

Слайд 2 Основні поняття CSS
Розшифровується CSS (англ. Cascading Style Sheets)

Основні поняття CSSРозшифровується CSS (англ. Cascading Style Sheets) як каскадні таблиці

як каскадні таблиці стилів і є технологією оформлення веб-сторінок.
Основним

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


Слайд 3



.newfont{font-size:24px; color:#CC9933}

Классы для створення тегів.

.newfont{font-size:24px; color:#CC9933}Классы для створення тегів. Заголовок

charset=windows-1251">


Заголовок




Слайд 5
Список властивостей, які можна змінити за допомогою CSS

Список властивостей, які можна змінити за допомогою CSS

Слайд 6 Синтаксис і елементи CSS Додавання стилів CSS в HTML-документ
Існує

Синтаксис і елементи CSS Додавання стилів CSS в HTML-документ Існує декілька

декілька способів скріплення документа і таблиці стилів:
Скріплення -

дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок HTML
Впровадження - дозволяє задавати всі правила таблиці стилів безпосередньо в самому документі
Вбудовування в теги документа - дозволяє змінювати форматування конкретних елементів сторінки
Імпортування - дозволяє вбудовувати в документ таблицю стилів, розташовану на сервері


Слайд 7 Скріплення. Iнформація про стилі може розташовуватися або в окремому

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

файлі, або безпосередньо в коді документа.

HREF="URL">







Слайд 8 Впровадження.
Другий варіант, при якому опис стилів розташовується в

Впровадження.Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині

коді Web-странички, усередині тега HEAD, в теге ...



Слайд 9


.el_cl_1{display:inline; z-index:1};
.el_lst{display:list-item; margin:-1%; background:#ff0000 url("bc.jpg") no-repeat};


.el_cl_1{display:inline; z-index:1};	.el_lst{display:list-item; margin:-1%; background:#ff0000 url(

http-equiv="Content-Type" content="text/html; charset=windows-1251">



Слайд 10 Вбудовування в теги документа.
Внимание!
Імпортування

Untitled

Вбудовування в теги документа.Внимание!ІмпортуванняUntitled @import url('css/default.css');

charset=windows-1251" />

@import url('css/default.css');




Слайд 11 2.2 Групування
H1 {font-family: Verdana}
H2 {font-family: Verdana}
можна згрупувати

2.2 Групування H1 {font-family: Verdana}H2 {font-family: Verdana} можна згрупувати і задати

і задати у вигляді одного правила із списком селекторів


 
H1, H2 {font-family: Verdana}


Слайд 12
H2 {font-weight: bold}
H2 {font-size: 14pt}
H2 {font-family: Verdana}
можна згрупувати

H2 {font-weight: bold}H2 {font-size: 14pt}H2 {font-family: Verdana} можна згрупувати у вигляді

у вигляді одного правила, згрупувавши визначення:
 
H2 (font-weight: bold;

font-size: 14pt; font-family: Verdana;}


Слайд 13 Селектори
Правила каскадних таблиць стилів, в яких як селектор

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

типу в документі. Наступне правило відображає без підкреслення всі посилання в документі.
< STYLE TYPE="text/css">   A {text-decoration:none; }


Слайд 14 Класи
CSS реалізує можливість привласнювати стилі не всім однаковим

КласиCSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а

елементам сторінки, а вибірково – для цього використовується параметр

CLASS = "ім'я класу" або ідентифікатор ID=«имя елементу», що привласнюються будь-якому елементу сторінки. Розглянемо ці можливості докладніше.


Слайд 15
H1.red {color: red; }
H1.blue (color:red; background-color:

H1.red {color: red; } H1.blue (color:red; background-color: blue} У тексті документа

blue}

У тексті документа посилання на відповідний клас задається

в параметрі CLASS:

Красный шрифт

Красный шрифт на синьому фоне




Слайд 16

.red {color: red; }
.blue (color:red; background-color: blue}

.red {color: red; }.blue (color:red; background-color: blue}  Тепер два класи red


 
Тепер два класи red і blue можна застосовувати до

будь-яких елементів документа:
 

Красный шрифт

Красный шрифт на синьому фоне




Слайд 17 Ідентифікатори
Привласнення стилів за допомогою ідентифікаторів застосовується у

ІдентифікаториПривласнення стилів за допомогою ідентифікаторів застосовується у випадку, якщо даному

випадку, якщо даному ідентифікатору відповідає тільки один елемент на

сторінці. Якщо елементів, яким необхідно привласнити такий стиль, декілька – це вже клас.


Слайд 18 Правила таблиць стилів регламентують використання унікального ідентифікаційного імені

Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор,

елементу як селектор, передуючи йому символом #:

#myID

{letter-spacing: 1em; }
H1#form2 (color:red; background-color: blue}


Розріджені слова в абзаце


Черный заголовок



Слайд 19 3 Властивості шрифту

3 Властивості шрифту

Слайд 22
B {font-weight: bolder;}
.b {font-weight: bold;}
.size {font-size: 200%;}

 

B {font-weight: bolder;}.b {font-weight: bold;}.size {font-size: 200%;} Курсивный шрифтвсе букви заглавныеЖирный шрифт

style=font-style:italic>Курсивный шрифт

все букви заглавные

Жирный шрифт bolder

Жирный шрифт

bold

Жирный шрифт на 200 %


Слайд 23 Колір елементу і колір фону

Колір елементу і колір фону

Слайд 25 5 Властивості тексту

5 Властивості тексту

Слайд 28

H4 {text-decoration: underline;}
A {text-decoration: none;}
i {text-decoration:line-through;}
b {text-decoration:overline;}
H5

H4 {text-decoration: underline;}A {text-decoration: none;}i {text-decoration:line-through;}b {text-decoration:overline;}H5 {text-align: center}b.cap {text-transform:capitalize;}.otstup {text-indent: 50pt;}.interval {line-height: 50 %}

{text-align: center}
b.cap {text-transform:capitalize;}
.otstup {text-indent: 50pt;}
.interval {line-height: 50 %}


Слайд 29
Увеличим проміжки між словами

Увеличим проміжки між словами Уменьшим проміжки між буквамиФормула спиртуC 2H 5OH

-2pt"> Уменьшим проміжки між буквами
Формула спирту
C

2
H
5
OH

Слайд 30 6 Одиниці вимірювання
Умовно одиниці вимірювання можна розділити на

6 Одиниці вимірювання Умовно одиниці вимірювання можна розділити на три групи.

три групи.
Перша група - це величини, які використовуються

для вимірювання довжин реальних предметів. До них відносяться:
in - дюйми;
cm - сантиметри;
mm - міліметри.


Слайд 31
До другої групи можна віднести величини, які прийшли

До другої групи можна віднести величини, які прийшли в CSS з

в CSS з друкарні. Тобто вони використовуються для установки

розмірів шрифту, міжрядкових інтервалів і інших друкарських величин. Дана група величин звична поліграфістам. До них відносяться:
pt - друкарський пункт;
pc - спис;
ex - висота рядкової букви "x" в шрифті.

  • Имя файла: stilі-css-lektsіya-4.pptx
  • Количество просмотров: 124
  • Количество скачиваний: 0