Կայքի հատկապես կարևոր տարրերը շեշտելու համար վնաս չէր պատճառի օգտագործել դրա համար նախատեսված բոլոր տեսակի CSS ոճերն ու հատկությունները: Իհարկե, պետք չէ շատ անհանգստանալ տեքստով և ընդգծել այն, օրինակ ՝ համարձակ կամ շեղ տառերով, փոխել ֆոնը կամ շրջանակ կազմել տեքստի շուրջը: Բայց միշտ չէ, որ ներկայացված մեթոդներից մեկը հարմար է: Ենթադրենք, դուք ունեք տեքստ, որը պետք է տարանջատվի `իր իմաստային բեռի առանձնահատկությունների պատճառով: Այստեղ է, որ հայտնվում են HTML և CSS հատկությունները:
Ինչպես տեքստ կազմել CSS- ի միջոցով
Մեր ծրագիրն իրականացնելու համար մենք պետք է անդրադառնանք style.css ֆայլդրանում գրելով համապատասխան գույքը սահման... Սա կստեղծի տող տեքստի վերևում, ներքևում կամ որոշակի կողմում: Իր հերթին, կան մի քանի հատկություններ, որոնք պատասխանատու են գծի ցուցադրման համար, այն է.
- սահմանամերձ- տեքստի վերևում գտնվող հորիզոնական գիծ.
- սահման-աջ- ուղղահայաց տող տեքստի աջ կողմում.
- եզր-ներքև- տեքստից ներքև գտնվող հորիզոնական գիծ.
- սահման-ձախ- ուղղահայաց գիծը դեպի ձախ:
Ինչպես HTML- ում գիծ կազմել
Օգտագործելով CSS հատկությունները, կարող եք գրել բոլոր անհրաժեշտ արժեքները ՝ խմբագրելով HTML կոդը: Դա անելու համար հարկավոր է գնալ կայքի վարչական մաս: Ընտրեք հրապարակված նյութերից մեկը, տեքստային խմբագրիչը փոխեք HTML կոդի խմբագրման ռեժիմի և ավելացրեք CSS հատկություններ: Նմուշը կարելի է տեսնել ստորև:
Նշանակելով այս հատկությունները ՝ դուք կկարողանա՞ք ընդգծել ներկայացված նյութի, պարբերության կամ վերնագրի կարևորությունը:
Հրամանների համառոտ բացատրություն
- լայնությունը- գծի երկարություն;
- պինդ- ամուր գիծ;
- կետավոր- կետավոր գիծ:
Ոճերի հետ ավելի խորը ծանոթանալու համար խորհուրդ եմ տալիս կարդալ այս մեկը:
Անհրաժեշտ է հասկանալ, որ կայքի ծածկագրում փոփոխություններ կատարելու ընթացքում գծի տեսակը որոշող հատկությունները, հաստությունը և գույնը թվարկված են բացատով:
Այս մեթոդը մի քանի առավելություն ունի.
Հնարավորությունների լայն շրջանակ, որոնց օգնությամբ կարող եք գրեթե ցանկացած գիծ կազմել:
Բոլոր անհրաժեշտ փոփոխություններն ուղղակիորեն HTML կոդի մեջ կատարելու հեշտությունը: Սա մեծապես պարզեցնում է խնդիրը անփորձ կայքի ստեղծողների համար:
Ինչպես կատարել HTML պիտակի միջոցով ուղիղ հորիզոնական գիծ
Առաջին բանը, որի վրա կցանկանայի ձեր ուշադրությունը հրավիրել, այն է, որ այս պիտակը, չնայած html- ի բոլոր նրբություններին և սկզբունքներին, չունի փակման պիտակ: Այն կարող է օգտագործվել html կոդի ցանկացած վայրում ՝ պիտակների միջև
եւ.Պիտակի հատկանիշներ
- լայնությունը- պատասխանատու է գծի երկարության համար: Այն կարող է ճշգրտվել ինչպես տոկոսներով, այնպես էլ պիքսելներով:
- չափը- գծի հաստությունը: Նշված է պիքսելներով:
- գույնը- սահմանում է գծի գույնը:
- շարել- գծերի հավասարեցման համար պատասխանատու հատկանիշ: Իր հերթին, թիմը վերաբերում է դրան:
Հիմնականում հորիզոնական գծերը օգտագործվում են կայքի HTML էջերը զարդարելու համար ՝ տալով նրանց ավելի գրավիչ տեսք: Բայց նրանք կարող են նաև տեսողականորեն սահմանազատել հարևան հատվածների տեղեկատվությունը ՝ ընթերցողներին հարմարավետություն հաղորդելով այն ուսումնասիրելիս: Ընդհանրապես, հորիզոնական գծեր գծեք այնտեղ, որտեղ ձեզ հարկավոր է, վերջ:
Ինչպե՞ս կարող եմ հորիզոնական գիծ գծել:
HTML- ում հորիզոնական գծեր գծելու համար կա հատուկ պիտակ
... Ավելին, նա է արգելափակման պիտակ, այսինքն ՝ ստեղծում է գծերի ընդմիջումներ ինքն իրենից առաջ և հետո, ուստի գիծը միշտ ստացվում է առանձին գծի վրա: Ըստ այդմ, այն կարող է նշվել միայն պիտակների ներսում, որոնք կարող են պարունակել, օրինակ, բլոկային տարրեր կամ
... Բայց ինքս ինձ
չի կարող բովանդակություն ունենալ, քանի որ այն պարզապես չունի վերջնական պիտակ, այսինքն ՝ դատարկ է:HTML- ում հորիզոնական գծեր գծելու օրինակ
Հորիզոնական գծեր գծեք
Պարբերություն.
Պարբերություն.
Պարբերություն.
Արդյունքը դիտարկիչում
Պարբերություն.
Պարբերություն.
Պարբերություն.
Ինչպես տեսնում եք, տողերը շատ բարակ են, աննկարագրելի և գծված ամբողջ մատչելի լայնությամբ, այնպես որ այժմ մենք կսովորենք, թե ինչպես դրանք փոխել `ավելի գրավիչ տեսք ունենալու համար:
Ինչպե՞ս կարող եմ փոխել հորիզոնական գծերի գույնը, հաստությունը և լայնությունը:
HTML- ի հին տարբերակներում պիտակը
կային հատուկ հատկանիշներ, որոնց օգնությամբ հնարավոր էր փոխել հորիզոնական գծերի գույնը, հաստությունը և լայնությունը: Սրանք են համապատասխանաբար գույնը, չափը և լայնությունը: Բայց ավելի նոր տարբերակներում դրանք մերժվել են Cascading Style Sheets (CSS) - ի օգտին, այնպես որ, ինչպես կռահեցիք, մենք կրկին կօգտագործենք մեր նախընտրած ոճի հատկանիշը: Ընդհանուր շարահյուսությունն է.
style = "background: color">- գծի գույնը (ավելի ճիշտ `դրա ֆոնը):
style = "height: size">- գծի հաստությունը:
style = "width: size">- գծի լայնությունը:
ոճ = "ֆոն` գույն; բարձրություն `չափ; լայնություն` չափ "> - բայց կարող եք միանգամից նշել բոլոր պարամետրերը, պարզապես մի մոռացեք ստորակետի մասին (;):Գույնը կարող է նշվել անգլերեն անունով կամ գույնի HEX ծածկագրով, որին նախորդում է հեշը (#): Դե, դուք արդեն գիտեք այս մասին դասից տեքստի և ֆոնի գույնի փոփոխություն.
Բայց չափափոխման մասին ավելի մանրամասն կխոսենք: -Ից հիշու՞մ եք տառատեսակներ փոխելու ձեռնարկ, CSS- ում կա մոտ տասը միավոր, բայց գծի լայնությունըկարող է նշվել միայն պիքսելներով (px) և տոկոսներով (%), և հաստությունըընդհանրապես միայն պիքսելներով: Եթե դուք մատակարարում եք այլ միավորներ, ապա դա սխալ չի լինի, բայց զննարկիչները պարզապես անտեսում են դրանք:
Եթե չափերը նշում եք պիքսելներով, ապա գծի հաստությունը և լայնությունը կախված կլինեն այն մոնիտորի լուծումից, որի վրա դիտվում է ձեր կայքը (որքան բարձր է էկրանի լուծաչափը, այնքան բարակ և նեղ է գիծը):
Ինչպես ասացի, միայն գծի լայնությունը կարող է որոշվել որպես տոկոս: Տոկոսային չափերը միշտ կախված են և հաշվարկվում են ՝ ելնելով մայր տարայի տարրի չափից, որի ներսում տեղակայված է պիտակը
... Այս դեպքում ծնողի չափը ընդունվում է որպես 100%: Օրինակ, եթե տեղադրենք պիտակը
style = "width: 50%">ներքին տարր, ապա անկախ նրանից, թե ինչպես ենք մենք չափափոխում զննարկիչի պատուհանը կամ մոնիտորի լուծաչափը. գծի լայնությունը միշտ կլինի բլոկի լայնության կեսը.Հորիզոնական գծերի գույնը, հաստությունը և լայնությունը փոխելու օրինակ:
Փոխեք հորիզոնական գծերի գույնը, հաստությունը և լայնությունը:
Արդյունքը դիտարկիչում
Հորիզոնական գծերի դիրքի փոփոխություն
Երբ փոխում եք հորիզոնական գծի լայնությունը, հստակ տեսանելի է դառնում, որ դիտարկիչները միշտ այն տեղադրեն կենտրոնում: Եթե ցանկանում եք փոխել իր դիրքը, ապա պարզապես օգտագործեք ներսը
հատկանիշը հավասարեցնել հետևյալ արժեքներին.
- կենտրոն- տողը կենտրոնացված է (կանխադրված արժեք):
- ձախ- սեղմված ձախ եզրին:
- ճիշտ- սեղմված աջ եզրին:
Հորիզոնական գծերի հավասարեցման օրինակ:
Փոխեք հորիզոնական գծերի դիրքը:
Արդյունքը դիտարկիչում
Ինչպե՞ս կարող եմ հեռացնել գծի շուրջ սահմանը:
Նայեք այս ձեռնարկի առաջին օրինակին: Ձեր կարծիքով, ի՞նչ գույն ունեն այս տողերը: Եվ այստեղ դա սխալ է: Նրանք թափանցիկ են, ինչպես ցանկացած էջի տարրեր, որոնք չունեն ֆոնի գույն: Չե՞ք հավատում: Այնուհետեւ նայեք մի օրինակ, որտեղ մենք փոխեցինք տողերի գույնը: Հենց առաջինի համար մենք ոչ թե սահմանեցինք գույնը, այլ միայն ավելացրինք դրա չափը և արդյո՞ք այս գիծը թափանցիկ չէ: Այնպես, որ!
Հիմա կբացատրեմ: Լռելյայն, դիտարկիչները գծեր են գծում գծերի շուրջ, որոնք ստեղծում են եռաչափ էֆեկտ: Այսպիսով, երբ մենք չենք մեծացնում հորիզոնական գծերի հաստությունը, բրաուզերները մեզ ցույց են տալիս միայն այս շրջանակները, քանի որ գծի հաստությունն ինքնին 0px է:
Գծի շուրջ եզրագիծը հեռացնելու համար, որը հաճախ միայն փչացնում է արտաքին տեսքը, մենք նորից կկիրառենք ոճի հատկանիշը: Եվ գրված է այսպես.
Տնային աշխատանք.
- Ստեղծեք հոդված, բաժին և ենթաբաժին վերնագրեր: Կենտրոնացրեք դրանք բոլորը:
- Ամբողջ էջը վերնագրերի համար սահմանեք Arial և Courier:
- Թող ամբողջ էջի տառատեսակի չափը լինի դիտարկիչի կանխադրված չափի 85% -ը: Իսկ վերնագրերն ունեն էջի տառատեսակի համապատասխանաբար 145%, 125%և 110%:
- Առաջին վերնագրի տակ գրեք մի պարբերություն, երկրորդի տակ `երկար մեջբերում, իսկ երրորդի տակ` բանաստեղծություն: Եվ թող բանաստեղծությունը կենտրոնացած լինի էջի վրա:
- Ձեր մեջբերման մեջ ընդգծեք երեք համարձակ բառեր:
- Հոդվածի վերնագրի տակ գծեք երեք պիքսել կարմիր հորիզոնական գիծ էջի ամբողջ լայնությամբ:
- Բանաստեղծության վերևում և ներքևում գծեք մեկ պիքսել սև տող: Թող վերին տողի լայնությունը մոտավորապես հավասար լինի հատվածի լայնությանը, իսկ ստորին տողը `կիսով չափ:
- Հեռացրեք ավելորդ շրջանակները տողերից:
Հեղինակից.Ողջունում եմ ձեզ: Վեբ էջում մի տողում մի քանի բլոկներ ներկայացնելու անհրաժեշտությունը շատ հաճախակի խնդիր է, որը ծագում է դասավորության դիզայներների համար: Դա տեղի է ունենում գրեթե յուրաքանչյուր ձևանմուշի դասավորության ժամանակ, ուստի ամեն դեպքում, մենք բոլորս պետք է իմանանք և կիրառենք բլոկների վարքագիծը փոխելու հիմնական մեթոդները:
Նախքան ամենատարածված հնարքները դիտելը, ես կցանկանայի հիշել մի փոքր տեսություն: Վեբ էջի տարրերը բաժանված են բլոկային և ներկառուցված: Եվ նրանց միջև եղած տարբերությունը շատ պարզ է. Փոքրատառերը կարող են տեղակայվել մեկ տողի վրա, իսկ արգելափակվածները `ոչ: Իհարկե, տարբերություններն այսքանով չեն ավարտվում, բայց սա է հիմնական տարբերությունը: Արդեն բլոկները կարող են ունենալ վերին և ստորին լուսանցքներ (փոքրատառերը չունեն), և դրանց վրա կարող են կիրառվել ավելի շատ հատկություններ:
CSS- ում անընդմեջ բլոկներ շարելու հիմնական եղանակները
Մենք ոչինչ չենք բարդացնի, կան 3 հիմնական ուղիներ.
Փոխակերպեք բլոկները ներկառուցված տարրերի: Միևնույն ժամանակ, բլոկի հատկությունները կորչում են, ուստի այս տարբերակը գրեթե երբեք չի օգտագործվում:
Makeանկալի տարրերը դարձրեք բլոկ-ներդիր: Սա հատուկ տեսակ է, որի դեպքում տարրը պահպանում է իր հատկությունները, բայց միևնույն ժամանակ թույլ է տալիս մյուս բլոկների դիրքը կողք կողքի:
Լողացող տարրեր ՝ օգտագործելով float հատկությունը:
Եկեք անդրադառնանք այս տարբերակներին: Flexbox, աղյուսակային ցուցադրում և այլ կետեր հաշվի չեն առնվի: Այսպիսով, ենթադրենք, որ մենք ունենք 3 ենթավերնագիր:
Վերնագիր 1
Վերնագիր 2
Վերնագիր 3
Բնականաբար, բոլոր css հատկությունները պետք է գրված լինեն առանձին ֆայլում (style.css), որը պետք է միացված լինի html փաստաթղթին: Այս ֆայլում ես կգրեմ նվազագույն ոճ, որպեսզի մեր ենթավերնագրերը հեշտությամբ տեսանելի լինեն:
h3 (ֆոն ՝ #EEDDCD;)
h3 (
ֆոն ՝ #EEDDCD;
Ահա դրանք էջում.
Այնտեղ նրանք իրենց պահում են բլոկների պես: Նրանցից յուրաքանչյուրը գտնվում է իր գծի վրա, դրանց միջև կան նահանջներ: Եթե ցանկանում եք, կարող եք նաև սահմանել ձեր ուզած ցանկացած ներքին նահանջ և ընդհանրապես անել այն, ինչ ցանկանում եք:
Փոխակերպեք գծերի և անմիջապես ավելացրեք լցոնում: Դա անելու համար h3 ընտրիչին ավելացրեք հետևյալ հատկությունները.
ցուցադրում `ներկառուցված; լիցքավորում `30px;
Այս տեխնիկայի հետ կապված 2 հիմնական խնդիր կա. Առաջինը նվազագույն լիցքն է: Այն ձևավորվում է այն պատճառով, որ ծածկագրերի բլոկների միջև կա մեկ տարածություն, որը ձևավորում է այս խորշը: Եթե այս խնդիրը լուծման կարիք ունի, ապա կա երկու հիմնական տարբերակ.
HTML- ում դասավորեք անհրաժեշտ բլոկների ծածկագիրը մեկ տողում ՝ առանց բացատների
Սահմանեք բացասական լուսանցք -4 պիքսելից աջ: Այսքանը մեկ տեղ է զբաղեցնում:
Երկրորդ խնդիրն այն է, որ ցուցադրման հետ կապված խնդիրներ կարող են առաջանալ տարրերի տարբեր բարձունքների դեպքում: Ընդհանուր առմամբ, լողացող բլոկները լավագույն տարբերակն են: Ցուցադրման փոխարեն `inline-block, մենք գրում ենք սա.
Արգելափակում է շրջանակի օգտագործումը
Անմիջապես պետք է ասեմ, որ եթե դուք պատրաստվում եք օգտագործել ցանկացած սովորական css շրջանակ (օրինակ ՝ Bootstrap), ապա այնտեղ դեռ շատ ավելի հեշտ է: Բոլոր css- կոդերը, որոնք պատասխանատու են տարրերի դասավորության համար, արդեն գրված են, և ձեզ մնում է միայն ճիշտ դասեր սահմանել: Մնում է սովորել ցանցային համակարգը և առանց չափազանց դժվարության կարող եք ստեղծել արձագանքող բազմասյունանոց ձևանմուշներ: Առնվազն դա շատ ավելի հեշտ կլինի, քան զրոյից css գրել:
Codeրոյից ծածկագիր գրելու ևս մեկ մարտահրավեր է առաջանում հենց այն ժամանակ, երբ անհրաժեշտ է արձագանքող դիզայն: Իհարկե, դուք կարող եք դա ինքներդ իրականացնել ՝ ունենալով մեդիա հարցումներ, բայց դա շատ ավելի դժվար կլինի, եթե ունեք բարդ ձևանմուշ:
Օրինակ, երբ դուք պետք է ունենաք 4 սյունակ մեծ էկրաններին, 3 միջին և 2 բջջային հեռախոսների վրա: Bootstrap- ի նման շրջանակների օգնությամբ, ավելի ճիշտ ՝ դրա ցանցի միջոցով, դա իրականացնելու համար պահանջվում է ընդամենը մի քանի րոպե:
Թեմայի սահուն փոխանցումը Bootstrap- ի շրջանակին ՝ ես ևս մեկ անգամ կնշեմ, որ եթե դուք կանգնած եք բարդ արձագանքող ձևանմուշ ստեղծելու առաջադրանքի առջև, ապա ցանցը չօգտագործելը պարզապես մեղք է: Դա անելու համար ձեզ նույնիսկ պետք չէ միացնել շրջանակի ամբողջական տարբերակը. Կարող եք հարմարեցնել այն և այնտեղ կանգ առնել միայն այն, ինչ ձեզ իսկապես անհրաժեշտ է:
Դուք կարող եք սովորել, թե ինչպես աշխատել շրջանակի հետ: Այնտեղ նույնպես բացատրվում է տեսությունը, բայց ամենակարեւորն այն է, որ պրակտիկա կա: Դուք կկառուցեք 3 արձագանքող ձևանմուշ և կստանաք հիանալի փորձ, որը թույլ կտա ձեզ կազմել կայքեր ՝ պատվիրելու կամ ձեր համար: Եվ եթե ցանկանում եք անվճար դիտել շրջանակի առավելություններն ու առանձնահատկությունները, ես առաջարկում եմ ձեզ ծանոթանալ Bootstrap- ի և պարզ դասավորության մեր հոդվածների շարքին: Մաղթում եմ ձեզ հաջողություններ դասավորության և առհասարակ կայքի կառուցման գործում:
HTML էջ ստեղծելիս դասավորությունը էական դեր է խաղում: Հատկապես, երբ մենք խոսում ենք տարբեր խորհրդանիշների և դեկորատիվ ձևավորման մասին. Այս փոքրիկ բաներն օգնում են ձեր էջի «լեզուն» դարձնել ավելի մատչելի և պարզ, ավելին ՝ դրանք էապես փոխում են նրա ընկալումն ու արտաքին տեսքը ընդհանրապես: Դիզայնի համար ամենակարևոր տարրերից մեկը հորիզոնական գիծն է, և հետագայում մենք ավելի մանրամասն կսովորենք, թե ինչպես աշխատել դրա հետ և ինչպես հորիզոնական գիծ կազմել html- ում:
Ինչ է հորիզոնական գիծը և ինչի համար է այն
HTML- ի հորիզոնական գիծը էջի ձևավորման տարր է, որը կատարում է մի շարք գործառույթներ.
- Դեկորատիվ... Օգնում է էջին ավելացնել գրավչություն:
- Բաժանում... Խթանում է տարբեր նշանակության տեղեկատվության արդյունավետ տարանջատումը:
- Ընդգծելով կամ ընդգծելով... Էջերի հյուրերի ուշադրությունը հրավիրում է անհրաժեշտ և ամենակարևոր տեղեկատվության վրա:
Դա հորիզոնական գիծն է, որը համարվում է մի շարք գործառույթներ իրականացնելու առավել մատչելի միջոց: Այն ստեղծելը շատ պարզ է, բայց արտաքնապես այն շատ եկամտաբեր է թվում: Html կոդի պարզ փոփոխություններով կարող եք կարգավորել.
- երկարություն;
- լայնություն;
- գույնի բնութագրեր;
- մեկ կամ մյուս եզրին հավասարեցում:
Նշենք, որ հորիզոնական գիծը վերաբերում է բլոկի տարրերին: Սա նշանակում է, որ այն զբաղեցնում է էջի նոր տող, և դրան հաջորդող տեքստը կգնա ստորև:
Ինչպես ստեղծել հորիզոնական գիծ HTML- ում
Կարող եք գիծ սահմանել ՝ օգտագործելով պարզ պիտակ ՝ hr եռանկյունի փակագծերում: Այն կարճ է «Հորիզոնական կանոն» բառի համար և սահմանում է դասական արտաքին պարամետրերը: Այն տարբերվում է շատ ուրիշներից նրանով, որ կարիք չունի վերջնական պիտակի և կարողանում է գոյություն ունենալ ինքնուրույն: Դուք կարող եք փոխել տարրի արտաքին բնութագրերը ՝ օգտագործելով պիտակի լրացուցիչ արժեքներ.
- Երկարություն... Եթե չեք ցանկանում, որ տողի երկարությունը տարածվի ամբողջ էջի վրա, ապա կարող եք ցանկալի չափը սահմանել պիքսելներով կամ տոկոսներով: Դա արվում է պիտակի մեջ «լայնություն» լրացուցիչ բառի և չակերտների «=» նշանից հետո նշված թվային երկարության ցուցիչի օգնությամբ:
Կարծես այսպիսին է. Օրինակ, եթե մեզ պետք է 100 պիքսել երկարություն, մենք նման պիտակ կդնենք ՝ hr width = "100
- Հավասարեցում... Հավասարեցումը հնարավոր է ձախ կամ աջ եզրերին, ինչպես նաև կենտրոնում: Այս գործառույթը վավեր է միայն այն դեպքում, եթե արդեն նշել եք լայնության պարամետրը, քանի որ ամբողջ էջի տողը չի կարող հավասարեցվել: Հավասարեցման համար սահմանեք լրացուցիչ հատկանիշ «հավասարեցնել» պիտակում և դրան ուղղություն ավելացրեք. Կենտրոն - կենտրոնի համար, ձախ - ձախ և աջ - աջ հավասարեցման համար:
Այս դեպքում պատրաստի պիտակը այսպիսի տեսք կունենա: Օրինակ, եթե մենք պետք է կենտրոնական հավասարեցում սահմանենք 150 պիքսել երկարությամբ հորիզոնական գծի համար, ապա պատրաստի պիտակը կունենա այս տեսքը ՝ hr align = "center" width = "150":
Նկատի ունեցեք, որ «հավասարեցում» ՝ հավասարեցման չափանիշը դրված է 1 -ին դիրքում, չնայած հատկանիշը կախված է երկարության չափման լայնությունից:
- Լայնություն... Ընտրովի, կարող եք նաև նշել լայնությունը ՝ ստեղծելով համարձակ կամ բարակ ընդգծում: Այս չափանիշը կախված չէ որևէ բանից և կարող է օգտագործվել ինքնուրույն ՝ առանց երկարությունը կամ հավասարեցումը նշելու: Դրա համար մենք օգտագործում ենք պիտակի չափի հատկանիշը և պիքսելներով ցանկալի լայնությանը հավասար թվային արժեքը: Թիվը չակերտների մեջ նշվում է size հատկանիշից և «=» խորհրդանիշից հետո:
Այսպիսով, եթե մենք պետք է ստեղծենք 15 պիքսել լայնությամբ տող, մենք պետք է ստեղծենք հետևյալ պիտակը ՝ hr size = "15":
- Գույն... Այն սահմանվում է նաև որպես անկախ ցուցանիշ: Այն փոխելու համար օգտագործեք գույնի հատկանիշը գույնի անվան հետ համատեղ ՝ կոդի տեսքով կամ անգլերեն: Գույնը նշվում է «=» խորհրդանիշից հետո չակերտների մեջ:
Այսպիսով, ստանդարտ սպիտակ գծի պիտակը կարող է գրվել երկու եղանակով ՝ hr color = "#FFFFF" կամ hr color = "white"
Սևը կարող է ստեղծվել ՝ օգտագործելով # 000000 կոդ:
- Մի կողմ դրեք ստվեր... Եթե Ձեզ անհրաժեշտ է ստվեր չպարունակող տարր, ապա պիտակում պետք է օգտագործվի noshade հատկանիշը: Այն կարող է օգտագործվել միայնակ կամ այլ տարրերի հետ համատեղ: Այն օգտագործող ստանդարտ տողի պիտակը այսպիսի տեսք կունենա ՝ hr noshade
Տեսանյութի միջոցով հորիզոնական գիծ ստեղծեք
Եվ եթե ցանկանում եք տեղեկատվություն ստանալ ավելի տեսողական ձևաչափով, ապա հղում կատարեք հաջորդ տեսանյութին, որը մանրամասն նկարագրում է հորիզոնական գծով աշխատելու հնարավորությունները:
Հորիզոնական գծի պահանջվող չափերը որոշելուց հետո կարող եք կայքի էջերն այնպես ձևավորել, որ տեղեկատվությունը կառուցվածքավորվի և տեսողականորեն գրագետ ձևավորված լինի: Սա օգնում է այցելուներին ավելի հեշտ ընկալել ներկայացված տեղեկատվությունը և ձեր կայքն առանձնացնել մյուսներից:
Ողջույն բոլոր ընթերցողներին: Izամանակ առ ժամանակ կախարդները բախվում են այն խնդրի հետ, թե ինչպես կարելի է հորիզոնական կամ ուղղահայաց գիծ կազմել HTML- ի կամ CSS- ի միջոցով: Սա այն է, ինչ ես ձեզ այսօր կասեմ:
Գծեր CSS- ում
Գծեր գծելու մի քանի եղանակ կա: Նման եղանակներից մեկը CSS- ի օգտագործումն է: Ավելի ճիշտ ՝ Սահմանի օգնությամբ: Եկեք օրինակ վերցնենք:
Եվ ահա թե ինչ կլինի արդյունքը:
Հորիզոնական և ուղղահայաց գիծ, օգտագործելով css:
CSS- ի տողերը կարող են գծվել Border հայտարարության միջոցով: Եթե դուք պարզապես ցանկանում եք ուղղանկյուն ՝ ֆիքսված եզրագծի լայնությամբ, կարող եք պարզապես օգտագործել այս օպերատորը և դրան արժեք սահմանել: Օրինակ ՝ եզրագիծ ՝ 5 պիքս պինդ # 000000; կնշանակի, որ բլոկի սահմանները սև գույնով ունեն 5 պիքսել լայնություն:
Այնուամենայնիվ, եթե ձեզ հարկավոր է սահմանել ոչ բոլոր սահմանները, այլ միայն որոշները, ապա դուք պետք է ճշգրիտ գրեք, թե որ սահմաններն են անհրաժեշտ, և ինչ արժեք կունենա դրանցից յուրաքանչյուրը: Սրանք օպերատորներն են.
- border -top - սահմանում է վերին եզրագծի արժեքը
- սահման -ներքև - սահմանում է ներքևի եզրագծի արժեքը
- border -left - Սահմանում է ձախ եզրագծի արժեքը
- border -right - Սահմանում է աջ եզրագծի արժեքը:
Ուղղահայաց և հորիզոնական գիծ HTML- ում
Կարող եք նաև տողեր ստեղծել հենց HTML- ում: Դա անելու համար կարող եք օգտագործել hr պիտակը:
Այս դեպքում գծվելու է հորիզոնական գիծ ՝ մեկ պիքսել բարձրությամբ և ամբողջ լայնությամբ:
Բայց այս պիտակը կարող է որոշ արժեքներ սահմանել:
- Լայնություն- սահմանում է գծի լայնության արժեքը:
- Գույն- սահմանում է գծի գույնը:
- Շարել- սահմանում է հավասարեցումը ձախ, կենտրոն, աջ
- Չափը- սահմանում է գծի լայնության արժեքը պիքսելներում:
Hr պիտակի միջոցով կարող եք սահմանել նաև ուղղահայաց գիծ: Բայց այս դեպքում դուք ստիպված կլինեք կրկին դիմել ոճերի:
Այս դեպքում ուղղահայաց գիծ է գծվելու հարյուր պիքսել բարձրությամբ, մեկ պիքսել հաստությամբ և հինգ պիքսել խորշված:
Եզրակացություն.
Դե, հիմա դուք գիտեք, թե ինչպես կարող եք ուղղահայաց և հորիզոնական գիծ սահմանել: Գծերը կարող են սահմանվել ինչպես սովորական կայքերում ՝ HTML- ի միջոցով, այնպես էլ այն կայքում, որն օգտագործում է CMS, օրինակ ՝ WordPress, բայց այս դեպքում ձեզ հարկավոր կլինի անցնել HTML ռեժիմի:
Դե, եթե այլ հարցեր ունեք, տվեք դրանք մեկնաբանություններում:
