Главная | Обратная связь | Поможем написать вашу работу!

Пример 3. Результат использования различных параметров текста

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

CSS Текст

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег FONT, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

Свойство	Значение	NC	IE	Описание	Пример
font-family	имя шрифта	4+	4+	Задает список шрифтов	p {font-family: Arial, serif}
font-style	Normal Italic Oblique	4+ 4+	4+ 4+ 4+	Нормальный шрифт Курсив Наклонный шрифт	p {font-style: italic}
font-variant	Norma Small-caps		4+ 4+	Капитель (особые прописные буквы)	p {font-variant: small-caps}
font-weight	Normal Lighter Bold Bolder 100-900	4+ 4W 4+ 4W 4+	4+ 4+ 4+ 4+ 4+	Нормальная жирность Светлое начертание Полужирный Жирный 100-светлый шрифт, 900-самый жирный	p {font-weight: bold}
font-size	Размер шрифта Normal Pt Px %	4+ 4+ 4+ 4+	4+ 4+ 4+ 4+	нормальный размер пункты пикселы проценты	font-size: normal font-size: 12pt font-size: 12px font-size: 120%

NC - Netscape Communicator, IE - Microsoft Internet Explorer; 4+ означает, что свойство поддерживается в браузере 4 версии и выше. 4W - работает только под Windows.

Замечание:

Когда размер шрифта задается абсолютными значениями, т.е. указывается конкретное значение шрифта в пунктах или пикселах, то изменить эту величину с помощью опции браузера Вид | Размер шрифта невозможно. Если шрифт установлен слишком мелким, то исправить этот недостаток читателю простыми средствами не представляется возможным. Поэтому лучше задавать размер шрифта в процентах (Пример 1).

Пример 1. Задание свойств шрифта с помощью CSS

<html>

<style>

H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 150%; font-weight: light }

</style>

<body>

<H1>Заголовок</H1>

Обычный текст

</body>

</html>

Ниже приведен результат примера 1.

Заголовок Обычный текст

В таблице Примера 2 даны некоторые параметры и результат их применения.

Пример 2. Результат использования различных параметров шрифтов

Пример	Пример	Пример	Пример	Пример
font-family: Verdana, sans-serif; font-size: 120%; font-weight: light	font-size: large; font-weight: bold	font-family: Arial, sans-serif; font-size: x-small; font-weight: bold	font-variant: small-caps	font-style: italic; font-weight: bold

Свойства текста

Кроме изменения параметров шрифтов, можно управлять и свойствами всего текста. Значения свойств приведены в таблице.

Свойство	Значение	NC	IE	Описание	Пример
line-height	Normal Множитель Точно %	4W 4+ 4+ 4+	4+ 4+ 4+ 4+	Интерлиньяж (межстрочный интервал)	line-height: normal line-height: 1.5 line-height: 12px line-height: 120%
text-decoration	None Underline Overline line-through Blink	4+ 4+ 4+ 4+	4+ 4+ 4W 4+	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста	text-decoration: none
text-transform	None Capitalize Uppercase Lowercase	4+ 4+ 4+ 4+	4W 4W 4W 4W	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	text-transform: capitalize
text-align	Left Right Center Justify	4+ 4+ 4+ 4+	4+ 4+ 4+ 4W	Выравнивание текста	text-align: justify выравнивание по ширине
text-indent	Точно %	4+ 4+	4+ 4+	Отступ первой строки	text-indent:15px; text-indent:10%

Ниже, в Примере 3 приведены некоторые параметры текста и результат их применения.

Пример 3. Результат использования различных параметров текста

Пример: и это все о нем	Пример: текст по центру	Пример: Это не ссылка, а просто текст	Пример: отступ первой строки	Пример: полуторный межстрочный интервал
text-transform: capitalize	text-align:center	text-decoration: underline	text-indent: 20px	line-height: 1.5

Границы и рамки

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

Свойство	Значение	NC	IE	Op	Описание	Пример
padding-top padding-right padding-bottom padding-left padding	Значение %	4+	4+	3+	Отступ от границы элемента до его содержимого	table {padding: 15px 15px}
border-top-width border-right-width border-bottom-width border-left-width border-width	Thin Medium Thick Значение	4+	4+	3+	Ширина границы	P {border-top-width: 4px}
border-color	цвет	4+	4+	3+	Цвет границы	P {border-color: red}
border-style	None Dotted Dashed Solid Double Groove Ridge Inset Outset	4+ 4+ 4+ 4+ 4+ 4+ 4+	4+ 5.5+ 5.5+ 4+ 4+ 4+ 4+ 4+ 4+	3+	Стиль рамки	table {border-style: double}
border-top border-right border-bottom border-left	border-top-width border-style цвет		4+	3+	Определяет толщину, стиль и цвет каждой границы	table {border-top: solid 4px red; border-left: solid 4px blue}
border	см. выше	4+	4+	3+	Задает толщину, стиль и цвет рамки	table {border: solid 4px red}

NC - Netscape Communicator, IE - Microsoft Internet Explorer, Op - Opera; 4+ означает, что свойство поддерживается в браузере 4 версии и выше.

Типы рамок

Для управления видом рамки предоставляется восемь значений параметра border-style. Результат их действия представлен на рисунке 1.

Рис.1. Стили рамок

Первые две - dotted и dashed стали поддерживаться браузерами Netscape и Internet Explorer только со старших версий.

<p style="color: yellow;

background-color: deepskyblue;

text-decoration: underline;

text-transform: uppercase;

border: pink inset 25;

PADDING: 20;

font-size: larger;

line-height: 40px;

text-align: center;">... </p>

Атрибут style="…" задает стилевое оформление абзаца

Атрибут color: yellow; задает цвет текста

Атрибут background-color: deepskyblue; задает цвет фона для абзаца

Атрибут text-decoration: underline; задает подчеркивание для текста

Атрибут text-transform: uppercase; задает режим заглавных букв для текста

Атрибут border: pink inset 25; задает рамку вокруг абзаца, соответственно, розовую выпуклую толщиной 25 пикселей

Атрибут PADDING: 20; задает

Атрибут font-size: larger; задает размер шрифта

АТРИБУТ line-height: 40px; задает межстрочный интервал

АТРИБУТ text-align: center; задает выравнивание текста внутри абзаца по центру

Задание 1

Создать в графическом редакторе Paint небольшой рисунок, который будет использоваться в качестве маркера списка. Создать маркированный список со своим маркером, используя стилевое свойство LIST-STYLE-IMAGE: url(имя_рисунка).

Например, <UL style="LIST-STYLE-IMAGE: url(star2.jpg)">

Задание 2

Используя свойства блоков текста, создать следующую страницу:

Задание 3

Значения отступов вокруг объектов можно указывать как положительные, так и отрицательные. Таким образом, можно использовать данную возможность для наложения одного слоя текста на другой. Например, можно создать текст с тенью, без использования трехмерного изображения. Создайте два стиля, которые отличаются цветом и размером отступов вокруг них. Используя отрицательные значения отступов и подбирая нужное значение, можно добиться того, что верхний слой как бы наползает на предыдущий. В результате у вас должно получиться следующее:

используйте контейнер <DIV> и свойства margin-top и margin-left.

Приложения

Приложение 1

Названия цветов

Название	Hex	Red	Green	Blue
aliceblue	#F0F8FF
antiquewhite	#FAEBD7
aqua	#00FFFF
aquamarine	#7FFFD4
azure	#F0FFFF
beige	#F5F5DC
bisque	#FFE4C4
black	#000000
blanchedalmond	#FFEBCD
blue	#0000FF
blueviolet	#8A2BE2
brown	#A52A2A
burlywood	#DE8887
cadetblue	#5F9EA0
chocolate	#D2691E
coral	#FF7F50
cornflowerblue	#6495ED
cornsilk	#FFF8DC
crimson	#DC143C
cyan	#00FFFF
darkblue	#00008B
darkcyan	#008B8B
darkgoldenrod	#B8860B
darkgray	#A9A9A9
darkgreen	#006400
darkkhaki	#BDB76D
darkmagenta	#8B008B
darkolivegreen	#556B2F
darkorange	#FF8C00
darkorchid	#9932CC
darkred	#8B0000
darksalmon	#E9967A
darkseagreen	#8FBC8F
darkslateblue	#483D8B
darkslategray	#2F4F4F
darkturquoise	#00CED1
darkviolet	#9400D3
deeppink	#FF1493
deepskyblue	#00BFFF
dimgray	#696969
dodgerblue	#1E90FF
firebrick	#B22222
floralwhite	#FFFAF0
forestgreen	#228B22
fuchsia	#FF00FF
gainsboro	#DCDCDC
ghostwhite	#F8F8FF
gold	#FFD700
goldenrod	#DAA520
gray	#808080
green	#008000
greenyellow	#ADFF2F
honeydew	#F0FFF0
hotpink	#FF69B4
indianred	#CD5C5C
indigo	#4B0082
ivory	#FFFFF0
khaki	#F0E68C
lavender	#E6E6FA
lavenderblush	FFF0F5
lemonchiffon	#FFFACD
lightblue	#ADD8E6
lightcoral	#F08080
lightcyan	#E0FFFF
lightgoldenrodyellow	#FAFAD2
lightgreen	#90EE90
lightpink	#FFB6C1
lightsalmon	#FFA07A
lightseagreen	#20B2AA
lightskyblue	#87CEFA
lightslategray	#778899
lightsteelblue	#B0C4DE
lightyellow	#FFFFE0
lime	#00FF00
limegreen	#32CD32
linen	#FAF0F6
magenta	#FF00FF
maroon	#800000
mediumaquamarine	#66CDAA
mediumblue	#0000CD
mediumorchid	#BA55D3
mediumpurple	#9370DB
mediumseagreen	#3CB371
mediumslateblue	#7B68EE
mediumspringgreen	#00FA9A
mediumturquoise	#48D1CC
mediumvioletred	#C71585
midnightblue	#191970
mintcream	#F5FFFA
mistyrose	#FFE4E1
moccasin	#FFE4B5
navajowhite	#FFDEAD
navy	#000080
oldlace	#FDF5E6
olive	#808000
olivedrab	#6B8E23
orange	#FFA500
orangered	#FF4500
orchid	#DA70D6
palegoldenrod	#EEE8AA
palegreen	#98FB98
paleturquoise	#AFEEEE
palevioletred	#DB7093
papayawhip	#FFEFD5
peachpuff	#FFDAB9
peru	#CD853F
pink	#FFC0CB
plum	#DDA0DD
powderblue	#B0E0E6
purple	#800080
red	#FF0000
rosybrown	#BC8F8F
royalblue	#4169E1
salmon	#FA8072
sandybrown	#F4A460
seagreen	#2E2B57
seashell	#FFE5EE
sienna	#A0522D
silver	#C0C0C0
skyblue	#87CEEB
slateblue	#6A5ACD
slategray	#708090
snow	#FFFAFA
springgreen	#00FF7F
steelblue	#4682B4
tan	#D2B48C
teal	#008080
thistle	#D8BFD8
tomato	#FF6347
turquoise	#40E0D0
violet	#EE82EE
wheat	#F5DEB3
white	#FFFFFF
whitesmoke	#F5F5F5
yellow	#FFFF00
yellowgreen	#9ACD32

Приложение 2

12 Следующая ⇒