Випуск №8
Продовжимо вивчативластивості таблиць стилів css.
У цьому випуску ми познайомимося зі стилями, які дозволяютьформатувати списки, та розглянемо стилі для завдання різного видукордонів елементів.
Стилів форматуючих списків не так багато. Ось вони всі:
list-style-type - задає вигляд маркера для списку.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
none - без маркера
disc - маркер у вигляді кола
square - квадрат
decimal - арабські цифри
lower-alpha — малі латинські літери
upper-alpha — великі латинські літери
lower-roman — малі римські цифри
upper-roman — великі римські цифри
list-style-image — задає малюнок, який виступатиме у ролі маркера списку.
none — без зображення
list-style-position - визначає позицію маркера щодо списку
outside - маркер знаходиться поза списком
inside - маркер знаходиться у списку
Для прикладу запропоную такий варіант використання списків:
Єдине що попрошу зробити - це змінити якlist-style-position значенняoutside наinside. Щоб побачити різницю цей приклад не зовсім підходить. Запропоную таке:
Якщо вставити такий рядок у наш вищестоящийто можна зрозуміти для чого використовуютьoutside таinside.
Існує можливість задати відразу всі ці властивості.
Ось, мабуть, і все, що стосується роботи зі списками.
Далі що б я хотів вам розповісти - цехарактеристики управляючі межами елемента.
Наголошую, що саме межами елемента, тому що багато хто розуміє межі — означає лише в таблицях.
Так ось, межі, або рамки, можна ставити не тільки у таблиць, а й у тегів, допустимо
Ось що може CSS!
І так розглянемо властивості.
Border - визначає вид рамки
none - без рамки
dotted - рамка з точок
dashed - пунктирна
solid - суцільна
Border-style - визначає стиль рамки
none - без рамки
dotted - рамка з точок
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
dashed - пунктирна
solid - суцільна
border-width - задає ширину рамки
thin - тонка
medium - середня
thick - широка
x - числове значення
border-color - задає колір рамки
Існує в CSS можливість задавати стиль для готельних частин рамки (верхньої, нижньої, правої та лівої).
border-top-width - ширина верхньої частини рамки
border-bottom-width - ширина нижньої частини рамки
border-left-width - ширина лівої частини рамки
border-right-width - ширина правої частини рамки
Ті ж, що й у border-width 4
border-top-color - колір верхньої частини рамки
border-bottom-color - колір нижньої частини рамки
border-left-color - колір лівої частини рамки
border-right-color - колір правої частини рамки
колір
border-top-style - стиль верхньої частини рамки
border-bottom-style - стильнижній частині рамки
border-left-style - стиль лівої частини рамки
border-right-style - стиль правої частини рамки
Ті ж, що й для border-style
Як і списків, можна задавати відразу кілька властивостей для рамки, або окремої частини рамки.
Тобто ми для всієї рамки задали товщину, стиль і колір. Порядок проходження властивостей, рекомендую використовувати саме такий. (ВАЖЛИВО)
Розглянемо ще дві властивості. Вони прості та зрозумілі.
width - задає значення ширини елемента
x - число, що вказує ширину
auto - визначається браузером
x - число, що вказує ширину в %
height - задає значення висоти елемента
x — число, що вказує висоту
auto - визначається браузером
x - число, що вказує висоту в %
Сподіваюся, принцип зрозумілий.
Для закріплення матеріалу, пропоную зробити невелику вправу, яку ви можете завантажити тут:
Воно невелике і нескладне, проте ви на практиці навчитеся застосовувати вивчені властивості та зрозумієте, де і для чого їх можна застосовувати.
Там же ви можете завантажити файл із готовою вправою та розібратися, якщо щось не вийшло.
img.jpg - картинка з вашим завданням
cir.jpg — картинка, яку ви можете використовувати як маркер списку
index.html - вихідний код вашого завдання (якщо щось не вийде)
З повагою, Андрію Бернацькому.
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
PSD to HTML
Верстка сайту на HTML5 та CSS3 з нуля
Схожі статті:
Коментарі Вконтакте:
Коментарі Facebook:
Коментарі (25)
Дякую, Андрію. Я регулярно отримую Ваші уроки, намагаюся розібратися, але поки що виходить не дуже. Ну, нічого я обов'язково освою цю нову науку, тільки в мене виходить не так швидко, як молодь. Ще раз дякую Є.В.
Дякую!! Саме завдяки цим урокам у мене поступово прояснюється вся картина про HTML і CSS… Давно шукаю щось подібне, вже купу уроків перепробував, але тільки тут я починаю розуміти всі переваги CSS. Величезне спасибі.
Андрій Дякую велике! З Вашого уроку стає зрозумілим, що можливості CSS величезні! Все доступно та зрозуміло написано! Прекрасно! Дякую.
Дякую за корисні уроки. Хотілося б поставити питання трохи за темою. Яким плагіном ви користуєтеся, щоб підсвічувати код на вашому блозі. Чи є в ньому підводне каміння. Заздалегідь дякую за відповідь.
З цікавістю читаю уроки. Хоча я вже не новачок і дещо знаю, але цікаво. І дещо нове таки бачу. Тож дякую за працю. Хочу зробити зауваження щодо української мови. На жаль, з цим в інтернеті погано, ой як погано. Але не всі одразу, поступово навчимося. Так ось, слово «Отже» пишеться в місці, якщо це вступне слово і відокремлюється комою. Отже, поїхали... А слова «Тобто» не є вступними і комою їх відокремлювати не треба.. І ось тут «Порядок слідування властивостей, рекомендую» кома теж не потрібна. В інших уроках теж були неточності, але це я вже забув. Це не так важливо, у багатьох і в мене в тому числі дуже багато друкарських помилок, та й клавітура не завжди пробиває все що треба, доводиться перечитувати набране. Але мені здалося, що тут систематичне.
Не «у місці», а «разом» Не «щось що», а «щось»... … тому вчимоукраїнська мова і не розуміємо
Окрема тема для обговорення. І мені здається дуже важливою. Орфографія на сайтах, навіть чудово зроблених, часто знижує довіру до цих сайтів.