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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Стилі CSS. (Лекція 4), слайд №1Стилі CSS. (Лекція 4), слайд №2Стилі CSS. (Лекція 4), слайд №3Стилі CSS. (Лекція 4), слайд №4Стилі CSS. (Лекція 4), слайд №5Стилі CSS. (Лекція 4), слайд №6Стилі CSS. (Лекція 4), слайд №7Стилі CSS. (Лекція 4), слайд №8Стилі CSS. (Лекція 4), слайд №9Стилі CSS. (Лекція 4), слайд №10Стилі CSS. (Лекція 4), слайд №11Стилі CSS. (Лекція 4), слайд №12Стилі CSS. (Лекція 4), слайд №13Стилі CSS. (Лекція 4), слайд №14Стилі CSS. (Лекція 4), слайд №15Стилі CSS. (Лекція 4), слайд №16Стилі CSS. (Лекція 4), слайд №17Стилі CSS. (Лекція 4), слайд №18Стилі CSS. (Лекція 4), слайд №19Стилі CSS. (Лекція 4), слайд №20Стилі CSS. (Лекція 4), слайд №21Стилі CSS. (Лекція 4), слайд №22Стилі CSS. (Лекція 4), слайд №23Стилі CSS. (Лекція 4), слайд №24Стилі CSS. (Лекція 4), слайд №25Стилі CSS. (Лекція 4), слайд №26Стилі CSS. (Лекція 4), слайд №27Стилі CSS. (Лекція 4), слайд №28Стилі CSS. (Лекція 4), слайд №29Стилі CSS. (Лекція 4), слайд №30Стилі CSS. (Лекція 4), слайд №31Стилі CSS. (Лекція 4), слайд №32
Скачать

Содержание ▲

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

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

Слайд 1


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

Слайд 2


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

Слайд 3


<html> <head> <style type="text/css"> .newfont{font-size:24px; color:#CC9933} </style> <title>Классы для створення тегів.</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p class=" newfont ">Заголовок</p> </body> </html>
Описание слайда:
<html> <head> <style type="text/css"> .newfont{font-size:24px; color:#CC9933} </style> <title>Классы для створення тегів.</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p class=" newfont ">Заголовок</p> </body> </html>

Слайд 4


Стилі CSS. (Лекція 4), слайд №4
Описание слайда:

Слайд 5


Стилі CSS. (Лекція 4), слайд №5
Описание слайда:

Слайд 6


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

Слайд 7


Скріплення. Iнформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді документа. <LINK REL=STYLESHEET TYPE="text/css" HREF="URL"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <link rel="stylesheet" href="css/default.css"> </head>
Описание слайда:
Скріплення. Iнформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді документа. <LINK REL=STYLESHEET TYPE="text/css" HREF="URL"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <link rel="stylesheet" href="css/default.css"> </head>

Слайд 8


Впровадження. Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині тега HEAD, в теге <STYLE type="text/css">... </STYLE. В цьому випадку можна використовувати ці стилі для елементів, розташованих в межах сторіночки. Параметр type="text/css" є обов'язковим і служить для вказівки броузеру використовувати CSS.
Описание слайда:
Впровадження. Другий варіант, при якому опис стилів розташовується в коді Web-странички, усередині тега HEAD, в теге <STYLE type="text/css">... </STYLE. В цьому випадку можна використовувати ці стилі для елементів, розташованих в межах сторіночки. Параметр type="text/css" є обов'язковим і служить для вказівки броузеру використовувати CSS.

Слайд 9


<head> <style type="text/css" > .el_cl_1{display:inline; z-index:1}; .el_lst{display:list-item; margin:-1%; background:#ff0000 url("bc.jpg") no-repeat}; </style> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head>
Описание слайда:
<head> <style type="text/css" > .el_cl_1{display:inline; z-index:1}; .el_lst{display:list-item; margin:-1%; background:#ff0000 url("bc.jpg") no-repeat}; </style> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head>

Слайд 10


Вбудовування в теги документа. <p style="color:#CCFF66">Внимание!</p> Імпортування <head> <title>Untitled </title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style type="text/css"> @import url('css/default.css'); </style> </head>
Описание слайда:
Вбудовування в теги документа. <p style="color:#CCFF66">Внимание!</p> Імпортування <head> <title>Untitled </title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <style type="text/css"> @import url('css/default.css'); </style> </head>

Слайд 11


2.2 Групування H1 {font-family: Verdana} H2 {font-family: Verdana} можна згрупувати і задати у вигляді одного правила із списком селекторів   H1, 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; font-size: 14pt; 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; } </--STYLE>
Описание слайда:
Селектори Правила каскадних таблиць стилів, в яких як селектор використовуються теги HTML, впливають на відображення всіх елементів заданого типу в документі. Наступне правило відображає без підкреслення всі посилання в документі. < STYLE TYPE="text/css">   A {text-decoration:none; } </--STYLE>

Слайд 14


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

Слайд 15


<STYLE TYPE="text/css"> <STYLE TYPE="text/css"> H1.red {color: red; } H1.blue (color:red; background-color: blue} </STYLE> У тексті документа посилання на відповідний клас задається в параметрі CLASS: <H1 CLASS="red">Красный шрифт</H1><H1 CLASS="blue">Красный шрифт на синьому фоне</H1>
Описание слайда:
<STYLE TYPE="text/css"> <STYLE TYPE="text/css"> H1.red {color: red; } H1.blue (color:red; background-color: blue} </STYLE> У тексті документа посилання на відповідний клас задається в параметрі CLASS: <H1 CLASS="red">Красный шрифт</H1><H1 CLASS="blue">Красный шрифт на синьому фоне</H1>

Слайд 16


<STYLE TYPE="text/css"> .red {color: red; } .blue (color:red; background-color: blue} </STYLE>   Тепер два класи red і blue можна застосовувати до будь-яких елементів документа:   <P CLASS="red">Красный шрифт</P><P CLASS="blue">Красный шрифт на синьому фоне</P>
Описание слайда:
<STYLE TYPE="text/css"> .red {color: red; } .blue (color:red; background-color: blue} </STYLE>   Тепер два класи red і blue можна застосовувати до будь-яких елементів документа:   <P CLASS="red">Красный шрифт</P><P CLASS="blue">Красный шрифт на синьому фоне</P>

Слайд 17


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

Слайд 18


Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи йому символом #: Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи йому символом #: <STYLE TYPE="text/css"> #myID {letter-spacing: 1em; } H1#form2 (color:red; background-color: blue} </STYLE> <BODY> <P ID=myID> Розріджені слова в абзаце</P> <H1 ID=form2>Черный заголовок</P>
Описание слайда:
Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи йому символом #: Правила таблиць стилів регламентують використання унікального ідентифікаційного імені елементу як селектор, передуючи йому символом #: <STYLE TYPE="text/css"> #myID {letter-spacing: 1em; } H1#form2 (color:red; background-color: blue} </STYLE> <BODY> <P ID=myID> Розріджені слова в абзаце</P> <H1 ID=form2>Черный заголовок</P>

Слайд 19


3 Властивості шрифту
Описание слайда:
3 Властивості шрифту

Слайд 20


Стилі CSS. (Лекція 4), слайд №20
Описание слайда:

Слайд 21


Стилі CSS. (Лекція 4), слайд №21
Описание слайда:

Слайд 22


<STYLE type="text/css"> <STYLE type="text/css"> B {font-weight: bolder;} .b {font-weight: bold;} .size {font-size: 200%;} </STYLE>   <b style=font-style:italic>Курсивный шрифт</b><br> <b style=font-variant:small-caps>все букви заглавные</b><br> <b>Жирный шрифт bolder</b><br> <b class="b">Жирный шрифт bold</b><br> <b class="size">Жирный шрифт на 200 %</b>
Описание слайда:
<STYLE type="text/css"> <STYLE type="text/css"> B {font-weight: bolder;} .b {font-weight: bold;} .size {font-size: 200%;} </STYLE>   <b style=font-style:italic>Курсивный шрифт</b><br> <b style=font-variant:small-caps>все букви заглавные</b><br> <b>Жирный шрифт bolder</b><br> <b class="b">Жирный шрифт bold</b><br> <b class="size">Жирный шрифт на 200 %</b>

Слайд 23


Колір елементу і колір фону
Описание слайда:
Колір елементу і колір фону

Слайд 24


Стилі CSS. (Лекція 4), слайд №24
Описание слайда:

Слайд 25


5 Властивості тексту
Описание слайда:
5 Властивості тексту

Слайд 26


Стилі CSS. (Лекція 4), слайд №26
Описание слайда:

Слайд 27


Стилі CSS. (Лекція 4), слайд №27
Описание слайда:

Слайд 28


<STYLE type="text/css"> 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 %} </STYLE>
Описание слайда:
<STYLE type="text/css"> 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 %} </STYLE>

Слайд 29


<p><span style="word-spacing: 15pt"> Увеличим проміжки між словами</span> <p><span style="letter-spacing: -2pt"> Уменьшим проміжки між буквами</span> <p>Формула спирту <span style=color:red>C</span> <span style= vertical-align:sub;color:blue;> 2</span> <span style=color:red>H</span> <span style="color:blue; vertical-align:sub;"> 5</span> <span style=color:red>OH</span>
Описание слайда:
<p><span style="word-spacing: 15pt"> Увеличим проміжки між словами</span> <p><span style="letter-spacing: -2pt"> Уменьшим проміжки між буквами</span> <p>Формула спирту <span style=color:red>C</span> <span style= vertical-align:sub;color:blue;> 2</span> <span style=color:red>H</span> <span style="color:blue; vertical-align:sub;"> 5</span> <span style=color:red>OH</span>

Слайд 30


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

Слайд 31


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

Слайд 32


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

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию