Внешняя таблица стилей начинается со строки: CSS: Внешняя таблица стилей

НОУ ИНТУИТ | Лекция | Форматирование контента и использование каскадных таблиц стилей в MS Frontpage

Аннотация: Лекция посвящена теме форматирования контента и использования каскадных таблиц стилей в MS Frontpage. Дается небольшое теоретическое введение, где рассказывается о форматировании текста и каскадных таблицах стилей. А также, рассматриваются практические задания по теме.

Ключевые слова: frontpage, каскадная таблица стилей, встроенная каскадная таблица стилей, внешняя каскадная таблица стилей, w3c, веб-узел, домашняя страница, news, релиз, маркированный список, стандартная панель инструментов, заголовочная строка, заголовочная ячейка, мультимедиа, логотип, автоэскиз , элемент каталога

Теоретическое введение

Форматирование текста

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

Каскадные таблицы стилей

Каскадные таблицы стилей (CSS) — это документы, определяющие форматы и стили для различных элементов страниц (заголовков, абзацев, таблиц, списков и т.д.) либо как встроенную каскадную таблицу стилей внутри веб-страницы, либо как внешнюю каскадную таблицу стилей и находящиеся в одном «центральном» месте. На внешние таблицы стилей могут ссылаться несколько документов, что позволяет создавать единообразный вид страниц и веб-узлов.

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

Чтобы создать встроенную каскадную таблицу стилей в программе FrontPage, выберите пункт Стиль в меню Формат и затем определите свои собственные стили. Ваши определения сохраняются в HTML-коде данной страницы.

Чтобы создать внешнюю каскадную таблицу стилей в программе FrontPage, выберите тип CSS среди вариантов, которые имеются во вкладке Таблицы стилей диалогового окна Шаблоны страниц, щелкните на кнопке ОК, чтобы создать CSS-файл, и затем определите свои стили в этом файле.

Чтобы присоединить таблицу стилей в программе FrontPage, выберите пункт Связи с таблицами стилей в меню Формат и перейдите к CSS-файлу на вашем компьютере или (если вы подсоединены к интернету) в сети. Первоначально каскадные таблицы стилей разработал консорциум W3C (World Wide Web Consortium).

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

Форматирование текста

intuit.ru/2010/edi»>Откройте веб-узел «Всё для сада», разрабатываемый в предыдущей работе.

Откройте файл index.htm (домашняя страница) в окне просмотра и редактирования страниц (рис. 9.1).

увеличить изображение
Рис. 9.1. Веб-узел компании «Всё для сада»

Выделите и удалите три блока комментариев, чтобы сделать страницу более удобной для чтения.

Размеры шрифтов выражаются в программе FrontPage двумя способами: в пунктах [пт] (как в других приложениях, таких как Word и Excel) и в единицах от 1 до 7.

В первом абзаце выделите имя компании. На панели форматирования в раскрывающемся списке Размер (рис. 9.2) увеличьте размер шрифта выделенного фрагмента с 3 (12 пт) до 4 (14 пт).

Рис. 9.2. Раскрывающийся список Размер

Выделите последнее предложение в первом абзаце (начинается с «Если вы заглянули…») и щелкните на кнопке Курсив, чтобы получить курсивное начертание текста (рис. 9.3).

увеличить изображение
Рис. 9.3. Текст, выделенный курсивом

Откройте файл services.htm (страница «Учебные курсы») в режиме просмотра страниц. Текст на этой странице представлен шрифтом, отличающимся от шрифта по умолчанию, используемого на домашней странице (рис. 9.4).

увеличить изображение
Рис. 9.4. Страница services.htm

Выделите первый абзац. Щелкните на стрелке справа от поля Шрифти выберите в раскрывающемся списке шрифт Times New Roman. Размер шрифта все еще отличается от размера шрифта на домашней странице. Продолжая работать с выделенным первым абзацем, нажмите клавиши Ctrl + Пробел, чтобы восстановить исходное форматирование страницы. Повторите этот шаг для каждого из трех абзацев с описанием курсов (рис. 9.5).

увеличить изображение
Рис. 9.5. Страница services.htm с измененным шрифтом и размером текста

Во вводном абзаце выделите слова «географических районах». На панели форматирования щелкните на стрелке кнопки Цвет текстаи измените цвет шрифта на синий. Повторите эту процедуру, чтобы заменить цвет слов «общему и сезонному уходу» на зеленый и «дополнительных мероприятий» на красный (рис. 9.6).

увеличить изображение
Рис. 9.6. Измененный цвет текста

intuit.ru/2010/edi»>Откройте файл serv01.htm (страница Весенняя радость) в окне просмотра и редактирования страниц. Отметим, что шрифт на этой странице отличается от используемого по умолчанию шрифта на домашней странице.

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

Выделите абзац, где приводятся сведения об учебных курсах.

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

Выберите вариант Внешние границы, чтобы применить его к данному абзацу. Продолжая работать с выделенным абзацем, выберите пункт Абзац в меню Формат. В диалоговом окне Абзац (рис. 9.7) выполните следующее:

• В раскрывающемся списке Выравнивание вы берите вариант По центру.
• В секции Отступ введите в полях Слева и Справа значение 15.
• В секции Интервал введите в полях Перед и После значение 0.

Рис. 9.7. Диалоговое окно «Абзац»

Щелкните на кнопке ОК, чтобы применить параметры форматирования абзаца (рис. 9.8).Затем щелкните в начале второго абзаца и нажмите клавиши Shift + Enter для вставки разрыва строки.

увеличить изображение
Рис. 9.8. Страница serv01.htm после форматирования

В меню Файл выберите пункт Сохранить все, чтобы сохранить все открытые файлы.

Добавление CSS. Что такое CSS, для чего нужны стили CSS Собственные стили css

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

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

Сегодня мы поговорим именно о последнем способе.

Внедрения стиля в тег HTML

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

Для примера зададим разные размеры шрифта для двух разных абзацев текста:

Задаем этому отрезку текста высоту букв в 25 пикселей. p> А этот текст будет с буквами, высотой 15 пикселей, причем еще и подкрасим его синим, чтобы продемонстрировать применение нескольких стилей одновременно. p>

Недостатки

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

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

Также возникнет трудность в оформлении больших объемов текста. Думаю, никого не радует перспектива прописывать для каждого абзаца размер шрифта, особенно если таких абзацев штук 40.

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

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

Для наглядности посмотрим на пример ниже:

Запись корректна. div> Так тоже правильно. div> Это не корректная запись. div> И это тоже не верно div>

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

Когда стоит использовать встроенный стиль

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

div> div>

Запись нужной ширины для этого блока будет простейшей операцией.

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

div>

Также программисты частенько обращаются к встроенным стилям в процессе верстки всплывающих окон.

Всплывающее окно, которое оформляется в данный момент div>

Итог

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

В этой главе речь пойдет о том, как внедрить 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=»color: #ff0000; font-size:14px» >

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

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

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

Тег

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

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

    <голова>
        
        <мета-кодировка="UTF-8"/>
        <стиль>
            п {
                цвет синий;
            }
        
     

<голова>
        
        <мета-кодировка="UTF-8"/>
        
        
        
        
 

р, h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: Georgia, Times New Roman, Times, с засечками;
 черный цвет;
}
п {
 цвет синий;
 граница: 1px сплошной красный;
} 

.

 

/* Я однострочный комментарий CSS */
/* Я комментарий, который появляется на
 несколько
 линии!
*/ 

 css"/>

 

<голова>
        
        <мета-кодировка="UTF-8"/>
        
        
        
        
         css"/>