Առանց կասկադային ոճի թերթեր կիրառելու, ձեւի տարրերը կցուցադրվեն օգտագործված զննարկչի համաձայն եւ օպերացիոն համակարգ Լռելյայն պարամետրերը: բայց Օգտագործելով CSS: Թույլ է տալիս ստեղծել ձեր կայքի ձեւավորմանը համապատասխան ձեւեր:
Որոշում
Ձեւի տարրը, ինչպես ցանկացած այլ HTML տարր, կարող է սահմանվել CSS- ի միջոցով:
ՆկՂ 6.1, Լռելյայն տեսարան Firefoxi զննարկիչում
Պատկերված է ՆկՂ 6.1 Ձեւը զարդարված է Firefox զննարկչի կողմից Windows XP- ի ներքո օգտագործված լռելյայն պարամետրերին համապատասխան: Տարբեր պլատֆորմների տակ տարբեր զննարկիչներում դիտելիս դրա տեսակը կփոխվի: Ստորեւ բերված է բնորոշ ձեւ.
«http://www.w3.org/1999/xhtml»lang \u003d "en-us"\u003e
Այս ձեւի տեսքը կարող է փոփոխվել `ձեւերով` տարրերի համար.
Ձեւ (սահման. 1px կետավոր #AAAAAA; լիցք, 0 .5EM; Լայնություն, 100px; Գույն, # 00008B; ֆոնային գույնը. # add8e6; սահմանը `4 հատ. # 00008B;)
Այժմ ձեւը կարծես թե նկարում է: 6.2.
Քննարկում
Ինչպես երեւի կռահել եք, HTML տարրերի ոճերի սահմանում Ձեւ, մուտք, տեքստար եւ ընտրեք Դրանք կկիրառվեն իրենց յուրաքանչյուր օրինակին, որտեղ գտնվում է էջի վրա, որի հետ կապված է ոճային սեղանի ֆայլը: Դաշտային դաշտերի ձեւը փոխելու համար մենք կարող ենք օգտագործել շատ տարբեր հատկություններ: Օգտագործելով CSS, կարող եք կառավարել դաշտի գրեթե բոլոր ասպեկտները
:
Խորհուրդ
Ձեւաթղթեր եւ ֆոնի գույն, Ձեր կայքի այցելուների մի մասը կարող է վատացնել գույները վատ, իսկ մի մասը կարող է օգտագործել ձայնային զննարկիչ: Հետեւաբար, գույները երբեք չպետք է կատարեն կարեւոր գործառույթներ. Օրինակ, «դեղին դաշտերը լրացնելու համար պահանջվում է» հրահանգները, պետք է լինեն ամբողջական արգելքի ներքո:
Հաշվի առեք հատկությունների արժեքը ավելի մանրամասն.
Թիվ 4 լաբորատորիա
Կասկադի ոճի սեղաններ (CSS)
Աշխատանքի նպատակը
Բավարարել կասկադային սեղանների հայեցակարգը Ոճեր CSS:, ինչպես նաեւ դրանց օգտագործման գործնական հմտություններ ստանալը:
Տեսական տեղեկատվություն:
Internet Explorer. Ձեզ առաջարկում է ձեր ոճը, որը կոչվում է լռելյայն: Այս ոճը ներառում է սպիտակ մաքուր ֆոն, սեւ տառատեսակի գույնը, բոլոր հղումները ընդգծված են, կապույտ եւ այլն, ինչ, եթե ձեզ դուր չի գալիս այս ամենը: Դուք արդեն գիտեք, թե ինչպես ուղղակիորեն փոխել տարբեր ատրիբուտները: Նույնիսկ եթե նույն առարկաները նույնն են, դուք արդեն գիտեք, թե ինչպես կիրառել դասերը: Բայց կա եւս մեկ հնարավորություն: Փաստաթղթի ամբողջ ոճը նշելու համար օգտագործվում են այսպես կոչված հիերարխիկ ոճի սեղաններ (Cascade Style Sheets - CSS), որոնք տարբեր օբյեկտների հատկությունների մի շարք են: Ինչ-որ բան, որը նրանք նման են դասերի, բայց եթե դասը ստեղծվի փաստաթղթի ներսում եւ կարող է կիրառվել, եւ գուցե ոչ, ապա CSS- ը, եթե այն կապված է, դրա մեջ գտնվող տեղադրումները ազդում են փաստաթղթում գտնվող բոլոր օբյեկտների վրա:
Ներածություն CSS- ին:
CSS- ը շատ նման է դասերին, միայն այն տարբերությամբ, որ ոճը նկարագրված է նրանց մեջ արդեն հայտնի օբյեկտի համար: Տեսողական օրինակով ստուգեք ձեր սենյակը այժմ (Գրասենյակ, սրահ ...), որում դուք եք: Իհարկե, կտեսնեք շատ տարբեր իրեր (սեղան, աթոռ, պատուհան, համակարգիչ): Այս օբյեկտի օբյեկտներից յուրաքանչյուրն ունի բնութագրեր, եւ դուք պետք է կազմեք այս կետերի ցուցակը եւ դրանց բնութագրերը: Գուցե դուք կունենաք որեւէ բան հետեւյալ կերպ.
Աղյուսակ.
Շագանակագույն գույն
Նյութ - փայտե
Համակարգիչ.
Սպիտակ գույն
Նյութ - պլաստմասսա
Նպատակը `աշխատանքի համար
Իհարկե, դուք կարող եք գնալ մեկ այլ ճանապարհ, բայց միայն CSS- ն է կազմվում, թե որտեղ, օբյեկտների փոխարեն, առարկաները դուրս են գալիս, եւ դրանց բնութագրերը մի փոքր այլ են: Օրինակ, ահա նման փաստաթղթի հատվածը.
Մարմին:
{
Նախապատմության գույն. RGB (255,255,153);
Գույն, RGB (51,51,153);
}
H3.
{
Գույն, RGB (255,0,0);
Տառատեսակ-ընտանիք. Arial, Helvetica;
}
Այստեղ հարցնում են, թե ինչպիսին կլինի մարմնի եւ H3 Element- ի ոճը: Այն ընտրանքները, որոնք լռելյայն չեն նշվում:
CSS- ի ստեղծումը հատուկ ջանք չի պահանջում եւ կարող է իրականացվել պարզ նոթատետրում, չնայած այդ նպատակների համար եւ գոյություն ունի Հատուկ ծրագրերՀեշտացնել աշխատանքը եւ հստակ ցույց տալ, թե ինչպես ապագա փաստաթուղթը նման կլինի այս ոճը: Փնտրեք ձեր սկավառակի կամ ծանոթների նման ծրագրերը:
2.2.Փաստաթղթում ոճային աղյուսակի ստեղծում
CSS միացնելու երկու եղանակ կա: Առաջինը փաստաթղթի սկզբում այն \u200b\u200bոճային տարրի մեջ դնելն է, որպես դաս: Դա արվում է այսպիսին (օրինակ 1).
Այս փաստաթուղթը
Օգտագործում է ոճի սեղաններ
Այս օրինակում էկրանին կտեսնեք երկու տող, որոնք բաղկացած են երկու առարկայից, H3 եւ H3: Տեսեք, որում ներառվել է Internet Explorer- ի լռելյայն ոճը: Բայց մենք օբյեկտում որեւէ հրահանգ չենք կատարել իր ոճով: Այսպիսով, անկախ նրանից, թե որքան եք օժտել \u200b\u200bH3 եւ H3 օբյեկտները, նրանց ոճը միշտ կլինի այնպես, ինչպես նշված եք ոճաբանների սեղանի մեջ:
2. 3. Ոճային սեղան Առանձին ֆայլ
Եթե \u200b\u200bՁեզ դուր է գալիս ձեր ստեղծած ոճը եւ ցանկանում եք օգտագործել այն ձեր բոլոր փաստաթղթերում: Կամ ձեր փաստաթուղթը բաղկացած է մի շարքից HTML էջեր Եվ բոլորն էլ պետք է ունենան նույն ոճը, ձեզ հարկավոր չէ ամեն անգամ փաստաթղթի սկզբում մուտք գործել ոճային սեղանի տողեր:
CSS- ին վեբ էջին միացնելու երկրորդ ձեւը Ստեղծելով CSS: Առանձին ֆայլում եւ էջն ինքնին վերաբերում է այս ֆայլին: Այնուհետեւ էջում կարող եք գրել միայն մեկ տող եւ դեռ ոճով, այն կլինի ինչպես սահմանված է ոճաբանների սեղանի մեջ Արտաքին ֆայլ, Կարծում եմ, որ անհրաժեշտ չէ խոսել նման ձեւի օգուտների մասին:
Այսպիսով, սկզբում դուք ստեղծում եք սեղան, հետեւելով վերը նշված կանոններին: Այնուհետեւ դուք ավելացնում եք տարրը
Հնարավորություն տալ լարային ոճը նման է հետեւյալին.Հղումը նշանակում է Ընթացիկ էջ Տարրը, rel եւ տեսակը միացված են տարրը որպես ոճավորված սեղան նկարագրելու համար, բայց HREF- ն պարունակում է այն հասցեն, որով ֆայլը ձեր CSS- ի հետ է:
Դինամիկ փոփոխություն CSS.
Դուք կարող եք դինամիկ կերպով փոխել plug-in- ի անունը ոճաբանների սեղանի միջոցով, համապատասխանաբար, ինքնուրույն փոխելը: Ահա մի գործառույթ, ջահերի լեզվով, որը զանգահարելիս, եթե որեւէ ոճ արդեն կիրառվում է, հեռացնում է այն եւ միացնում է նորը:
Գործառույթի փոփոխություն_Սովորություն ()
(Եթե (փաստաթուղթ .Stylesheets.href! \u003d null)
Document.WSTYLESHETES.HREF \u003d "NEWSTYLE.CSS";
}
Եթե \u200b\u200bոճային աղյուսակը սահմանվում է HTML էջում, կարող եք ավելացնել նոր սահմանումներ, օգտագործելով AddRule գործառույթը (օբյեկտ, ոճ): Այն դեպքում, երբ օբյեկտը օբյեկտ է, եւ ոճ, համապատասխանաբար, ոճական կայանքներ: Ահա մի օրինակ, որում սեղմելուց հետո ստիլիզացված սեղանը փոխված է (օրինակ 2).
Այս փաստաթուղթը օգտագործում է ոճային թերթեր
Սա պարբերություն է: Կտտացրեք կոճակը, իր ոճը փոխելու համար
Էջը նման ծածկագրով վերանայելուց հետո կտեսնեք, թե ինչպես են տեղի ունենում ոճային փոփոխությունները `տեղադրումը ոճային թերթիկ ավելացնելով:
Դասեր
Դասը տեղադրելու եւս մեկ միջոց է, թե ինչպես պետք է տեքստը նայի էջը: Ըստ էության, դուք սահմանում եք մի շարք ոճեր, ինչպիսիք են գույնը, տառատեսակի հաստությունը, դրա չափը եւ այլն, բայց չեն նշանակում այն \u200b\u200bհատուկ պիտակ: Դասը այսպիսին է.
Այս օրինակը ստեղծում է երեք դաս, կանոնավոր, գերհզոր, հեղինակային իրավունքի: Ստորեւ ներկայացված է, թե ինչպես կիրառել այս դասերը տեքստի նավիգացիայի շերտում:
Superbig դաս
Դասի կանոնավոր
Դասի հեղինակային իրավունքի պաշտպանություն
Կարող եք նաեւ հատուկ կապել դասի պիտակը: Օրինակ:
Պսակել:
{
Տառատեսակի չափը, 16pt;
Տառատեսակ-քաշը `համարձակ;
}
P.small
(Տառատեսակի չափը `9PT;
Մարգին-ձախ. 5EM;
Մարգին-աջ, 5EM;
}
Ստորեւ ներկայացված է, թե ինչպես կիրառել դասը