Это введение не предназначено для того, чтобы научить вас всему каскадным таблицам стилей, а скорее представляет собой обзор того, что можно сделать с помощью CSS. Прочитайте эту статью, а затем решите, подходит ли CSS для вашего сайта. По крайней мере, вы будете знать, что можно сделать с помощью CSS, поэтому, когда придет время получить больше контроля над макетом и типографикой вашего сайта, вы будете знать, куда обратиться.
Что такое каскадные таблицы стилей?
CSS — это форма разметки HTML, которая предоставляет веб-дизайнерам больший контроль над типографикой и расстоянием между элементами на странице.
Почему я должен беспокоиться об использовании CSS?
1. Большой контроль над макетом и типографикой. CSS предоставляет вам как дизайнеру точный контроль над шрифтами, используемыми на вашем сайте, включая размер, интервал между буквами и оформление текста.
Элементы на странице можно точно позиционировать с помощью CSS. На самом деле, по крайней мере, один крупный редактор HTML, Dreamweaver 2, использует CSS для управления макетом страницы, хотя он предоставляет возможность конвертировать в таблицы.
2. Изменения во всем сайте становятся легкими. Вместо того, чтобы иметь таблицу стилей как часть HTML-кода страницы, можно указать URL-адрес таблицы стилей, которая будет использоваться при форматировании конкретной страницы. Это позволяет очень легко изменить весь сайт, просто отредактировав один файл.
Как насчет совместимости браузера?
Поддержка CSS предоставляется в Internet Explorer 4+ и Netscape Navigator 4+. Тем не менее, некоторые досадные несоответствия браузеров продолжают усложнять жизнь тем, кто решает использовать CSS на своем сайте. С помощью небольшого количества JavaScript можно обслуживать различные таблицы стилей в зависимости от браузера, который используется для просмотра вашего сайта. В качестве альтернативы можно использовать обходные пути, чтобы таблица стилей работала в обоих браузерах корректно.
Как выглядит CSS?
Базовый шаблон для кода CSS выглядит следующим образом:
Tag:
{Property: value; Property2: value2}{Property: value; Property2: value2}
Tag — элемент, который будет затронут
Свойство — какая часть селектора будет затронута
Значение — как это повлияет
Обратите внимание, что CSS использует фигурные скобки вместо <и>.
Небольшой фрагмент:
H1
{FONT-SIZE: 9pt; FONT-WEIGHT: bold}{FONT-SIZE: 9pt; FONT-WEIGHT: bold}
В приведенном выше примере весь текст в тегах H1 будет выделен жирным шрифтом и размером 9.
Три способа использования CSS
Существует три способа использования каскадных таблиц стилей: встроенные, встроенные и внешние / связанные таблицы стилей. Я кратко объясню каждый из них ниже.
В соответствии
Если вы просто хотите применить форматирование к небольшому фрагменту текста, вы можете использовать встроенные стили, которые выглядят примерно так:
<h3 style = «font-weight: bold»> это будет жирным шрифтом Embedded
Встроенные таблицы стилей помещаются между тегами <head> </ head> на каждой странице, на которой вы хотите использовать таблицы стилей. Вот как они выглядят:
<HEAD>
<STYLE TYPE = «text / css»>
<! —
Tag: {Свойство: значение; Property2: значение2}
->
</ STYLE>
</ HEAD>
внешний
Помните, как я сказал, что вы можете использовать одну таблицу стилей для всего сайта, а затем изменить все свои страницы, отредактировав один файл? Это делается с помощью внешних таблиц стилей, которые выглядят примерно так:
<HEAD>
<LINK REL = «STYLESHEET» HREF = «/ PATH / SHEET.CSS TYPE =» TEXT / CSS «>
</ HEAD>
В этом случае файл SHEET.CSS будет содержать весь код таблицы стилей, который будет применен к любой странице, которая вызывает его с помощью приведенного выше кода.
Убрать их подчеркивания — полная таблица стилей
Вы хотите удалить подчеркивания из ссылок на вашем сайте? Ниже приведена короткая и приятная таблица стилей, которая сделает это, просто скопируйте и вставьте ее между тегами <head> </ head> на вашем сайте:
<STYLE TYPE = «text / css»>
<! —
{текстовое оформление: нет}
->
</ STYLE>
Куда пойти отсюда
Если вы заинтригованы кратким обзором выше и хотите узнать больше о каскадных таблицах стилей, ознакомьтесь с приведенными ниже учебными пособиями:
HTML Goodies — Краткое руководство по классам и идентификаторам, которые используются в CSS.
W3.org — Больше информации, чем вы можете потрясти палкой.
HTML Help — Несколько учебных пособий, охватывающих различные аспекты каскадных таблиц стилей.
Написание таблиц стилей — краткое руководство.
CSS это просто! — Кевин Янк из собственного сайта PointPoint объясняет эту мрачную мелочь множеством примеров.
Удачи!