Как хорошо, что я занимаюсь саморазвитием.

Я выучу CSS за месяц, а то и быстрее

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

1. В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css ) в той же папке, где вы создавали HTML документ.
2. Перенесите из предыдущего примера код CSS (содержимое тега (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

   Взгляните на пример, ниже к нему будут комментарии.

   
   
   
   
   
   
   
   

   Всё о слонах

   
   

   На этом сайте Вы найдёте любую информацию о слонах.

   
   

   Купить слона

   
   

   У нас Вы можете по выгодным ценам приобрести лучших слонов!!

   
   

   Взять слона на прокат

   
   

   Только у нас Вы можете взять любых слонов на прокат!!

   
   
   
   

   Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

   ,

   - будут синими а параграфы

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

   Теперь обещанные комментарии:

   Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

   Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

   CSS в отдельном внешнем файле.

   Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

   Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

   Body {background-color: #c5ffa0}
   a {color:#000060; font-weight: bold;}
   a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
   h1 {color: #0000ff; font-size:18px}
   h2 {color: #ff00ff; font-size:16px}
   p {color: #600000; font-size:14px}

   О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

   Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

   Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

   Тег имеет атрибуты:

   href - Путь к файлу.
   rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

   • shortcut icon - Определяет, что подключаемый файл является .
   • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
   • application/rss+xml - Файл в формате XML для описания ленты новостей.

   type - MIME тип данных подключаемого файла.

   Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

   Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

   Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

   Файл mystyle.css
   body {background-color: #c5ffa0}
   a {color:#000060; font-weight: bold;}
   a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
   h1 {color: #0000ff; font-size:18px}
   h2 {color: #ff00ff; font-size:16px}
   p {color: #600000; font-size:14px}
   Файл index.html
   
   
   
   
   
   
   
   

   Меню:

   
   Всё о слонах.
   Купить слона.
   Взять слона на прокат.
   

   ---

   
   

   Всё о слонах

   
   

   На этом сайте Вы найдёте любую информацию о слонах.

   
   
   
   Файл elephant.html
   
   
   
   
   
   
   
   

   Меню:

   
   Всё о слонах.
   Купить слона.
   Взять слона на прокат.
   

   ---

   
   

   Купить слона

   
   

   У нас Вы можете по выгодным ценам приобрести лучших слонов!!

   
   
   
   Файл elephant1.html
   
   
   
   
   
   
   
   

   Меню:

   
   Всё о слонах.
   Купить слона.
   Взять слона на прокат.
   

   ---

   
   

   Взять слона на прокат

   
   

   Только у нас Вы можете взять любых слонов на прокат!!

   
   
   
   

   В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

   В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

   • Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
   • Используйте тег . Нужно добавлять таблицу стилей в каждую веб-страницу. Если на сайте присутствует большое количество страниц, которым необходим одинаковый дизайн, то добавление, а также редактирование стилей становится неблагодарной работой – процесс займет очень много времени. Поэтому внутренние таблицы стилей считаются неудобными.

     Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу.css:

     Редактируя только один файл, вы можете изменять стиль для всего сайта сразу, вне зависимости от того, сколько на нем страниц. Это очень удобно, особенно для крупных ресурсов.

     Урок: создаем таблицу стилей

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

     В папке вы найдете HTML-документ с примером простой страницы и изображение (будет использоваться в уроке). Откройте HTML-документ в браузере. Вы увидите, что страница выглядит совершенно обычно. Чтобы придать ей более привлекательный вид, давайте напишем для нее стиль.

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

     Подключение CSS к HTML

     Для начала откройте на компьютере любой текстовый редактор (подойдет блокнот) и создайте пустой файл с именем style , сохранив его с расширением.css (должен получиться файл style.css). Сохраните файл в той папке, где находится загруженный HTML-документ.

     Откройте HTML-документ в текстовом редакторе, а также в браузере (чтобы было удобно просматривать изменения во внешнем виде страницы). Добавьте между тегами следующий код:

     Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы:

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

     Пишем стиль CSS

     Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл.css . Давайте добавим стиль для страницы:

     Html { padding-top: 5px; background-image: url(background.jpg); }

     Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега . Первое свойство - padding-top - добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ).

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

     Body { width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; }

     Сохраните изменения в файле. Сейчас вы:

     • задали область для содержимого тега , которая равна 75% от ширины окна браузера;
     • обеспечили отступ в 40 пикселей от всех сторон области содержимого;
     • расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;
     • задали цвет фона #EBEBEB для области содержимого;
     • скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.

     Снова обновите HTML-документ. При этом убедитесь, что кэш отключен либо перезагрузите страницу с обновлением всех связанных с ней файлов, используя специальную комбинацию клавиш (например, для Chrome это Ctrl+F5 ).

     Вы увидите, что по центру страницы добавилась прямоугольная область со скругленными углами. Это и есть результат ваших действий в файле CSS. Вы можете также попробовать уменьшить окно браузера и полюбоваться, как ширина прямоугольной области подстраивается под его размер. Это происходит благодаря тому, что ширина width задана в процентах.

     Изменяем шрифт с помощью CSS

     Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:

     H1 { color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } h2 { color: #E87E04; font-size: 1.7em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } p { color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; }

     Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для

     Сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле).

     Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:

     Emphasis { font-weight: bold; }

     Сохранитесь и обновите страницу в браузере. Вы увидите, что в последнем абзаце шрифт в некоторой части текста стал жирным. Чтобы понять, что произошло, перейдите в окно текстового редактора, где в самом начале вы открыли HTML-файл. Взгляните на последний абзац: часть предложения завернута в тег с классом emphasis . Таким образом вы написали стиль для отдельной строки текста в абзаце. Подробнее о классах мы расскажем в следующей главе.

     В конечном итоге у вас должна получиться вот такая страница:

     
     
     

     В качестве тренировки попробуйте изменить размер текста для

     (допустим, 1.1em), а также увеличить отступ между

     И левым краем области содержимого еще на 10 пикселей.

     Выводы

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

     Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.

     Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора.

     Нужно внимательно следить за знаками: две фигурные скобки (открывающая в начале блока объявлений и закрывающая в конце). Без этих скобок CSS будет работать некорректно.

     Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения.

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

     CSS расшифровывается как «Cascading Style Sheets», что в переводе означает «Каскадные таблицы стилей». Используется для оформления веб-страниц. Если в HTML-коде находится содержимое (то, что покажет браузер), то CSS определяет его оформление (то, как браузер это покажет). Прелесть CSS в том, что с помощью одного стиля можно оформить сразу все однотипные элементы страницы или целого сайта (сразу все ссылки, абзацы, списки). CSS-стилем вы один раз определяете, как должен выглядеть тот или иной элемент, например, картинки, и они меняют свое оформление сразу во всех документах. Чтобы изменить форматирование текста по всему сайту, вам достаточно изменить CSS-код всего один раз.

     Основные элементы CSS

     Как HTML состоит из тегов , атрибутов и значений, так и CSS состоит из своих собственных элементов. Суть конструкций CSS можно объяснить так: «Указать, какой элемент страницы оформить, и указать, как его оформлять». Вот составляющие конструкции CSS.

     • Селектор . Идентификатор, который указывает браузеру, к какому именно элементу страницы применить оформление. Благодаря ему обозреватель «понимает», что стиль предназначен, например, для оформления списков или таблиц.
     • Блок объявления стилей . Пишется после селектора и заключается в фигурные скобки. В нём задаётся стиль элемента (его оформление). Блок объявления стилей состоит из двух частей.
     • Свойство . Аналог атрибута в HTML. Определяет, какое именно свойство оформления будет изменено.
     • Значение . Задаётся свойству через двоеточие и определяет, как именно свойство будет изменено.

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

     Типы селекторов

     В зависимости от того, свойства каких элементов страницы они определяют, селекторы бывают разных типов.

     • Универсальный . Задаёт правила всем элементам страницы, для которых не установлены другие правила.
       Код * {font-size: 14px;} устанавливает размер шрифта 14 пикселей всем элементам документа, для которых не заданы другие правила с помощью других селекторов.
     • Тега. Этот тип селектора задаёт правила форматирования для содержимого определённого HTML-тега. Название селектора совпадает с именем дескриптора, только пишется без угловых скобок: p , h1 , ul .
       Например, код h2 {color: red;} устанавливает зелёный цвет текста для всех заголовков второго уровня, то есть содержимого тегов
       .
     • Атрибута . С помощью этой группы селекторов можно определить стиль оформления содержимого всех тегов, которым задан определённый атрибут. Селекторы можно задавать более точно, указывая не только имя атрибута, но и присвоенное ему значение, а также название содержащего его тега. Этим можно пользоваться, чтобы делать оформление более индивидуальным.
     • Класса . Вид селекторов на случай, когда нужно по-разному оформить содержимое тегов одного типа. Например, ссылки в нижней части сайта вы хотите сделать красными, тогда как все остальные должны оставаться синими, как и были. Чтобы применить правила класса к элементу сайта, нужно указать имя класса в атрибуте class соответствующего тега.

     Предположим, с помощью класса step отдельным элементам нужно задать отступ слева в 15 пикселей.

     CSS-код будет таким:

     Step {margin-left: 15px;}

     HTML-код, который привяжет элемент к правилу, будет следующим:

     Текст с отступом

     • Идентификатора . Используется совместно с атрибутом id HTML-тега и используется, когда свойства нужно задать единственному элементу. В отличие от селектора класса, перед именем которого ставится точка, пишется через «решётку»:

     #exclusive {color:orange;}

     • Контекстный . В HTML одни теги часто находятся внутри других, и контекстные селекторы помогают задать правила как раз на такой случай. С помощью них, например, можно отформатировать элементы внутри нумерованных списков или курсивный текст внутри абзацев:

     P i {fint-family: Century;}

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

     Комбинировать и группировать селекторы удобно во многих ситуациях. Например, чтобы задать правила класса step только для ссылок, нужно указать оба селектора через точку (сначала тег, потом класс):

     A.step {margin-left: 15px;}

     Как подключить CSS к HTML-странице?

     Заставить инструменты создания сайтов взаимодействовать друг с другом можно несколькими способами. По методу добавления стили делятся на следующие категории.

     Встроенные стили

     Задаются в документе прямо внутри HTML-тега с помощью атрибута style . Имеют наивысший приоритет. Это значит, что если для одного и того же элемента задано разное оформление, то предпочтение будет отдано правилу, которое прописано внутри тега. Селектор для встроенного стиля не нужен, так как связь стиля и тега очевидна - оформление тега в нём и задано.

     Следующий код задаёт размер и цвет шрифта тексту внутри тега

     Текст, оформленный с помощью внутреннего стиля.

     Глобальные стили

     Задаются тегом …

     Связанные стили

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

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

     Чтобы связать правила из CSS-файла с HTML-страницей, используется тег , добавленный в контейнер , и его атрибуты.

     Вот строка, связывающая правила из файла mystyle.css с HTML-страницей:

     rel="stylesheet" определяет, что тег ссылается на файл таблицы стилей, href="mysyle.css" задаёт его адрес. Правила адресации такие же, как у обычных ссылок – путь может быть абсолютным, относительным и т. д.

     Импортированные стили

     С помощью команды @import можно добавить стили из CSS-файла в текущую таблицу. Это может потребоваться, например, если вы хотите дополнить индивидуальное оформление документа, заданное с помощью глобальных стилей, универсальными правилами из отдельного файла. Со встроенными стилями метод использовать нельзя.

     Код ниже импортирует в документ таблицу файла any.css , которая находится в папке с редактируемым HTML-документом:

     @import url(any.css);

     Команда прописывается строкой ниже открывающего тега

     Когда браузер читает таблицу стилей, он форматирует документ в соответствии с ней.

     Три Способа Вставить CSS

     Существует три способа вставки таблицы стилей:

     • Внешняя таблица стилей
     • Внутренняя таблица стилей
     • Встроенный стиль

     Внешняя Таблица Стилей

     Внешняя таблица стилей идеально подходит, когда стили должны применяться ко многим страницам. С помощью внешней таблицы стилей, вы можете изменить вид целого Веб сайта путем редактирования одного файла. Каждая страница должна ссылаться на таблицу стилей, используя тег . Тег находится в head-секции:

     Не оставляйте пробелов между значением свойства и его единицами измерения! "margin-left:20 px" (вместо "margin-left:20px") будет работаеть в IE (браузере Internet Explorer), но не в браузерах Firefox или Opera.

     Внутренняя Таблица Стилей

     Внутренняя таблица стилей используется когда отдельный документ имеет уникальный стиль. Вы определяете внутренние стили в head-секции страницы HTML, используя тег