Как сделать таблицу стилей в html

Добавление CSS

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

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <link> в заголовке страницы (пример 1).

Пример 1. Подключение таблицы связанных стилей

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

Достоинства данного способа

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом <style> (пример 2).

Пример 2. Использование таблицы глобальных стилей

В данном примере показано изменение стиля заголовка <h1> . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

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

Пример 3. Использование внутренних стилей

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

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

Пример 4. Сочетание разных методов подключения стилей

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

Урок 2. Внешние таблицы стилей CSS. Как подключить стили. Уроки CSS

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

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

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

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

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

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

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

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

Безопасная палитра состоит из 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-элемента

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

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

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

Например:

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

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.

HTML-документ должен иметь ссылку на внешнюю таблицу стилей при помощи элемента <link>, который располагается в элементе <head>:

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

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

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

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

2. Так как CSS – это другая технология, то теги HTML в файле .css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле main.html с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 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> вставьте конструкцию <link rel=»stylesheet» href=»style.css» type=»text/css» />, как на рисунке 4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<h1 class > Это голубой заголовок </h1>

<h1 class > Это красный заголовок </h1>

<h1 class > Это зеленый заголовок </h1>

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

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

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

3. В содержимое <body> скопируйте текст из файла Площади домов.txt из папки html_ccs_2.

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

5. Отформатируйте заголовки тегом <h1> и присвойте каждому заголовку свой класс (рисунок 13).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Для этого меню сделаем отдельную таблицу стилей под именем style_menu.css. Установите связку между файлом menu.html и таблицей стилей style_menu.css, вставив запись <link rel=»stylesheet» href type=»text/css» /> между тегами <head> и </head> в файле menu.html.

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

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

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

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

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

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

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

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

Тег <style> в html

В третьем уроке HTML мы рассмотрели все самые распространенные html теги. К каждому из них можно было также подставить параметр style и мы постоянно ссылались на это. Настало время поговорить о том, что именно можно прописать в этом параметре, но для начала расскажу о теге <style> . Вообще для чего он нужен и почему так важен.

Синтаксис тега <style>

Между <style> и </style> прописываются стили, а точнее свойства CSS (размер шрифта, цвет, фон, отступы, шрифт и т.п.). Это написание равносильно таблице стилей CSS . Кстати описывать стиль можно в любом месте на странице, т.е. необязательно это делать в заголовочных тегах head, но по хорошему тону, стили располагаются именно там.

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

В таком формате мы создаем глобальный стиль, который можно использовать в любом теге.

Чтобы сделать стиль только для какого тега нужно указать его перед точкой:

Это означает, что мы можем применять его только для тега <b>

Кстати, чтобы не прописывать всегда класс ( class=»» ) часто употребляемым тегам, мы можем задать стиль по умолчанию любому тегу. Например, чаще всего для популярного тега <p> задается стиль по умолчанию следующим образом:

Рассмотрим практичный пример с <style>

Например . Html код:

Преобразуется на странице в следующее:

Обратите внимание, что в class мы указали styletest — потому что именно так называется наш стиль. Поскольку в style мы не указали конкретно для какого тега он сделан, то мы может применять его не только для тегов <font> , но и для других. Например, для <b> , <u> и т.д. — для всех тегов, которые поддерживают параметр class.

Выше разобранный пример можно сделать по-другому (не используя class):

Результат будет таким же как и предыдущий пример.

В чем же тогда разница? Давайте проведем сравнение. Допустим, у Вас есть на сайте 50 страниц (это считается маленьким сайтом). На всех 50 страницах у Вас для какого-то текста в тегах прописано style vhtml»>color: blue; font-size:12px; font-family:Arial «. Теперь представим такую ситуацию, что синий цвет Вам больше не по душе и Вы захотели сменить его на черный. В этом случае Вам нужно будет редактировать 50 страниц. Но 50 страниц это ещё не так уж и много. Тем не менее это все равно лишняя работа, которую можно было не делать. Поэтому я советую пользоваться классами ( class vhtml»>какой-то класс «). В этом случае Вам бы пришлось поменять всего лишь в одном месте цвет и на всех страницах бы все поменялось.

Задание стилей для вложенных тегов
Если мы используем вложенные конструкции (иерархию тегов), то стиль нужно задавать напрямую. Например:

Например, .cen a говорит о том, что этот стиль будет использован только в блоке с классом cen. В нашем примере мы подразумеваем этот блок тегом <div>. Чаще всего такие конструкции встречаются именно для дивов.

Таблица стилей CSS

Чтобы упростить работу со стилями, создают специальную «таблицу стилей CSS«, которая представляет из себя просто сборник стилей. Подключается она с помощью тега link в теге head

В данном случае таблица стилей (назовем её style.css ) должна содержать следующее:

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

Надеюсь, что Вы поняли всю прелесть таблиц стилей. Стиль нужно написать только в таблице стилей .css , а там где нужно его применить писать class=»имя стиля» .

Плюсы при использовании таблицы стилей

• Файлы .css можно сжимать и кэшировать, за счет этого страница грузится быстрее
• Стиль прописывается в одном месте, а значит его легко изменить. Представьте, как сложно было бы менять стиль на каждой странице при любой небольшой правке
• Это позволяет уменьшить html код и является правильным тоном. На странице должен быть контент, а не описание стилей.

Использование стилей html через ID

Теперь рассмотрим как можно использовать стили через ID . Для начала, необходимо в таблице стилей (назовем её primerid.css ) написать следующее:

Обратите внимание, что сначала пишется название тега, далее # , далее название ID и потом аргументы стиля.

Для использования ID, код html страницы должен содержать примерно следующее:

Вместо параметра class нужно написать id, в остальном все также. Также можно использовать и вложенные конструкции. Как правило, id не используют для описание стилей.

Теперь расскажу о том, какие аргументы можно задавать в стилях. Их довольно много.

Аргументы и свойства в style

1. Свойство background: цвет — задает цвет фона. Цвет можно выбрать любым. Цвет может быть задан в виде шестизначного кода (например, #53A32B; ) или конкретное название цвета (например, red ). Выбрать подходящий цвет можно на странице: коды и названия html цветов.

Аналогом является: background-color: цвет .

Более подробно про фон читайте в отдельной статье: как сделать фон для сайта.

2. Свойство background-image: url(‘images/bg.png’); — фоном будет картинка. В скобках указывается адрес фона изображения.

3. Свойство background-repeat: repeat — использовать фоновую картинку многократно. Другие возможные параметры:

• repeat-x — повторять фоновое изображение только по горизонтали
• repeat-y — повторять фоновое изображение только по вертикали
• no-repeat — не повторять фоновое изображение

4. Свойство border: 1px solid red; — вся область объекта будет в красной рамке, ширина которой 1 пиксель. Возможны и другие параметры вместо solid:

• dotted — рамка будет покрыта не сплошной линией, а точками
• dashed — рамка будет покрыта тире, пробел, тире и т.д.
• double — двойная рамка
• groove — рифлёная 3D граница

Цвет и размер области рамки можно изменять. Цвет можно задавать в формате #XXXXXX или писать название цвета. Выбрать цвет можно на странице коды и названия html цветов

Рамку можно задавать избирательно, т.е. только с тех сторон, где это нужно:

• border-bottom: 1px solid red; — линия будет только снизу
• border-top: 1px solid red; — линия будет только сверху
• border-right: 1px solid red; — линия будет только справа
• border-left: 1px solid red; — линия будет слева

Можно совмещать эти параметры, т.е. сделать линию только слева и снизу. Более подробно про задание границ читайте в специальной статье: свойство css border

5. Свойство color: #fc0ab1; — задает цвет текста. Цвет можно выбрать любым. С этим аргументом Вы уже были знакомы.

6. Свойство font-family: value; — задает шрифт текста. Существует очень много различных шрифтов. Например, самые распространенные шрифты:

• Verdana (я пользуюсь этим шрифтом)
• Times New Roman
• Arial
• Courier New
• Comic Sans MS
• Georgia
• Impact

Более подробно про шрифты и их выбор читайте в статьях:

7. Свойство font-size: 15px; — задает размер текса, в данном случае 15px. Можете вместо px так же писать другие единицы размерности: em и om .

8. Свойство font-weight: value; — задает толщину текста (насыщенность). Возможные значения:

• bold — полужирное
• bolder — жирное
• lighter — светлое
• normal — обычный

Можно толщину задавать цифрами: 100, 200, 300, 400, 500, 600, 700, 800, 900. Более подробно читайте в статье: свойство CSS font-weight

9. Свойство height: 100%; — задает высоту. Можно задавать в %, а можно в пикселях (px). Например: height: 100px .

10. Свойство padding-top: 5px; — отступ сверху. Возможно задать значение auto . Аналогичный тег: margin-top с разницей, что padding — отступ внутри элемента, а margin — от других элементов.

11. Свойство padding-right: 4px; — отступ справа. Возможно задать значение auto . Аналогичный тег: margin-right.

12. Свойство padding-bottom: 5px; — отступ снизу. Возможно задать значение auto . Аналогичный тег: margin-bottom.

13. Свойство padding-left: 4px; — отступ слева. Возможно задать значение auto . Аналогичный тег: margin-left.

14. Свойство width: 100%; — задает ширину. Можно задавать в %, а можно в пикселях (px).

15. Свойство overflow: value; — область видимости содержания блочного элемента, которое не помещается в нем. Возможные значения параметра:

• visible — отображается все содержание элемента, даже за пределами установленной высоты и ширины
• hidden — отображается только область внутри элемента, остальное будет обрезано
• scroll — всегда добавляются полосы прокрутки
• auto — полосы прокрутки добавляются только при необходимости

Более подробно читайте в статье: свойство CSS overflow

16. Свойство text-align: value; — выравнивание текста. Возможные значения параметра:

• left — по левому краю
• right — по правому краю
• center — по центру
• justify — выравнивание по левому и правому краю
• auto — автоматически
• inherit — наследование значения предка

Более подобно читайте в статье свойство CSS text-align

17. Свойство float: value; — определяет сторону, по которой будет выравниваться какой-то элемент, а остальные элементы будут обтекать его с других сторон. Возможные значения параметра:

• left — по левому краю
• right — по правому краю
• none — отсутствует
• inherit — наследование значения предка

18. Свойство line-height: 22px; — устанавливает межстрочный интервал в пикселях. Более подробно про растояние между строками читайте в статье свойство CSS line-height

19. Свойство white-space: value; — задает отображение между пробелами. Возможные значения:

• normal — обычное значение
• nowrap — пробелы не учитываются, переносы строк в коде HTML игнорируются
• pre — текст показывается с учетом всех пробелов и переносов, в случае длинной строки будет добавлена полоса прокрутки
• pre-line — пробелы не учитываются, текст автоматически переносится на следующую строку
• pre-wrap — сохраняются все пробелы и переносы, автопереход на следующую строку
• inherit — наследование значения предка

Более подробно читайте в статье: свойство CSS white-space

20. Свойство display: value; — определяет способ показа элемента. Имеет довольно много параметров:

• block — элемент показывается как блочный
• inline — элемент отображается как встроенный
• inline-block — создает блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу
• inline-table — элемент является таблицей
• list-item — элемент выводится как блочный и добавляется маркер списка
• none — временно удаляет элемент из документа. С помощью скриптов можно сделать его появление
• run-in — устанавливает элемент как блочный или встроенный в зависимости от контекста
• table — элемент является блочной таблицей
• table-caption — задает заголовок таблицы подробно
• table-cell — элемент представляет собой ячейку таблицы
• table-column — назначает элемент колонкой таблицы
• table-column-group — элемент является группой одной или более колонок таблицы
• table-footer-group — используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы
• table-header-group — элемент предназначен для хранения одной или нескольких строк ячеек
• table-row — элемент отображается как строка таблицы
• table-row-group — создает структурный блок, состоящий из нескольких строк таблицы

Более подробно читайте в статье: свойство CSS display

21. Свойство text-decoration: value; — опция для редактирования внешнего вида текста. Имеет несколько параметров:

• blink — мигающий текст
• line-through — перечеркнутый текст
• overline — верхнее подчеркивание текста
• underline — нижние подчеркивание текста
• none — выводит обычный текст
• inherit — наследуется у предка

Более подробно читайте в статье: свойство CSS text-decoration

22. Свойство text-transform: capitalize; — преобразование текста в заглавные или прописные буквы.

• capitalize — первый символ каждого слова в предложении будет заглавным
• lowercase — перевод всего текста в нижний регистр
• uppercase — перевод всего текста в верхний регистр
• none — не менять ничего
• inherit — наследование предка

Более подробно читайте в статье: свойство CSS text-transform

23. Свойство letter-spacing: 2px; — задает расстояние между буквами. Более подробно читайте в статье: свойство CSS letter-spacing

Так же стоит обратить внимание на возможности стилей для тега <a> , но они будут рассмотрены отдельно здесь: HTML тег а.

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

Как сделать таблицу стилей в html

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

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

Например, следующая таблица стилей CSS (хранящаяся в файле «special.css») зеленый устанавливает цвет текста абзаца и окружает его сплошной красной рамкой:

Авторы могут связывать таблицы стилей с исходным документом HTML с помощью элемента LINK :

HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей: Гибкое размещение информации о стиле Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются, в начало документа или в атрибуты элементов в теле документа. Для упрощения управления стилем сайта в данной спецификации описывается использование заголовков HTTP для установки таблиц стилей, применяемых к документу. Независимость от языков таблиц стилей Данная спецификация не привязывает HTML к конкретному языку таблиц стилей. Это позволяет использовать широкий диапазон таких языков, например, простые языки для большинства пользователей и более сложные для более специализированных случаев. Во всех примерах, приведенных ниже, используется язык CSS (Каскадные таблицы стилей) [CSS1], но можно использовать и другие языки. Каскады Эта возможность обеспечивается некоторыми языками таблиц стилей, такими как CSS, для объединения информации о стиле из нескольких источников. Это может быть, например, корпоративные положения о стиле, стили, общие для группы документов, а также стили, специфичные для одного документа. С использованием раздельного хранения эти таблицы стилей могут использоваться повторно, что упрощает работу авторов и повышает эффективность сетевого кэширования. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Не все языки таблиц стилей поддерживают каскады. Зависимость от устройств HTML позволяет авторам разрабатывать документы независимо от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств, например, графических дисплеев для компьютеров под управлением Windows, Macintosh OS и X11, телевизионных устройств, специальным образом адаптированных телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля.

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

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

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

14.2 Как добавить стиль в HTML

Примечание. В примере таблицы стилей по умолчанию для HTML 4.0, включенном в [CSS2], выражена общепринятая информация о стиле для каждого элемента. Авторы могут воспользоваться этим ресурсом.

Документы в формате HTML могут содержать правила таблиц стилей непосредственно или могут импортировать таблицы стилей.

В HTML можно использовать все языки таблиц стилей. Простого языка таблиц стилей может быть достаточно для большинства пользователей, в то время как другие языки могут подходить для более специализированных задач. В примерах в данной спецификации используется язык «Каскадные таблицы стилей» ([CSS1]), сокращенно CSS.

Синтаксис данных стиля зависит от языка таблицы стилей.

14.2.1 Установка языка таблицы стилей по умолчанию

Авторы должны указывать язык таблицы стилей для информации о стиле, связанной с документом HTML.

Для установки языка таблицы стилей для документа по умолчанию следует использовать элемент META . Например, чтобы установить по умолчанию язык CSS, следует поместить в раздел HEAD следующее объявление:

зык таблиц стилей по умолчанию можно также установить с помощью заголовков HTTP. Показанное выше объявление с использованием тэга META эквивалентно заголовку HTTP:

1. Если в объявлении META задается «Content-Style-Type», язык таблиц стилей определяет последнее объявление в потоке символов.
2. В противном случае, если «Content-Style-Type» задается в заголовках HTTP, язык таблиц стилей определяет последний заголовок в потоке символов.
3. В противном случае по умолчанию используется язык «text/css».

Документы, включающие элементы, в которых устанавливается атрибут style , но не определяется язык таблиц стилей по умолчанию, являются некорректными. Средства разработки должна генерировать информацию о языке таблиц стилей по умолчанию (обычно с помощью объявлений META ), чтобы агенты пользователей не полагались на язык по умолчанию «text/css».

14.2.2 Встроенная информация о стиле

Определения атрибутов style = style [CN] Этот атрибут определяет информацию о стиле текущего элемента.

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

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

В CSS объявления свойств имеют форму «имя : значение» и разделяются точкой с запятой.

Атрибут style может использоваться для применения определенного стиля к отдельному элементу HTML. Если стиль повторно используется для нескольких элементов, авторы должны использовать элемент STYLE для перегруппировки этой информации. Для оптимальной гибкости авторам следует определять стили во внешних таблицах стилей.

14.2.3 Информация о стиле в заголовке: элемент STYLE

Начальный тэг: обязателен, Конечный тэг: обязателен

Определения атрибутов type = content-type [CI] Этот атрибут определяет язык таблиц стилей для содержимого элемента и имеет приоритет над языком таблиц стилей, ипользуемы. Язык таблиц стилей указывается как тип содержимого (например, «text/css»). Авторы должны указать значение для этого атрибута; для него нет значения по умолчанию. media = дескрипторы устройств [CI] Этот атрибут задает целевое устройство для информации о стиле. Это может быть один дескриптор устройства или список дескрипторов, разделенных запятыми. По умолчанию устанавливается значение «screen».

атрибуты, определяемые в другом месте

Элемент STYLE позволяет авторам помещать правила таблиц стилей в раздел head документа. В HTML допустимо любое число элементов STYLE в разделе HEAD .

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

Синтаксис данных стиля зависит от языка таблицы стилей.

• Всех экземпляров определенного элемента языка HTML (например, для всех элементов P , всех элементов H1 и т.д.)
• Всех экземпляров элемента HTML, принадлежащих определенному классу (т.е. для атрибута class которых установлено определенное значение).
• Отдельных экземпляров элемента языка HTML (т.е. для атрибута id которого установлено определенное значение).

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

Следующее объявление CSS STYLE приводит к появлению границы вокруг всех элементов H1 в документе и центрированию их на странице.

Чтобы указать, что эта информация о стиле должна применяться только к элементам H1 определенного класса, можно изменить определение следующим образом:

И, наконец, для ограничения области действия информации о стиле единственным экземпляром элемента H1 , установите атрибут id :

Хотя информация о стиле может устанавливаться почти для всех элементов HTML, два элемента, DIV и SPAN , особенно полезны тем, что они не накладывают никакой семантики представления (кроме block-level vs. inline). Вместе с таблицами стилей эти элементы позволяют пользователям неограниченно расширять язык HTML, особенно при использовании атрибутов class и id .

В следующем примере элемент SPAN используется для установки малых прописных букв для стиля шрифта первых нескольких слов абзаца.

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

14.2.4 Типы устройств

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

Объявления в следующем примере применяются к элементам H1 . При показе на проекторе во время встречи все экземпляры будут отображаться синим цветом. При печати они будут отцентрированы.

Этот пример добавляет звуковые эффекты для устройства речевого вывода:

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

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

Авторы могут отделять таблицы стилей от документов HTML. Это дает следующие преимущества:

• Авторы и менеджеры Web-сайтов могут совместно использовать таблицы стилей в ряде документов (и сайтов).
• Авторы могут изменять таблицы стилей без изменения документа.
• Агенты пользователей могут загружать таблицы стилей выборочно (в зависимости от описаний устройств).

14.3.1 Предпочитаемые и альтернативные таблицы стилей

HTML позволяет авторам связывать с документом любое число внешних таблиц стилей. Язык таблиц стилей определяет взаимодействие нескольких внешних таблиц стилей (например, правила «каскадов» CSS).

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

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

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

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

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

• Установите в атрибуте href местоположение файла таблицы стилей. Значением атрибута href должен быть URI.
• Установите для атрибута type значение, указывающее язык связанного ресурса (таблицы стилей). Это позволяет агентам пользователей не загружать таблицы стилей, использующие неподдерживаемые языки.
• Укажите, является ли таблицы стилей постоянно, предпочитаемой или альтернативной:
  • Чтобы таблицы была постоянной, установите для атрибута rel значение «stylesheet», и не устанавливайте атрибут title .
  • Чтобы таблица была предпочитаемой, установите для атрибута rel значение «stylesheet», и дайте таблице имя с помощью атрибута title .
  • Чтобы указать альтернативную таблицу, установите для атрибута rel значение «alternate stylesheet» а дайте таблице имя с помощью атрибута title .

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

  В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле mystyle.css:

  Установка атрибута title назначает ее предпочитаемой автором таблицей:

  Добавление ключевого слова «alternate» а атрибут rel сделает ее альтернативной таблицей стилей:

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

  Авторы также могут использовать для установки предпочитаемой таблицы стилей элемент META . Например, чтобы установить предпочитаемую таблицу стилей «compact» (см. предыдущий пример), авторы могут включить в элемент HEAD следующую строку:

  Предпочитаемую таблицу стилей можно также указать с помощью заголовков HTTP. Объявление META выше эквивалентно заголовку HTTP:

  Если предпочитаемая таблица стилей указывается двумя или более элементами META или заголовками HTTP, преимущество имеет последнее объявление. Считается, что заголовки HTTP обрабатываются раньше, чем объявления HEAD .

  Если предпочитаемая таблица стилей задается двумя или более элементами LINK , преимущество имеет первая.

  Предпочитаемые таблицы стилей, задаваемые с помощью META или заголовков HTTP имеют преимущество над таблицами, задаваемыми элементом LINK .

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

  языки таблиц стилей, такие как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов LINK и/или STYLE . Каскад информации таблиц стилей производится в порядке указания элементов в разделе HEAD .

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

  В следующем примере мы определяем две альтернативные таблицы стилей с именем «compact». Если пользователь выбирает стиль «compact», агент пользователя должен применять обе внешние таблицы, а также постоянную таблицу «common.css». Если пользователь выбирает стиль «big print», применяться будут только альтернативная таблица «bigprint.css» и постоянная таблица «common.css».

  Вот пример каскада, в котором задействованы оба элемента — LINK и STYLE .

  14.4.1 Каскады, зависящие от устройств

  Каскад может включать таблицы стилей, применяемые к различным устройствам. Элементы LINK и STYLE могут использоваться с атрибутом media . Агент пользователя несет ответственность за отфильтровывание таблиц стилей, не применяющихся к текущему устройству.

  В следующем примере мы определяем каскад, в котором таблица стилей «corporate» представляется в нескольких версиях: одна для печати, другая для экранного представления, третья для речевых браузеров (полезная, например, при чтении электронной почты в машине). Таблица «techreport» применяется ко всем устройствам. Цветная rule, определяемая элементом STYLE , используется для печати и для экрана, но не для звукового представления.

  14.4.2 Наследование и каскады

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

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

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

  14.5 Как скрыть информацию о стиле от агентов пользователей

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

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

  14.6 Привязка таблиц стилей с помощью заголовков HTTP

  Менеджеры Web-серверов могут сконфигурировать сервер таким образом, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link, описанный в [RFC2068], раздел 19.6.1.2, действует так же, как элемент LINK , с теми же атрибутами и значениями. Несколько заголовков Link соответствуют нескольким элементам LINK в том же порядке. Например,

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

  В следующем примере стиль «compact» применяется по умолчанию, поскольку в нем отсутствует ключевое слово «alternate» для атрибута rel .

  Это работает и при отправке документов HTML по электронной почте. Некоторые агенты электронной почты могут изменять порядок заголовков [RFC822]. Чтобы защитить стиль от изменения порядка каскадов для таблиц, задаваемых заголовками Link, авторы могут использовать объединение заголовков для объединения нескольких экземпляров одного и того же поля заголовка. Кавычки необходимы только в случае, если значения атрибутов включают пробелы. Используйте SGML entities для ссылок на символы, недопустимые в заголовках HTTP или электронной почты или символов, которые могут быть изменены при передаче через шлюзы.

  Элементы LINK и META , implied заголовками HTTP, определяются как встреченные раньше явного элемента LINK and META а разделе HEAD документа.

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

  1. Как сделать напольную вазу
  2. Как купить циферблаты для huawei watch gt2
  3. Как открыть txt файл на андроиде
  4. Как отправить место на карте по ватсапу