Добавил:

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

Вуз:

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

Предмет:

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

Файл:

CSS очень много.doc

Скачиваний:

Добавлен:

01.05.2025

Размер:

1.1 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 67 / 257 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 > Следующая >>>

Параметр 'text-align'

Этот параметр задает выравнивaние текста в элементе.

Наследование: да.

Может принимать следующие значения:

Значение	Описание
left	Выравнивает текст слева
right	Выравнивает текст справа
center	Центрирует текст
justify

Пример:

{

text-align: right

}

Параметр 'text-decoration'

Данный параметр задает дополнительное оформление текста.

Наследование: нет.

Примечание: цвет оформления должен быть задан свойством "color".

Может принимать следующие значения:

Значение	Описание
None	Определяет обычный текст
Underline	Определяет линию под текстом
Overline	Определяет линию над текстом
line-through	Определяет линию через текст
Blink	Определяет мигающий текст

Пример:

{

text-decoration: overline

}

Параметр 'text-indent'

Данный параметр создает отступ для первой строки текста элемента.

Наследование: да.

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

Может принимать следующие значения:

Значение	Описание
Length	Определяет фиксированный отступ
%	Определяет отступ в % от ширины родительского элемента

Примеры:

pre

{

text-indent: -10px

}

{

text-indent: 10px

}

Параметр 'text-transform'

Этот параметр управляет регистром символов в элементе.

Наследование: да.

Может принимать следующие значения:

Значение	Описание
None	Определяет обычный текст с символами нижнего регистра и заглавными буквами
Capitalize	Каждое слово в тексте начинается с заглавной буквы
Uppercase	Определяет только заглавные буквы
Lowercase	Определяет только символы нижнего регистра

Примеры:

{

text-transform: capitalize

}

pre

{

text-transform: lowercase

}

Параметр 'white-space'

Параметр задает способ обработки пробелов внутри элемента.

Наследование: да.

Может принимать следующие значения:

Значение	Описание
normal	Браузер игнорирует пробел
pre	Браузер сохраняет пробел. Действует как тег <pre> в HTML
nowrap	Текст не будет переноситься на другую строку, пока не встретится тег <br>

Пример:

pre

{

white-space: pre

}

Параметр 'word-spacing'

Данный параметр увеличивает или уменьшает пробел между словами.

Наследование: да.

Примечание: допускаются отрицательные значения.

Может принимать следующие значения:

Значение	Описание
normal	Определяет обычный пробел между словами
length	Определяет фиксированный пробел между словами

Примеры:

pre

{

word-spacing: -10px

}

{

word-spacing: 35px

}

Лекция 5. Шрифты в CSS

Параметры шрифтов в CSS определяют шрифт текста.

Примеры:

Этот пример показывает, как задать шрифт текста.
<html>
<head>
<style type="text/css">
h1 {font-family: courier}
h2.font {font-family: sans-serif}
pre {font-family: times}
</style>
</head>
<body>
<pre>применяется шрифт "times"</pre>
<h1>заголовок h1</h1>
<h2 class="font">заголовок h2</h2>
</body>

</html>

Этот пример показывает, как задать размер шрифта.
<html>
<head>
</head>
<body>
<ol style="font-size: 200%">
<li>first</li>
<li>second</li>
</ol>
<p style="font-size: 80%">текст параграфа</p>
<ul style="font-size: 60%">
<li>first</li>
<li>second</li>
</ul>
</body>

</html>

Этот пример показывает, как задать стиль шрифта.
<html>
<head>
<style type="text/css">
ol {font-style: normal}
ul {font-style: oblique}
p {font-style: italic}
</style>
</head>
<body>
<p>Текст параграфа. Текст параграфа. Текст параграфа.</p>
<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>
<ul>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>
</body>

</html>

Этот пример показывает, как задать вариант шрифта.
<html>
<head>
</head>
<body>
<h1 style="font-variant: small-caps">Заголовок h1</h1>
<h2 style="font-variant: small-caps">Заголовок h2</h2>
</body>

</html>

Этот пример показывает, как задать степень жирности шрифта.
<html>
<head>
<style type="text/css">
h1.first {font-weight: 800}
h2.second {font-weight: bold}
h3.third {font-weight: 900}
</style>
</head>
<body>
<h1 class="first">заголовок h1</h1>
<h2 class="second">заголовок h2</h2>
<h3 class="third">заголовок h3</h3>
</body>

</html>

Этот пример показывает, как использовать сокращенную запись для задания всех свойств шрифта в одном объявлении.
<html>
<head>
<style type="text/css">
p
{
font: oblique small-caps bold -5px serif
}
</style>
</head>
<body>
<p>параграф параграф параграф параграф параграф параграф</p>
</body>

</html>

Параметры шрифта в CSS

Параметры шрифта в CSS позволяют изменить семейство шрифта, степень жирности, размер, и стиль текста. Обратите внимание на то, что в CSS1 шрифты идентифицируются названием шрифта. В случае, если браузер не поддерживает данный шрифт, будет использоваться шрифт по умолчанию.

Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Параметр	Описание	Значения	IE	F	N	W3C
font	Параметр для задания всех свойств шрифта в одном объявлении	font-style	4	1	4	1
		font-variant
		font-weight
		font-size/line-height
		font-family
		caption
		icon
		menu
		message-box
		small-caption
		status-bar
font-family	Определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета	family-name	3	1	4	1
		generic-family
font-size	Задает размер шрифта	xx-small	3	1	4	1
		x-small
		small
		medium
		large
		x-large
		xx-large
		smaller
		larger
		length
		%
font-size-adjust	Определяет значение аспекта для элемента, которое будет сохранять x-height выбранного шрифта	none	-	-	-	2
		number
font-stretch	Делает текущее семейство шрифтов более узким или более широким	normal	-	-	-	2
		wider
		narrower
		ultra-condensed
		extra-condensed
		condensed
		semi-condensed
		semi-expanded
		expanded
		extra-expanded
		ultra-expanded
font-style	Задает стиль шрифта	normal	4	1	4	1
		italic
		oblique
font-variant	Выводит текст малыми прописными буквами или обычным текстом	normal	4	1	6	1
		small-caps
font-weight	Задает степень жирности шрифта	normal	4	1	4	1
		bold
		bolder
		lighter
		100
		200
		300
		400
		500
		600
		700
		800
		900

Шрифты в CSS: подробное рассмотрение

Параметр 'font'

Параметр font предназначен для сокращенной записи, позволяющей задать все свойства шрифта в одном объявлении (за исключением некоторых системных шрифтов).

Наследование: да.

Может принимать следующие значения:

Значение	Описание
font-style	Задает свойства шрифта. Значение line-height задает расстояние между строками. Это значение может быть числом, % или размером шрифта
font-variant
font-weight
font-size* /line-height
font-family
Caption	Определяет шрифт для элементов управления с заголовком (таких, как кнопки, раскрывающиеся меню и т.д.)
icon	Определяет шрифты, которые используются метками пиктограмм приложений
menu	Определяет шрифты, которые используются для раскрывающихся меню.
message-box	Определяет шрифты, которые используются в диалоговых окнах.
small-caption
status-bar	Определяет шрифты, которые используются в строке состояния окна

(*это свойство имеет также шестое значение: "line-height", которое задает расстояние между строками)

Примеры:

pre

{

font: oblique arial

}

{

font: italic 200 arial

}

{

font: italic small-caps 10px/12px serif

}

{

font: status-bar

}

Параметр 'font-family'

Данное свойство определяет для элемента список имен семейств шрифтов и/или имен порождающих семейств в порядке их приоритета. Если специфицировано несколько значений, то браузер будет использовать первое распознанное значение.

Существует два типа значений font-family:

family-name: имя семейства шрифтов ("times", "courier", "arial", и т.д.);
generic-family: имя порождающего семейства, ("serif", "sans-serif", "cursive", "fantasy", "monospace").

В качестве разделителя используется запятая. Для последнего варианта желательно определять имя порождающего семейства. Если же имя семейства содержит пробел, то его необходимо поместить в кавычки. При использовании в HTML атрибута "style" применяются одиночные кавычки.

Наследование: да.

Может принимать следующие значения:

Значение	Описание
family-name	Определяет для элемента имен семейств шрифтов и/или имен
generic-family	порождающих семейств в порядке их приоритета.

Примеры:

{

font-family: Garamond, serif

}

Параметр 'font-size'

Параметр задает размер шрифта.

Наследование: да.

Может принимать следующие значения:

Значение	Описание
xx-small	Задает размер шрифта от xx-small до xx-large
x-small
small
medium
large
x-large
xx-large
smaller	Задает размер шрифта меньше, чем у порождающего элемента
larger	Задает размер шрифта больше, чем у порождающего элемента
length	Задает фиксированный размер шрифта
%	Задает размер шрифта в % от порождающего элемента

Примеры:

{

font-size: small

}

pre

{

font-size: 5pt

}

{

font-size: 3em

}

{

font-size: 120%

}

Параметр 'font-size-adjust'

Отношение между высотой буквы "x" нижнего регистра в шрифте и высотой "font-size" называется значением аспекта шрифта. Если значение аспекта большое, то шрифт будет легче читаться, когда его размер уменьшается. Например, Verdana имеет значение аспекта, равное 0.58, т.е. если размер шрифта равен 100px, то высота буквы x нижнего регистра будет равна 58px. Times New Roman имеет значение аспекта 0.46. Таким образом, чем больше значение аспекта шрифта, тем легче он читается при уменьшении. В данном случае шрифт Verdana при уменьшении будет читаться лучше, чем Times New Roman.

Свойство font-size-adjust определяет значение аспекта для элемента, которое будет сохранять высоту буквы x нижнего регистра выбранного шрифта.

Наследование: да.

Возможные значения:

Значение

Описание

none

Не сохранять высоту буквы x шрифта, если шрифт недоступен

number

Определяет значение аспекта для шрифта

Используемая формула:

размер выбранного шрифта * (font-size-adjust/значение аспекта доступного шрифта) = размер шрифта для доступного шрифта

Пример:

Если 14px Verdana (значение аспекта 0.58) недоступен, а доступный шрифт имеет значение аспекта 0.46, то размер шрифта для подстановки будет 14 * (0.58/0.46) = 17.65px.

Пример:

{

font-size-adjust: none

}

{

font-size-adjust: 0.50

}

Параметр 'font-stretch'

Данный параметр сжимает или расширяет текущее семейство шрифтов.

Необходимо отметить, что семейство шрифтов сжимается или расширяется только горизонтально.

Наследование: да.

Возможные значения:

Значение	Описание
normal	Задает масштаб сжатия или расширения как обычный
wider	Задает масштаб расширения как следующее расширенное значение
narrower	Задает масштаб сжатия как следующее сжатое значение
ultra-condensed	Задает масштаб сжатия или расширения семейства шрифтов. "ultra-condensed" является самым сжатым значением, а " ultra-expanded" — самым широким
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

Пример:

colspan="2"

{

font-stretch: extra-expanded

}

Параметр 'font-style'

Данный параметр задает стиль шрифта.

Наследование: да.

Возможные значения:

Значение	Описание
normal	Браузер выводит обычный шрифт
italic	Браузер выводит шрифт курсивом
oblique	Браузер выводит наклонный шрифт

Пример:

{

font-style: oblique

}

{

font-style: italic

}

Параметр 'font-variant'

Этот параметр используется для вывода текста капителью: все символы нижнего регистра преобразуются в символы верхнего регистра, при этом все символы шрифта капители имеют меньший размер по сравнению с остальным текстом.

Наследование: да.

Может принимать следующие значения:

Значение	Описание
normal	Браузер выводит обычный шрифт
small-caps	Браузер выводит шрифт капитель

Пример:

pre

{

font-variant: small-caps

}

{

font-variant: normal

}

Параметр 'font-weight'

Данный параметр определяет степень жирности символов в тексте при выводе.

Наследование: да.

Возможные значения:

Значение	Описание
normal	Определяет обычные символы
bold	Определяет жирные символы
bolder	Определяет более жирные символы
lighter	Определяет более тонкие символы
100	Определяет степень жирности символов. 400 соответствует normal, 700 соответствует bold
200
300
400
500
600
700
800
900

Пример:

{

font-weight: 200

}

{

font-weight: bold

}

Лекция 6. Границы в CSS

Параметры границ в CSS определяют рамки вокруг элементов. Рассмотрим несколько примеров использования границ.

Пример в котором показано, как задать стиль для четырех сторон границы.
<html>
<head>
<style type="text/css">
pre.inset {border-style: inset}
li.outset {border-style: outset}
h1.dotted {border-style: dotted}
h2.dashed {border-style: dashed}
h3.solid {border-style: solid}
h4.double {border-style: double}
h5.groove {border-style: groove}
h6.ridge {border-style: ridge}
</style>
</head>
<body>
<pre class="inset">рамка inset </pre>
<ol>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
<li class="outset">рамка outset</li>
</ol>
<h1 class="dotted">рамка dotted</h1>
<h2 class="dashed">рамка dashed</h2>
<h3 class="solid">рамка solid</h3>
<h4 class="double">рамка double</h4>
<h5 class="groove">рамка groove </h5>
<h6 class="ridge">рамка ridge</h6>
</body>

</html>

Пример в котором показано, как задать различные стили границы на каждой стороне элемента.
<html>
<head>
<style type="text/css">
h1.styleh1 {border-style: dashed ridge solid}
h2.styleh2 {border-style: solid dashed}
h3.styleh3 {border-style: dashed groove}
h4.styleh4 {border-style: double solid dashed groove}
</style>
</head>
<body>
<h1 class="styleh1">заголовок заголовок заголовок</h1>
<h2 class="styleh2"> заголовок заголовок заголовок </h2>
<h3 class="styleh3"> заголовок заголовок заголовок </h3>
<h4 class="styleh4"> заголовок заголовок заголовок </h4>
</body>

</html>

Пример, в котором показано, как задать цвет границы — она может иметь свой цвет для каждой стороны.
<html>
<head>
<style type="text/css">
h1.styleh1
{
border-style: dashed;
border-color: green
}
h2.styleh2
{
border-style: dotted;
border-color: #ff00ff blue
}
h3.styleh3
{
border-style: solid;
border-color: red yellow rgb(12,200,30)
}
h4.styleh4
{
border-style: dashed;
border-color: green blue red yellow
}
</style>
</head>
<body>
<h1 class="styleh1">одноцветная рамка</h1>
<h2 class="styleh2">рамка из двух цветов</h2>
<h3 class="styleh3">рамка из трех цветов</h3>
<h4 class="styleh4">рамка из четырех цветов</h4>
<pre><i>Внимание:</i> Свойство<b>"border-color"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать толщину нижней стороны границы.
<html>
<head>
<style type="text/css">
h1
{
border-style: dashed;
border-bottom-width: 7px
}
</style>
</head>
<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Параметр <b>"border-bottom-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать толщину левой стороны границы.
<html>
<head>
<style type="text/css">
h2
{
border-style: dotted;
border-left-width: 7px
}
</style>
</head>
<body>
<h2>Внимание</h2>
<pre><i>Внимание:</i> Свойство <b>"border-left-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать толщину правой стороны границы.
<html>
<head>
<style type="text/css">
h1
{
border-style: dashed;
border-right-width: 7px
}
</style>
</head>
<body>
<h1>заголовок h1</h1>
<pre><i>Внимание:</i> Свойство <b>"border-right-width"</b> не работает, если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать толщину верхней стороны границы.
<html>
<head>
<style type="text/css">
h4
{
border-style: dotted;
border-top-width: 7px
}
</style>
</head>
<body>
<h4>заголовок h4</h4>
<pre><i>Внимание:</i> Свойство <b>"border-top-width"</b> не работает,
если используется в одиночку.
Сначала задайте границу с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать все свойства для нижней стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
h1
{
border-bottom: thick double blue
}
</style>
</head>
<body>
<h1> Заголовок h1.</h1>
</body>

</html>

Пример, в котором показано, как задать все свойства для левой стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
pre
{
border-left: thin ridge #f0ffff
}
</style>
</head>
<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>

Пример, в котором показано, как задать все свойства для правой стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
h4
{
border-right: thick solid rgb(0,200,200)
}
</style>
</head>
<body>
<h4>Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4
Заголовок h4 Заголовок h4 Заголовок h4 Заголовок h4</h4>
</body>

</html>

Пример, в котором показано, как задать все свойства для верхней стороны границы в одном объявлении.
<html>
<head>
<style type="text/css">
pre
{
border-top: thin dashed yellow
}
</style>
</head>
<body>
<pre>текст текст текст текст текст текст текст</pre>
</body>

</html>

Пример, в котором показано, как задать толщину всех четырех сторон границы в одном объявлении. Допускается определение от одного до четырех значений.
<html>
<head>
<style type="text/css">
h1.styleh1
{
border-style: dotted;
border-width: 7px 12px
}
h2.styleh2
{
border-style: dashed;
border-width: 3px 6px 8px
}
h3.styleh3
{
border-style: outset;
border-width: 7px
}
h4.styleh4
{
border-style: inset;
border-width: 3px 6px 8px thick
}
</style>
</head>
<body>
<h1 class="styleh1">Заголовок h1</h1>
<h2 class="styleh2">Заголовок h2</h2>
<h3 class="styleh3">Заголовок h3</h3>
<h4 class="styleh4">Заголовок h4</h4>
<pre><i>Примечание:</i> Свойство <b>"border-width"</b> не работает, если используется в одиночку.
Сначала задайте границы с помощью свойства <b>"border-style"</b>.</pre>
</body>

</html>

Пример, в котором показано, как задать свойства всех четырех сторон границы в одном объявлении. Допускается определение от одного до трех значений.
<html>
<head>
<style type="text/css">
h1
{
border: thin dotted #ff00ff
}
</style>
</head>
<body>
<h1>Заголовок h1</h1>
</body>

</html>

<<< < Предыдущая 1 2 3 4 5 67 / 257 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 > Следующая >>>

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

#
10.04.201524.81 Кб176. Рабочий Блокнот.docx
#
09.11.2019146.43 Кб147ЛР(скорость звука).doc
#
10.04.20153.32 Mб14Bakhtin.doc
#
01.07.202536.93 Кб0bestreferat-48835.docx
#
15.03.2016180.22 Кб45B_3_V_15_Horovedenie_i_horovaya_aranjirovka.doc
#
01.05.20251.1 Mб0CSS очень много.doc
#
10.04.20151.16 Mб32DENISENKO1.pdf
#
03.09.20191.71 Mб7doc11.doc
#
15.03.2016147.46 Кб147Dvoynos_Analiz_khorovogo_proizvedenia.doc
#
10.04.20151.94 Mб223Eryomenko_uchebnik.pdf
#
28.04.20192.36 Mб10gorchakov_1.docx