CSS Мова програмування. Що таке CSS CSS ( Cascading Style Sheets - каскадні таблиці стилів) - одна з базових технологій у сучасному Інтернеті. Нечасто. - презентация

1 CSS Мова програмування

2 Що таке CSS CSS ( Cascading Style Sheets - каскадні таблиці стилів) - одна з базових технологій у сучасному Інтернеті. Нечасто можна зустріти сайт, зверстаний без примінення CSS. CSS-код - це список інструкцій для браузера, - як і де відображати елементи веб-сторінки, написаний особливим чином. Під «елементами» зазвичай маються на увазі теги XHTML / HTML і їх вміст.

3 Що таке CSS У друкованій справі питання оформлення книги вирішується на ранніх етапах її виробництва. Від вибраних шрифтів, відступів і фарб залежить буквально все. І після вплинути на дизайн, на жаль, неможливо. У випадку з сайтами все не так. Сторінка майже не пов'язане з дизайном її зовнішнього вигляду. Змінивши всього один рядок в css-стилях, дизайнер сайту може радикально змінити оформлення багатьох тисяч сторінок сайту, зробивши всі заголовки, скажімо, зеленими, перемістивши блок новин в кут або змінивши фон сторінок.

4 Що таке CSS Інструкції CSS зручно зберігати у вигляді окремого текстового файлу з розширенням.css, або у вигляді окремого текстового фрагмента на початку XHTML/HTML-документа. Основна ідея CSS в тому, щоб відокремити дизайн документа від його вмісту. CSS відповідає за оформлення і зовнішній вигляд, а XHTML/HTML - за зміст і логічну структуру документа. Подивимося на фрагмент XHTML-документа: Казка В одній далекій країні, на краю болота, під пеньком, жив їжачок. І ось одного разу...

5 Що таке CSS Зі службової XHTML розмітки ми бачимо тільки елемент заголовка h1 та абзацу p, і ні слова про оформлення - шрифтах, кольорі тексту, тлі, відступи та інші елементи дизайну. Все це покладено на CSS: / * Оформляємо заголовки: * / h1 { color : red ; background-color : yellow ; font : Tahoma 2em ; } / * оформляємо абзаци тексту: * / p { color : grey ; line-height : 150 % ; }

6 Домовимося про термінологію Щоб в голові був порядок, давайте домовимося про терміни. CSS, як відомо, перекладається як «Каскадні Таблиці Стилів», тому, мабуть, правильно говорити і писати CSS - «вони», а не «він». Мені непросто дотримуватися цього простого правила, може, в силу звички, може, через індивідуального розуміння милозвучності. CSS придуманий Не в Україні, як і весь Інтернет, а тому всі терміни перекладні. Я намагаюся використовувати загальноприйняті переклади термінів і іноді приводити оригінали в дужках. HTML-елементи часто згадуються, хоча насправді маються на увазі елементи як HTML, так і XHTML, адже CSS застосовні і до тих, і до інших. Але для зручності читання я буду писати просто: «HTML-елементи» або ще коротше: «елементи» і іноді «теги». Документ, також згадується - не що інше, як ваш HTML-або XHTML- документ, або, простіше кажучи, це веб-сторінка, яку ви створюєте.

7 Включення CSS в HTML документ Для того, щоб застосувати таблицю стилів до HTML- документу, ми можемо обрати один з трьох способів, або комбінувати їх: застосувати зовнішні стилі (у вигляді окремого текстового.css - файлу) за допомогою елемента link; вбудувати стилі безпосередньо в HTML-документ (у вигляді блоку css-тексту) за допомогою елемента style; застосувати inline-стиль, тобто призначити стиль конкретному HTML-елементу безпосередньо в документі, за допомогою HTML-атрибуту style. Розберемо ці способи докладніше.

8 Зовнішні стилі (external style sheets) Застосовуються за допомогою елемента link, який повинен розташовуватися всередині елемента head і ніде більше. Зустрівши в HTML-документі цей тег, браузер завантажить з сайту CSS-файл (у нашому випадку це mystyle.css ) і застосує до документа стилі, що містяться в ньому. Файл не повинен містити нічого, крім CSS-інструкцій. Зовнішній файл зі стилями зручний тим, що одні й ті ж стилі можна застосовувати до безлічі документів на сайті - в кожному з них достатньо лише вписати один рядок з елементом link.

9 Таблиці стилів документа (document style sheets) Називаються так тому, що розташовуються безпосередньо в HTML-документі і застосовуються лише до нього. Іноді називаються embedded style sheet (вбудований стиль). CSS-стилі та коментарі розташовуються між відкриваючим і закриваючим тегами елемента style :... Сам тег style (на відміну від link ) може знаходитися в будь- якій частині документа, але зазвичай його розміщують всередині елемента head.

10 Стилі, підставляються в рядок (inline styles) Іноді потрібно призначити стиль окремого елементу на сторінці, не застосовуючи зовнішніх стилів і елемента style. Типовий випадок - елемент зустрічається один раз в документі або на сайті, але вимагає особливого оформлення. Скористаємося атрибутом style (саме атрибутом елементів, а не елементом!): Я абзац, виділений червоним кольором, інших таких на сайті немає Атрибут style є майже у всіх HTML-елементів. Крім тих, що розташовуються поза елементом body. Усередині атрибута style можна написати кілька CSS оголошень, розділених крапкою з комою, фігурні дужки не використовуються. Зауваження: уникайте використання вищеописаного способу. Inline-стилі змішують вміст документа і його дизайн, у той час як ідеологічно більш правильно відокремлювати вміст документа та інформацію про його оформленні.