CSS - що воно таке? Урок №1
my3uka — Ср, 11/04/2009 - 18:38
CSS - Cascading Style Sheets - Каскадні таблиці стилів або ж просто таблиці стилів. Вони використовується в HTML або XML документах. Якщо вам доводилось працювати з HTML документами ви мали зустрічатись з таким тегом <body>. Ось наведу приклад, щоб надати фонового кольору вашій сторінці ви використовували:
<body bgcolor=”#FF0000”>
За допомогою CSS ми добємся тогож результату, це буде мати ось такий вигляд:
Body {background-color: #FF0000;} і ми отримаєм тойже результат. СИНТАКСИС Кожне значення CSS записується наступник чином. Селектор {властивості: значення;} Селектором називається ім'я стиля, в якому вказані параметри форматування, діляться вони на кілька типів: селектори тегів, ідентифікатори і класи. Селектори тегів використовуються для визачення стилів вбудованих тегів HTML. Класи використовуються для створення стилів, які можна використати в любому тегу HTML. Ідентифікатори використовується спільно з скриптами, щоб можна було управляти параметрами стиля динамічно, крім того, кожний ідентифікатор в межах сторінки повинен бути унікальним. Дальше в фігурних дужках вказуємо властивість CSS і через двокрапку його бажане значення. Можна писати багато значень для одного селектора, перераховуючи їх через крапку з комою ; або окремо, як наведено нижче:
p { color: green; background: #f0f0f0; }
p { color: green; }
p { background: #f0f0f0; }
В першій лінійці для селектора P задано колір тексту і фону, в двох наступних спочатку задається колір тексту і колір фону. Оскільки селектор заданий один, а значення різні, то вони будуть використовуватись одночасно. Тому подібні форми запусу приводять до одного результату. Якщо для одного селектора визначаються одинакові властивості, но з різними значеннями, то використовуватись буде тільки той котрий вказаний в коді останнім.
p { color: green }
p { color: red }
В першому значенні показано зміну коляру для параграфа <P>. Спочатку задано зелений колір, а потім червоний, котрий і буде використовуватись до тексту. Любі властивості CSS, а також їх значення нечутливі до реєстру, тому їх можна набирати, як великити так і малими символами. В основному вони пишуться малими символами.
При описі синтаксису застосовуються наступні позначення:* вертикальна межа між значеннями (наприклад, fixed | scroll) вказує на логічне виключає АБО, це означає, що треба вибрати тільки одне значення із запропонованих; * подвійна вертикальна межа (border-style || color) означає що об'єднує АБО (АБО / І), кожне значення може використовуватися самостійно або спільно з іншими через пробіл; * квадратні дужки ([left | center | right]) позначають групу, з якої, як правило, вибирається одне значення, причому воно не є обов'язковим до використання; * два числа у фігурних дужках ((a, b)) говорять, що передує їм значення слід повторювати не менш a, але не більше b раз.
Значення за замовчуваннямЯкщо будь-то властивість в стилі не наводиться явно, то браузер, тим не менше, самостійно застосовує його зі значенням, яке було встановлено за замовчуванням. Подібні значення не завжди є оптимальними, тому їх можна перепризначити, якщо прямо вказати властивість з бажаним значенням.
СпадкуванняСпадкування - це перенесення правил форматування для елементів, що перебувають усередині інших. Наприклад, якщо для параграфа <P> задано червоний колір тексту, а для курсиву <I>, який знаходиться усередині параграфа, ні, то в цьому випадку вкладений елемент успадковує властивості свого батька та курсивний текст також буде червоним. Спадкування корисно для задання властивостей, що застосовуються до елемента за замовчуванням. Так, досить задати параметри форматування тега <TABLE> і до осередків таблиці <TD> вони будуть застосовані автоматично. Точно так само можна визначити властивості тега <BODY>, який породжує стиль всіх інших елементів веб-сторінки. Існує два варіанти застосування успадкування. Якщо властивість успадковується, то для дочірнього елемента ту же властивість можна не вказувати, крім випадку, коли його використання бажано. Навпаки, якщо властивість НЕ успадковуються, то для дочірнього елемента потрібно вказати властивість знову або пропустити, коли воно не потрібно.
ЗастосуванняВластивості CSS можна застосовувати далеко не до всіх елементів веб-сторінки, а тільки до тих, з якими вони «дружать». Більшість властивостей працюють з усіма елементами, а деякі тільки з блочними або позиційованими. Наприклад, для зображень абсолютно безглуздо встановлювати властивості, які маніпулюють з текстом. Так що в кожному випадку слід вирішувати самостійно, коли застосовувати властивість, а коли ні.
Об'єктна модельДля динамічної зміни властивостей елемента через JavaScript, необхідно знати, як до нього звертатися. Знаючи ім'я об'єкта і бажану властивість, можна вказати його нове значення без перезавантаження веб-сторінки. Так, для приховування та відображення елемента застосовується visibility, а об'єктна модель для управління його значенням - document.getElementById ("elementID"). style.visibility. Вказуючи замість elementID свій ідентифікатор елементу, заданий параметром id, отримуємо механізм для динамічного приховування деякого вмісту.
Приклад
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Скрипт<title> <script type="text/javascript"> function hiddenLayer() { document.getElementById("descr").style.visibility = "hidden"; } function showLayer() { document.getElementById("descr").style.visibility = "visible"; } </script> </head> <body> <p><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"> <img src="button.gif" width="98" height="33" alt="Наведи"> </a></p> <div id="descr" style="visibility: hidden"> Текст котрий виводиться при наведенні мишки. </div> </body> </html>
У даному прикладі текст відображається при наведенні курсору миші на графічну кнопку і знов ховається, коли курсор уводиться геть. Розташування. Для зручності стильові властивості та їх значення в довіднику розрізняються за кольорами.
<BLOCKQUOTE> - Тег. При згадуванні в довіднику теги, як правило, пишуться великими літерами, а в коді прикладу позначаються прописаними.
border-bottom - стильова властивість, параметр тега або виділення.
left - значення властивості або параметр тега.
Trackback URL для цього допису
- блоґ my3uka
- 1304 перегляди
Я переглянув дуже швидко і не
coirius — Ср, 11/04/2009 - 22:31Я переглянув дуже швидко і не знайшов, що потрібно перш за все цю css підкрипити в документ, а то вона нучого не варта. Сподіваюсь автор виправить цю помилку.
LINUXoid
це тільки початок.......
my3uka — Ср, 11/04/2009 - 22:39це тільки початок.......
Новий Веб-майтер
так напішіть: CSS. Частина 1.
coirius — Ср, 11/04/2009 - 22:58так напішіть:
CSS. Частина 1. "Що таке CSS?"
LINUXoid
Gift Packaging Boxes
Gift Packaging Boxes (гість) — Сб, 03/03/2012 - 10:23Christmas Gift Boxes
Gift Packaging Boxes
bottle bag
Christmas Gift Bags
Christmas Paper Bags
Cosmetic Gift Boxes
Chocolate Boxes
Chocolate Packaging Boxes
Wine Bottle Boxes
Wine Paper Boxes
Jewelry Packaging Boxes
Jewelry Paper Boxes
Foldable Paper Boxes
Folding Boxes
Candy Paper Boxes
Candy Packaging Boxes
Paper Carrier Bags
Paper Gift Bags
Paper Printed Bags
Paper Bags Supplier
Paper Shopping Bags
Custom Shopping Bags
best waterproof
Мандрівник (гість) — Пт, 03/30/2012 - 06:30best waterproof camera[url=
http://www.underwatermonitor.com/search/10408/
best waterproof camera.html]best waterproof camera[/url]
fishing camera
[url=http://www.underwatermonitor.com/search/10408/fishing camera.html]fishing camera[/url]
underwater video
[url=http://www.underwatermonitor.com/search/10408/underwater video.html]underwater video[/url]
underwater diving equipment
[url=http://www.underwatermonitor.com/search/10408/
underwater diving equipment.html]underwater diving equipment[/url]
best underwater cameras
[url=http://www.underwatermonitor.com/search/
10408/best underwater cameras.html]best underwater cameras[/url]
pipe inspection
[url=http://www.underwatermonitor.com/search/10410/pipe inspection.html]pipe inspection[/url]
pipeline inspection
[url=http://www.underwatermonitor.com/search/10410/pipeline inspection.html]pipeline inspection[/url]
snake camera
[url=http://www.underwatermonitor.com/search/10410/snake camera.html]snake camera[/url]
inspection systems
[url=http://www.underwatermonitor.com/search/10410/inspection systems.html]inspection systems[/url]
mobile internet device
[url=http://www.underwatermonitor.com/search/10410/mobile internet device.html]mobile internet device[/url]
new android tablet
[url=http://www.underwatermonitor.com/search/10410/new android tablet.html]new android tablet[/url]
tablet pc 3g
[url=http://www.underwatermonitor.com/search/10410/tablet pc 3g.html]tablet pc 3g[/url]
hand held devices
[url=http://www.underwatermonitor.com/search/10410/hand held devices.html]hand held devices[/url]
Supra Shoes
Supra Shoe (гість) — Пт, 05/11/2012 - 08:56Unisex Supra Shoes in the Supra store are now available many newly designed outlets for customers’ choices. The Supra TK Society Shoes are featured with light weight rubber for the outsoles that make you on the shoes with unique and cool outlook. In qualified materials made Supra Skytop Shoes can offer healthier and more enjoyable walking life on wearing the shoes.As a gladiator-inspired sandal from Birkenstock Sandals with chic style and exquisite workmanship makes these Birkenstock Arizona Sandals perfect options for everyday, all-day wear. Just putting Birkenstock Papillio on is like being on vacation already - as a Roman goddess! For more durable and comfortable Birkenstock Sandals, please feel free to visit our Birkenstock Outlet shop online.
Додати новий коментар