Мегаобучалка Главная | О нас | Обратная связь


Связанные Таблицы Стилей



2015-12-04 544 Обсуждений (0)
Связанные Таблицы Стилей 0.00 из 5.00 0 оценок




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

Пример:

Файл styles.css

<style type="text/css">
body {background:black; font-size:9pt; color:red; font-family:Arial black }
.base {color:blue; font-style:italic }
h1 {color:white}
#bold {font-weight:bold}
</style>

В самих же HTML-документах делается ссылка на этот файл при помощи тега <link> и выглядит это так:

<link rel="stylesheet" type="text/css" href="путь к файлу">

Пример.

<html>
<head>
<title> Просто еще один пример </title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
Содержание документа
</body>
</html>

 

Например, следующая таблица стилей CSS (хранящаяся в файле "special.css") устанавливает зеленый цвет текста абзаца и окружает его сплошной красной рамкой:

p.special {color : green; border: solid red; }

Авторы могут связывать таблицы стилей с исходным документом HTML с помощью элемента link:

 

<!DOCTYPE html public "-//w3c//dtd html 4.0//en"

"http://www.w3.org/tr/rec-htm40">

<html>

<head>

<link href="special.css" rel="stylesheet" type="text/css">

</head>

<body>

<p class="special">в этом абзаце текст должен быть зеленым.

</body>

</html>

 

Свойства CSS.

Свойства Font

Font-family

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

[1] любой шрифт

*Применимо для: всех элементов

Описание: это свойство определяет используемый элементом шрифт. Если указать URL, то

шрифт автоматически установится на компьютер пользователя

ПРИМЕР:

font-family:Arial Black URL('arialblack.ttf’) font-style

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

[1] normaJ - без изменений

[2] italic - курсив

*Применимо для: всех элементов

Описание: стиль элемента Курсивный или обычный

ПРИМЕР:

font-style: italic font-variant

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

[1] normal - без изменений

[2] small-caps - заменяет все маленькие буквы на большие

*Применимо для: всех элементов

Описание: варианты отображения шрифта. Нетскейп не поддерживает это свойство

ПРИМЕР:

font-variant: small-caps

Font-weight

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

[1] normal - без изменений

[2] bold-жирный

[3] bolder - очень жирный (в MSIE не отличается от bold, в Нетскейпе от нормал)

[4] lighter - тонкий (не отличается от normal)

[5] любое значение от 100 до 900

*Применимо для: всех элементов

Описание: выделение (жирность) элемента

ПРИМЕР:

font-weight:bold

Font-size

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

[1] размер (+)

[2] xx-smail, x-email, small, medium, large, x-large, xx-large - любое из этих значений

[3] smaller, larger - любое из этих значений

*Применимо для: всех элементов

Описание: размер шрифта

ПРИМЕР:

font-size: 3 Opt

Font

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

[1] font-family

[2] font-style

[3] font-variant

[4] font-weight

[5] font-size

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства

ПРИМЕР:

font: italic bolder Arial 12pt

 

Свойства Text

Word-spacing

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

[1] длина (+)

[2] normal - без изменений

*Применимо для: всех элементов

Описание: расстояние между словами. Не работает ни в Нетскейпе, ни в MSIE

ПРИМЕР;

word-spacing:0.4em

Text-decoration

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

[1] none - нет

[2] underline - подчеркнутый

[3] overline - надчеркнутый (не поддерживается в Нетскейпе)

[4] line-through - перечеркнутый

[5] blink - мигающий (не поддерживается в IE)

*Применимо доя: всех элементов

Описание: "украшение" текста

ПРИМЕР:

text-decoration :line-through

Letter-spacing

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

1] длина (+)

[2] normal - без изменений

*Применимо для: всех элементов

Описание: расстояние между буквами. Не работает в Нетскейпе

ПРИМЕР:

letter-spacing: 100

Vertical-align

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

[1] baseline

[2] sub

[3] super

[4] top-text

[5]top

[6] middle

[7] bottom

[8] bottom-text

[9] процент

*Применимо для: inline элементов

Описание: позиционирование элементов по отношению к другим элементам, стоящим в

одном ряду. Не работает в Нетскейпе

ПРИМЕР:

vertical-align: top-text

Text-transform

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

[1] none - нет

[2] Capitalize - каждое слово начинается с большой буквы

[3] UPPERCASE - каждая буква текста становится заглавной

[4] lowercase - каждая буква текста становится маленькой

*Применимо для: inline элементов

Описание: изменение текста. Не работает в Нетскейпе

ПРИМЕР:

text-transform:Capitalize

Text-align

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

[1] left –текст слева

[2] right -текст справа

[3] center - текст по центру

[3] justify - текст "растянут"

*Применимо для: block-level элементов

Описание: положение текста

ПРИМЕР:

text-align:right

Text-indent

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

[1]длина(+)

[2] процент (+)

*Применимо для: block-level элементов

Описание: отступ

ПРИМЕР:

text-indent:30 em

Line-height

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

[1] normal - без изменений

[2] длина(+)

[3] процент

*Применимо для: всех элементов

Описание: отступ сверху

ПРИМЕР:

Hne-height:100%

 

Свойства Color и Background

Color

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

[1] цвет (+)

"Применимо для: всех элементов

Описание: цвет

ПРИМЕР:

color:#f00000

Backgroung-color

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

[1] цвет (+)

*Применимо для: всех элементов

Описание: цвет фона элемента

ПРИМЕР:

background-color:#f00000

Backgurond image

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

[1] none - нет

[2]URL(+)

*Применимо для: всех элементов

Описание: фоновое изображение

ПРИМЕР:

background-image;URL(cooi.gif)

Background-repeat

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

[1] repeat -размножает фоновое изображение во всех направлениях

[2] repeat-x - размножает фоновое изображение горизонтально

[3] гереat-у - размножает фоновое изображение вертикально

[4] no-repeat - не повторяющееся изображение

*Применимо для: всех элементов

Описание: повторения фонового изображения

ПРИМЕР:

background-repeat:no-repeat

Background-attachment

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

[1} scroll - фоновое изображение скролится всеете с содержанием документа

[2] fixed - не скролится. Фиксируется в одном месте. Не работает в Нетскейпе

*Применимо для: всех элементов

Описание: возможность прокрутки фонового изображения

ПРИМЕР:

background-attachment:fixed

Background-position

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

[1] процент от ширины + процент от высоты (+)

[2] top, middle, bottom - одно из значений

[3] left, center, right - одно из значений

[4] расстояние от левого края + расстояние от вершины

*Применимо для: block-level и replaced элементов

Описание: положение фонового изображения (работает с background-repeat равным repeat-x, repeat-y или no-repeat)

ПРИМЕР:

background-position :50%0%

Background

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

[1] background-color

[2] background-image

[3] background-position

[4] background-attachment

[5] background-repeat

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства

ПРИМЕР:

background:no-repeat black fixed 50%0%

 

Свойства Box

Margin-top

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

[1] длина (+)

[2] процент (+)

[3] auto – автоматически

*Применимо для: всех элементов

Описание: определяет отступ сверху

ПРИМЕР:

margin-top: 100

Margin-right

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

[1] длина (4)

[2] процент (+)

[3] auto – автоматически

"Применимо для: всех элементов

Описание: определяет отступ справа

ПРИМЕР:

margin-right 100%

Margin -bottom

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

[1] длина (+)

[2] процент (+)

[3] auto - автоматически

"Применимо для: всех элементов

Описание: определяет отступ снизу

ПРИМЕР:

margin-bottom: l00em

Margin-left

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

[1] длина (+)

[2] процент (+)

[3] auto - автоматически

*Прнменимо для: всех элементов

Описание: определяет отступ слева

ПРИМЕР:

margin-left: l00pt

Margin

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

[1] margin-top

[2] margin-right

[3] margin-left

[4] margin-bottom

*Применило для: всех элементов

Описание: обобщает все вышеперечисленные свойства

ПРИМЕР:

background: l00pt

Padding-top

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

[1] длина(+)

[2] процент (+)

*Применимо для: осех элементов

Описание: отступ от верхнего border'a

ПРИМЕР:

padding-top: l00pt

Padding-right

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

[1] длина(+)

[2] процент (+)

*Применимо для: всех элементов

Описание: отступ от правого border'a

ПРИМЕР:

padding-right:100%

 

border-top-widthЛ

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

[1] длина (+)

[2] thin, medium или thick

"Применимо для: всех элементов

Описание: толщина верхнего border'a

ПРИМЕР:

border-top-width: l00pt

Border-right-width

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

[1] длина (+)

[2] thin, medium или thick

*Применимо для: всех элементов

Описание: толщина правого border'a

ПРИМЕР:

border-right-width:thick

Border-bottom -width

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

[1] длина (+)

[2] thin, medium или thick

*Применимо для: всех элементов

Описание: толщина нижнего border'a

ПРИМЕР:

border-bottom -width: l00em

Border-left-width

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

[1] длина (,+)

[2] thin, medium или thick

•Применимо для: всех элементов

Описание: толщина левого border'a

ПРИМЕР:

border-left-width:medium

Border-width

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

[1] border-top-width

[2] border-right-width

[3] border-left-width

[4] border-bottom-width

*Применимо для: всех элементов

Описание: толщина border'ов. Можно задать несколько значений одновременно (до четырех)

для разных border'oв. Если установлено одно значение - задается единая толщина для всех

сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре -

то задаются индивидуальная толщина для всех сторон

ПРИМЕР:

border-width: 15pt

Border-color

Возможные значения:' [1]цвет(+)

*Применимо для: всех элементов

Описание: цвет border'a. Не работает в Нетскейпе

 

ПРИМЕР:

border-color: green

Border-style

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

[1] none

[2] dotted, dashed, solid, double, groove, ridge, inset, outset

*Применимо для: всех элементов .

Описание: стиль border'oв. Можно задать несколько значений одновременно (до четырех) для разных border'oв. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре -то задаются индивидуальные стили для всех сторон

ПРИМЕР-

border-style: dotted groove border-top

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

[1] border-top-width

[2] border-style [3] border-color

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для верхнего border'a

ПРИМЕР:

border-top: l00em red groove

Border-right

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

[1] border-right-width

[2] border-style border-color

*Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для правого border’а

ПРИМЕР:

border-right: 5pt magenta solid

Border-left

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

[1] border-left-width

[2] border-style

[3] border-color

* Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для левого border'a

ПРИМЕР:

border-left: 15pc coral inset border-bottom

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

[1] border-bottom-width

[2] border-style

[3] border-color

"Применимо для: всех элементов

Описание: обобщает вышеперечисленные свойства для нижнего border'a

Пример:

border-bottom: 30 orange outset

border

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

[1] border-width

[2] border-style

[3] border-color

*Прнменнмо для: всех элементов

Описание: обобщает вышеперечисленные свойства

ПРИМЕР:

border: thik black double

Width

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

[1] длина (+)

[2] процент (+)

*Применимо для: block-level и replaced элементов

Описание: ширина элемента

ПРИМЕР:

width:.10%

height

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

[1] длина (+)

[2] процент (+)

"Применимо для: block-level и replaced элементов

Описание: высота элемента

ПРИМЕР:

height :100pt

Float

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

[1] left -слева

[2] right - справа

[3] none - по умолчанию

*Применимо для: всех элементов

Описание: расположение элемента

ПРИМЕР:

float:right

Clear

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

[1] left -слева

[2] right - справа

[3] both - с двух сторон

[4] попе - по умолчанию

*Применимо для: всех элементов

Описание: расположение других элементов вокруг данного

ПРИМЕР:

сlear:both

Классификация

Display

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

[1] попе - не отображается

[2] block - разбивает строку до и после элемента (т.е. элемент не может находиться на однойлинии с другими элементами)

[3] inline - не разбивает строку

[4] list-item - разбивает линию строку до н после элемента + добавляет маркер как у list-item элементов

*Применимо для: всех элементов

Описание: определяет, как будет отображаться элемент

ПРИМЕР:

display :none

White-space

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

[1] normaJ - "сжимает" несколько подряд идущих пробелов в один

[2] рге - допускает отображение нескольких подряд идущих пробелов

[3] nowrap - не допускает перенос строки без тera<BR>

"Применимо для: block-level элементов

Описание: определяет, как будут отображаться пробелы между элементами

ПРИМЕР:

white-space :поwrap

 

List-style-type

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

[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha

[2] none - никакой

*Применимо для: элементов со значением display равным list-item

Описание: определяет вид list-item маркера. Если значение list-style-image равно попе или не

уточнено

ПРИМЕР:

list-style-type:lower-alpha

List-style-image

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

[1] none - нет

[2]URL(+)

*Применимо для: элементов со значением display равным list-item

Описание: задает вид list-item маркера в виде картинки

ПРИМЕР:

list-sty le-image:URL(cool.gif)

List-style-position

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

[1] inside - при переносе следующие строки будут отображаться без отступа

[2] outside - по умолчанию

*Применимо для: элементов со значением display равным list-item

Описание: определяет положение маркера в зависимости от list item элемента

ПРИМЕР:

list-sty le-position:inside

List-style

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

[1] list-style-type

[2] list-style-position

[3] list-style-image

*Применимо для: элементов со значением display равным list-item

Описание: обобщает вышеперечисленные свойства

ПРИМЕР:

list-style:inside

 

Практическое задание.



2015-12-04 544 Обсуждений (0)
Связанные Таблицы Стилей 0.00 из 5.00 0 оценок








Обсуждение в статье: Связанные Таблицы Стилей

Обсуждений еще не было, будьте первым... ↓↓↓

Отправить сообщение

Популярное:
Почему люди поддаются рекламе?: Только не надо искать ответы в качестве или количестве рекламы...
Как распознать напряжение: Говоря о мышечном напряжении, мы в первую очередь имеем в виду мускулы, прикрепленные к костям ...



©2015-2024 megaobuchalka.ru Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. (544)

Почему 1285321 студент выбрали МегаОбучалку...

Система поиска информации

Мобильная версия сайта

Удобная навигация

Нет шокирующей рекламы

(0.005 сек.)