CSS презентация

CSS

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

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

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

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

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

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

Зовнішні стилі (external style sheets) Застосовуються за допомогою елемента link , який повинен розташовуватися всередині елемента head і ніде більше. <Link REL = "stylesheet" type = "text / css" href = "mystyle.css" media = "all" /> Зустрівши в HTML-документі цей тег, браузер завантажить з сайту CSS-файл (у нашому випадку це mystyle.css ) і застосує до документа стилі, що містяться в ньому. Файл не повинен містити нічого, крім CSS-інструкцій. Зовнішній файл зі стилями зручний тим, що одні й ті ж стилі можна застосовувати до безлічі документів на сайті - в кожному з них достатньо лише вписати один рядок з елементом link.

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

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