CSS

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

Всичко за CSS - част 3-та
(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-та

Коментари