Урок 1: Что такое css?


с. 1
Введение

Каскадные таблицы стилей/css это язык стилей, определяющий отображение html-документовCascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших web-сайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов. CSS совершенно необходим каждому, работающему с web-дизайном.

Этот учебник поможет вам начать работать с CSS всего через несколько часов. Он разъясняет всё очень доходчиво и научит вас сложной этой технологии.

Изучение CSS увлекает. Читая этот учебник, выделяйте достаточное количество времени для экспериментов с изученным в каждом уроке материалом.

Использование CSS требует знания основ HTML. Если вы не знаете HTML, то начните с нашего Учебника HTML, прежде чем перейти к CSS.

Какое программное обеспечение необходимо иметь?

Не используйте при работе с этим учебником такие программы, как FrontPage, DreamWeaver или Word. Эти продвинутые программы не помогут вам в изучении CSS. Наоборот, они сильно ограничат ваше продвижение в этом направлении.

Вам понадобится бесплатный и простой текстовый редактор.

Например, Microsoft Windows поставляется с программой Notepad. Она обычно находится в Accessories меню Пуск, в Programs. Вы можете также использовать простой текстовый редактор, например Pico для Linux или Simple Text для Macintosh.

Простой текстовый редактор идеально подходит для изучения HTML и CSS, поскольку он не изменяет вводимый вами код. Так вы быстро продвинетесь, а ошибки будут только вашими, а не программными.

С этим учебником можно использовать любой браузер. Мы советуем иметь новейшую версию браузера.

Браузер и простой текстовый редактор - вот всё, что вам необходимо.

Давайте начнём!

Урок 1: Что такое CSS?

Возможно, вы уже слышали о CSS, но не знаете, что это такое? В этом уроке вы узнаете, что такое CSS и что он может сделать для вас.

CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей.

Что можно делать с помощью CSS?

CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. Потерпите, и увидите!

HTML может (неправильно) использоваться для оформления web-сайтов. Но CSS предоставляет бóльшие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами (программами просмотра).

Прочитав лишь несколько уроков этого учебника, вы сможете создавать собственные таблицы стилей и использовать CSS для придания вашему web-сайту великолепного вида.

В чём разница между CSS и HTML?

HTML используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

Согласен, это звучит как-то заумно. Но, пожалуйста, читайте дальше. Вскоре всё начнёт проясняться.

Давным-давно, когда Мадонна была девой, а парень по имени Tim Berners Lee изобрёл World Wide Web, язык HTML использовался только для вывода структурированного текста. Автор мог только размечать текст: "это - заголовок" или "это - параграф", используя HTML-тэги, такие как

 и 


.

По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как , которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру.

Это также привело к тому, что оригинальные тэги структурирования, такие как

, стали всё больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как , поддерживались только одним браузером. "Вам необходим браузер X для просмотра этой страницы" - такой отказ стал обычным явлением на web-сайтах.

CSS был создан для исправления этой ситуации путём предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.

Какие преимущества даст мне CSS?

Появление CSS стало революцией в мире web-дизайна. Конкретные преимущества CSS:



  • управление отображением множества документов с помощью одной таблицы стилей;

  • более точный контроль над внешним видом страниц;

  • различные представления для разных носителей информации (экран, печать, и т. д.);

  • сложная и проработанная техника дизайна.

В следующем уроке мы поближе познакомимся с тем, как реально работает CSS и как вам начать работу.

Урок 2: Как работает CSS?


Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.


Базовый синтаксис CSS


Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:


С помощью CSS того же самого результата можно добиться так:


body {background-color: #FF0000;}

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:



модель css

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.


Применение CSS к HTML-документу


Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем - то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)


Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:



Example




This is a red page





с. 1

скачать файл

Смотрите также: