CSS- ը կասկադային ոճի թերթ է, որը լեզու է ինտերնետային էջերի տեսքը նկարագրելու համար: CSS- ի հիմնական առավելություններից մեկը սեղանի դասավորությունը բլոկների դասավորությամբ փոխարինելու հնարավորությունն է:
Դա անհրաժեշտ է
HTML կոդի խմբագիր
Հրահանգներ
Քայլ 1
Ստեղծեք առաջին բլոկը: HTML ձևով այն նման կլինի div պիտակի ՝ 'block01' id- ով: Այստեղ block01 նույնացուցիչը ցույց է տալիս, որ CSS- ի նկարագրության մեջ այս բլոկի բոլոր հատկությունները նշված են # block01 ընտրողի համար:
Քայլ 2
Նկարագրեք բլոկը CSS- ում: CSS ոճերում նշեք նույնացուցիչի անունը (# block01) և գանգուր ամրացումների մեջ նկարագրեք դրա պարամետրերը `լայնությունը, դիրքը, օֆսեթը, ֆոնի գույնը և այլն: Օրինակ, դա կարող է թվալ այսպես. # Block01 {width: 150px; բարձրությունը `150px; դիրքը ՝ բացարձակ; վերև ՝ 0px; ձախ: 0px; ֆոն-գույն ՝ վարդագույն}: Այս նկարագրությունը ենթադրում է, որ տուփի երկարությունը 150 պիքսել է և լայնությունը `150 պիքսել, այն կոշտ դիրքում կլինի փաստաթղթի վերին ձախ անկյունում, և դրա ֆոնը կլինի վարդագույն:
Քայլ 3
Տվեք բլոկին հարաբերական դիրքավորում: Եթե CSS- ի նկարագրության մեջ օգտագործում եք ոչ թե բացարձակ, այլ հարաբերական դիրքավորում, ապա բլոկները կարող եք տեղադրել ոչ թե կոշտ կոճղերով կոորդինատների ցանց, այլ այլ արդեն գոյություն ունեցող բլոկների համեմատ: Դա անելու համար փոխեք ծածկագրի դիրքը. Բացարձակ; վերև ՝ 0px; ձախ ՝ 0px ըստ դիրքի ՝ հարաբերական; վերև ՝ 200 px; ձախ ՝ 100 հատ
Քայլ 4
Տվեք բլոկին կլորացում: CSS- ում սահմանի շառավղի հայտարարությունը պատասխանատու է դրա համար: Ձեր ոճաթերթին ավելացրեք հետևյալ կոդը ՝ border-radius: 8px: Այժմ բլոկը կլորացված անկյուններ կունենա: Եթե ուզում եք միայն որոշ անկյուններ կլորացնել, ապա դրանցից յուրաքանչյուրի համար նկարագրիր շառավիղը. Սահման-շառավիղ ՝ 8px 8px 0px 0px:
Քայլ 5
Տվեք բլոկին ինսուլտ: Բարակ գծով բլոկի ուրվագիծն ընդգծելու համար CSS- ի նկարագրությանը ավելացրեք հետևյալ ծածկագիրը. Border-top: 1px գծանշված սև: Այս հրահանգը նշանակում է, որ բլոկի եզրագիծը կլինի սեւ և կունենա մեկ պիքսել հաստություն: Այս դեպքում ուրվագծային գիծը ինքնին կցուցադրվի որպես գծանշված գիծ (գծավոր - կետավոր գիծ, կետավոր - կետեր, պինդ ՝ պինդ գիծ):
Քայլ 6
Սահմանեք բլոկի մնացած հատկությունները: CSS- ի նկարագրության մեջ նշեք, թե ինչ տառատեսակ պետք է օգտագործվի բլոկի ներսում գտնվող տեքստի համար, ինչ պետք է լինի տառատեսակի չափը, հավասարեցումը և խորացումը բլոկի եզրերից: Այս հատկությունները նկարագրված են տառատեսակների ընտանիք, տառատեսակի չափ, տեքստի ուղղում և լրացում սահմանումներում:
Քայլ 7
Դուք կարող եք օգտագործել բոց հատկությունը ՝ մեկ բլոկի մյուսի հոսքը հարմարեցնելու համար: Եթե այն դնեք «ձախ», ապա մնացած տարրերը կհոսեն ձախ բլոկի շուրջ, իսկ «աջ» ՝ աջ: Եթե բոցի արժեքը դնեք որպես «ոչ», բլոկի հավասարեցումը չի դրվի: CSS- ի հստակ հատկությունը խանգարում է բլոկի հոսքին աջ, ձախ կամ երկու կողմերին, և գերադասում է float հայտարարությունը:
