12781

ЧТО ТАКОЕ CSS

Практическая работа

Информатика, кибернетика и программирование

ВВЕДЕНИЕ Каскадные таблицы стилей/Cascading Style Sheets CSS это поразительное изобретение для улучшения вида ваших webсайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне webсайтов. CSS совершенно необходим каждому работающему с we...

Русский

2013-05-03

24.99 KB

8 чел.

ВВЕДЕНИЕ

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

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

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

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

Например, Microsoft Windows поставляется с программой Notepad. Вы можете также использовать простой текстовый редактор, например Pico для Linux или Simple Text для Macintosh.

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

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

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


ЧТО ТАКОЕ 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-тэги, такие как <h1> и <p>.

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

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

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


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

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

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


КАК РАБОТАЕТ CSS?

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

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

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

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

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

<body bgcolor="#FF0000">

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

body {background-color: #FF0000;}

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

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

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

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

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

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

<html>

 <head>

   <title>Example</title>

 </head>

 <body style="background-color: #FF0000;">

   <p>This is a red page</p>

 </body>

</html>

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов  - HTML-тэг <style>. Например:

<html>

 <head>

   <title>Example</title>

   <style type="text/css">

     body {background-color: #FF0000;}

   </style>

 </head>

 <body>

   <p>This is a red page</p>

 </body>

</html>

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. В лабораторных работах  мы будем использовать именно этот метод во всех примерах.

Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

<link rel="stylesheet" type="text/css" href="style/style.css" />

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href.

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

<html>

 <head>

   <title>My document</title>

   <link rel="stylesheet" type="text/css" href="style/style.css" />

 </head>

 <body>

 ...

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из_CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.

Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.

Давайте посмотрим, как это сделать.

 

ПОПЫТАЙТЕСЬ СДЕЛАТЬ ЭТО САМИ

Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла - HTML-файл и CSS-файл - такого содержания:

default.htm

<html>

 <head>

   <title>Мой документ</title>

   <link rel="stylesheet" type="text/css" href="style.css" />

 </head>

 <body>

   <h1>Моя первая таблица стилей</h1>

 </body>

</html>

style.css

body {

 background-color: #FF0000;

}

Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")

Откройте default.htm в вашем браузере и вы увидите, что страница имеет красный фон. Поздравляем! Вы создали вашу первую таблицу стилей!


 

А также другие работы, которые могут Вас заинтересовать

45378. ПОНЯТИЕ, ПРИЗНАКИ И СУЩНОСТЬ ПРАВА 43.74 KB
  Ценность права выражается в том что оно прежде всего выступает средством: − регулирования общественных отношений придаёт действиям людей согласованность упорядоченность уверенность; − защиты существующего общественного строя устанавливает меры юридической ответственности за общественно опасные и вредные деяния; − обновления общества фактором его прогресса содействует развитию тех социальных связей в которых заинтересовано общество; − решения глобальных проблем современности оборонных экологических и т. Эффективность правового...
45379. Социальное регулирование. Понятие, функции и виды социальных норм 64.66 KB
  Место и роль права в системе социального регулирования. Отличие права от других нормативных систем. При обсуждении роли права в системе социального нормативного регулирования значение имеют нормы третьей и четвертой группы в литературе именно их принято квалифицировать как социальные нормы. Именно в этих процессах доминирующие в обществе идеи права и правовые представления переводятся в форму юридических правил норм общего действия.
45380. Соотношение права и морали 51.65 KB
  соотношение права и морали. Единство права и морали заключается в следующем: право и мораль являются универсальными регуляторами поведения людей имеют способность проникать в различные области общественной жизни; право и мораль являются многомерными образованиями имеющими сложную структуру которая состоит из одинаковых и взаимодействующих между собой элементов; право и мораль действуют в едином поле социальных отношений; право и мораль служат общей цели совершенствованию и упорядочению общественной жизни...
45381. Принципы права понятие и классификация 47.7 KB
  принципы права понятие и классификация Принципы права это основные исходные начала положения идеи выражающие сущность права как специфического социального регулятора. Они воплощают закономерности права его природу и социальное назначение представляют собой наиболее общие правила поведения которые либо прямо сформулированы в законе либо выводятся из его смысла.Представляется что принципы права должны отражать и выражать основные ценности на которые ориентируется право. Принципы выступают в качестве своеобразной несущей конструкции...
45382. ТГП в системе общественных наук 45.79 KB
  Теория права и государства имея свой предмет функции и метод занимает специфическое место в системе общественных неюридических наук. Философия и теория права и государства. Что касается теории государства и права то она изучает государство и право мно гогранно обращаясь при этом к передовым достижениям философии и используя философские категории сущность содержание и форма часть и целое возможность и действительность система и структура и др. Теория государства и права вооружает философию материалом позволяющим делать обобщения и...
45383. Место и роль тгп в системе юридических наук. 47.03 KB
  Теория государства и права входит в систему юридических наук объединенных общим названием правоведение. По классификации юридических наук она относится к теоретикоисторическим наукам вместе с историей государства и права и историей политических и правовых учений или учений о праве и государстве. История государства и права изучает процесс исторического развития государственноправовых форм жизни конкретных стран в хронологическом порядке т. Теория государства и права исследует развитие государства и права в обобщеннотеоретическом виде...
45384. Предмет и методология тгп 48.66 KB
  Предмет и методология тгп Теория государства и права система научных знаний об объективных свойствах государства и права их внутренней структуре и логике развития; об основных и общих закономерностях возникновения развития и функционирования государственноправовых явлений. Как и любая другая наука теория государства и права имеет свой предмет и метод. Предмет теории государства и права объективные свойства государства и права основные и общие закономерности возникновения развития и функционирования государственных и правовых...
45385. Социально-исторические предпосылки происхождения государства 72 KB
  юридические факты и фактические составы понятие чиды Юридические факты это определённые жизненные обстоятельства условия ситуации с которыми нормы права связывают возникновение прекращение или изменение правоотношений. Эти факты становятся юридическими не в силу какихто особых внутренних свойств а в результате при знания их таковыми государством законом. Не право порождает подобные факты они возникают и существуют помимо не го но право придает им статус юридических в целях их регуляции и упорядочения общественной и государст...
45386. Основные теории происхождения государств 80 KB
  Теологическая теория Фома Аквинский базируется на идее божественного создания государства с целью реализации общего блага. Теологическая теория пронизана идеей вечности государства его незыблемости. Данная теория основывается на идее происхождения государства в результате соглашения договора как акта разумной воли людей. Договорившись о создании государства люди либо передают правителю часть своих прирожденных прав чтобы потом получить их из его рук один вариант трактовки происхождения государства либо условливаются о сохранении...