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

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

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

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

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

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

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

всередині елемента head і ніде більше.

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

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

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