Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь
FAQ
Написать работу

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ Написать работу

Способы подключения CSS к документу

↑

⇐ ПредыдущаяСтр 3 из 25Следующая ⇒

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

3.2.1 Тег <link>

Когда таблица стилей находится в отдельном файле, она может быть подключена к web-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>.

Имя тега	Описание	Синтаксис	Атрибуты
<link>	Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <а>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.	HTML <head> <link атрибуты> </head> XHTML <head> <link атрибуты /> </head>	Charset - Кодировка связываемого документа. Href - Путь к связываемому файлу. Media - Определяет устройство, для которого следует применять стилевое оформление. Rel - Определяет отношения между текущим документом и файлом, на который делается ссылка. Sizes - Указывает размер иконок для визуального отображения. Type - MIME-тип данных подключаемого файла.
Пример 1: <head> <link rel="stylesheet" type="text/css" href="StyleSheet.css"> </head> <body> <h1> Здесь мы подключили CSS как ссылку в теге head </h1> </body>	Рисунок 1 – Результат работы CSS В примере подключается внешний файл StyleSheet.css со стилями с помощью атрибута rel="stylesheet", указывается тип файла type="text/css", путь к файлу указывается в атрибуте href.

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

3.2.2 Директива @import.

Когда таблица стилей находится в отдельном файле, она может быть подключена к web-документу посредством директивы @import, располагающейся в этом документе между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>) сразу после тега <style>, которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы стилей действуют на протяжении всего документа. Результат выполнения кода примера 2 представлен на рисунке 2.

Пример 2

<head>

@import url(StyleSheet.css);

</style>

</head>

<body>

<div>

Здесь мы подключили CSS как ссылку

</div>

</body>

Рисунок 2 – Результат работы CSS

3.2.3. Тег <style>

Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>).

Имя тега	Описание	Синтаксис	Атрибуты
<style>	Тег <style> применяется для определения стилей элементов web-страницы. Тег <style> необходимо использовать внутри контейнера <head>. Можно задавать более чем один тег <style>.	<head> <style type="text/css"> ... </style> </head>	Media - Определяет устройство вывода, для работы с которым предназначена таблица стилей. Type - Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.
Пример 3: <head> <title>Скругление углов CSS методами</title> <!-- Пример подключения css непосредственно в коде--> <style type="text/css"> div { border: 1px solid #434343; padding: 10px; background: #e3e3e3; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: 500px } </style></head> <body><div> Блок будет иметь скругленные углы, если страницу рассматривать в браузерах Firefox, Chrome или Safari. Мы описали CSS в теге style </div></body>	Рисунок 3 – Результат работы CSS

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

Атрибут style

Когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега. Результат работы кода представлен на рисунке 4.

Пример 4:

<body>

Мы описали стиль блока непосредственно при его инициализации

</div>

</body>

Рисунок 4 – Результат работы CSS

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

Виды селекторов

Селектор - это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.

Простой селектор представляет собой селектор типа, селектор класса либо id-селектор, за которым могут следовать селекторы псевдоклассов и селекторы атрибутов

Селектор - это последовательность простых селекторов, разделенных пробелами либо символами ">" и "+". Назначение и применение разделители приведены в таблице 1.

Таблица 1 - Селекторы

Символ	Название селектора	Значение
<пробел>	Селектор потомков	Определенный стиль в зависимости от того, вложен ли этот элемент в другой. Для этого названия элементов перечисляются в порядке их предполагаемой вложенности и разделяются пробелами.
Пример: td h1 { color: red; } Заголовки 1-го уровня (элемент h1) будут выведены красным цветом только внутри ячеек таблиц (td). Причем, внутри ВСЕХ ячеек ВСЕХ таблиц (даже если есть вложенные таблицы).
>	Дочерний селектор	Правило стиля относится только к непосредственному потомку
Пример: table.special td>h1 { color: red; } В ячейке (td) таблицы (table) некоего класса "special" заголовок 1-го уровня (h1) будет выведен красным цветом. Заметьте, что если в ячейке есть вложенная таблица, к заголовкам в ее ячейках это описание уже не относится.
+	Сестринский селектор	Некие структурные элементы являются потомками одного родительского и один из них непосредственно предшествует другому.
Пример: h2 { margin-top: 30px;} h1+h2 { margin-top: 15px;} Заголовок 2-го уровня (h2), как правило, отделяется от предшествущего текста отступом 30px. Но в случае, когда он идет непосредственно за заголовком 1-го уровня (h1), этот отступ снижается до 15px. Во втором объявлении использован сестринский селектор.
имя HTML-элемента	Селектор типа	Селектор типа представляет собой название типа элемента документа, в котором используются каскадные таблицы стилей. Для HTML-документа селектор типа - это имя HTML-элемента.
Пример: body { font-size: 12px } h1 { font-size: 24px; color: red; border: black thin solid }
.	Селектор класса	Селекторы класса позволяют задавать различные стилевые описания для одного и того же HTML-элемента. Название класса указывается после названия элемента и отделяется точкой.
Пример: div.red { color: #FF0000; } – Объявление класса в блоке head <div class=”red”> - Применение класса в блоке body
*	Универсальный селектор класса	При определении с помощью универсального селектора класс не связывается с конкретным элементом. Такой класс можно применять с любыми элементами.
Пример: – Объявление класса в блоке head: .spring { color: mediumspringgreen; }, однако на практике допустима следующая запись без : .spring { color: mediumspringgreen; }. Применение класса в блоке body: <div class=” spring”> … <р class=” spring”>
#	ID селекторы	Атрибут ID задает HTML элементу уникальный в пределах документа идентификатор. Значение атрибута ID отделяется от имени HTML-элемента символом #.
Пример: h1#special {color:green} - правило (зеленый цвет символов) будет сопоставлено элементу h1, у которого значение атрибута id равно special. #comment {color:red} - правило (красный цвет символов) будет сопоставлено любому элементу, у которого значение атрибута id равно comment. Элемент с заданным id должен быть уникален в пределах документа. #nav ul li a {... описание гиперссылок в списке} - Внутри элемента с id=nav (#nav) в списке (ul) в элементе списка (li) гиперссылка (a) должна отображаться так, как указано в фигурных скобках (согласно CSS).
:	Псевдоклассы и псевдоэлементы	Псевдоклассы и псевдоэлементы позволяют задать особые стили, связанные с элементами <A> и <P>.
Пример: A:visited { color: steelblue } Динамические псевдоклассы. Для ссылок, на которые наведен курсор мыши, активизированных и получивших фокус: 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 }

Продемонстрируем пример создания таблицы 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;

}

{

font-family: Calibri;

font-size: 22px;

font-weight: bold;

font-style: italic;

text-align: center;

}

{

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">

<title>Безымянная страница</title>

</head>

<body>

<h1>Обычный заголовок h1</h1>

<h2 >Обычный заголовок h2</h2>

<asp:Button ID="Button1" runat="server" Text="Класс.nadpic"

CssClass="nadpic" />

<h1 id =special>Этот заголовок h1 имеет id=special </h1>

<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 – страница

⇐ Предыдущая 1 234 5 6 7 8 9 10 Следующая ⇒

Познавательные статьи:

Психологические особенности спортивного соревнования

Приготовление дезинфицирующих растворов различной концентрации

Занятость населения и рынок труда

Социальный статус семьи и её типология

Последнее изменение этой страницы: 2016-12-28; просмотров: 1070; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 216.73.217.21 (0.008 с.)