3:07 AM Урок №11 Рамки в CSS | |
CSS рамкиCSS border командите дават възможност да се определи изгледа на рамката: вид, цвят и дебелина.Вид на рамкаКомандата за вид на рамка се задава с border-style и може да приема следните стойности:
Пример:Параграф без рамкаПараграф с рамка, изградена от точки Параграф с рамка - прекъсната линия Параграф с рамка с една плътна линия Параграф с рамка с две плътни линии Параграф с триизмерна вдлъбната рамка Параграф с триизмерна изпъкнала рамка Параграф с триизмерна обърната навътре рамка Параграф с триизмерна обърната навън рамка Дебелина на рамкаСвойството дебелина на рамка се задава с border-width, а за стойност може да се използват както числа (в пиксели), така и една от следните думи: thin, medium, thick, които браузърът ще интерпретира автоматично, за да създаде съответно тясна, нормална или дебела рамка. Обърнете внимание, че border-width ще бъде ефективно приложено само ако вече е указан вида на рамката (border-style).Пример за тънка рамка Пример за доста по-дебела рамка Цвят на рамкаЗа задаване на цвят на рамка се използва border-color. Аналогично на цвета на текста, самите стойности за цвят на рамка може да бъдат:
Указанието за цвят на рамка ще бъде валидно само ако вече е указан вид на рамката (border-style).Пример :Цветът на рамката на този параграф е зададен със стойност-дума на цвят. Цветът на рамката на този параграф е зададен с rgb стойност. Цветът на рамката на този параграф е зададен с hex стойност. Сменете името на цвета, rgb или hex стойностите за цвета на рамката за горните параграфи в CSS командата вляво и вижте резултата. Индивидуални стилове за отделните страни на рамкатаМожете да укажете различен вид на рамка за всяка от четирите страни, използвайки следните думи:
Аналогично се задават и стойности за цвят и дебелина на отделните страни: заместете style съответно с color или width (напр. border-top-color задава цвят за горната рамка).Индивидуални стилове за страните на рамкаЗа този параграф две по две страните са с еднакви свойства, но всичките четири страни биха могли да са с различни стилове, цветове и широчини. Сменете едно или повече от индивидуланите свойства на някоя от рамките в CSS командите вляво и вижте резултата.Изпробвайте този код и вижте резултата :
Стил на рамка: съкратен записВсички свойства на рамката може да бъдат указани по съкратен начин, използвайки думата border:border: 3px dotted orange;Редът на стойностите е дебелина, вид, цвят, но с изключение на задължителната стойност за вид на рамка не е необходимо всички стойности да бъдат задавани (ако някоя стойност бъде изпусната, браузърът ще използва стойността по подразбиране).Съкратен запис на стил на рамкатаТрите свойства на рамката - вид, дебелина и цвят могат да бъдат указани по съкратен начин. Сменете някоя или всички стойности на border и вижте как ще се промени изгледът на рамката. | |
|
| |
Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
| Всички коментари: 0 | |
