Ինչպես html կոդը բերել նորմալ ձևի: Էլեմենտների հավասարեցում HTML-ում: Օրինակ՝ Տեքստի ֆորմատավորում
Օգտագործելով ֆորմատավորման պիտակներ՝ կարող եք ընդգծել էջերի իմաստային նշանակություն ունեցող տեքստը, ստեղծել ձեռագիր տեքստեր և տեղադրել HTML փաստաթղթերնիշերը վերնագրով և ենթատեքստով, ինչպես նաև մեծացնել և նվազեցնել տառաչափը:
Ի՞նչ է իմաստաբանությունը:
HTML-ում իմաստաբանությունը փաստաթղթի բովանդակությանը իմաստ և կառուցվածք տրամադրելու պրակտիկա է՝ օգտագործելով համապատասխան պիտակը: Իմաստային կոդը նկարագրում է փաստաթղթի բովանդակության նշանակությունը՝ անկախ դրա ոճից կամ տեսքից: Իմաստային տարրերի օգտագործման մի քանի առավելություններ կան.
- իմաստային կոդը ուղղակիորեն ազդում է HTML կոդի քանակի վրա: Որքան քիչ կոդը, այնքան «թեթև» է փաստաթուղթը, ինչը նշանակում է, որ վեբ էջերն ավելի արագ են բեռնվում և ավելի քիչ են պահանջում պատահական մուտքի հիշողությունօգտագործողի կողմից: Կայքը դառնում է ավելի արագ և էժան.
- համակարգիչներ, էկրանի ընթերցիչներում համար թեգերը և դրանց հատկանիշները կարևոր են, համարժեք կարդացեք և հասկանաք վեբ էջի բովանդակությունը:
- իմաստային ծածկագիրմնացած բոլոր բաները հավասար են, որոնման արդյունքներում ավելի բարձր կհայտնվեն, քան ոչ իմաստային կոդով էջը:
Մանրապատկեր
Տեքստը համարձակ դարձնելու և դրա վրա ուշադրություն հրավիրելու համար մենք կօգտագործենք ներդիր տարր . Կան երկու պիտակներ, որոնք կարող են օգտագործվել տեքստը ընդգծելու համար ընդգծված, լայնատառ: պիտակներ Եվ . Կարևոր է հասկանալ դրանց միջև իմաստային տարբերությունը:
Նշել իմաստային առումով օգտագործվում է տեքստին ավելի մեծ նշանակություն տալու համար և, հետևաբար, ամենահայտնի տարբերակն է թավ տեքստ. Նշել , մյուս կողմից՝ իմաստային առումով նշանակում է տեքստի ոճական ընդգծում, ինչը միշտ չէ լավագույն ընտրությունուշադրության արժանի տեքստի համար։ Դուք պետք է գնահատեք տեքստի նշանակությունը, որի համար ցանկանում եք սահմանել համարձակությունը և ընտրել համապատասխան պիտակը: Թեև բրաուզերները դրանք ցուցադրում են ճիշտ նույնը, որոնման համակարգերկարող է տալ նրանց տարբեր իմաստէջը վերլուծելիս.
HTML կոդը պիտակներով Եվ :
Ուշադրություն.կտրուկ վայրէջք.
Սրանք բաղադրատոմսերն են ՕլիվիԵվ վինեգրետ.
Օրինակ՝ կարևոր և թավ տեքստ
- Ինքներդ փորձեք»
Ուշադրություն.կտրուկ վայրէջք. Սրանք բաղադրատոմսերն են ՕլիվիԵվ վինեգրետ.
Ուշադրություն.կտրուկ վայրէջք.
Սրանք բաղադրատոմսերն են ՕլիվիԵվ վինեգրետ.
Շեղ տեքստ
Շեղ տեքստի համար, որը դրանով իսկ շեշտադրում է, մենք կօգտագործենք ներդիր տարր . Ինչպես համարձակ տեքստային պիտակների դեպքում, կան երկու տարբեր պիտակներ, որոնք սահմանվում են շեղ տեքստ, յուրաքանչյուրն իր իմաստային իմաստով։
Նշել օգտագործվում է տեքստի մի հատվածն ընդգծելու համար. սա շեղատառերի ամենատարածված տարբերակն է: Մեկ այլ տարբերակ է օգտագործել պիտակը , որն օգտագործվում է պարզապես շեղ տեքստ ստեղծելու համար։
HTML կոդը պիտակներով Եվ :
Ի ես սիրում եմՀայրենիք!
Անուն Վիկտորիանշանակում է հաղթանակ:
Պիտակներ Եվ
Նշել Նորմալ տեքստի համեմատ մեկով նվազեցնում է տառաչափը: IN HTML չափըտառատեսակը չափվում է կամայական միավորներով 1-ից 7-ը, տեքստի միջին չափը, որն օգտագործվում է լռելյայնորեն, 3 է: Այսպիսով, ավելացնելով պիտակ կրճատում է տեքստը մեկ պայմանական միավորով: Նշել ընդհակառակը, սովորական տեքստի համեմատ մեկով ավելացնում է տառաչափը։
HTML կոդը պիտակներով Եվ :
Սա սովորական տեքստ է:
Սա ավելի փոքր տառերով տեքստ է:
Սա մեծատառով տեքստ է:
Օրինակ՝ կրճատված և մեծացված տառատեսակ
- Ինքներդ փորձեք»
Սա սովորական տեքստ է:
Սա ավելի փոքր տառերով տեքստ է:
Սա մեծատառով տեքստ է:
HTML պիտակ
Նշել օգտագործվում է տեքստը ընդգծելու կամ ընդգծելու համար՝ համատեքստում դրա համապատասխանության պատճառով: Լավ օրինակայն բառն է, որը օգտատերը փնտրում էր փաստաթղթում: Սովորաբար բրաուզերներում Ֆոնի գույնըտեքստը կոնտեյների ներսում ընդգծված դեղինովինչպես թանաքի մարկեր:
HTML պիտակ
Նշել օգտագործվում է փաստաթղթի նոր տարբերակում հեռացված տեքստը ընդգծելու համար: Այս ձևաչափումը թույլ է տալիս հետևել, թե ինչ փոփոխություններ են կատարվել փաստաթղթի վերանայված տեքստում: Բրաուզերները սովորաբար նշում են տեքստը կոնտեյների մեջ ինչպես խաչված
.
HTML պիտակ
Նշել նախագծված է ընդգծել տեքստը, որն ավելացվել է նոր տարբերակփաստաթուղթ։ Այս ձևաչափումը թույլ է տալիս հետևել, թե բովանդակության որ մասն է ավելացվել ընթացքում վերջին թարմացումըփաստաթուղթ։ Բրաուզերները սովորաբար նշում են տեքստը կոնտեյների մեջ .
HTML պիտակ
Նշել ցուցադրում է տեքստը բաժանորդագրության մեջ: Տեքստը գտնվում է տողի մնացած նիշերի բազային գծից ներքև և ունի փոքր չափս։ Նման տեքստը կարող է օգտագործվել գործնականում, օրինակ՝ տարբեր բանաձևեր գրելու համար։ ստորագրության մեջ .
HTML պիտակ
Նշել ցուցադրում է տեքստը վերնագրով: Տեքստը ավելի փոքր է և ավելի բարձր, քան տողի մնացած նիշերի հիմնական գիծը: Նման տեքստը գործնականում կարող է օգտագործվել, օրինակ՝ տարբեր բանաձևեր կամ ծանոթագրություններ գրելու համար վերնագրով .
Գծի ընդմիջումներ և հորիզոնական գծեր
Նշել
(տող թարգմանություն)
Ինչպես նախկինում տեսել եք, պիտակը
Թույլ է տալիս տրամաբանորեն և ֆիզիկապես տարանջատել տեքստի մի պարբերությունը մյուսից, բայց ի՞նչ, եթե ձեզ անհրաժեշտ է տեքստը պարբերության ներսում տեղափոխել նոր տող: Մեկ պիտակ նախատեսված է հատուկ այդ նպատակների համար:
. Այս թեգի և
Հատկանիշից հետո և առաջ նահանջի բացակայությունն է
. Սա թույլ է տալիս տեքստի հարակից տողերը միմյանց մոտ դնել: Փոխանցման վայրը ինքնուրույն որոշելու ունակությունը կարող է օգտակար լինել պոեզիա ձայնագրելիս կամ փաստաթղթում տարբեր տարրեր առանձնացնելիս: Ավելացնել տարր
ցանկացած տողում, որտեղ ցանկանում եք կոտրել տեքստի հոսքը և տեղադրել տողերի ընդմիջում:
Նշել
(հորիզոնական գիծ)
Հորիզոնական տողերը թույլ են տալիս երկար, պաշտոնապես բաց տեքստը բաժանել առանձին ենթաբաժինների: Վեբ փաստաթղթի հորիզոնական գծերը խաղում են նույն դերը, ինչ դեկորատիվ գծերը տպագիր հրատարակություններում: Հորիզոնական գիծ տեղադրելու համար օգտագործվում է մեկ պիտակ
. Այս բլոկի մեկ պիտակը թույլ է տալիս տեղադրել հորիզոնական գիծ, որի լայնությունը կա՛մ բեռնարկղի ամբողջ լայնությունն է, որում տեղադրված է պիտակը, կա՛մ բրաուզերի պատուհանի լայնությունը:
Օրինակ՝ գծերի ընդմիջումներ և հորիզոնական գծեր
- Ինքներդ փորձեք»
Այս տողերը բաժանված են միմյանցից՝ օգտագործելով պարբերությունը (p).
Սա առաջին պարբերությունն է։
Սա երկրորդ պարբերությունն է։
Սա գիծն է.
Այս տողերը բաժանվում են միմյանցից՝ օգտագործելով br պիտակը.
Մեր Տանյան բարձրաձայն լաց է լինում
Գնդակը գցեց գետը
HTML կոդը պիտակներով
,
,
,
,
:
Տեքստը պարունակում է բառը. հաջողություն.
Խոսք դժվարությունհանվել է տեքստից։
Խոսք հաղթանակտեքստին ավելացվել է.
Ջրի բանաձև՝ Ն 2Օ.
Քամու արագությունը՝ 20մ 3/վրկ.
Օրինակ՝ Տեքստի ֆորմատավորում
- Ինքներդ փորձեք»
Տեքստում մի բառ կա՝ հաջողություն։ Տեքստից հանվել է դժվարություն բառը։ Բառը ավելացվել է տեքստին։ Ջրի բանաձեւ՝ H 2 O. Քամու արագությունը՝ 20մ 3 /վրկ.
Տեքստը պարունակում է բառը. հաջողություն.
Խոսք դժվարությունհանվել է տեքստից։
Խոսք հաղթանակտեքստին ավելացվել է.
Ջրի բանաձև՝ Ն 2Օ.
Քամու արագությունը՝ 20մ 3/վրկ.
Առաջադրանքներ
Վերջնական առաջադրանք
Այս դասում դուք սովորեցիք տարրերի մասին, որոնք նախատեսված են փոքր արտահայտություններ և առանձին բառեր նշելու համար: Առանձնահատուկ ուշադրություն է դարձվել տեքստի տրամաբանական դասավորությանը` օգտագործելով թեգեր` նշելու բառի կամ արտահայտության կարևորությունը, և ոչ միայն տեսողական ձևաչափումը:
Ժամանակն է վերանայել ձեր սովորածը և կատարել հինգ պարզ առաջադրանքներ.
Իմաստային առումով ուժեղ բառ
- Ինքներդ որոշեք»
Ընդգծե՛ք «պրոֆեսիոնալ» բառը թավերով՝ դրանով իսկ մատնանշելով այս բառի հատուկ իմաստային նշանակությունը:
Դուք պետք է պրոֆեսիոնալ դառնաք ձեր ոլորտում
Դուք պետք է դառնաք պրոֆեսիոնալքո գործը
Շեշտը բառի վրա
- Ինքներդ որոշեք»
Շեշտեք «լիքը» բառը: Այս դեպքում տեսողականորեն այս բառը պետք է ցուցադրվի շեղատառով:
Դուք սիրում եք ձեր CSS կոդը նույնքան, որքան ես: Եթե այո, ապա, իհարկե, ձգտեք ապահովել, որ նա ոչ միայն իրեն պահի և իրեն լավ զգա, այլև գեղեցիկ տեսք ունենա։
Հուսով եմ, որ ստորև նկարագրված գործիքները կօգնեն ձեր կոդը մոտենալ իդեալականին:
1.Styleneat
Թերևս վերանայման մեջ ներկայացված ամենապարզ ծառայությունը:Գործիքը շատ տարբերակներ չունի.
- Տեսակավորել հատկությունները այբբենական կարգով
- Ընտրիչները դասավորել այբբենական կարգով (եթե «Ապահով կազմակերպում» է նշված, այս տարբերակը հասանելի չէ)
- Ձևաչափման ոճ ընտրելու ունակություն՝ բազմակողմ կամ մեկ տող
- Կարող է ներմուծման միջոցով միացված CSS ֆայլերը քաշել հիմնական ֆայլ և անխնա մշակել դրանք
- Դուք կարող եք մշակման կոդ ներկայացնել՝ օգտագործելով՝ տեքստային դաշտ, ֆայլ վերբեռնելու կամ CSS-ին հղում տրամադրելու համար
- Արդյունքը կարելի է ստանալ որպես CSS կոդ կամ վերբեռնել ֆայլ
2.FormatCSS
Չնայած իր սպառնալից տեսքին, գործիքը լավ է հաղթահարում իր գործառույթները, որոնցից այն շատ է:
Դուք կարող եք շատ բան կարգավորել.
- բացատների/ներդիրների/նոր տողերի տեղադրում,
- տեսակավորելով հատկությունները և ընտրիչի անունները,
- գույքի անունները և ընտրիչները փոքրատառի վերածելը և այլն:
3. CleanCSS
Բավական հզոր գործիք, որը մեզ տալիս է բազմաթիվ հնարավորություններ.
- Դուք կարող եք սնուցել CSS-ը՝ պատճենելով տեղադրելով «CSS-Code» դաշտում կամ որպես ոճի ֆայլի հղում։
- Արդյունքը կարող եք ստանալ որպես տեքստ կամ ֆայլ:
- Օգտագործողը կարող է ընտրել աղբյուրի ձևաչափման 4 տեսակ՝ կոդը կարող է օպտիմիզացվել ամենափոքր չափի համար կամ, ընդհակառակը, ավելի լավ ընթեռնելիության համար: «Պատվերով ձևանմուշ» դաշտում հնարավոր է տեղադրել ձևաչափման ձևանմուշ
- Կարողանում է համատեղել կանոնները և կրճատել հատկությունները մինչև կարճ ձև
- Անհրաժեշտության դեպքում հեռացրեք մեկնաբանությունները և անվավեր սահմանումները
- Ինչպես վերը նկարագրված ծառայությունները, այն ուրախությամբ կդասավորի այն, ինչ ձեր սիրտը ցանկանում է այբբենական կարգով և այն կվերածի ստորին/ մեծատառ
UPD> Մեկնաբանություններում նրանք առաջարկեցին հղում այս ծառայության երկվորյակին. CodeBeautifier. Գործառույթների հավաքածուն գրեթե նույնական է CleanCSS-ին (ծառայությունն աշխատում է նաև CSSTidy-ով):
4. ProCSSor
Իմ փորձառու կարծիքով, դա ամենահարմարն է այս վերանայում ներկայացված բոլորից:
Ծառայությունը ողջունում է օգտվողին հաճելի ինտերֆեյսով և շատ պարզ թռուցիկ խորհուրդներով, որոնք թույլ են տալիս արագ հասկանալ կարգավորումները:
Ինչպես ցանկացած իրեն հարգող գեղեցկացուցիչ, ProCSSor-ը մեզնից կընդունի կոդը մուտքագրման դաշտում՝ ֆայլի կամ հղման տեսքով: Այն արդյունքը կուղարկի դիտարկիչին և կցուցադրի ֆայլը ներբեռնելու հղում:
Գործիքը բավականաչափ կարգավորումներ ունի՝ գրեթե ցանկացած օգտատիրոջ գոհացնելու համար, դրանք թվարկելն այնքան էլ իմաստ չունի. ավելի լավ է անմիջապես փորձել:
Ծառայության հաճելի առանձնահատկությունն է ձեր կարգավորումները պահպանելու ունակությունը, որպեսզի հաջորդ անգամ կարողանաք բաց թողնել կարգավորումների քայլը և անմիջապես անցնել մաքրման գործընթացին:
Մեկ այլ գրավչություն - ProCSSor-ը տրամադրում է API, փաստաթղթերին կարող եք ծանոթանալ այստեղ՝
Տեքստի հավասարեցումը որոշում է այն տեսքըև պարբերության եզրերի կողմնորոշումը և կարող է լինել ձախ, աջ, կենտրոնացված կամ հիմնավորված: Աղյուսակում Նկար 1-ում ներկայացված են տեքստի բլոկի հավասարեցման տարբերակներ:
| Ձախ հավասարեցում | Աջ հավասարեցում | Կենտրոնական հավասարեցում | Հիմնավորում |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Ամենատարածված տարբերակը ձախից հավասարեցված է, որտեղ ձախ կողմի տեքստը մղվում է դեպի ծայրը, մինչդեռ աջ կողմի տեքստը մնում է ատամնավոր: Աջ և կենտրոնական դասավորությունը հիմնականում օգտագործվում է վերնագրերում և ենթավերնագրերում: Նկատի ունեցեք, որ հիմնավորում օգտագործելիս տեքստի բառերի միջև կարող են մեծ բացատներ առաջանալ, ինչը այնքան էլ գրավիչ չէ:
Պարբերության պիտակը սովորաբար օգտագործվում է տեքստի հավասարեցում սահմանելու համար
align հատկանիշով, որը սահմանում է հավասարեցման մեթոդը: Հնարավոր է նաև տեքստի բլոկը հավասարեցնել պիտակի միջոցով
| HTML կոդ | Նկարագրություն |
|---|---|
| Ավելացնում է տեքստի նոր պարբերություն, որը լռելյայնորեն հավասարեցված է ձախ կողմում: Փոքր ուղղահայաց նահանջները ավտոմատ կերպով ավելացվում են պարբերություններից առաջ և հետո: | |
Տեքստ |
Կենտրոնական հավասարեցում. |
Տեքստ |
Ձախ հավասարեցում. |
Տեքստ |
|
Տեքստ |
Լայնության հավասարեցում. |
| Անջատում է տողերի ավտոմատ փաթաթումը, նույնիսկ եթե տեքստն ավելի լայն է, քան դիտարկիչի պատուհանը: | |
| Տեքստ |
Թույլ է տալիս դիտարկիչին ճեղքել գիծը նշված վայրում, նույնիսկ եթե պիտակ է օգտագործվում |
Տեքստ
|
Կենտրոնական հավասարեցում. |
Տեքստ
|
Ձախ հավասարեցում. |
Տեքստ
|
Աջ հավասարեցում. |
Տեքստ
|
Լայնության հավասարեցում. |
Էլեմենտների ձախ հավասարեցումը սահմանված է լռելյայն, ուստի կարիք չկա այն կրկին նշելու: Այսպիսով, align=«ձախ»-ը կարելի է բաց թողնել:
Տարբերությունը պարբերության միջև (պիտակ
) և հատկորոշել
Align հատկանիշը բավականին ունիվերսալ է և կարող է կիրառվել ոչ միայն հիմնական տեքստի, այլև նման վերնագրերի նկատմամբ
. Օրինակ 1-ը ցույց է տալիս, թե ինչպես կարելի է սահմանել հավասարեցումը նման դեպքում:
Օրինակ 1. Տեքստի հավասարեցում
Ինչպե՞ս բռնել առյուծ.
Կոպիտ ուժի մեթոդ
Մենք անապատը բաժանում ենք մի շարք տարրական տարածքների, որոնց չափերը համընկնում են առյուծի ընդհանուր չափերի հետ, բայց ավելի փոքր են, քան վանդակի չափերը։ Հաջորդը, պարզ որոնմամբ մենք որոշում ենք այն տարածքը, որտեղ գտնվում է առյուծը, որն ինքնաբերաբար հանգեցնում է նրան բռնելու:
Դիխոտոմիայի մեթոդ
Անապատը երկու մասի ենք բաժանում։ Մի մասում առյուծ է, մյուսում՝ չկա։ Վերցնում ենք այն կեսը, որում գտնվում է առյուծը և նորից կիսում ենք։ Սա կրկնում ենք այնքան, մինչև առյուծը բռնվի։
Օրինակի արդյունքը ներկայացված է Նկ. 1.
Բրինձ. 1. Հավասարեցնել տեքստը աջ և ձախ
IN այս օրինակումՎերնագիրը հավասարեցվում է դիտարկիչի պատուհանի կենտրոնին, ընդգծված պարբերությունը հավասարեցվում է աջ կողմում, իսկ հիմնական տեքստը հավասարեցվում է ձախ կողմում:
HTML գեղեցկացնող և ձևաչափող
Բեռնել URL Բեռնել URL
HTML ձևաչափող
Մուտքագրեք ձեր խառնաշփոթ, փոքրացված կամ խճճված HTML-ը վերևի դաշտում՝ այն մաքրելու և գեղեցիկ դարձնելու համար: Վերոնշյալ խմբագիրը պարունակում է նաև օգտակար տողերի համարներ և շարահյուսական ընդգծում: Գոյություն ունեն բազմաթիվ տարբերակներ՝ գեղեցկացուցիչը հարմարեցնելու ձեր անհատական ձևաչափման նախասիրություններին:
Ե՞րբ եք օգտագործում HTML Viewer, HTML Formatter, HTML Formatter
Հաճախ HTML գրելիս ձեր նահանջը, տարածությունը և այլ ձևաչափումները կարող են մի փոքր անկազմակերպ դառնալ: Նաև սովորական է մի քանի մշակողների համար աշխատել մեկ նախագծի վրա, որոնք ունեն տարբեր ձևաչափման տեխնիկա: Այս գործիքը օգտակար է ֆայլի ձևաչափումը համահունչ դարձնելու համար: Նաև սովորական է, որ HTML-ը մինիֆիկացվի կամ մշուշոտվի: Դուք կարող եք օգտագործել այս գործիքը, որպեսզի այդ կոդը գեղեցիկ և ընթեռնելի տեսք ունենա, որպեսզի այն ավելի հեշտ լինի խմբագրել:
Օրինակներ
Ստորև բերված փոքրացված HTML-ը.
Դառնում է այսպես գեղեցկացած.
Ձևաչափման հիմնական խնդիրն է տեքստը դարձնել ընթեռնելի և հասկանալի իր կառուցվածքով։ Կան նույնիսկ ամբողջական ուղեցույցներ այն մասին, թե ինչպես ձևավորել կոդերը, որտեղ նկարագրված են մանրամասներ, ինչպիսիք են բացատների քանակը կամ գանգուր փակագծերի հետքերը: Իրականում ամեն ինչ շատ ավելի պարզ է. բավական է, որ կոդը տեսողականորեն ընթեռնելի լինի, իսկ բացատները կամ աղյուսակները աննշան խնդիր են:
Այնուամենայնիվ, այն կետը, որը ես ուզում եմ նշել, այն է, որ եթե դուք պատրաստվում եք կոդ փակցնել այլ մարդկանց համար, դուք պետք է հավատարիմ մնաք ինչ-որ «բազային ստանդարտին»:
Արգելափակման լիցք
Յուրաքանչյուր ներդիր բլոկ պետք է ունենա ավելի շատ ձախ լուսանցք, քան իր մայրը:
Այսինքն, մենք կառուցում ենք պիտակների տեսողական հիերարխիա, որը հեշտ է նավարկելու համար: Համեմատեք «հարթ ոճի» հետ.
Ժամանակակից տեքստային խմբագիրներՕրինակ, Notepad++-ը Enter-ի միջոցով ավտոմատ կերպով կատարում է նման նահանջ, որն ամբողջությամբ վերացնում է դրանք ձեռքով դասավորելու խնդիրը: Սովորաբար կոդավորողները սկզբում ստեղծում են բացման և փակման թեգ, և միայն այնուհետև այն բաժանում են Enter-ի տողերի: Սա ապահովում է, որ բացվող պիտակը միշտ ունենա փակման պիտակ:
«Փակող» բլոկներ
Ձեր կոդի մեջ կարող է լինել մի իրավիճակ, երբ բլոկները միշտ անմիջապես հաջորդում են մեկը մյուսին: Այս դեպքում դուք պետք չէ դրանք բաժանել միմյանց միջև և լրացուցիչ նահանջ մի արեք:
Այս օրինակում div.layout-center-wrap-ը միշտ պարունակում է div.layout-wrap-ի անմիջական զավակ առանց ընդմիջման: Նման բլոկները կարող են տեսողականորեն դիտվել որպես մեկ: Ահա ևս մեկ օրինակ, որտեղ բլոկները կարող են տեղադրվել նույն մակարդակի վրա:
Այստեղ գլխավորն այն չէ, որ չափն անցնի. չպետք է 2-3 բլոկից ավելի տեղադրեք մեկ տողի/մակարդակի վրա: Եթե բլոկների միջև տեղադրվում է տեքստ կամ ծածկագիր, ապա դրանք անպայման պետք է տեղադրվեն տարբեր տողերի վրա:
Այս ձևաչափումը հարմար չէ: Ճիշտ ճանապարհը կլինի.
Բացատ կամ ներդիր
Կարևոր չէ: Օգտագործեք այն, ինչ ձեզ ամենաշատն է դուր գալիս: Որքան գիտեմ, գրեթե բոլոր կոդավորողներն օգտագործում են աղյուսակը, պարզապես այն պատճառով, որ դրա համար անհրաժեշտ է միայն մեկ անգամ սեղմել Tab ստեղնը:
Եթե դա անում եք բացատներով, ապա յուրաքանչյուր նահանջի համար պետք է սեղմել 4 բացատ: Ընդհանուր խնդիրն այն է, որ սխալմամբ կարող եք սեղմել ոչ թե 4, այլ 3, 5 կամ այլ թվեր, և այս դեպքում պետք է կամ հաշվել ստեղնաշարի հարվածները, կամ տեսողականորեն վերահսկել արդյունքը:
Այս առումով աղյուսակը շատ ավելի «հուսալի» է։ Տեխնիկական տեսանկյունից կարևոր չէ՝ դա աղյուսակավոր է, թե բացատներ (HTML կոդը դեռ կսեղմվի):
Բազմաթիվ տարածություններ օգտագործելը աղյուսակավորման մոդելավորում է: Այսպիսով, այս հարցը կայանում է օգտագործելիության ոլորտում: Բայց, եթե որոշել եք բացատներ օգտագործել, ապա յուրաքանչյուր նահանջի համար պետք է լինի 4 նիշ, հակառակ դեպքում տեքստը կորցնում է ընթեռնելիությունը: Կան ուղեցույցներ, որտեղ խորհուրդ է տրվում տեղադրել 2 բացատ, բայց ինձ համար նման ծածկագիրը տեսողականորեն «անփույթ» է։
Մեծատառ եւ փոքրատառ
Եթե մենք խոսում ենք HTML-ի մասին, ապա բոլոր թեգերը պետք է լինեն փոքրատառերով։ Տեխնիկապես, էլի, նշանակություն չունի, բայց մեծատառերը դժվար է կարդալ։ Հետևաբար, բոլոր պիտակները և դրանց ատրիբուտները գրված են խիստ փոքրատառերով:
Եթե մենք խոսում ենք ծրագրավորման լեզուների մասին, ապա, որպես կանոն, դրանք մեծատառերի զգայուն են, ուստի մեծատառերը օգտագործվում են միայն անհրաժեշտության դեպքում։
Մեկ և կրկնակի մեջբերումներ
Գրեթե միշտ օգտագործվում են կրկնակի չակերտներ: JS կոդը HTML էջի մեջ ներդնելիս կարող է առաջանալ իրավիճակ, երբ պահանջվում են երկու տեսակի մեջբերումներ.
Այս օրինակում html հատկանիշը շրջանակված է կրկնակի մեջբերումներ, իսկ js կոդի ներսում արդեն օգտագործվում են միայնակները։ Անհնար է օգտագործել միայն մեկ տեսակ.
Հետևաբար, HTML-ում չակերտների կանոնը և CSS պարզՀիմնական չակերտները կրկնակի են, իսկ եթե բացակայում են, ապա օգտագործում ենք միայնակները։
Ընտրովի փակման պիտակներ
Այստեղ պարզ է. մենք միշտ սահմանում ենք այն: Սա վերաբերում է P, LI և այլ պիտակներին:
Կտրեք առանձին պիտակների վերջում
Մենք երբեք չենք անում: Սա հին XHTML ստանդարտի մասունք է: Այնքան սխալ.
Այնքան ճիշտ է.
Հատկանիշների կարգը պիտակներում
Դասարանը միշտ նշվում է առաջինը: Փաստորեն, դասավորությունը վերլուծելիս միշտ դիտվում են պիտակը և դրա դասերը, իսկ հետո մնացած հատկանիշները:
Այն ատրիբուտները, որոնք կարող են լինել միայնակ (ինչպես պահանջվում է), լավագույնս նշված են վերջինը.
Դատարկ դասերը/հատկանիշները պետք է հեռացվեն:
CSS ծածկագրի ձևաչափում
Դասարանը գտնվում է ք առանձին գիծև բացում է հատկության բլոկը (()):Հատկությունների երկու կետից հետո կա բացատ:Յուրաքանչյուր հատկություն դրվում է մեկ տողի վրա և միշտ հաջորդում է կետ-ստորակետը (;):
T-պիտակ (գույնը՝ սպիտակ; ֆոնը՝ կապույտ; տառաչափը՝ 0,75 մ; լիցք՝ 1px 10px; եզրագծի շառավիղը՝ 3px; )
Եթե միանգամից մի քանի դաս է նշված, ապա դրանք տեղադրվում են առանձին տողերի վրա.
Հոդված, մի կողմ, ստորագիր, վերնագիր, նավարկություն, բաժին (ցուցադրում՝ արգելափակում; )
Եթե դասը կարճ է և բաղկացած է մեկ հատկությունից, ապա այն կարող է տեղադրվել մեկ տողի վրա.
W100-max (առավելագույն լայնությունը՝ 100%; ) .w-hide (ցուցադրում՝ ոչ մեկը;) .w-auto (լայնությունը՝ ավտոմատ;)
Չափման միավորները չեն գրվում զրոյի համար (որտեղ դա նշանակություն չունի), 0px-ի փոխարեն պետք է պարզապես նշել 0-ը:
Զրո ունեցող կոտորակային թվերի համար ավելի լավ է 0.8em-ի փոխարեն նշել .8em: Այնուամենայնիվ, այս պայմանը պարտադիր չէ, և դուք կարող եք օգտագործել ցանկացած տարբերակ, գլխավորն այն է, որ լինի միատեսակ առնվազն մեկ css ֆայլի մակարդակում։
Եթե հատկությունն աջակցում է սղագրության նշումին, ապա այն կարող է օգտագործվել, օրինակ, լուսանցքի փոխարեն՝ 0 20px 0 20px; կարող եք նշել լուսանցքը՝ 0 20px;
Եթե գույնի արժեքը կարող է կրճատվել, ապա դա կարելի է անել, օրինակ, #FFAA88-ի փոխարեն նշեք #FA8: Այստեղ կարևոր կետԽնդիրն այն է, որ հաճախ այս գույնը ձեռքով չի դրվում, այլ պատճենվում է eyedropper ծրագրերից: Նրանք սովորաբար օգտագործում են ամբողջական 6 նիշանոց նշումը: Նաև որոշ ծրագրեր տալիս են փոքրատառեր, իսկ մյուսները՝ մեծատառեր՝ #FFAA88 կամ #ffaa88: Հետեւաբար, ցանկացած տարբերակ հարմար է գույնը սահմանելու համար: Ամեն անգամ տառերի մեծատառը ձեռքով փոխելը հիմարություն է։
Նամակների գույների անունները պետք է օգտագործվեն զգուշությամբ և լավագույնս օգտագործվեն միայն նախատիպերի ստեղծման փուլում: Ստացված ծածկագրում ավելի լավ է դրանք փոխարինել տասնվեցական արժեքներով, օրինակ՝ գույնի փոխարեն՝ կարմիր; դուք պետք է նշեք գույնը՝ #F00; . Այս մոտեցումը թույլ կտա փոխել գույնը անմիջապես կոդերի խմբագրիչում, ինչպիսին է Notepad++-ը (այն արձագանքում է # նշանին):
CSS հատկությունների հերթականությունը կարող է լինել ցանկացած: Դուք կարող եք դրանք պատվիրել ըստ ավելացման, կարող եք խմբավորել ըստ ֆունկցիոնալության: Տեխնիկապես պատվերը կարող է լինել ցանկացած, ուստի այստեղ կանոններ չկան:
Պետք է հասկանալ, որ CSS կոդի ձևաչափումը զուտ պայմանականություն է: Իրականում, նման կոդը կսեղմվի և մինիմացվի Sass կոմպիլյատորի կողմից: Եթե Ձեզ անհրաժեշտ է ֆորմատավորել այն դիտելու համար, ապա ոչ ոք դա չի անի ձեռքով. կան տասնյակ առցանց ծառայություններ՝ ցանկացած կարգավորումներով ծածկագիրը գեղեցիկ ձևաչափելու համար: Հետևաբար, CSS ձևաչափումը պահանջվում է միայն մշակման փուլում:
