Основы HTML
Большинство браузеров имеют возможность изучения html-источника страниц, которые вы просматриваете. При просмотре источника вы увидите ряд тегов HTML (языка разметки гипертекста), окруженных угловыми скобками(<>), перемежаемыми с текстом.
Приведенные ниже действия используют HTML-теги для создания простой веб-страницы. В этих шагах вы введете обычный текст в файл в Блокнот, внесите несколько изменений, сохраните файл и перезагрузите страницу в браузере, чтобы увидеть изменения.
Создание HTML-файла
- Откройте Блокнот или любой обычный текстовый редактор.
- В меню «Файл» выберите «Создать«.
- Введите следующие строки:
Top HTML Tags HTML is swell. Life is good. Here's the big picture
- One programmer
- Ten SDKs
- Great Internet Apps
Make me an unordered list.
Это должно приступить к работе. Если на веб-странице отображается отличная функция, вы можете узнать, как она была создана, проверив источник HTML. Редакторы HTML, такие как Веб-страница Майкрософт, можно использовать для создания простых и расширенных страниц.
Вот весь HTML-источник для файла, который вы создали:
Полное описание тегов, атрибутов и расширений см. в спецификации языка разметки гипертекста (HTML):
Использование CSS
Чтобы придать дизайну веб-сайта завершенный вид, прежде всего, нужно выработать единообразный визуальный стиль. Другими словами, понадобится стандартизировать каждый элемент дизайна. Если желаете настроить шрифт или границы кнопки, то эти изменения должны затронуть каждую кнопку веб-сайта. Сохранение единообразия не всегда просто. Чтобы упростить эту задачу, можно воспользоваться каскадными таблицами стилей (Cascading Style Sheets — CSS) или темами ASP.NET.
Каскадные таблицы стилей обеспечивают межплатформенное решение для форматирования веб-страниц, которое работает в HTML или XHTML и поддерживается практически всеми современными браузерами. Собственно говоря, первые версии Visual Studio автоматически генерировали файл Styles.css, который можно было использовать в веб-сайтах. (Во избежание путаницы, в последующих версиях Visual Studio эта практика была отменена.)
Создание таблицы стилей
Таблицу стилей CSS можно использовать для определения набора предварительных настроек форматирования. Впоследствии эту таблицу стилей можно будет подключить к соответствующему элементу управления с помощью свойства CssClass. Чтобы испытать ее в действии и добавить (почти) пустую таблицу стилей в свой веб-проект, в Visual Studio выберите пункт меню Websites —> Add New Item. Затем выберите элемент Style Sheet (Таблица стилей), укажите нужное имя файла и щелкните на кнопке OK:
Таблицы стилей состоят из правил. Каждое правило определяет, каким образом должен быть сформатирован отдельный элемент веб-страницы. Например, если требуется определить правило для форматирования заголовков, начинать нужно с определения описательного имени, как показано ниже:
.heading1
Имя каждого правила состоит из двух частей. Часть, расположенная слева от точки, указывает HTML-элемент, к которому будет применено данное правило. В этом примере часть перед точкой отсутствует — т.е. правило может быть применено к любому дескриптору. Часть, расположенная справа от точки, определяет уникальное имя (называемое именем класса CSS), выбираемое для идентификации данного правила. Имена классов CSS чувствительны к регистру.
После того как правило определено, можно добавить соответствующую информацию о форматировании. В следующем примере для стиля heading1 устанавливается крупный полужирный шрифт текста и зеленый цвет фона. В качестве шрифта выбирается Verdana (если таковой доступен), Arial (если шрифт Verdana отсутствует) или используемая по умолчанию гарнитура Sans-Serif (на случай, если шрифты Verdana и Arial не установлены):
.heading1
Можно также создавать правила, которые будут применяться к HTML-дескрипторам автоматически. Для этого в качестве имени правила должно указываться имя дескриптора. Ниже показано правило, которое затрагивает все дескрипторы на странице, использующей таблицу стилей:
Несмотря на кажущуюся полезность автоматического применения таблицы стилей, в ASP.NET делать это не особенно удобно, поскольку обычно придется иметь дело с элементами управления, а не отдельными HTML-дескрипторами. Не всегда точно известно, какой дескриптор будет применяться для визуализации данного элемента управления, поэтому правило, которое желательно использовать, лучше явно задавать с помощью имени класса.
Если создание правил CSS вручную представляется слишком трудоемким, не стоит беспокоиться — Visual Studio позволяет создавать правила стилей в том же визуальном конструкторе, который используется для форматирования HTML-дескрипторов. Чтобы воспользоваться этой возможностью, вначале добавьте объявление правила. Затем щелкните правой кнопкой мыши между двумя фигурными скобками и в контекстном меню выберите пункт Build Style (Построить стиль). Откроется диалоговое окно Modify Style (Изменить стиль), в котором посредством наведения курсора мыши и щелчка можно выбрать способ настройки шрифтов, границ, фона и выравниваний:
Обычная таблица стилей определяет массу правил. Фактически таблицы стилей часто применяются для формального определения форматирования каждой значимой части пользовательского интерфейса веб-сайта. Следующая таблица стилей решает эту задачу, определяя четыре правила. Первое правило задает шрифт для элемента , благодаря чему на всей странице по умолчанию будет использоваться одинаковый шрифт. Остальные правила основаны на классе и должны применяться явным образом к нужным элементам. Два правила определяют размер и цвет верхних колонтитулов, а последнее правило определяет формат, который будет применен для создания затененного текстового окна с рамкой:
body < font-family: Verdana, Arial, Sans-Serif; font-size: small; >.heading1 < font-weight: bold; font-size: large; color: lime; >.heading2 < font-weight: bold; font-size: medium; font-style: italic; color: #C0BA72; >.blockText
В Visual Studio доступно окно CSS Outline (Структура каскадной таблицы стилей), в котором можно просмотреть обзор правил в таблице стилей. Чтобы открыть окно CSS Outline во время редактирования таблицы стилей, выберите пункт меню View —> Other Windows —> Document Outline.
При редактировании отображенной таблицы стилей ее структура выглядит, как показано на рисунке ниже. На рисунке ясно видно, что данная таблица стилей содержит одно правило элемента (то, которое форматирует body) и три правила класса. Для перехода к нужному правилу необходимо щелкнуть на нем:
Формально имена правил называются селекторами (selector), поскольку они идентифицируют части HTML-документа, которые необходимо выбрать для форматирования. Мы уже рассматривали создание кода для селекторов, использующих типы элементов, и селекторов, использующих имена классов. CSS поддерживает также несколько дополнительных возможностей для создания усовершенствованных селекторов.
Например, можно создать селекторы, которые будут применяться только к определенному типу элемента внутри другого элемента (например, к ссылке внутри определенного контейнера ). Или же можно создать селекторы, которые применяют форматирование к отдельным элементам, имеющим определенные значения идентификатора.
Применение правил таблиц стилей
Чтобы использовать правило на веб-странице, сначала страница должна быть связана с соответствующей таблицей стилей. Для этого в раздел страницы понадобится добавить элемент . Элемент ссылается на файл со стилями, которые требуется использовать. Ниже показан пример, в котором странице разрешено применять стили, определенные в файле Styles.css, при условии, что этот файл хранится в той же папке, что и веб-страница:
Теперь любой HTML-элемент или элемент управления можно связать с правилами стиля. Например, если необходимо, чтобы к обычной надписи применялся формат heading1, свойству Label.CssStyle следует присвоить значение heading1, как показано ниже:
Чтобы применить стиль к обычному фрагменту HTML-кода, нужно установить атрибут class. В следующем примере стиль применяется к элементу , который группирует текстовый абзац для облегчения форматирования:
Этот контейнер использует стиль .blockText
Присоединять таблицы стилей и применять стили вручную нет необходимости. Для этого можно также воспользоваться средствами поддержки, встроенными в Visual Studio. Чтобы добавить элемент к веб-странице, перетащите свою таблицу стилей из окна Solution Explorer на поверхность проектирования страницы (или в раздел в окне представления исходного кода). Чтобы применить стиль, можно открыть окно Apply Style в Visual Studio.
Для этого откройте веб-страницу и выберите пункт меню View —> Apply Styles. Окно Apply Styles (Применить стили) откроется в левой части экрана наряду с панелью инструментов и окном Server Explorer (Проводник сервера) подобно другим окнам CSS, с которыми вам уже приходилось сталкиваться.
Это окно отображает список всех стилей, которые доступны в присоединенных таблицах стилей, а также предварительное представление каждого стиля. Чтобы применить стиль, просто выделите элемент на веб-странице и щелкните на соответствующем стиле в окне Apply Styles:
Visual Studio самостоятельно выберет подходящий способ применения стиля в зависимости от того, что было выбрано на веб-странице:
- В случае выбора веб-элемента управления Visual Studio добавит или изменит свойство CssClass.
- При выборе обычного HTML-элемента Visual Studio добавит или изменит атрибут класса.
- При выборе раздела с HTML-содержимым Visual Studio добавит элемент или (в зависимости от того, какой тип содержимого был выделен) и установит его атрибут класса.
Чтобы настроить способ работы окна Apply Styles, щелкните на кнопке Options. Например, можно сделать так, чтобы предварительный просмотр стилей выполнялся в другом порядке, или чтобы в него включались только те стили, которые используются в текущей странице.
Visual Studio предоставляет еще несколько средств для работы с таблицами стилей. Ниже перечислены те из них, которые могут помочь при повседневной работе со стилями:
Окно Manage Styles
В этом окне в одном списке можно бегло просмотреть все стили, примененные в текущей веб-странице. Чтобы открыть это окно, откройте веб-страницу и выберите пункт меню View —> Manage Styles. В этом окне можно просмотреть описание стиля (для этого понадобится навести указатель мыши на стиль), отредактировать его (щелкнув на стиле правой кнопкой мыши и выбрав в контекстном меню пункт Go То Code) или разработать стиль с помощью инструмента для создания стилей (щелкнув на стиле правой кнопкой мыши и выбрав в контекстном меню пункт Modify (Изменить)).
Панель инструментов Style Sheet
Эта панель инструментов удобна при разработке таблицы стилей; она содержит кнопки для изменения существующего стиля или добавления нового. Чтобы отобразить эту панель, щелкните правой кнопкой мыши на панели инструментов и отметьте пункт Style Sheet.
Окно CSS Properties
Это окно позволяет просмотреть стиль во всех его деталях и изменить его свойства форматирования. Чтобы открыть его, выберите пункт меню View —> CSS Properties. Найдите элемент с назначенным ему стилем и выберите его на поверхности проектирования веб-страницы. Окно CSS Properties отобразит детальный список всех свойств стиля CSS, упорядоченный по группам и подгруппам, который похож на список свойств веб-элемента управления в окне Properties:
Если к выбранному в данный момент времени элементу применяется более одного правила стиля, окно CSS Properties отобразит список всех правил стилей, упорядоченных по приоритету. Затем можно выделить одно правило, чтобы просмотреть или отредактировать его. Свойства, которые заданы в родительском элементе, но которые не применяются к выбранному в данный момент времени элементу (либо потому, что не наследуются, либо по причины переопределений другим стилем), отображаются перечеркнутыми красной линией.
Применение таблиц стилей позволяет решить сразу две задачи. Во-первых, это обеспечивает стандартизацию макета, чтобы можно быстро форматировать новые страницы, не допуская возникновения мелких ошибок или различий. Во-вторых, это отделяет информацию о форматировании, благодаря чему она вообще не появится на веб-страницах. Это позволит модифицировать формат, не отслеживая каждую страницу и не компилируя код повторно. И хотя CSS не являются одним из стандартов .NET, Visual Studio все же обеспечивает широкую их поддержку.
CSS/Применение CSS для HTML и XHTML
CSS может быть применён к HTML или XHTML с использованием трёх методов: связывание (linking), внедрение (embedding) и встраивание (inlining).
В связанном методе таблица стилей создаётся и хранится в отдельном файле с расширением .css . Это связанные (или внешние) стили.
Во внедрённом методе CSS хранится как часть HTML-страницы в теге между тегами . Это внедрённые (или внутренние) стили.
Во встроенном методе CSS хранится непосредственно в атрибуте стиля HTML тега, пример:
Это встроенные стили.
Предпочтительнее использовать первый метод, но остальные методы тоже подходят и не требуют создания отдельного файла для стилей.
Связывание [ править ]
CSS хранятся в отдельном файле. Для ссылки на этот файл с HTML-страницы используется тег между тегами , как показано в следующем примере, который предполагает, что таблица стилей хранится в файле с именем «style.css».
Example Web Page
link элемент в примере состоит из трёх атрибутов. Первый, rel , сообщает браузеру тип и цель ссылки. Второй, type , сообщает браузеру, какой MIME-тип файла, который мы подключаем. И наконец, третий, href , сообщает браузеру URL, чтобы найти файл. В этом примере URL является относительным, но он также может быть абсолютным.
«style.css» с одним правилом содержит только текст следующего содержания:
p font-weight: bold; >
Это говорит браузеру, что текст в параграфе ( ) должен быть показан как полужирный.
Встраивание [ править ]
Пример встраивания правила напрямую к тегу:
Жирный текст
Исходный код для HTML-документа выглядит следующим образом:
Example Web Page Жирный текст
Внедрение [ править ]
В динамически генерируемых страницах возможно придётся использовать внедрённые (внутренние) CSS, но это должно быть сведено к минимуму. Даже в динамических страницах любой CSS является общим для нескольких страниц и как правило должен быть перемещён в связанный (внешний) стиль.
Внедрёнными CSS являются стили, которые находятся в заголовке HTML-документа, который требует стилизации. Например, мы хотели бы, чтобы текст в этом HTML-документе был выделен полужирным шрифтом.
p font-weight: bold; > style>
Example Web Page Text that will be formatted.