Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
В этом сезоне среди программистов популярны красные рубашки под цвет глаз.

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

— Вчера долго пытался объяснить бабуле, что работаю программистом...
— ???
— Короче, сошлись на том, что чиню телевизоры и развожу мышей...

  Моя группа в контакте:



Создание внедренной таблицы стилей

Назначение стилей нескольким элементам одной страницы – создание внедренной таблицы стилей

Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом «Arial» зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом «Helvetica» размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в «голове» страницы (в любом месте между тегами <head >и </head>) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом <style type="text/css"> и заканчивающийся тегом </style>. Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:

<html>
<head>
<style type="text/css">
body {
font-family: 'Times New Roman', serif;
font-size: 12pt;
color: darkgreen;
}
h1 {
font-family: Arial, sans-serif;
font-size: 16pt;
color: green;
font-weight: bold;
}
h2 {
font-family: Arial, sans-serif;
font-size: 14pt;
color: greenyellow;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>Заголовок №1</h1>
<h2>Заголовок №2</h2>
<p>Обратите внимание – когда мы задавали стиль шрифта, после названия «Times New Roman» мы указали начертание «serif», что обозначает любой шрифт. Если на компьютере пользователя не установлен шрифт «Times New Roman», браузер подставит вместо него любой из имеющихся шрифтов, и отображение страницы будет максимально приближено к тому, что вы задумали.</p>
</body>
</html>
посмотреть

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

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

1 2 3 4 5

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь