Урок 1:принцип роботи css

Як і будь-який інший мова програмування, CSS має строго певний синтаксис, тобто правила за якими створюються таблиці стилів. Запам'ятайте, в CSS на відміну від HTML немає ні елементів, ні атрибутів, ні тегів. Основною структурною одиницею тут є правило, яке визначає, як буде виглядати той чи інший елемент в документі.

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

урок 1:принцип роботи css - student2.ru

Як видно з малюнка вище , спочатку записується так званий селектор , що показує до якого html тегу ( тегам ) застосовується те чи інше властивість . Більш докладно про типи селекторів в CSS ми поговоримо в 8 уроці , тому що Ви вже будете знати базові властивості CSS і з легкістю зрозумієте мене .

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

Кожне оголошення в свою чергу складається з властивості і його значення. Після властивості ставиться двокрапка . Правило може містити в собі кілька оголошень . У такому випадку вони повинні бути відокремлені один від одного крапкою з комою ( див. рисунок ) причому після останнього оголошення крапку з комою можна не ставити.

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

Між HTML і CSS багато спільного , і тому запам'ятати властивості CSS Вам буде дуже просто .

Як підключити CSS таблицю до HTML документу ?

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

урок 1:принцип роботи css - student2.ru

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

Зовнішня таблиця стилів це просто текстовий файл з розширенням . Css .

Припустимо у нас є таблиця стилів style.css і кілька сторінок html , і причому все це розташовано в одній папці. Тоді в кожному документі який ми хочемо підключити , в голові документа ( між тегами <head> і </ head > ) необхідно прописати рядок:

<link rel="stylesheet" type="text/css" href="style.css">

Цей рядок вказує браузеру, що він повинен використовувати правила відображення HTML - файлу з CSS- файлу.

Тепер спробуйте самі:

Відкрийте Блокнот ( або інший редактор ) і створіть за допомогою нього два файли знаходяться в одній папці : CSS файл - style.css і HTML файл - index.htm . Нагадаю для тих , хто забув як це робити : просто відкриваєте блокнот, вибираєте " Файл " потім "зберегти як" і в полі ім'я файлу пишіть style.css . Аналогічно для index.htm .

Файли приблизно наступного змісту:

index.htm

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"

" http://www.w3.org/TR/html4/loose.dtd ">

<html>

<head>

<title> Працюємо зі стилями </ title >

<link rel="stylesheet" type="text/css" href="style.css" >

</ head >

<body>

<h1> Це моя перша таблиця стилів , і якщо все працює , то незважаючи на те , що це заголовок першого рівня , він відобразиться висотою всього лише 14 пікселів і буде блакитного кольору </ h1 >

</ body >

</ html >

style.css

h1 { color : blue ; font - size : 14px }

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

Можна розташовувати правила стилів безпосередньо в голові документа:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"

" http://www.w3.org/TR/html4/loose.dtd ">

<html>

<head>

<title> Працюємо зі стилями </ title >

<style type="text/css">

h1 { color : blue ; font - size : 14px }

</ style >

</ head >

<body><h1> Це моя перша таблиця стилів , і якщо все працює , то незважаючи на те , що це заголовок першого рівня , він відобразитися висотою всього лише 14 пікселів і буде блакитного кольору </ h1 >

</ body >

</ html >

Також , можна задавати стиль за допомогою атрибуту style . наприклад:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"

" http://www.w3.org/TR/html4/loose.dtd ">

<html>

<head>

<title> Працюємо зі стилями </ title >

</ head >

<body>

<h1 style="color:blue;font-size:14px"> Це моя перша таблиця стилів , і якщо все працює , то незважаючи на те , що це заголовок першого рівня , він відобразитися висотою всього лише 14 пікселів і буде блакитного кольору < / h1 >

</ body >

</ html >

Обидва ці прикладу не використовують хоча б тому , що вони не дають особливих переваг перед html . Адже при спробі змінити дизайн всього сайту , побудованого за таким принципом , доведеться змінювати стилі на всіх сторінках , а це знову ж час ...

Сподіваюся Вам все зрозуміло. Вже в наступному уроці , ми почнемо вивчення основних властивостей CSS.

Урок 2: Колір і фон.

Цей урок ми присвятимо такому важливому моменту як колір і фон в CSS . Ви побачите , як прикольно , і наскільки ефективніше ніж у html , все це працює!

Запам'ятай : кольори в CSS вказуються так само , як і в html . Тобто можна вказувати шестнадцатиричное значення , наприклад # ff3355 , або ж назву кольору ( red , green , blue та ін )

Основними властивостями кольору і фону в CSS є:

color

background - color

background - image

background - repeat

background - attachment

background - position

background

А тепер детальніше , і по -порядку :

властивість COLOR

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

H1 {

color : red ;

}

P {

color : green ;

Властивість BACKGROUND -COLOR

Задає фоновий колір елемента . На відміну від html , в якому фоновий колір можна використовувати тільки для сторінки або елементу таблиці (тобто мають атрибут bgcolor ) в CSS , фоновий колір можна задавати для чого завгодно: для таблиць , заголовків , параграфів , посилань тощо Тут головне правильно визначити що нам потрібно.Ну от наприклад , щоб змінити фоновий колір всієї сторінки , потрібно задати це властивість елементу BODY - тому що саме він відповідає за тіло документа, тобто за всю сторінку .

BODY {

background - color : # FFEE8C ;

}

H1 {

color : red ;

background - color : blue ;

}

P {

color : green ;

}

Властивість BACKGROUND - IMAGE

Дана властивість використовується для завдання фонового зображення. У прикладі нижче , я вкажу фонове зображення для всієї сторінки , тобто для елемента BODY .

BODY {

background - color : # FFEE8C ;

background - image : url ( smile.png ) ;

}

H1 {

color : red ;

background - color : blue ;

}

P {

color : green ;

}

Як бачите , в якості значення властивості , вказується шлях до зображення , але трохи не так як в html . На початку пишеться URL а потім відразу , Без пробілів ! в круглих дужках положення картинки . Якщо вона знаходиться в тій же папці то пишемо просто назва картинки , як у прикладі вище. Якщо допустимо в папці img , то пишемо так url ( img / smile.png ).

урок 1:принцип роботи css - student2.ru урок 1:принцип роботи css - student2.ru

Урок 3: Шрифти.

У цьому уроці ми подивимося як виглядають шрифти в CSS , а саме розглянемо основні властивості шрифтів: сімейство , вага , стиль , варіант , розмір , також дізнаємося за яким принципом браузер вибирає потрібний шрифт.

Так от за шрифти в CSS відповідають наступні характеристики:

font - family

font - style

font - variant

font - weight

font - size

font

Властивість FONT - FAMILY

Дана властивість визначає гарнітуру шрифту. Взагалі FONT - FAMILY з англ. означає сімейство шрифту. Справа в тому , що шрифти з тих чи інших ознаками , об'єднуються в сімейства. Я розгляну три основних групи:

Serif - шрифти з характерними " зарубками " , найбільш яскравий представник - "Times New Roman " ;

Sans - serif - шрифти рубані , без зарубок , наприклад Arial або Verdana ;

Monospace - Шрифт фіксованої ширини (з однаковою відстанню між символами , на зразок друкарської машинки ) , такі як " Courier New " ;

На малюнку нижче зображені назви основних , використовуваних на практиці , шрифтів , згруповані за домами . Причому відображені вони саме так , як виглядають насправді , наприклад назву " Times New Roman" відображує шрифтом "Times New Roman ".

урок 1:принцип роботи css - student2.ru

Властивість FONT - STYLE

Дана властивість задає стиль шрифту. Може приймати три значення:

normal - звичайний;

italic - курсивний ;

oblique - похилий ;

У вас може виникнути питання: "чим відрізняється курсивний від похилого ? " , - Справа в тому , що значення italic означає використання вбудованого в шрифт курсивного накреслення. Адже майже кожен шрифт включає в себе всі символи і букви в нормальному виконанні , в напівжирному виконанні й у курсивном .

А значення oblique - це штучно створений курсив , тобто створений нахилом стандартних букв на певний кут .

h1 {

font - family : verdana , arial , sans - serif ;

font - style : normal ;

}

h2 {

font - family : verdana , arial , sans - serif ;

font - style : italic ;

}

h3 {

font - family : verdana , arial , sans - serif ;

font - style : oblique ;

}

Властивість FONT - VARIANT

Ця властивість використовується для вибору варіанту написання букв нижнього регістру. Може приймати два значення:

normal - значення за замовчуванням , текст відображається звичайним чином .

small - caps - букви нижнього регістра відображаються як зменшені заголовні .

Тобто як бачите великі ( великі літери ) залишаються без змін , а маленькі - являють собою повну копію заголовних букв , тільки злегка меншого розміру.

За замовчуванням ( тобто якщо взагалі не записувати це властивість ) текст буде відображатися звичайним накресленням .

Приклад запису стилю :

h1 {

font - family : verdana , arial , sans - serif ;

font - variant : small - caps ;

}

h2 { font - family : verdana , arial , sans - serif ;}

Властивість FONT - WEIGHT

Ця властивість визначає насиченість шрифту , тобто з його допомогою можна зробити шрифт жирним . Основні значення : normal - звичайний і bold - жирний . Деякі браузери підтримують числові значення : 100 , 200,300,400,500,600,700,800,900 . Для довідки: 400 рівносильно normal , а 700 - bold . Але я не раджу вам користуватися числами !

P { font - family : arial , verdana , sans - serif ;}

DIV {

font - family : arial , verdana , sans - serif ;

font - weight : bold ;

}

Урок 4: Робота з текстом.

У цьому уроці ми розглянемо основні властивості CSS відповідають за форматування тексту.

text - align

text - decoration

text - indent

text - transform

letter - spacing

word - spacing

Властивість TEXT - ALIGN

Властивість вирівнювання тексту , аналогічне атрибуту ALIGN використовуваному в html . Може приймати чотири значення :

left - вирівнювання по лівому краю (значення за замовчуванням) ;

right - вирівнювання по правому краю;

center - вирівнювання по центру;

justify - вирівнювання по ширині ( по правому і лівому краях одночасно).

Тут все дуже просто , ну от наприклад :

h1 { text - align : center ;}

h2 { text - align : left ;}

h3 { text - align : right ;}

p { text - align : justify ;}

Властивість TEXT - DECORATION

Дозволяє оформляти текст певним чином. Розглянемо чотири основних значення даної властивості :

none - значення за замовчуванням. Додаткового оформлення не відбувається ;

underline - текст підкреслюється знизу ;

overline - текст надчерківается зверху ;

line - through - текст перекреслюється ;

h1 {

text - align : center ;

text - decoration : underline ;

}

h2 {

text - align : center ;

text - decoration : overline ;

}

h3 {

text - align : center ;

text - decoration : line - through ;

}

Властивість TEXT - INDENT

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

h1 { text - align : center ;}

p {

text - indent : 40px ;

}

Властивість TEXT - TRANSFORM

C допомогою цієї властивості , можна видозмінювати текст , а саме міняти великі літери на маленькі або навпаки. Може мати такі значення:

capitalize - змінює регістр перших букв кожного слова так , щоб вони були заголовними . Наприклад: " створіть сайт зараз " стане " Створіть Сайт Сейчас".

Частенько це властивість використовується при написанні рекламних текстів , це більше привертає уваги!

uppercase - робить з усіх букв заголовні . Наприклад: " текст у css " стане " ТЕКСТ У CSS "

lowercase - робить з усіх букв маленькі . Наприклад: " TRANSFORM " cтанет " transform " .

none - не виробляє зміни регістру ; це значення використовується за умовчанням.

Властивість WORD - SPACING

Дозволяє змінювати відстань між словами. Значення також краще задавати в пікселах .

h1 { word - spacing : 20px ;}

p { word - spacing : 10px ;}

Урок 6:Робота з списками.

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

list - style - type

list - style - position

list - style - image

list - style

Запам'ятайте: Всі ці властивості універсальні, тобто можуть застосовуватися як до впорядкованих списками , так і до неврегульованим . У цьому то і прикол CSS, що можна з неупорядкованого списку , зробити впорядкований і навпаки :)

Властивість LIST - STYLE- TYPE

Дозволяє визначати вид маркера елементів списку . Це можуть бути цифри , букви , квадратики , кружечки і ін Нижче наведені основні значення цієї властивості :

disk - маркер у вигляді закрашеного кола ;

circle - маркер у вигляді незафарбовані кола ;

square - маркер у вигляді закрашеного квадрата ;

decimal - звичайні десяткові числа , наприклад 1,2,3,4,5 і т. д.;upper - roman - великі римські цифри , типу I , II , III , IV , V і т.д. ;

lower - roman - маленькі римські цифри типу i , ii , iii , iv , v і т.д.

upper - alpha - великі літери A , B , C , D , E і так далі;

lower - alpha - малі літери типу a , b , c , d , e і т.д.;

none - маркер списку відсутнє ;

Переробимо , для приколу , впорядкований список в невпорядкований , тобто елементу OL ( впорядкований список ) напишемо square , а елементу UL ( невпорядкований ) тип upper - roman ;

ol { list - style - type : square ;}

ul { list - style - type : upper - roman ;}

Властивість LIST - STYLE- IMAGE

Це напевно найцікавіше властивість у списках. Воно дозволяє поставити замість маркера будь-яке зображення . Як значення вказується ключове слово url і потім в круглих дужках шлях до зображення . У деяких застарілих версіях браузерів , працює неккоректно .

ul { list - style - image : url ( galka.gif ) ;}

Властивість LIST - STYLE- IMAGE

Це напевно найцікавіше властивість у списках. Воно дозволяє поставити замість маркера будь-яке зображення . Як значення вказується ключове слово url і потім в круглих дужках шлях до зображення . У деяких застарілих версіях браузерів , працює неккоректно .

ul { list - style - image : url ( galka.gif ) ;}

Не забувайте , що url ( galka.gif ) означає що зображення galka.gif лежить в тій же папці , де і css -файл. Якщо у вас зображення не там , відповідно і шлях вказуйте інший!

Скорочена форма LIST - STYLE

Перераховані вище властивості можна записати більш компактно . Для цього існує скорочений варіант list - style ;

Такий варіант з трьох рядків :

ul {

list - style - type : square ;

list - style - position : inside ;

list - style - image : url ( galka.gif ) ;

}

Раціональніше замінити таким :

ul { list - style : square inside url ( galka.gif ) }

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

Урок 6:Робота з рамками.

Давайте в цьому уроці поговоримо про рамках. Основні властивості рамок в CSS наступні:

border-width

border-color

border-style

Скорочена форма - border

приклади

Властивість BORDER-WIDTH

Це властивість задає товщину рамки. Значення зазвичай вказується в пікселях, але також можна вказувати ключовими словами thin (2px), medium (4px) і thick (6px). Для кращого розуміння, скільки це один піксель, дивіться малюнок нижче:

урок 1:принцип роботи css - student2.ru

Скорочена форма - border

Як і в інших властивостях , у рамки є скорочена форма border . На початку пишеться товщина , потім після пробілу стиль , а потім після пробілу колір. Попередній приклад можна записати так:

h1 {

border : 30px outset red ;

}

h2 {

border : 20px dashed gold ;

}

h3 {

border : 16px double green ;

}

P {

border : 1px dotted blue

}

приклади :

У всіх перерахованих вище прикладах , якщо додати після слова border одне з ключових слів ( top , right , bottom , left ) можна регулювати параметри рамки з різних сторін відповідно ( верх , право , низ , ліво ) . Ну от наприклад можна зробити так:

h1 {

border - top - width : 30px ;

border - top - style : solid ;

border - top - color : red ;

border - right - width : 20px ;

border - right - style : dashed ;

border - right - color : gold ;

border - bottom - width : 10px ;

border - bottom - style : dashed ;

border - bottom - color : green ;

border - left - width : 40px ;

border - left - style : solid ;

border - left - color : blue ;

}

Природно набагато красивіше код буде виглядати у скороченому вигляді:

h1 {

border - top : 30px solid red ;

border - right : 20px dashed gold ;

border - bottom : 10px dashed green ;

Наши рекомендации