CSSЩо таке CSS CSS ( Cascading Style Sheets

Скачать презентацию CSSЩо таке CSS CSS ( Cascading Style Sheets Скачать презентацию CSSЩо таке CSS CSS ( Cascading Style Sheets

css_1.ppt

  • Количество слайдов: 10

>CSS CSS

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

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

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

Казка

В одній далекій країні, на краю болота, під пеньком, жив їжачок. І ось одного разу ... Що таке CSS

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

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

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

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

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