Брой No 8. Свойства на таблицата със стилове (css)

Възможно е да зададете всички тези свойства наведнъж.

Това е може би всичко за работата със списъци.

След това бих искал да ви кажа свойствата, които контролират границите на елемента.

Подчертавам, че това са границите на елемента, защото мнозина разбират границите - това означава само за таблици.

Така че граници или рамки могат да се задават не само за таблици, но и за маркери, например

Ето какво може CSS!

И така, помислете за свойствата.

Граница - определя вида на рамката

нито един - без рамка

пунктирана - пунктирана рамка

тире - пунктирана

твърдо - твърдо

Граничен стил - определя стила на рамката

нито един - без рамка

пунктирана - пунктирана рамка

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

тире - пунктирана

твърдо - твърдо

широчина на границата - задава ширината на границата

тънък - тънък

средно - средно аритметично

дебел - широк

х - числова стойност

граничен цвят - задава цвета на границата

Възможно е в CSS да зададете стила за отделните части на рамката (отгоре, отдолу, отдясно и отляво).

граница-горна ширина - ширина на горната част на рамката

граница-дъно-ширина - ширина на дъното на рамката

граница-лява-ширина - ширина на лявата страна на рамката

граница-дясна-ширина - ширина на дясната страна на рамката

Същото като за широчина на границата

контур-цвят-цвят - цвят на горната част на рамката

граница-дъно-цвят - цвят на дъното на рамката

граница-ляво-цвят - цвят на лявата страна на рамката

граница-десен-цвят - цвета на дясната страна на рамката

Цвят

граничен стил - стил на горната част на рамката

стил на границата отдолу - стил на дъното на рамката

граница вляво - стил на лявата страна на рамката

граница вдясно - стил на дясната страна на рамката

Същото като за граничен стил

Както при списъците, можете да зададете няколко свойства едновременно за рамката или за отделна част от рамката.

Тоест, ние задаваме дебелината, стила и цвета за цялата рамка. Редът на свойствата, препоръчвам да използвате това. (ВАЖНО)

Нека разгледаме още две свойства. Те са прости и ясни.

ширина - задава стойността на ширината за елемент

х - число, указващо ширината

Автоматичен - определя се от браузъра

х - число, указващо ширината в%

височина - задава стойността на височината за елемент

х - номер, показващ височина

Автоматичен - определя се от браузъра

х - число, указващо височината в%

Надявам се принципът да е ясен.

За да консолидирам материала, предлагам да направя малко упражнение, което можете да изтеглите от тук:

Той е малък и неусложнен, но на практика ще се научите да прилагате изследваните свойства и ще разберете къде и защо могат да се използват.

Там можете също да изтеглите файла с готовото упражнение и да разберете, ако нещо не се получи.

img.jpg - снимка с вашата задача

cir.jpg - снимка, която можете да използвате като маркер на списъка

index.html - изходният код на вашата работа (ако нещо се провали)

Най-добри пожелания, Андрей Бернацки.

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

PSD към HTML

Оформление на уебсайт в HTML5 и CSS3 от нулата

Подобни статии:

Вконтакте коментари:

Коментари във Facebook:

Коментари (25)

Благодаря ти, Андрей. Получавам редовно вашите уроци, опитвам се да разбера, но не се получава много добре. Е, определено ще овладея тази нова наука, само че не успявам толкова бързо, колкото при младите хора. Благодаря отново на Е.В.

Благодаря! Именно благодарение на тези уроци цялата картина за HTML и CSS постепенно ми става ясна ... Отдавна търся подобно нещо, вече изпробвах куп различни уроци, но само тук започвам да разбирам всички предимства на CSS. Благодаря ти много.

Андрей Много благодаря! От вашия урок става ясно, че възможностите на CSS са огромни! Всичко е достъпно и ясно написано! Перфектно! Благодаря.

Благодаря за полезните уроци.
Бих искал да задам въпрос малко извън темата.
Какъв плъгин използвате, за да подчертаете кода във вашия блог.
Има ли клопки в него?.
Благодаря Ви предварително за отговора.

Четох уроците с интерес. Въпреки че вече не съм начинаещ и знам нещо или две, това е просто интересно. И все още виждам нещо ново. Така че благодаря за упоритата работа. Бих искал да направя коментар за руския език. Уви, това е лошо в интернет, о, колко лошо. Но не всички наведнъж, постепенно ще се учим.
И така, думата „Така“ е написана на място, ако това е уводна дума и е отделена със запетая. Така че да тръгваме ...
А думите „Това е“ не са уводни и няма нужда да ги разделяте със запетая.
И тук "Редът на свойствата, препоръчвам" запетая също не е необходим.
В други уроци също имаше неточности, но вече забравих това. Това не е толкова важно, мнозина, включително и аз, имам много грешки при писане и клавиатурата не винаги пробива всичко необходимо, трябва да препрочетете това, което сте въвели. Но ми се струваше, че има систематично.

Не „на място“, а „заедно“
Не "нещо", а "нещо" ...
... затова учим руски и не сме умни

Отделна тема за дискусия. И ми се струва много важно. Правописът на сайтове, дори превъзходно направени, често намалява доверието в тези сайтове.

• Вместо поле - пустиня - портал за цветя Vash Sad!
• Вместо предговор
• 1 Анализ на броя на служителите
• Анатомия на протест - 2
• Вместо регистрация ще има регистрация