Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Белорусский государственный университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Веб программирование.Начало.doc

Скачиваний:

Добавлен:

01.05.2025

Размер:

6.96 Mб

Скачать

☆

<<< < Предыдущая 42 43 44 45 46 47 48 49 50 51 52 5354 / 13554 55 56 57 58 59 60 61 62 63 64 65 66 > Следующая >>>

4.3. Каскадные таблицы стилей css

CSS (Cascading Style Sheets – каскадные таблицы стилей) – это технология характеристики внешнего вида документа, написанного языком разметки. Основная идея CSS состоит в том, чтобы отделить описание логической структуры документа (HTML) от его внешнего вида(CSS).

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

Использование CSS позволяет ускорить работу веб-приложений за счет сокращения загружаемого кода и за счет кэширования файлов.

4.3.1. Способы включения каскадных таблиц стилей

Существует несколько способов включения CSS в HTML-документ.

Встраивание стиля (inline styles) с помощью атрибута style в один из тегов HTML-документа. Например:

<p style="font-size: 21px; color: green;">текст</p>

Красный текст на желтом фоне, маленькими заглавными буквами.</span>

Стили можно встроить в теги p, h, body, div, span. Cпособ встраивания стиля нарушает идеологию CSS, и не рекомендуется.

Внедрение таблицы стилей в заголовок HTML-документа между тегами <head> и </head> с помощью тега style. При этом CSS-стили располагаются между открывающим и закрывающим тегами style и содержат определения для всего HTML-документа:

<head>

h1{ color: red }

</style>

</head>

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

Связывание с внешней таблицей стилей. Если предполагается использовать один стиль для нескольких страниц документа или нескольких документов, следует описать стиль в отдельном файле с расширением .CSS, например style.css. Для подключения затем стилевого файла используется тег <link>, расположенный внутри тега <head>.

<head>

</head>

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

Импортирование – добавление внешней таблицы стилей при помощи правила @import. В отличие от HTML-тега <link> правило @import является языковой конструкцией CSS и добавляется в style:

<head>

@import "style.css";

</style>

</head>

Свойство @import таблицы стилей следует задавать в начале стилевого блока перед заданием остальных правил. Значением @import является URL файла, содержащего таблицы стилей. Импортирование позволяет встраивать в документ таблицу стилей, расположенную на сервере.

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

/* color is red */

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

Selector{

Property1: value1 value2;

Property2: value3 value4;

Property3: value5 value6;

}

Селекторы могут быть тегами HTML, селекторами классов, селекторами псевдоклассов, селекторами идентификаторов.

Если у свойства в фигурных скобках несколько значений, то они отделяются друг от друга пробелами. После описания каждого свойства ставится точкой с запятой, даже если свойство одно. В таблицу стилей можно ставить любое количество пробелов и переносов строк, браузер оставит один. Значения свойств, являющихся адресами устанавливается так: url(адрес). Ниже приводится пример стилей CSS, встраиваемый в теги HTML.

<title>pr1css-Пример css, встраиваемого в HTML страницу</title>

body { color: gold; background: blue; font: bold 14px comic sans ms; text-align: justify; margin: 10px; }

html {color: black; }

p {color: red;}

h1{font-family: arial; font-weight: bold; font-size: 14pt; color:green;}

h2{font-family: arial; font-size: 110 %; color:black;}

h3 {font-weight:bold; color: red;}

</style>

Текст из раздела Head

</head>

<body>

<h1>Примеры CSS – это заголовок H1</h1>

<p>

Пример кода CSS, встраиваемого в HTML страницу. <br>

Селектором является тег body

</p>

<h2>Примеры CSS – это заголовок H2</h2>

<h3>h3 – Жирный заголовок красного цвета </h3>

Текст имеет вид: золотые буквы на голубом фоне, <br>жирный шрифт Comic Sans MS размером 14 пикселей, выровненный по обоим краям с <br> отступами со всех сторон 10 пикселей.

</body> </html>

Группирование. Если двум селекторам присваивается одинаковое определение, то их можно записывать через запятую:

h1, h2 {

font-family: arial

}

Несколько определений записываются через точку с запятой:

h1{font-weight:bold} h1 {font-size: 14pt}

h1 {font-weight: bold; font-size: 14pt;}

Наследование. При определении стиля элемента, вложенные элементы наследуют свойства головного элемента. Например, если в параграфе <p> задается красный цвет шрифта, то выделенный с помощью <b> текст также будет красным:

<p style=”color: red;”>Внутри параграфа с красным цветом текста, <b>выделенный текст</b> наследует цвет головного тега.</p>

Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого достаточно описать стиль тега <body>, порождающего остальные элементы документа.

При сложении стилей приоритет имеют атрибуты, определенные в более конкретном стиле. Стили в порядке убывания конкретности: <body> ->другие теги html-> CSS – классы-> встроенные стили.

CSS-классы. Чтобы иметь возможность отображать одни и те же элементы HTML в разных местах по-разному, необходимо использовать CSS-классы. Это позволяет для одного тега использовать несколько классов и соответственно стилей. Свойства класса присваиваются определенному тегу с помощью атрибута class: class="classname". Имя класса и его свойства перед этим должны быть определены в виде селектора класса: .classname{свойства}

Это можно продемонстрировать на следующем примере:

<html>

<head>

<title>Использование классов</title>

html{color:green;}

.font1 {

color: yellow;

background: red;

}

.font2 {

color: blue;

background: yellow;

}

</style>

</head>

<body>

<span class="font1">Желтый текст на красном фоне</span>

<span class="font2">Синий текст на желтом фоне</span>

<tr>

<td>Это ячейка1 таблицы</td>

<td>это ячейка2 таблицы</td>

</tr>

</table>

</body>

</html>

Классы «font1» и «font2» задают цвет фона и изображения. Эти классы были применены к тегу <span> и таблице. Когда, например, необходимо поменять стиль выделения текста с помощью класса во всем документе, то достаточно поменять значение цвета в определении этого класса. Если необходимо определить класс не для любого элемента HTML, а только для конкретного тега, то используется конструкция тегового класса:

имя_тега.имя_класса {свойства}

Теговый класс сработает только в том теге, для которого он предназначен, а для всех остальных тегов будет проигнорирован. Рассмотрим, например, класс select для тега <span>:

<title>pr2css – Использование классов</title>

.clasname{ font-size: 9pt; color:green ;}

span.select {color: red;}

</style>

</head>

<body>

<p class=clasname>Стиль работает</p>

<p class=select>Стиль не работает</p>

Здесь мы выделили <span class="select">часть текста красным.</span>

</body></html>

Значением class может быть множественный класс, состоящий из нескольких слов, разделенных пробелами. Например:

<p class=”urgent warning”>Опасность! Предупреждение!</p>

.warning.urgent {font-style: italic;}

Объединяя 2 селектора класса, можно выбрать только те элементы, которые имеют оба имени класса, стоящие в любом порядке.

В каких тегах лучше определять стили посредством класса? Чаще всего для этого используется одна из следующих конструкций:

ID-селекторы используются для определения уникальных частей веб-страницы типа <header>, <footer>. Идентификаторы применяют, когда необходимо найти разделы страницы, которые встречаются один раз. Для стиля, используемого неоднократно, применяются классы.

При объявлении стиля перед ID-селектором ставится #:

#green {color: green;}

Затем HTML-элементу, подлежащему форматированию, присваивается соответствующее значение атрибута id:

<footer id="green">Text</p>.

Символы"#" и "." используются только при описании стилей. При вставке имени идентификатора или класса в теги их указывать не нужно.

Теги div , span и link. Элементы <span> и <div> используются для структурирования документа совместно с атрибутами class и id. В сочетании с CSS <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста. Пример:

span.benefit {

color:red;}

<p>Если ты умный, почему не богатый </p>

<p> Если ты очень умный, то <span сlass="benefit">

здоровый</span>, и<span class="benefit">богатый</span> </p>

Тег <div> в отличие от <span> делает до и после себя отбивку (как и <p>). В то время как <span> используется в элементах уровня блока, <div> применяется для группирования блоков-элементов. Тег <div> является универсальным контейнером для элементов разметки.

Тег link используется для установки связи между HTML-документом и внешней таблицей стилей из CSS-файла, например:

Свойства шрифтов (фонтов). Свойства шрифтов могут быть следующими: font-family| font-style |font-variant | font-weight| font-size. Каждое свойство может принимать одно или несколько значений (табл. 4.6.).

Свойства значений шрифтов. Таблица 4.6.

Свойство	Характеристика свойства
font-family	Указывается до трех шрифтов, через запятую: serif\|san-serif \|cursive \|fantasy \| monospace.
font-style	:normal, italic (курсив), oblique (наклонный).
font-variant	Варианты начертания: normal, small-caps (все буквы заглавные уменьшенного размера).
font-weight	Жирность: normal , bold, bolder(жирный), lighter(бледный).
font-size	Размер в абсолютных: xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large \| {Абсолютный размер} или в относительных единицах или процентах: larger \| smaller \| {Отн. размер}%;

Пример:

<!DOCTYPE html >

<title>pr3css – Установка шрифта с помощью стилей</title>

body {

font-family: Times New Roman, times, serif;/* шрифты*/

font-size: 100%; /* Размер шрифта для основного текста */

font-style: oblique;}

td {

font-family: arial, sans-serif; /* Семейства шрифтов*/

font-size: 90%; /* Размер шрифта для заголовка таблицы */

font-weight: bold ;/* Полужирная насыщенность*/

}

h1, h2, h3 {

font-family: verdana, tahoma, arial, sans-serif ;/*шрифты*/

}

#cursive{ font-style: italic;} /* Курсивный текст */

</style>

</head>

<body>

<div id="cursive">Курсивный текст</div>

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

<h3>Заголовок 3</h3>

<table>

<tr><td>Таблица<td>

</tr>

</table>

</body></html>

Результат:

Курсивный текст

<<< < Предыдущая 42 43 44 45 46 47 48 49 50 51 52 5354 / 13554 55 56 57 58 59 60 61 62 63 64 65 66 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
01.07.2025549.38 Кб0введение_в_психоанализ_экзамен.doc
#
29.02.20161.13 Mб9Вводная презентация ФИЗИКА 3 зет.pdf
#
06.05.2019652.29 Кб5Вводная_лекция(1).doc
#
06.11.201951.94 Кб3ВЕБ Программа практики.doc
#
01.04.20257.81 Mб2Веб программирование.Начало пути.doc
#
01.05.20256.96 Mб0Веб программирование.Начало.doc
#
25.04.201964.14 Кб7веб.docx
#
01.04.202567.07 Кб0вебдизайн.doc
#
01.05.202545.88 Кб0Ведущие концепции культуры, Зачет по Усовской.docx
#
01.03.2025182.27 Кб2Ведущие( опорные) понятия МПП.doc
#
30.09.2019355.33 Кб4Вексельное обращение в банке.doc