Поняття css
Каскадні таблиці стилів (англ. Cascading Style Sheets або скорочено CSS) — спеціальна мова, що використовується для відображення сторінок, написаних мовами розмітки даних. Найбільш часто CSS використовують для візуальної презентації сторінок, написаних HTML та XHTML.
CSS (каскадна або блочна верстка) прийшла на заміну табличній верстці веб-сторінок. Головна перевага блочної верстки — розділення змісту сторінки (даних) та їх візуальної презентації.
CSS використовується авторами та відвідувачами веб-сторінок для того щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).
Призначення та переваги css.
Мета CSS є надання веб-розробників зі стандартним способом визначення, застосування та управління наборами характеристик стилю. CSS надає ці можливості в рамках технічної моделі, заснованої на ієрархічному сфери впливу, відділення стилю від змісту, а також певний набір опублікованих стандартів. Приділяючи особливу увагу як CSS може допомогти веб-розробників створюють обслуговуванні, повторно використовуваний код. Одна з головних переваг — можливість розділити зміст сторінки (або контент, наповнення, зазвичай HTML, XML або подібна мова розмітки) від вигляду документу (що описується в CSS).
Загальний синтаксис запису стилів.
стилів всіх елементів HTML в такому файлі виглядає наступним чином:
НАЗВА ЕЛЕМЕНТА {властивість: значення:}
В якості назв елементів приймаються, як правило, теги HTML. Наприклад, якщо ви хочете, щоб всі заголовки першого рівня у вашому html-доку-мент відображалися синім кольором і мали розмір у двадцять пікселів, приєднаний до web-сторінці файл CSS повинен включати наступний запис:H1 {color: blue: font-size: 20pt;}
Якщо в кількох різних селекторах використовуються одні й ті ж визначення, за допомогою мови CSS їх можна згрупувати між собою.
H1. Н2. НЗ. Н4 {font-family: Helvetica: color: red: font-size: 30pt:}
5. Використання позиціонування у css.
Щоб розташувати елементи, в першу чергу визначити, як ви збираєтеся розташувати елементи за допомогою CSS позиції власності або плаваючі елементи з плаваючою точкою власності.
абсолютна позиція поміщає елемент у точне місце розташування на сторінці, з 0,0 в лівому верхньому кутку вікна браузера
відносне становище ставить елементів в нормальному потоці, з позиціонуванням, починаючи з цієї позиції
плаваючою бере елементи з нормального потоку і підштовхує їх до правого або лівого боку документа
Абсолютного та відносного позиціонування:
Використовуйте положення елементи:
position: absolute;
Абсолютна положення елементів даної позиції по відношенню до верхнього лівого кута вікна браузера. Так що якщо ви встановите елемент ліворуч: 10px і вниз: 10px, він завжди буде показувати там, незалежно від того, що ще в цьому документі.
Відносна розташовані елементи помістили в потік документів, то позиції не застосовуються. Так що якщо ви покладете щодо пункту розташовані ліворуч: 10px і вниз: 10px, то з'явиться трохи нижче і лівіше від того, де він зазвичай переглядів.
6. Наслідування
Успадкування в CSS є механізмом, за допомогою якого певні властивості передаються від елемента предка його елементам нащадкам. Насправді, це дуже схоже на спадкування у генетиці. Якщо батьки мають блакитні очі, то їхні діти теж, ймовірно, будуть мати блакитні очі.
Не всі властивості CSS успадковуються, так як для деяких з них це не має сенсу. Наприклад, поля не успадковуються, так як малоймовірно, що елементу нащадку можуть знадобитися такі ж поля, як у його предка.
7. Каскадування
Це механізм, який керує кінцевим результатом, коли кілька конфліктуючих оголошень CSS застосовуються до одного елементу. Є три основні концепції, які управляють порядком, в якому застосовуються оголошення CSS:
1.Важливість 2. Специфічність 3. Порядок вихідного коду
Важливість є найбільш значимою. Якщо два оголошення мають однакову важливість, специфічність правил визначає, яке з них буде застосовуватися. Якщо правила мають однакову специфічність, то порядок вихідного коду управляє результатом.
Специфічність є деякою характеристикою, яку кожен автор CSS повинен розуміти і думати про неї. Можна уявляти її як міру того, наскільки конкретним є селектор деякого правила.
Порядок вихідного коду Якщо два оголошення впливають на один і той же елемент, мають однакову важливість і однакову специфічність, то остаточне рішення визначає порядок вихідного коду. Оголошення, яке з’являється пізніше в таблицях стилів буде вигравати у тих, які зустрічаються раніше.
8. Спецефічність
Специфічність це щось на зразок таблиці «рангів» селекторів стилів. Стиль, який має пріоритет вище, присвоюється атрибуту, якщо в каскаді немає селектора, який має таку ж специфічність і оголошений пізніше. Специфічність стилю записується у вигляді чотирьох порядків (0,0,0,0). Чим більше число, тим вище специфічність, порядок який стоїть лівіше є більш значним у порівнянні з правим.
9.Властивості CSS для опису тексту.
text-decoration Установлює ефекти оформлення шрифту, такі, як підкреслення або закреслений текст
text-indent Установлює відступ першого рядка тексту. Найчастіше використається для створення параграфів з табулированной першим рядком.
P {text-indent: 50pt;}
line-height Управляє інтервалами між рядками тексту.
margin-left Установлюють значення відступів навколо елемента.
margin-top Установлюють значення відступів навколо елемента.
10. Фон і колір
Властивість color описує колір переднього плану елемента. Усі заголовки позначаються HTML-елементом <h1>. У наведеному нижче коді колір елемента <h1> встановлюється червоним.
Властивість background-color описує колір фону елемента. В елементі <body> розміщується весь вміст HTML-документа. Таким чином, для зміни кольору фону всієї сторінки властивість background-color потрібно застосувати до елемента <body>.
CSS-властивість background-image використовується для вставки фонового зображення. Для вставки малюнка метелики в якості фонового зображення web-сторінки просто застосуйте властивість background-image в тезі <body> і вкажіть місце розташування малюнка.
11. Властивості полів
Властивості кордону встановлюють кордон елемента. Узагальнююча властивість ‘margin’ встановлює кордон для всіх чотирьох сторін, у той час як решта встановлюють тільки відповідну сторону.
Властивості відступу визначають, скільки місця залишається між рамкою і змістом . Узагальнююча властивість ‘padding’ встановлює відступ для всіх чотирьох сторін, у той час як решта встановлюють лише відповідну сторону.
Властивості «ширина» (width) і «висота» (height) встановлюють розміри поля, а «плаваючий» (float) і «очищення» (clear) дозволяють змінювати позицію елементів.
12. Властивості CSS для опису відступів.
Використовуйте властивість margin мови CSS, щоб задати зовнішні відступи, тобто відстань від меж елемента до сусідніх елементів, а також до кордонів батьківського елемента. Цю відстань можна задавати окремо для відступу з кожного боку: margin-top — зверху, margin-right — праворуч, margin-bottom — знизу, margin-left — зліва.
13. Властивості CSS для опису границь.
Опис CSS властивості border-collapse:Встановлює, як відображати межі навколо клітинок таблиці. Цей параметр відіграє роль, коли для осередків встановлена рамка, тоді в місці стику осередків вийде лінія подвійний товщини. Значення collapse змушує браузер прибирати в таблиці подвійні лінії. Встановлює, як відображати межі навколо клітинок таблиці. Цей параметр відіграє роль, коли для осередків встановлена рамка, в такому випадку в місці стику осередків вийде лінія подвійний товщини. Додавання значення collapse змушує браузер аналізувати подібні місця в таблиці і прибирати в ній подвійні лінії. При цьому між осередками залишається тільки одна межа, одночасно належить обом осередкам. Те ж правило дотримується і для зовнішніх меж, коли навколо самої таблиці додається рамка.
Тег <FORM>: призначення та атрибути.
Тег <form> - створює форму на сторінці. Форма застосовується для обміну даними між користувачами та сервером.
accept список типів вмісту, через кому, які сервер-обробник форми буде коректно обробляти
accept-charset список кодувань для даних, що вводяться, прийнятих сервером, обробляє дану форму
action URL обробника даних на сервері. Обов'язковий параметр!
enctype задає спосіб кодування даних при відправці до сервера. Значення за замовчуванням application / x-www-form-urlencoded
method задає метод відправки даних
GET - дані передаються в адресному рядку у вигляді пар «ім'я = значення» (за замовчуванням)
POST - посилає дані в запиті браузера. Застосовується для відправки даних великого обсягу
name унікальний код форми
target вікно або фрейм, куди буде повертатися результат запит
Елементи управління тегом <FORM> (теги <INPUT>, <SELECT>).
Тег <INPUT> призначений для створення елементів керування і завжди використовується разом з атрибутом TYPE. Закриваючий тег не потрібен.
Атрибути:
title - спливаюча підказка
value - задає відображуваний текст для text, password, button, reset, submit
size - установлює число видимих символів у text
maxlength – установлює максимально припустиме число символів, що вводяться, у text
checked False чи True - приймає початковий стан для checkbox і radio (за замовчуванням False)
type - описує тип інтерфейсного елемента. Може приймати наступні значення
text створює рядок для введення тексту
password створює рядок для введення тексту, при цьому відображає символи, що вводяться, як зірочки (*)
checkbox створює «вмикач»
radio створює « перемикач, що вимикає,». Як правило, використовують блоки з декількох таких елементів
file створює елемент для вибору локальних файлів. Наприклад, рядок для імені файлу і кнопку "Огляд", при натисканні на який відкривається діалог «Вибір файлу»
hidden створює невидимий для користувача елемент. Може використовуватися для відправлення додаткової, службової інформації
image створює елемент форми у виді кнопки-зображення
button створює стандартну кнопку
submit створює кнопку «Подача запиту»
reset створює кнопку «Скидання»
style задає різні стилі. Наприклад, висоту чи ширину елемента
Тег <select> обов'язковий і парний йому </select>
Тег <select> створює список чи список, що випадає. Кожен елемент списку описується тегом <Option>
Атрибути:
size - число відображуваних елементів. Якщо дорівнює 1 чи не зазначено, то виводиться один рядок. Якщо значення більше 1, то виводиться список із прокруткою.
Елементи управління тегом <FORM> (теги <TEXTAREA>, <LABEL>).
для створення багаторядкового текстового поля в веб-формі потрібно прописати відкриваючий та закриваючий теги Textarea, а між ними ви можете додати текст, який буде видно при завантаженні сторінки з вебформой.Разом з Html тегом Textarea можна використовувати наступні атрибути:
Name - за допомогою цього атрибута в Textarea ви задаєте ім'я для елемента вебформи.
Cols - за допомогою цього Html атрибута в Textarea ви можете задати в веб формі ширину створюваного багаторядкового поля.
Rows - за допомогою цього атрибута ви можете задати в Textarea висоту створюваного багаторядкового поля.
Label дозволяє реалізувати одну дуже цікаву можливість в вебформах, яка є в операційних системах. для того щоб активувати якийсь елемент не обов'язково клацати саме по цьому елементу, можна клацнути і за назвою цього елемента - все одно відбудеться активація даного елемента (це робить Label в Html).