Дар панҷ дақиқа танҳо як қуттиҳои CSS -ро эҷод кунед
Шумо шояд шунидед, ки ҷадвалҳои CSS ва HTML якҷоя намешаванд. Ин танҳо дуруст нест. Бале, бо истифода аз ҷадвалҳои HTML барои таҳкурсӣ, таҷрибаи беҳтарин, веб саҳифаҳои CSS-ро иваз мекунад, аммо ҷадвалҳо ҳанӯз аломати дуруст барои истифода кардани иттилооти ҷадвалӣ ба вебсайҳ аст.
Мутаассифона, чунки бисёре аз мутахассисони веб аз ҷадвалҳо фикр мекунанд, ки онҳо заҳролуданд, бисёре аз мутахассисон таҷрибаи каме бо ин унсури HTML омӯхтаанд ва мубориза бар зидди онҳо дар сайти интернетӣ кор мекунанд. Масалан, агар шумо ҷадвалро дар саҳифа дошта бошед, ва шумо мехоҳед сатрҳои дохилиро ба ҳуҷайраҳои ҷадвал илова кунед.
CSS Ҷадвалиҳои Сарҳади
Вақте, ки шумо CSS-ро барои илова кардани сарҳадот ба ҷадвалҳо, танҳо он сарҳадро дар дохили ҷадвал илова мекунад. Агар шумо мехоҳед, ки ба ҳуҷайраҳои инфиродӣ аз ин ҷадвал илова кунед, шумо бояд ба унсурҳои CSS дохил карда шавад. Шумо инчунин метавонед сатри HR-ро барои илова кардани сатрҳо дар дохили ҳуҷайраҳои шахсӣ истифода баред.
Барои татбиқи услубҳое, ки дар ин модда фаро гирифта шудаанд, шумо бояд дар як саҳифаи веб саҳифа дошта бошед. Пас, шумо бояд варақаи сабки ҳамчун варақи дохилӣ дар сарлавҳаи ҳуҷҷат эҷод кунед (шумо эҳтимол танҳо ин корро анҷом медиҳед, агар "сайти шумо" як саҳифа бошад) ё ба ҳуҷҷат ҳамчун варақаи стандартии берунӣ замима карда мешавад (ин ҳамон чизест, ки шумо агар сомонаи Шумо як саҳифаҳои гуногун бошад, ба шумо имкон медиҳад, ки ҳамаи саҳифаҳоро аз як варақи беруна сабт кунед). Шумо сабтҳоро ба лавҳаҳои дохилӣ ба варақаи сабки дохил кунед.
Пеш аз оғоз кардани шумо
Аввал шумо бояд қарор кунед, ки куҷо мехоҳед, ки рангҳо дар мизи шумо пайдо шаванд. Шумо якчанд вариант доред, аз ҷумла:
- Ҳамаи ҳуҷайраҳо барои ташкили шабака;
- Ҷойгир кардани хатҳои байни сутунҳо;
- Танҳо байни сатрҳо; ё
- Дар байни сутунҳо ё сатрҳои мушаххас.
Шумо инчунин метавонед сатрҳоро дар атрофи ҳуҷайраҳои шахсӣ ё дохили ҳуҷайраҳои шахсӣ ҷойгир кунед.
Чӣ тавр илова кардани линзаҳо дар атрофи ҳама ҳуҷайраҳо дар ҷадвал
Барои илова кардани сатрҳо дар атрофи ҳамаи ҳуҷайраҳо дар ҷадвалҳои худ, эҷод кардани чунин намуди сӯзишворӣ, дар поён ба лавҳаи намуди худ илова кунед:
Ин аст,
сарҳад: solid 1px сиёҳ;
}}
Чӣ тавр илова кардани линзаҳо байни танҳо сутунҳо дар ҷадвал
Барои илова кардани сатрҳо байни сутунҳо (ин хатҳои амудӣ, ки аз боло то поёни сутунҳои ҷадвалӣ меафзояд), ба қуттии таркиби худ илова кунед:
Ин аст,
сарҳад-чап: қулфи 1px сиёҳ;
}}
Пас, агар шумо намехоҳед, ки онҳо дар сутуни якум пайдо шаванд, шумо бояд синфҳоро ба он унвонҳо ва td илова кунед. Дар ин мисол мо тасаввур мекунем, ки мо дар ин ҳуҷайраҳо классикӣ надорем ва сарҳадро бо ин қоидаи махсуси CSS бартараф мекунем. Пас, дар инҷо HTML синфҳои зеринро истифода мебарем:
class = "no border">
Ва он гоҳ мо метавонем сабки зеринро ба лавҳаи статикӣ илова кунем:
.no-border {
сарҳад-left: none;
}}
Чӣ тавр илова кардани линзаҳо байни танҳо сатрҳои дар ҷадвал
Тавре, ки бо сатрҳои иловагӣ байни сутунҳо шумо метавонед, метавонед бо як услуби оддӣ илова кунед, ки ба варақи сабки шумо илова карда шудааст. Дар поён аз CSS ба сатри амудӣ байни ҳар як сатри сақфи мо илова карда мешавад:
тим {
сарҳади поёнӣ: 1px ранги сиёҳ;
}}
Ва барои ҷудошавӣ аз поён аз ҷадвал, шумо боз як синфро ба ин эроти он илова кунед:
class = "no border">
Саволҳои зеринро ба варақи сабки худ илова кунед:
.no-border {
border-bottom: none;
}}
Чӣ тавр илова кардани линзаҳо дар байни сутунҳои мушаххас ё сатрҳо дар ҷадвал
Агар шумо фақат хатҳои сатр ё сутунҳои махсусро мехоҳед, шумо бояд синфҳоро дар ин ҳуҷайраҳо ё сатрҳо истифода баред. Иловаи сатри байни сутунҳо нисбат ба сатрҳо хеле кам аст, зеро шумо бояд синфро ба ҳар як чашмак дар сутун илова кунед. Агар мизи шумо аз таври автоматикӣ аз CMS ба таври автоматӣ эҷод шуда бошад , ин мумкин аст имконнопазир бошад, аммо агар шумо дастхат кардани саҳифа дошта бошед, шумо метавонед барои дарсҳои иловагӣ ба талаботҳои синфҳои мувофиқ илова кунед.
class = "border-border">
Иловаи хатҳои байни сатрҳо хеле осонтар аст, чунки шумо метавонед танҳо классро ба сатр илова кунед.
class = "border-bottom">
Сипас, CSS ба лавҳаи сабки худ илова кунед:
.барои {
сарҳад-чап: қулфи 1px сиёҳ;
}}
.барои поёни {
сарҳади поёнӣ: 1px ранги сиёҳ;
}}
Чӣ тавр илова кардани линзаҳо даруни ҳуҷайраҳои шахсӣ дар ҷадвал
Барои илова кардани сатрҳо дар атрофи ҳуҷайраҳои инфиродӣ, синфро ба ҳуҷайраҳое, ки шумо мехоҳед сарҳадро илова кунед:
class = "border">
Ва баъд CSS-ҳои зеринро ба варақи сабки худ илова кунед:
.bb {
сарҳад: solid 1px сиёҳ;
}}
Чӣ тавр илова кардани линзаҳо дар дохили ҳуҷайраҳои шахсӣ дар ҷадвал
Агар шумо хоҳед, ки сатрҳои дохили мундариҷаро илова кунед, роҳи осонтарини ин кор бо усули уфуқӣ (
) аст.
Маслиҳатҳои муфид
Агар шумо камбудиҳоеро, ки дар сарҳадоти шумо ҳастанд, мебинед, боварӣ ҳосил кунед, ки услуби сарҳадиро дар мизи худ ҷойгир кунед. Дар поён ба лавҳаи намуди зерин илова кунед:
ҷадвали {
вуруди сарҳадӣ: вайрон шудан;
}}
Шумо метавонед ҳамаи CSS-и дар боло зикршударо аз даст нанамоед ва хосияти сарҳадро дар ҷадвали ҷадвали худ истифода баред. Вале ба назар мерасад, ки хароҷоти ӯ, аз он хориҷ карда нашуд, аз CSS хеле фарқ мекунад, чунки шумо танҳо дараҷаи сарҳадро муайян карда метавонед ва танҳо дар ҳамаи ҳуҷайраҳои ҷадвалӣ ё не вуҷуд дорад.