Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Способы подключения CSS к документу
Правила CSS располагаются в таблицах стилей. Эти таблицы стилей могут располагаться как в самом web-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS (По сути, формат CSS — это обычный текстовый файл). Эти таблицы стилей могут быть подключены, внедрены в описываемый ими web-документ четырьмя различными способами, описанныминиже. 3.2.1 Тег <link> Когда таблица стилей находится в отдельном файле, она может быть подключена к web-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>.
Все правила этой таблицы стилей действуют на протяжении всего документа. 3.2.2 Директива @import. Когда таблица стилей находится в отдельном файле, она может быть подключена к web-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы стилей действуют на протяжении всего документа. Результат выполнения кода примера 2 представлен на рисунке 2.
Пример 2 <head> <style type="text/css" media="all"> @import url(StyleSheet.css); </style> </head> <body> <div> Здесь мы подключили CSS как ссылку </div> </body>
Рисунок 2 – Результат работы CSS 3.2.3. Тег <style> Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>).
Все правила этой таблицы действуют на протяжении всего документа. Атрибут style Когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега. Результат работы кода представлен на рисунке 4. Пример 4: <body> <div style= "font-size: 21px; color: green;"> Мы описали стиль блока непосредственно при его инициализации </div> </body>
Рисунок 4 – Результат работы CSS В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях — внутренние таблицы стилей. Виды селекторов Селектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
Простой селектор представляет собой селектор типа, селектор класса либо id-селектор, за которым могут следовать селекторы псевдоклассов и селекторы атрибутов Селектор - это последовательность простых селекторов, разделенных пробелами либо символами ">" и "+". Назначение и применение разделители приведены в таблице 1. Таблица 1 - Селекторы
Продемонстрируем пример создания таблицы CSS для страницы сайта. /*===========Селекторы типа========*/ body { font-family: 'Times New Roman', Times, serif; font-size: 14px; font-weight: bolder; font-style: inherit; font-variant: normal; text-transform: none; color: #003399; line-height: normal; text-align: justify; background-color: #FFFF99; background-image: none; padding: 4px; margin: 2px; } h1 { font-family: Calibri; font-size: 22px; font-weight: bold; font-style: italic; text-align: center; } h2 { font-family: Roman; font-size: 20px; font-weight: 200; font-style: italic; } /*===========Селекторы классов===================*/ .nadpic { font-family: 'Times New Roman', Times, serif; font-size: large; font-weight: bolder; font-style: normal; font-variant: normal; color: #009999; padding: 2px; margin: 39px; z-index: inherit; position: inherit; } /*====================Селекторы идентификаторов===========*/ h1#special {color:green} #comment {color:red} /*описание внешнего вида блока в целом}*/ #nav{border-style: double; border-width: thin; } /*================Селекторы потомков======================*/ /* описание списка в этом блоке}*/ #nav ul{border-style: ridge;} /*описание элементов этого списка}*/ #nav ul li{color: #800000;} /*описание гиперссылок в списке} */ #nav ul li a{color: #008000;} /*================Псеводклассыи псевдоэлементы=========*/ A:link { color: navy } A:visited { color:Blue } A:hover { color: red; text-decoration: underline; font-weight: bold } A:active { color: green; font-weight: bold } A:focus { color: tomato } P:first-line { font-weight: bold } P:first-letter { font-size: 24px; color:red; float: left } Ниже представлен исходный код страницы и её вид на рисунке 5. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Безымянная страница</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <h1>Обычный заголовок h1</h1> <h2 >Обычный заголовок h2</h2> <asp:Button ID="Button1" runat="server" Text="Класс.nadpic" CssClass="nadpic" /> <h1 id =special>Этот заголовок h1 имеет id=special </h1> <div id="nav"> <h1>заголовок меню в div id=nav</h1> <ul> <li> Это текст перед ссылкой: <a href="Default2.aspx">ссылка_1</a> </li>
<li><a href="Default2.aspx">ссылка_2</a></li> <li><a href="Default2.aspx">ссылка_3</a></li> </ul> </div> <asp:Panel ID="Panel1" runat="server" CssClass="nadpic"> Это тоже класс.nadpic </asp:Panel> <a href="Default2.aspx">Ссылка с псевдоклассом</a> <br /> <a href="Default2.aspx">Ссылка с псевдоклассом</a> <p >Пишу первоую строку <br /> Пишу вторую строку</p> </form> </body> </html>
Рисунок 5 – Сконфигурированная с помощью CSS WEB – страница
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
Последнее изменение этой страницы: 2016-12-28; просмотров: 892; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.134.78.106 (0.058 с.) |
Рисунок 1 – Результат работы CSS
В примере подключается внешний файл StyleSheet.css со стилями с помощью атрибута rel="stylesheet", указывается тип файла type="text/css", путь к файлу указывается в атрибуте href.
Рисунок 3 – Результат работы CSS
