Как отменить жирность в html css

Жирность текста в CSS

В данном уроке мы изучим свойство font-weight , которое позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold , а чтобы отменить жирность — значение normal .

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

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

В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 — нежирными:

Title

This is a paragraph with text.

h2 < font-weight: normal; >p < font-weight: bold; >

Скопируйте следующий HTML код себе на страницу:

Установите таблице ширину в 500px , а высоту в 300px . Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.

Как убрать жирность текста?

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

Как убрать отступ (строчный) текста от поля формы?
Здравствуйте помогите устранить один нюанс, как убрать отступ текста от поля формы? на рисунку.

фотошоповская жирность Bold Condenset Italic
Можно ли как нибудь повторить визуально нестандартные шрифты из фотошопа в html, которым дана.

3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
font-weight: 0; — такого нет. Возможные значения:

1 2 3 4 5 6 7 8 9

font-weight:bold font-weight:bolder font-weight:lighter font-weight:normal /* по умолчанию */ font-weight:100 font-weight:200 /* . */ font-weight:800 font-weight:900

Регистрация: 22.12.2015
Сообщений: 2,097

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#wb_indexText3 { background-color: transparent; border: 0px #000000 solid; padding: 0; margin: 0; text-align: justify; font-size:40.17px; color:#58556d; position:absolute; left:776px; top:509px; font-weight:normal /* по умолчанию */ }

div id="wb_indexText3">Алматы | Казахстан/div> /div>

Все равно фраза»Алматы | Казахстан».
выглядит жирной.

3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4

Сообщение было отмечено mrtoxas как решение

Решение

Вот такой вот шрифт. Вы же увеличили текст до 40px. Ищите его или похожий с другим начертанием, например, Arial Light.

Как из тегов h1, h2, h3 сделать обычный текст?

Собственно сабж. Что надо в css прописать чтобы текст находивщийся в этих тегах слился с обычным текстом и никак себя не выдал? Убрать жирность и настроить размер получается. А вот чтобы не с новой строки начинался текст — никак не получается. Для наглядности пример:

текст текст текст текст текст текст

текст

текст текст

Будет выглядить так:

текст текст текст текст текст текст
текст
текст текст

Благодарю заранее.

На сайте с 03.09.2009

20 марта 2016, 07:23

h1 font-weight: normal; // не жирный
font-size: 10px // размер текста
font-family: arial // шрифт текста
>

Не зная какой у вас стиль обычного текста — гадать на кофейной гуще 🙂

Как убрать жирность у заголовков?

В примере 1 показано, как установить нормальное начертание для заголовков.

Пример 1. Использование font-weight

Сепульки

Важный элемент цивилизации ардритов с планеты Энтеропия.

Сепулькарии

Устройства для сепуления.

Сепуление

Занятие ардритов с планеты Энтеропия.

Результат данного примера показан на рис. 1.

Рис. 1. Изменение начертания заголовков

См. также

• font-weight
• Насыщенность
• Свойства шрифта в CSS

работа в html и css

Подскажите, пожалуйста, как в слове WHITE в каждой букве установить разную жирность. Рисунок ниже:

Отслеживать
3,349 2 2 золотых знака 9 9 серебряных знаков 28 28 бронзовых знаков
задан 23 фев в 16:15
7 2 2 бронзовых знака

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

23 фев в 16:31

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Можно сделать так:

 
W H I T E 

там все же больше идет эффект из за разницы цвета у букв, а не из за жирности шрифта

Отслеживать
6,506 6 6 золотых знаков 11 11 серебряных знаков 30 30 бронзовых знаков
ответ дан 23 фев в 16:34
1,648 4 4 золотых знака 8 8 серебряных знаков 18 18 бронзовых знаков
спасибо большое!
23 фев в 16:38

@Ира, если ответ вам полезен и решает ваш вопрос, то можете отметить его, нажав соответствующую кнопку слева от него ))

23 фев в 16:40

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

24 фев в 7:49

IMAGE

Отслеживать
ответ дан 24 фев в 9:20
Евгений Ли Евгений Ли
1,378 1 1 золотой знак 1 1 серебряный знак 9 9 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как отменить жирность в html css

В данном уроке мы с вами изучим свойство font-weight , которое позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold , а чтобы отменить жирность — значение normal .

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

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

В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 — нежирными:

Скопируйте следующий HTML код себе на страницу:

Установите таблице ширину в 500px , а высоту в 300px . Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.

Как убрать жирность текста?

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

Как убрать отступ (строчный) текста от поля формы?
Здравствуйте помогите устранить один нюанс, как убрать отступ текста от поля формы? на рисунку.

фотошоповская жирность Bold Condenset Italic
Можно ли как нибудь повторить визуально нестандартные шрифты из фотошопа в html, которым дана.

Как отменить жирность в html css

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

font-weight

Устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700.

Синтаксис

Значения

Насыщенность шрифта задаётся с помощью ключевых слов: bold — полужирное начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900. Значения bolder и lighter изменяют жирность относительно насыщенности родителя, соответственно, в большую и меньшую сторону.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства font-weight

Объектная модель

[window.]document.getElementById(» elementID «).style.fontWeight

Браузеры

Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold , normal и lighter . На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

Похожие публикации:

1. Где писать код html
2. Как html перевести в pdf
3. Как в html поменять цвет ссылки
4. Как в яндекс браузере сохранить закладки в html файл

Как убрать жирность текста в html

В данном уроке мы с вами изучим свойство font-weight , которое позволяет сделать текст жирным или наоборот — отменить жирность (к примеру, для заголовков, которые жирные по умолчанию). Чтобы сделать текст жирным, следует указать значение bold , а чтобы отменить жирность — значение normal .

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

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

В следующем примере мы сделаем все абзацы жирными, а все заголовки h2 — нежирными:

Скопируйте следующий HTML код себе на страницу:

Установите таблице ширину в 500px , а высоту в 300px . Сделайте ячейки td жирными и по центру, а ячейки th — нежирными.

Свойства текста

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

Свойства шрифта

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

Табл. 1. Атрибуты CSS для управления шрифтами

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат их применения.

Табл. 2. Результат использования различных параметров шрифтов

Свойства текста

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в табл. 3.

Табл. 3. Свойства CSS для управления видом текста

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

Как убрать жирность текста?

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

Как убрать отступ (строчный) текста от поля формы?
Здравствуйте помогите устранить один нюанс, как убрать отступ текста от поля формы? на рисунку.

фотошоповская жирность Bold Condenset Italic
Можно ли как нибудь повторить визуально нестандартные шрифты из фотошопа в html, которым дана.

как удалить жирный шрифт из заголовка?

Как сделать фразу » Это. — не быть смелым и все остальное без перемен? не удалось найти соответствующий тег в текстовом оформлении.

9 ответов

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

но убедитесь, что h1 отмечен

вы также можете установить стиль с атрибутом id или class.

вы хотите шрифт-вес, а не текстовое оформление (наряду с подходящей дополнительной разметкой, такой как или , поэтому вы можете применять разные стили к различным частям заголовка)

стиль соответственно vis css. Пример

Я не уверен, что это было только ради того, чтобы показать нам, но в качестве примечания, вы всегда должны установить верхний регистр текста с CSS:)

для «это» не должно быть смелым — добавить текст

вы можете просто сделать это в html-части:

и в css вы можете сделать его как блок h1, используя display:

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

можно использовать font-weight:100 или легче: это работает с т. е. Opera 16 и старше, но я не знаю, почему h1 теги в Firefox смелее, извините.

Похожие публикации:

1. Как вставить часть кода в html
2. Как выделить текст жирным шрифтом в html
3. Как выставить текст по центру в html
4. Как добавить вертикальную полоску в html

Как связать html и css файл: Как подключить CSS файл к HTML странице?

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

Для тех, кто любит смотреть в формате видео.

Для тех, кто любит читать, инструкция ниже.

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

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца

красным цветом.

      
Абзац
  

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

1 вариант. Внутри открывающего тега с помощью атрибута style.

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

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента

.

       
Абзац
  

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

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type=»text/css». Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

    p   
Абзац
  

3 вариант. Подключение внешнего файла стилей.

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента.

Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.

       
Абзац
  

Файл style.css содержит следующих код:

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Как подключить CSS к HTML

Существует три способа подключения CSS к HTML:

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

Рассмотрим каждый из них на примерах.

Внешние таблицы стилей

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

Внутренние таблицы стилей

Внутренние таблицы стилей “включаются” в HTML-документ, а используется для этого атрибута style. Например:

Текст

Встроенные таблицы стилей

Встроенные таблицы стилей “прописываются” в заголовке HTML-документа. Например:

«color:red

Встраивание CSS в HTML документ

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

Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила : значение правила). Никаких кавычек в значениях правил не ставим! Пример:

color:red; background:#cccccc;

Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

• Вложение(inline).
• Встраивание(embeding).
• Связывание(linking).

Основа документа — html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

Метод вложения (inline) CSS

Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила : значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

Обычный текст 
К это абзацу применен стиль методом встраивания.

Метод встраивания (embeding) CSS

Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

 p Здесь применен стиль методом вложения. Обычный текст

В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “< >”.

Элемент “style” ставят только в элементе “head”.

Метод связывания (linking) CSS

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

Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение .css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.

Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel ( rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ — это таблица стилей.

Начинаем работу с HTML + CSS

Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

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

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.

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

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

в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги
начинают “элементы списка” (List Item). Тэг

является “параграфом”. А тэг — “якорь” (Anchor), с помощью которого создаются гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках , то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.

• Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
• Элементы “h2” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

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

Нам нужно добавить элемент к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами и . Строки, которые надо добавить выделены красным (с 5-й по 9-ю).

     body  [и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое правило состоит из трех частей:

1. селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
2. свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
3. и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:

body < color: purple >body

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos .

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

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

В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

      [и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

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

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS , вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

    body < padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d > ul.navbar h2 [и т.д.]

      [etc.]

      [и т.д.]

    [etc.]

 
 
 
 
 
 
Внимание
 
В строке с тегом link предполагается, что style.css находится в той же директории (папке), что и данный файл.
 

Текст синего цвета, размер 14 пикселей

 
 
 
 
 
 
Заголовок первого уровня
 
Заголовок второго уровня, синий
 
Заголовок третьего уровня
 

      
 Внешний стиль 
 
На этой странице установлены стили для абзацев, текста и заголовка 1. 
Стили определены во внешней таблице стилей. 

      
 Вторая страница 
 
Эта страница использует тот же стиль, что и externalStyle.html .