CSS Box: հանպատրաստից եւ ազդեցություն

Cascading Style թերթ (CSS) դրա ամբողջ տրամաբանական պարզությամբ, որպեսզի այն հնարավոր է ոչ միայն ստեղծել է տպավորիչ դիզայնի լուծում, այլ նաեւ տարրեր իրական գործողությունների, նախանձել կատարումը փաստացի օրենսգրքի:

Ցանկացած տեսողական կտրոնը HTML-ազդարարելով մի ուղղանկյուն տարածքը որոշակի կառուցվածքի եւ բովանդակության վերաբերյալ: Տարրը կազմում է ցուցում կոորդինատները, չափի, լիցք, գույնը, տառատեսակը, տառատեսակի ոճը, եւ այլն: Շրջանակ CSS տարր սահմանում է նրանց օկուպացված տարածք, այն գտնվում է դեպի ներս են իր սահմաններից վրա նշանակված սույն լայնությամբ:

շարահյուսություն նկարագրությունը

FIELD տեղաբաշխման տարրը նշված կոորդինատները հարաբերական է վերին ձախ անկյունում էջը (ձախ, վերեւ), չափը, հորիզոնական եւ ուղղահայաց ուղղություններով (լայնություն, բարձրություն): Բոլոր դիզայն եւ անիմացիոն տարրեր են կատարվում են զույգերով "սեփականության: արժեքը»:

Նկարագրությունը արվում է անմիջապես էջը կոդը տեղադրեք ոճը կամ առանձին ֆայլ, մատնացույց անելով նրա համար LINK հղում. շարահյուսություն:

#name {գույքը: Արժեքը; գույքը: Արժեքը; գույքը: Արժեքը; ...}

կամ

.անունը {գույքը: Արժեքը; գույքը: Արժեքը; գույքը: Արժեքը; ...}

Անունը, կարող է լինել նաեւ p, մարմինը, HTML, սեղան, TD ..., որ այն անունը, HTML, պիտակավորման թեգով: Կարող են ուղղակիորեն կապված նկարագրությամբ ոճով տարր.

Նախքան դուք կատարել իմ սեփական գրելու ոճը, չի խանգարի տեսնել, թե ինչպես է դա արվում է հայտնի կայքերից, պահելով էջը կոդը, կամ սեղմելով Ctrl-U դիտելու ուղղակիորեն բրաուզերի.

Հիմնական պարամետրերը

Իրականում CSS շրջանակ տարրը ներկայացված ոճը (սահմանային ոճ), գույն (սահմանային գույն), լայնությունը (սահման լայնությունը). Այն կարող է ամփոփել մեկ գույքի սահմանը. Դուք կարող եք նկարագրել յուրաքանչյուր շրջանակ սահմանը ինքնուրույն (սահմանային վերեւ, սահմանի ներքեւի, սահմանի ձախ, սահման աջ):

CSS շրջանակ նկարագրված է ընդհանուր կանոններով Cascading Style թերթ:

սահմանը: 3px;
սահմանային գույն, կարմիր;
սահմանային ոճը: կրկնակի dashed կուռ կետավոր:

Այս նկարագրությունը սահմանում սահմանային լայնությունը 3 պիքսել, գունավոր, կարմիր, ոճի կողմերը, վերին կողմում կրկնակի, աջ - dashed, պինդ ներքեւում, ձախ - կետում:

սահմանային լայնությունը: 1px 2px 4 տր 8px.
սահմանային գույն: կապույտ;
սահմանի ոճը: dotted.

Այստեղ է, որ չափերը յուրաքանչյուր կողմում են նաեւ հերթականությամբ վերեւից, ժամացույցի սլաքի ուղղությամբ, գույնի կապույտ, եւ ոճը - Spot.

սահմանային գույն: կապույտ, կարմիր, կանաչ, սեւ,

Այս ճշգրտման, անհատապես նշված գույնը յուրաքանչյուր կողմում. սահմանը գույքը կարող է ներառել բազմաթիվ պարամետրեր, եւ անկյունները շրջանակներում կարող են լինել կլոր:

սահմանը: 1px կանաչ կուռ.
սահմանային շառավիղը: 0px 4 տր 8px 12px;
-moz-սահմանային շառավիղը: 0px 4 տր 8px 12px;
-webkit-սահմանային շառավիղը: 0px 4 տր 8px 12px;

Թե ինչպես կարելի է դարձնել շրջանակ CSS, դա կախված է հարմարավետություն այցելուի, քանի որ, որպես կանոն, ոճական ազդեցությունը օգտագործվում է տեխնիկական նպատակներով, երբ դա կարեւոր է ցույց տալ ճշգրիտ վայրը եւ չափը տարածքի էջում:

The հաստությունը շրջանակներում եւ դրա նպատակների

Ընտրելով հաստությունը շրջանակ, դուք կարող եք օգտագործել px, pt, em ..., բայց դա պետք է հոգա նաեւ հիշել, որ դա միշտ էլ շրջանակներում դաշտային տարր. Դժվար է ենթադրել, որ այդ շրջանակ ունի CSS դիզայնի նպատակը, սակայն տեխնիկապես դա շատ օգտակար է կարեւորում տարրեր էջում:

Եթե հիմնական շրջանակ դասարանը կողպված, որ բացակայում է, նշելով, այն կեղծ դասի: Հովեր, այն կարող է ցույց է այցելու էջը տարր, երբ դա մուկ կուրսորը, ինչպես, օրինակ, կարեւորելով ընտրացանկի տարրը. Երբեմն դա անհրաժեշտ է ընտրել ինչ - որ բան, սեղմելով պատկերով, կամ քաշել ինչ-որ բան ինչ-որ տեղ: Դա շատ հարմար է օգտագործել dot շրջանակ, եւ ոչ թե փոխել տարրի ֆոնը, կամ դրա բովանդակությունը:

Որոշ ծրագրերը պահանջում են տեղաբաշխումը ոլորտներում էջում, կամ ընտրել իրերը համար հետագա վերամշակման. Այս դեպքում, այն ժամանակ, որ սեղմեք ստեղծել մի div ինչպես նաեւ սահմանամերձ եւ քանի դեռ այցելուն չի արձակել մկնիկի կոճակը, չափափոխել այն, ցույց տեսողական արդյունքը ընտրության.

դուրս տակ

CSS Ձեռնարկներ շատ հետաքրքիր է, քանի որ այն կարեւորության գիտահետազոտական կոդերի էջերից սիրված կայքեր. Սակայն, սեփական ռեսուրսները պետք է լինի եզակի, այն պետք է ունենա իր սեփական դեմքը:

Պայմանով, որ շարահյուսություն CSS շրջանակի չի տալիս նման մի շարք, քանի որ սեփական նախաձեռնությամբ: Էքսպրոմտ մի լավ սկիզբ է, եւ ոչինչ չի խանգարում, մի մշակողի կառուցելու իրենց սեփական շրջանակ: Հատկապես բոլոր ձեռքբերումների ինտերնետ տեխնոլոգիաների եւ հնարավորությունների առկա ստանդարտների ունեն շատ խոստումնալից գաղափարներ հիման վրա իրական թերությունների գոյություն ունեցող syntax, ինչը (սահմանման) միշտ եղել է խիստ ձեւական:

Մասնավորապես, եթե եւ հաստատել շրջանակը որոշ տարրերի, կարծես թե տեղին է դա անել համակողմանիորեն: Կարեւորելով անհատական թեգերը է կողմերի եւ անկյունների տարածաշրջանի, դուք կարող եք ստանալ զարմանալի հետեւանքները: A Հանձնարարելով համապատասխան handlers, կարող է ստեղծել դինամիկ Էջի տարրեր, փոխելով դիրքորոշումը, ձեւավորել եւ բովանդակությունը.