Всичко за CSS - част 3-та6

Добавен от legolas

06 Feb 2010

(0 от 0 гласували)

Border-left-width
Стойности	thin	Тънка линия.
	medium	Средно дебела линия.
	thick	Дебела линия.
	дължина	Задава се дължина.
Обяснение	Определя ширината на лявата част на рамката.
Пример	{ border-left-width: 3px }

Border-right-width
Стойности	thin	Тънка линия.
	medium	Средно дебела линия.
	thick	Дебела линия.
	дължина	Задава се дължина.
Обяснение	Определя ширината на дясната част на рамката.
Пример	{ border-right-width: thick }

Border-width
Стойности	thin	Тънка линия.
	medium	Средно дебела линия.
	thick	Дебела линия.
	дължина	Задава се дължина.
Обяснение	Определя ширината на рамката.
Пример	{ border-width: 3px }

Border-width обединява четирите описани по-горе свойства. Затова за Border-width могат да се зададат до четири стойности:

· Ако зададете една стойност всички елементи на рамката получават еднаква ширина. Например:{ border-width: 2.5mm }

· При две стойности, първата се отнася за горната и долната, а втората за лявата и дясната част на рамката.

· При три стойности първата се отнася за горната част на рамката, втората се отнася за лявата и дясната, а третата - за долната част. Например:

·

·         <STYLE type="text/css">

·         <!--

·

·         DIV.bord { width: 200; border-width: 2mm 3mm 1mm; border-color: black; }

·

·         -->

·         </STYLE>

·

·         <BODY>

·

·         <DIV class="bord">Рамки,рамки,рамки</DIV>

·

·         </BODY>

·

Рамки, рамки, рамки

· При четири стойности индивидуално се настройват всички части на рамката.

Border-color
Стойности	стойност	По схемата #RRGGBB (вж. HTML/Цветове).
	име	Име на цвета. Например red, blue, white.
Обяснение	Дефинира цвета на рамката.
Пример	{ border-color: #00FFFF }

Border-style
Стойности	none	Рамката е невидима.
	dotted	Прекъсната линия.
	dashed	Линия, състояща се от малки черти (пунктир).
	solid	Непрекъсната линия.
	double	Двойна линия.
	droove	Линия с триизмерен изглед. Може да бъде още и ridge, inset или outset.
Обяснение	Настройване на външния вид на рамката.
Пример	{ border-style: double }

Освен border-top-width може да използвате и border-top-style или border-top-color, за да настроите цвета или стила само за една част от рамката. Tова работи само с Internet Explorer затова не Ви го препоръчвам.

И тук, както при background-свойствата, може да използвате обощеното border, за да настроите едновременно цвета, стила и големината на рамката. Например:

<STYLE type="text/css">

<!--

P { border: solid medium black }

-->

</STYLE>

Други полезни обобщителни свойства са border-top, border-bottom, border-left, border-right. С тях може да настройвате едновременно стила, големината и цвета само за опрделена част от рамката. Синтаксисът е както при горния пример.

Нагоре

Clear

Clear
Стойности	none	Други елементи са допустими от всички страни.
	left	При всеки друг елемент, дадения елемент се позиционира в левия край.
	right	При всеки друг елемент, дадения елемент се позиционира в десния край.
	both	Елементът се позиционира при всеки друг елемент.
Обяснение	Свойството определя дали около даден елемент може да се появяват и други.
Пример	{ clear: none }

Нагоре

Color

Color
Стойности	стойност	По схемата #RRGGBB (вж. HTML/Цветове).
	име	Име на цвета. Например red, blue, white.
	RGB	Дял на червеното, зеленото и синьото. Например rgb(255,255,255) е бял цвят.
Обяснение	Oписва цвета на текста за даден елемент.
Пример	{ color: rgb(130,75,183) }

Нагоре

Display

Display
Стойности	none	Елементът и рамката му не се представят.
	block	Елементът се представя в рамка.
	inline	Елементът се представя в рамка, вмъкната в текста, на същият ред като предходния елемент.
	list-item	Съответства на block, но към рамката се поставя и знак за списък.
Обяснение	Описва как трябва да се престави даден елемент на Web страницата.
Пример	{ display: block }

Нагоре

Float

Float
Стойности	none	Елементът се представя на мястото, където се вгражда в документа.
	left	Подравяване вляво; Текстът се намира около елемента.
	right	Подравняване вдясно; Текстът се намира около елемента.
Обяснение	Дефинира посоката на основния текст около даден елемент.
Пример	{ float: none }

Нагоре

Font

Font-family
Стойности	име	Името, под което шрифтът е инсталиран. Например: Arial, Courier, Times New Roman.
	семейство	Семейството на шрифта. Например: serif, sans-serif, cursive, fantasy, monospace.
Обяснение	Настройване на шрифта, който браузърът да зареди, за даден елемент.
Пример	{ font-family: Arial, Verdana, Helvetica, sans-serif }

Font-style
Стойности	normal	Нормален шрифт.
	italic	Наклонен шрифт.
	oblique	Наклонен шрифт.
Обяснение	Определя стила на шрифта.
Пример	{ font-style: italic }

Font-variant
Стойности	normal	Нормален шрифт.
	small-caps	Всички малки букви се заменят с големи, но те са по-малки от нормалните големи букви.
Обяснение	Определя дали шрифтът да е нормален или да е т.нар. small-caps-шрифт.
Пример	{ font-variant: small-caps }

Font-weight
Стойности	стойност	Установени числови стойности. Например: 100, 200, 300 и тн. 400 = normal, 700 = bold.
	lighter	По-тънък от нормалния шрифт.
	normal	Нормален шрифт.
	bold	Удебелен шрифт.
	bolder	По-удебелен шрифт.
Обяснение	Дефинира дебелината на шрифта.
Пример	{ font-weight: bold }

Font-size
Стойности	Абсолютни размери	xx-small	Още по-малък шрифт.
		x-small	По-малък шрифт.
		small	Малък шрифт.
		medium	Нормален шрифт.
		large	Голям шрифт.
		x-large	По-голям шрифт.
		xx-large	Още по-голям шрифт.
	Спрямо предходния шрифт	larger	По-голям шрифт от предходния.
	Спрямо предходния шрифт	smaller	По-малък шрифт от предходния.
	Типографски величини	pt	Пунктове (вж. мерни единици, означения).
		em	Коефициент спрямо актуалния размер. 1.5em = един размер и половина.
		проценти	Също коефициент. 150% отговарят на един размер и половина.
Обяснение	Дефинира дебелината на шрифта.
Пример	{ font-size: 12pt }

Естествено и тук има обобщаващото свойство font. Например:

P.neshtosi { font: bold small-caps 16pt Arial, sans-serif }

Нагоре

Height

Height
Стойности	auto	Дължината се променя автоматично спрямо съдържанието на елемента.
	дължина	Вж. мерни единици, означения. Дължината не трябва да е отрицателна.
Обяснение	Определя височината на даден елемент.
Пример	{ height: 300 }

Нагоре

Letter-spacing

Letter-spacing
Стойности	normal	Няма промяна.
	дължина	Вж. мерни единици, означения. Може да се задват и отрицателни дължини.
Обяснение	Определя разстоянието между отделните букви и знаци.
Пример	{ letter-spacing: 3 }

Тествай знанията си

Категории

РЕКЛАМИРАЙТЕ ВАШИТЕ УСЛУГИ

Последвайте ни

Всичко за CSS - част 3-та6

Коментари