Стилі CSS. (Лекція 4) - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Стилі CSS. (Лекція 4). Доклад-сообщение содержит 32 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Лекція 4 Стилі CSS 1 Основні поняття CSS 2 Синтаксис і елементи CSS 3 Властивості шрифту 4 Колір елементу і колір фону 5 Властивості тексту 6 Одиниці вимірювання

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

Слайд 5

Описание слайда:

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

Впровадження. Другий варіант, при якому опис стилів розташовується в коді 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("bc.jpg") no-repeat};

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

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; font-size: 14pt; font-family: Verdana;}

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

H1.red {color: red; } H1.blue (color:red; background-color: blue} У тексті документа посилання на відповідний клас задається в параметрі CLASS: Красный шрифтКрасный шрифт на синьому фоне

Слайд 16

Описание слайда:

.red {color: red; } .blue (color:red; background-color: blue} Тепер два класи red і blue можна застосовувати до будь-яких елементів документа: Красный шрифтКрасный шрифт на синьому фоне

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи йому символом #: Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи йому символом #: #myID {letter-spacing: 1em; } H1#form2 (color:red; background-color: blue} Розріджені слова в абзаце Черный заголовок

Слайд 19

Описание слайда:

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

Слайд 20

Описание слайда:

Слайд 21

Описание слайда:

Слайд 22

Описание слайда:

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

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

Слайд 27

Описание слайда:

Слайд 28

Описание слайда:

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 %}

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

6 Одиниці вимірювання Умовно одиниці вимірювання можна розділити на три групи. Перша група - це величини, які використовуються для вимірювання довжин реальних предметів. До них відносяться: in - дюйми; cm - сантиметри; mm - міліметри.

Слайд 31

Описание слайда:

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

Слайд 32

Описание слайда:

Третю групу складають величини, які є відносними, тобто реальний розмір елементу обчислюється щодо якої-небудь іншої величини. До них відносяться: em - обчислюється щодо розміру шрифту елементу; px - піксель. Обчислюється щодо пристрою відображення; % - відсоток.

Теги Стил Лекц

Похожие презентации