Всем приветик давно я уже не продолжал писать про построение ХТМЛ страниц. Вот пришло время и продолжаю. Итак сегодня мы рассмотрим как можно сделать рамку вокруг изображения,как можно менять её размер. Также разберем как создать список на сайте — обычный список либо же с нумерацией. Для начала рассмотрим как же получить рамку.
Как я уже сказал выше мы будем делать рамку вокруг изображения — кто не знает как вставить картинку на хтмл страницу просим сюда. Итак у нас имеется код картинки:
Тут все по старому ничего не поменялось. Теперь разберемся как сделать рамку. Получить рамку вокруг изображения мы можем получить с помощью атрибута «border». Этот атрибут у картинка по умолчанию поставлен на 0. Соответственно если вы хотите убрать рамку где-то то нужно написать border=0.
Значения рамки можно писать просто числом,можно после числа указать пиксели либо проценты. Пример смотрите ниже.
С рамкой разобрались — переходим к созданию списка. Создание списка может пригодится на вашей страничка так как можно получить понятное разделение текста по пунктам. Так же научимся создавать список с числа 1 по 6 и т. д. Для этого нам понадобятся теги <ul>,<li> оба тега нужно закрывать. Вот пример ниже:
У списка есть свои атрибуты с помощью которых его можно сделать поинтересней. Например вместо круга мы можем получить квадрат или пустой круг. Для этого нужен атрибут type он пишется в теге <ul> к нему можно применить значения square (квадрат),disc (диск), circle (пустой круг).
Так же я выше сказал ,что мы сделаем нумерованный список — в нем почит нечего не отличается только вместе тега <ul> мы пишем <ol>. И по умолчанию мы получим нумерованный список от 1 до 7… Пример:
<html>
<body>
<ol>
<li>Пункт первый</li>
<li>Пункт второй</li>
<li>Пункт третий</li>
</ol>
</body>
</html>
И также у него есть атрибуты и также пишутся через type только значения другие. Если мы хотим арабские числа то в теге <ol> пишем 1 либо не пишем нечего по умолчанию у нас уже арабские. Если хотим буквами заглавными либо прописными пишем А либо а, если хотим римские цифры то пишем I.
Ну вот, пожалуй, на сегодня и все. Спасибо за внимание!
Безплатни уроци за CSS в W3Schools
CSS Рамките (border) ви позволяват да определите и стилизирате границите на даден HTML елемент.
Border Style
Пропъртито border-style определя какъв вид рамка ще използвате за конкретния елемент. Забележка: Нито едно от пропъртитата за рамки няма да работят, ако border-style не е дефиниран!
Border-Style Стойности:
none: Елемента няма рамка
dotted: Определя пунктирана рамка
dashed: Рамка съставена от тирета
solid: Дефинира плътна рамка
double: Дефинира двойна рамка.
groove: Дефинира 3D grooved рамка, като ефекта зависи от това какви цветове са избрани.
ridge: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове.
inset: Дефинира 3D рамка, като ефекта отново зависи от избраните цветове
outset: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове
Разликата между 3D рамките е в ефекта, който се получава.
Опитайте сами: Определете стила на рамката
Border-Width
Това пропърти задава дебелината на рамката. За ширината се използва или една от предварителните стойност (тънка, средна, дебела) или се означава с пиксели. Забележка: border-width не работи ако стила на рамката не е определен преди това.
Пропъртито се използва за задаване на цвят на рамката. Цвета се определя по 3 начина:
име на цвят – „red“
RGB стойност – като „RGB (255,0,0)“
Hex – шестнадесетична стойнсот, като „# ff0000“
Може да направите рамката прозрачна (transparent). Забележка: Както и за дебелината, border-color няма да работи, освен ако не сте избрали стила на рамката преди това.
Примера по-горе може да се направи само с едно пропърти:
p {
border-style: dotted solid;
}
Опитайте сами »
Пропъртито border-style може да има от една до четири стойности.
border-style: dotted solid double dashed;
горната рамка е dotted
дясната рамка е solid
долната рамка е double
лявата рамка се dashed
border-style: dotted solid double;
горната рамка е dotted
наляво и надясно рамките са solid
долната рамка е double
border-style: dotted solid;
горни и долни рамки са dotted
наляво и надясно рамки са solid
border-style: dotted;
всички четири рамки са dotted
По същия начин може да използвате пропърти за определяне на цвят и дебелина.
Border – Shorthand пропърти
Както прочетохте вече, много неща трябва да се вземат предвид при стилизирането на рамки.
Може да използваме съкратено пропърти и да определим всички стилове наведнъж.
По този начин се избягва повтаряемост и кода изглежда по-приличен.
Пропъртито border е съкратен вариант на останалите:
border-width
border-style (ЗАДЪЛЖИТЕЛНО)
border-color
border: 5px solid red;
Опитайте сами »
Всички пропъртита за горната рамка в една декларация
Този пример показва, как чрез съкратено пропърти можем да дефинираме всички стилове на горната рамка.
Определя стила на долната рамка
Този пример показва как да стилизираме долната рамка.
Задава ширината на лявата рамка
Този пример показва как да зададем ширина на лявата страна на рамката.
Дефиниране на цвят на четирите рамки
Този пример показва как да настроите цвета на четирите страни на рамката.
Задайте цвета на дясната рамка
Този пример показва как да зададете цвят на дясната рамка.
Всички CSS пропъртита за рамки
Пропърти
Описание
border
Задава всички border пропъртита в една декларация
border-bottom
Задава всички пропъртита на долната част на рамката с една декларация
border-bottom-color
Задава цвят на долната рамка
border-bottom-style
Определя стила на долната рамка
border-bottom-width
Задава ширина на долната рамка
border-color
Задава цвят на цялата рамка
border-left
Всички пропъртита на лявата рамка в една декларация
border-left-color
Как се задава цвят на лявата рамка
border-left-style
Задаване на стилове на лявата рамка
border-left-width
Ширина на дясната част на рамката
border-right
Декларация със всички рамкови пропъртита наведнъж
border-right-color
Задаване на цвят на дясната рамка
border-right-style
Стилизиране на дясната рамка
border-right-width
Задаване на ширина на дясната рамка
border-style
Задаване на стил на рамката
border-top
Всички декларации за горната част в едно пропърти
border-top-color
Задава цвета на горната рамка
border-top-style
Задава стиловете на горната рамка
border-top-width
Задава ширината на горната рамка
border-width
Деклариране на ширина на четирите рамки
В този урок ще научим как да стилизираме HTML списъци елементите в CSS и как да определяме и задаваме различните изгледи, как да стилизираме списъци.
В този урок ще научим как да стилизираме текст със CSS. Как се форматира текст в HTML елемент с помощта на CSS.