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




Скачать 424.6 Kb.
НазваниеУрок 1: Что такое css?
Дата публикации18.04.2013
Размер424.6 Kb.
ТипУрок
uchebilka.ru > Экономика > Урок
Введение

Каскадные таблицы стилей/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: Что такое css? iconУрок 1: Что такое css?
Немного о том, почему появился css и почему лучше использовать css поверх html для дизайна страниц

Урок 1: Что такое css? iconИ в самом деле, а что это?
Урок Что такое автоматическое письмо

Урок 1: Что такое css? iconЛабораторная работа тема : Использование языка html и css
Цель работы : Создание архитектуры сайта с использованием библиотеки стилей css и языка html

Урок 1: Что такое css? iconЧто такое современный урок?
С таким понятием я не могу полностью согласиться. Та как это, по-моему, не самое главное

Урок 1: Что такое css? iconЧто такое действительность, а что такое реальность?
И спрашивается, ради чего пудрить мозги всему человечеству, когда и сами в эту чушь верят и страдают от того, во что втягивают и...

Урок 1: Что такое css? iconСпеціальныхъ изслѣдованій въ области синтаксиса русскаго языка Потебня...
Мысль и Языкъ“, съ которымъ мы имѣли дѣло до сихъ поръ, и заключаетъ въ себѣ сжатое изложеніе основныхъ и общихъ вопросовъ Языкознанія....

Урок 1: Что такое css? iconВоспитательный час на тему: «Добро против насилия»
Что такое добро? Что такое насилие? Что такое зло? На протяжении всей своей истории человечество пытается ответить на эти вечные...

Урок 1: Что такое css? iconЧто такое конфигурируемость системы 1С: Предприятие
Что такое окно редактирования объекта конфигурации и в чем его отличие от палитры свойств

Урок 1: Что такое css? iconПрограмма «Комплекс»
...

Урок 1: Что такое css? iconУрок XXII пол Урок XXIII пол часть2 Урок XXIV усиление элиминации...
Урок X критический анализ других целебных систем с непредубежденными, беспристрастными обзорами

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
uchebilka.ru
Главная страница


<