Оформление html тегов атрибутом style (встроенные стили CSS). Добавление стилей на веб-страницу Как описать стиль страницы html

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

Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

Вот как это выглядит для элемента

Способы добавления CSS стилей

Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

• Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле.css, с последующим подключением этого файла в HTML-документ с помощью тега
• Внутренняя таблица стилей — определение правил таблицы стилей с использованием тега

  Пример: Внутренняя таблица стилей

  • Попробуй сам »

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

  : color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

  : font-size:20px; color:red; text-align:center .

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

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

  Параграф

  Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

  Заголовок

  Текст первый

  Текст второй

  Текст третий

  Задачи

  • Выравнивание текста по центру

    Используя встроенный стиль к параграфу выровняйте текст по центру.

  В нашем курсе мы рассмотрим уроки CSS - т.е. уроки технологии, одной из самой важной при верстке веб-страниц.

  В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).

  Рисунок 1

  Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web

  1. Определение цветов. Уроки CSS

  При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.

  В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors , расположенной в папке CD .

  Цвет		Цвет
  Black (черный)		Silver (серебряный)
  Maroon (темно-бордовый)		Red (красный)
  Green (зеленый)		Lime (известь)
  Olive (оливковый)		Yellow (желтый)
  Navy (темно-синий)		Blue (синий)
  Purple (фиолетовый)		Fuchia (фуксия)
  Teal (темно-зеленый)
  Gray (серый)		White (белый)

  Таблица безопасных цветов для разработки дизайна сайта

  Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.

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

  Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

  Таблицу безопасных цветов можно просмотреть в папке CD / colors .

  2. Определение CSS

  Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:

  • первый - средствами таблиц стилей CSS (более прогрессивный и правильный метод),
  • второй - средствами атрибутов у тегов HTML .

  Начнем сразу с более прогрессивного метода.

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

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

  Обратная ситуация: мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.

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

  Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.

  Синтаксис CSS -элемента

  селектор {свойство 1: значение; свойство 2: значение; … свойство N: значение}

  Вначале пишется имя селектора, например, h1, это означает, что все стилевые свойства будут применяться к тегу

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

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

  CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

  Например :

  h1 {font-family:Arial; font-size:14pt}

  или тот же самое можно записать так:

  font-family:Arial;

  font-size:14pt

  В этом примере:

  • h1 - селектор, в данном случае HTML-элемент,
  • font-family и font-size - стилевые свойства,
  • Arial - значение свойства font-family,
  • 14pt - значение свойства font-size.

  Способы включения таблиц стилей в HTML-документ

  1. Внешняя таблица стилей (связанный стиль).
  2. Внедренная таблица стилей (глобальный стиль).
  3. Внутренние стили.

  3. Внешняя таблица стилей CSS (связанный стиль)

  Определяет стиль всего сайта.

  Является текстовым файлом с расширением css.

  В данном примере таблица стилей написана в текстовом файле style.css.

  Практическое задание 1

  1. Откройте чистый документ в Notepad++ и сохраните его в папке public_html под именем style . css . Обратите внимание, чтобы в поле Тип файла было установлено All types (рисунок 2).

  

  Рисунок 2

  2. Так как CSS - это другая технология, то теги HTML в файле.css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле main . html с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):

  Рисунок 3

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

  • h1 - селектор, т.е. элемент html, к которому применяется стиль;
  • text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);
  • color:#0000FF; - стилевое свойство color (цвет текста) со значением синего цвета #0000FF (значение взято из таблицы цветов);
  • font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;
  • стилевые свойства со значениями разделены между собой точкой с запятой;
  • и так далее, все согласно синтаксису.

  Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом main . html и style . css . Для этого откройте файл main.html и между тегами < head > и head > вставьте конструкцию , как на рисунке 4.

  

  Рисунок 4

  3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.

  

  Рисунок 5

  В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник Sprav_CSS.doc .

  4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле style . css h 2 (рисунок 6).

  Рисунок 6

  5. Проверьте результат в браузере, он должен совпадать с рисунком 7.

  

  Рисунок 7

  6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле style . css сделаем следующую запись для селектора p (рисунок 8).

  Рисунок 8

  7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора body добавим запись (рисунок 9)

  Рисунок 9

  8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.

  

  Рисунок 10

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

  Исследовательские задания

  1. Используя справочник Sprav_CSS.doc, оформите стилями заголовок < h 3> в файле main.html. Свойства стилей на выбор.
  2. Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.
  3. Для списка «Площади домов» в качестве маркера примените изображение spisok_1.gif из папки html_css_2 . Остальные параметры по желанию.
  4. В качестве фона web-страницы примените через стили изображение fon9.jpg из папки html_css_2 .
  5. С использованием стилей сделайте шрифт абзацев полужирным.

  Примерный результат на рисунке 11.

  

  Рисунок 11

  4. Классы в стилевых спецификациях

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

  Например, у нас в тексте есть несколько заголовков h 1 и нам необходимо, чтобы они были разного цвета. Тогда разделить стили надо следующим образом

  h1.golub{color:blue}

  h1.krasn{color:red}

  h1.zelen{color:green}

  После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.

  Теперь при использовании тега < h 1> в документе необходимо установить атрибут class , чтобы указать, какой именно стиль нужно применить:

  < h 1 class =" golub "> Это голубой заголовок h 1>

  < h 1 class =" krasn "> Это красный заголовок h 1>

  < h 1 class =" zelen "> Это зеленый заголовок h 1>

  Практическое задание 2

  1. Откройте файл shablon . html . Сохраните его под новым именем ploshady . html в папке public_html .

  2. Напишите между тегами новый заголовок «Площади домов».

  3. В содержимое скопируйте текст из файла Площади домов.txt из папки html _ ccs _2 .

  4. Стили будем писать в том же файлеstyle . css , который у нас создан в предыдущем уроке. Поэтому в файле ploshady . html установите связку с этой таблицей стилей, вставив между тегами и (рисунок 12)

  

  Рисунок 12

  5. Отформатируйте заголовки тегом

  и присвойте каждому заголовку свой класс (рисунок 13).

  

  Рисунок 13

  Ваш файл ploshady . html сейчас должен выглядеть следующим образом (рисунок 14).

  

  Рисунок 14

  6. В таблице стилей style . css создайте следующую запись (рисунок 15)

  Рисунок 15

  7. Проверьте web-страницу в браузере. Результат на рисунке 16.

  

  Рисунок 16

  8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt. Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):

  

  Рисунок 17

  Практическое задание 3

  Под каждый заголовком в файле ploshady . html есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:

  

  Рисунок 18

  5. ID-стиль для специфического элемента

  Уроки CSS включают изучение так называемых id-стилей.

  Любому элементу можно присвоить идентификаторid , а затем поставить в соответствие этому элементу какой-либо стиль, используя id .

  Например:

  Запись в файле таблиц стилей будет следующая

  # test { color :#00 ffff }

  Теперь можно поставить этот стиль в соответствие любому элементу в документе html:

  ...

  ...

  В этом примере слово test - имя стиля. Имя может быть произвольным из латинских букв, но оно должно быть уникальным, т.е. ни один элемент в таблице стилей не должен больше иметь такое имя.

  Практическое задание 4

  Сделаем заготовку для будущего меню нашего сайта.

  1. Откройте файл shablon . html и сохраните его под новым именем menu . html в папке public_html.

  2. В содержимое страницы файла menu . html внесите текст из файла menu . txt из папкиhtml _ css _2 .

  3. Средствами html-тегов отформатируйте файл следующим образом:

  • для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег

    ;

  • для списка «Категории проектов» используйте нумерованный список
    ;
    1. для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список

       4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif ). Результат должен совпасть с рисунком 19.

       

       Рисунок 19

       5. Для этого меню сделаем отдельную таблицу стилей под именем style _ menu . css . Установите связку между файлом menu . html и таблицей стилей style _ menu . css , вставив запись между тегами и в файле menu . html .

       6. Создайте чистый документ и сохраните его под именем style _ menu .css в своей папке.

       7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue . Т.е. код будет выглядеть следующим образом (рисунок 20):

       

       Рисунок 20

       8. В файле style _ menu . css стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):

       Рисунок 21

       9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown . Т.е. код будет выглядеть следующим образом (рисунок 22):

       

       Рисунок 22

       10. В файле style _ menu . css стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):

       Рисунок 23

       11. И добавим еще цвет фона файлу menu.html (рисунок 24)

       Рисунок 24

       12. В результате получим следующую web-страницу (рисунок 25)

       

       Рисунок 25

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

       • style . css
         
       • style _ menu . css
       • ploshady . html
         
       • menu . html
         

       От автора: здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.

       Подключение css

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

       Нужно сказать, что вообще существуют также возможности включения стилей в html-файл. Например, их можно определить с помощью атрибута style или такого же тега. Это называют встроенными стилями. Такой подход сегодня не приветствуется и нарушает современные стандарты разработки.

       А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:

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

       Тег является одинарным, как вы уже поняли. Немного подробнее расскажу о его атрибутах:

       rel = «stylesheet» – вообще атрибут rel записывается для того, чтобы определить роль файла на странице. В нашем случае роль – это таблица стилей, что и указывается.

       type = «text/css» – так называемый MIME-тип, который обычно указывается всем подключаемым файлам, чтобы браузер правильно их интерпретировал. В современных веб-обозревателях можно не писать этот атрибут.

       href = «style.css» – стандартный атрибут, указывающий адрес нашего внешнего файла. В данном случае он записан исходя из того, что файл имеет название style, расширение css и находится в той же папке, что и html-документ.

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

       Где взять готовые css стили для сайта?

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

       

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

       Селектор – это особенность языка css, присущая только ему. Зачем они нужны? Ну вот представьте такой код:

       Текст в заголовке

       Текст в абзаце

       И вот как нам в css, например, оформить абзац и заголовок? Для этого и созданы селекторы, чтобы обращаться только к тем элементам, к которым нужно. Например:

       p{ font-size: 12px; } .title{ font-size: 36px; }

       font - size : 12px ; Title { font - size : 36px ;

       Мы задали для всех абзацев размер шрифта, равный 12 пикселям, а элементы с классом title (в нашем случае это h1) получили гораздо больший размер – 36 пикселей. Заметьте, в случае с абзацами стили применяться к ним всем, сколько бы их ни было на странице.

       Второй же селектор обратился только к одному элементу – с классом title. Конечно, можно создать другие элементы с точно таким классом, это не запрещено, и они получат такое же правило, но если мы просто напишем в html тег h1 (без класса title), то для него никаких правил добавлено не будет.

       Вот так вот удобно позволяет css выбирать нужные элементы и оставлять в покое те, что не нужны. Какое это имеет отношение к готовым стилям, которые вы можете найти в интернете? Там все привязано к определенным классам и идентификаторам, поэтому вы не сможете вот так просто подключить эти таблицы к любым файлам, они не заработают, если в html у нужных элементов не проставлены соответствующие классы.

       Например, в таблице стилей видим такой код:

       Nav{ width: 300px; background: aqua; ... } .nav a{ display: block; color: #ccc; ... }

       Nav { width : 300px ;

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

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

       Как самому сделать css стили для сайта?

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

       

       Самое главное условие быстрого освоения – постоянная практика, вкупе с новыми знаниями, которые вы для себя усвоите. Подобную практику вам может дать наш .

       Кроме этого, азы css вы можете узнать и усвоить в нашем премиум-разделе. Там есть один из курсов, который полностью посвящен базовым свойствам этого языка. .

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

       На этом я с вами прощаюсь. Читайте наш блог webformyself, чтобы улучшать свои знания в области сайтостроения.

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

       Осуществить данную задачу можно тремя способами:

       • Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
       • Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
       • Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.

       Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.

       Атрибут style.

       Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.

       Пишется так:

       style="" >

       Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента

       Ну например:

       style="color: #ff0000; font-size:12px" > это параграф с индивидуальным стилем

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

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

       
       
       
       
       
       style="background-color: #c5ffa0" >
       

       style="color: #0000ff; font-size:18px" >Всё о слонах

       
       
       
       

       Купить слона

       
       

       style="color: #ff0000; font-size:14px" >

       
       

       style="color: #0000ff; font-size:16px" >Взять слона на прокат

       
       

       style="color: #ff0000; font-size:14px" >

       
       
       
       

       Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.

       Тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

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

       
       
       
       
       
       
       
       

       Всё о слонах

       
       

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

       
       

       Купить слона

       
       

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

       
       

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

       
       

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

       
       
       
       

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

       ,

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

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

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

       Тег идет непосредственное объявление стилей тех или иных 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 для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
       • Используйте тег

         Заголовок

         В данном примере задан стиль элемента

         , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со

         Заголовок 1

         Заголовок 2

         В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка - зелёный цвет через элемент

         Заголовок 1

         Заголовок 2

         В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.

         Понравилась статья? Поделись с друзьями:

         Facebook

         Twitter

         Мой мир

         Вконтакте

         Google+
         23.10.2020

         Компьютер 
         Самое интересное:

         

         Обозначь каждый многоугольник измерь длины сторон каждого

         

         Подключаем YouTube к телевизору

         

         Названия больших чисел Решение составной задачи