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

Пример 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%

 

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

Ниже, в Примере 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

Поделиться:





Читайте также:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...