Գրատախտակի ձեւավորումը ստեղծեց վեբ էջ CSS- ով

01-ից 10-ը

Ստեղծեք CSS Style թերթ

Նույն ձեւով HTML- ի համար ստեղծել ենք առանձին տեքստային ֆայլ, կստեղծեք տեքստային ֆայլ CSS- ի համար: Եթե ​​այս գործընթացին անհրաժեշտ է տեսողական նյութեր, խնդրում ենք ծանոթանալ առաջին դասընթացին: Ստորեւ բերված են CSS- ի ոճաթերթերի ստեղծման քայլերը.

1. Ընտրեք Պատկեր> Նոթատետրում նոր `պատուհանի համար
2. Պահել ֆայլը որպես CSS, սեղմելով Պատկեր <Պահել As ...
3. Նստեք ձեր my_website թղթապանակ ձեր կոշտ սկավառակի վրա
4. Փոխեք «Պահել որպես տիպ` »« Բոլոր ֆայլերը »
5. Անվանեք ձեր «styles.css» ֆայլը (թողեք գնանշումները) եւ սեղմեք Save

02-ից 10-ը

Հղում CSS Style թերթիկին ձեր HTML- ում

Երբ դուք ունեք ձեր ոստայնատեղի ոճաթերթը, դուք պետք է այն կապակցեք այն վեբ էջին: Դա անելու համար օգտագործում եք հղման պիտակը: Տեղադրեք հետեւյալ հղիչի տեքստը ձեր pets.htm փաստաթղթի պիտակներում:

<հղում href = "styles.css" rel = "stylesheet" type = "text / css">

03-ից 10-ը

Սահմանել էջի եզրերը

Երբ դուք գրում եք XHTML- ը տարբեր բրաուզերների համար, մի բան կսովորեցնեք, որ նրանք բոլորը կարծես տարբեր շեղումներ եւ կանոններ ունեն, թե ինչպես են դրանք ցուցադրվում: Լավագույն եղանակը, որ վստահ լինեք, որ ձեր կայքը դիտում է նույնը, շատ բրաուզերներում թույլ չեն տալիս թույլատրել այնպիսի բաներ, որոնք թույլ են տալիս կանխադրված դիտարկիչի ընտրությունը:

Նախընտրում եմ էջերի սկիզբը վերին ձախ անկյունում, առանց տեքստը շրջապատող լրացուցիչ լիցք կամ մարջան: Նույնիսկ եթե ես պատրաստվում եմ բովանդակությունը պահել, ես սահմանները սահմանել եմ զրոյի, որպեսզի սկսեմ նույն դատարկ շառից: Դա անելու համար ավելացրեք հետեւյալ styles.css փաստաթուղթը:

html, մարմին {
margin: 0px;
padding: 0px;
սահման: 0px;
ձախ: 0px;
վերեւ: 0px;
}

04-ից 10-ը

Փոփոխել էջի տառատեսակը

Տառատեսակը հաճախ առաջին բանն է, որ դուք ուզում եք փոխել վեբ էջում: Վեբ էջի նախնական տառատեսակը կարող է լինել տգեղ, իսկ իրականում վեբ բրաուզերը ինքն է, այնպես որ, եթե դուք չեք սահմանում տառատեսակը, դուք իսկապես չգիտեք, թե ձեր էջը ինչպիսի տեսք կունենա:

Սովորաբար, դուք կփոխեք պարբերությունների տառատեսակը կամ երբեմն ամբողջ փաստաթղթի վրա: Այս կայքի համար մենք սահմանում ենք տառատեսակը վերնագրով եւ պարբերության մակարդակում: Հաստատեք հետեւյալ styles.css փաստաթուղթը.

p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
տառ: 1.25em Arial, Helvetica, sans-serif;
}

Ես սկսեցի 1am- ի պարամետրերի եւ ցուցակի կետերի իմ բազայի չափսը, եւ այնուհետեւ օգտագործեցի, իմ վերնագրերի չափսը սահմանելու համար: Չեմ ակնկալում, որ h4- ից ավելի խորը վերնագիր օգտագործեք, բայց եթե նախատեսում եք, որ ցանկանում եք ոճը դարձնել նաեւ այն:

05-ից 10-ը

Ձեր հղումներն ավելի հետաքրքիր դարձնելու համար

Կապի համար նախատեսված նախնական գույները կապույտ եւ մանուշակ են համապատասխանաբար այցելված եւ այցելված հղումների համար: Չնայած սա ստանդարտ է, այն կարող է տեղավորվել ձեր էջերի գունային սխեման, ուստի եկեք փոխենք այն: Ձեր styles.css ֆայլում ավելացրեք հետեւյալը.

a: հղում {
font-family: Arial, Helvetica, sans-serif;
գույնը `# FF9900;
տեքստի ձեւավորում. ընդգծում;
}
a: այցելել {
գույնը `# FFCC66;
}
ա: hover {
ֆոն `#FFFFCC;
տառատեսակ - քաշ: շեղված;
}

Ես կառուցել եմ երեք հղման ոճերը, ա: հղումը `որպես լռելյայն, ա: այցելել այն ժամանակ, երբ այն այցելել է, փոխել գույնը եւ ա: սավառնել: Հետ: սավառնել ես հղում եմ ստացվում ֆոնի գույնի եւ համարձակվում է ընդգծել, որ սեղմված հղումը:

06-ից 10-ը

Նավարկման բաժնի ձեւավորում

Քանի որ մենք տեղադրեցինք նավիգացիան (id = "nav") բաժինը առաջին HTML- ում, եկեք նախ ոճը: Պետք է նշել, թե որքան լայն պետք է լինի եւ դրեք աջ կողմում, այնպես որ հիմնական տեքստը չի բախվում դրան: Ես դրա շուրջ դրեցի սահման:

Ձեր styles.css փաստաթուղթը ավելացրեք հետեւյալ CSS- ում.

#nav {
լայնությունը `225px;
margin-right: 15px;
սահման: միջին # # 000000;
}
#nav li {
ցանկի ոճ `ոչ;
}
.Ֆուտեր {
font-size: .75em;
պարզ: երկուսն էլ;
լայնությունը `100%;
text-align: կենտրոն;
}

Ցանկի ոճի հատկությունը սահմանում է նավիգացիոն բաժնի ներսում ցուցակը ոչ մի փամփուշտ կամ թվեր չունենալու համար, եւ .footer ոճը հեղինակային իրավունքի բաժինը ավելի փոքր է եւ կենտրոնացած է բաժնում:

07-ից 10-ը

Հիմնական բաժնի տեղադրումը

Ձեր հիմնական բաժինը տեղադրելով բացարձակ դիրքորոշմամբ, կարող եք վստահ լինել, որ այն մնալու է այնտեղ, որտեղ ցանկանում եք, որ այն մնա ձեր վեբ էջում: Ես իմ 800px լայնությամբ ես ստեղծել ավելի մեծ մոնիտորներ, բայց եթե դուք ունեք ավելի փոքր մոնիտոր, դուք կարող եք այն դարձնել ավելի նեղ:

Տեղադրեք հետեւյալը styles.css փաստաթղթում:

#main {
լայնությունը `800px;
վերեւ: 0px;
պաշտոնը `բացարձակ;
ձախ: 250px;
}

08-ից 10-ը

Ստեղծեք ձեր պարբերությունները

Քանի որ ես արդեն գրել եմ պարբերության տառատեսակը, ես ուզում էի յուրաքանչյուր պարբերություն տալ մի քիչ լրացուցիչ «քացի», որպեսզի այն ավելի լավ լինի: Ես դա արեցի, սահմանը սահմանելով վերեւի վրա, որը պարունակում էր ընդամենը պարբերությունը, քան միայն պատկերը:

Տեղադրեք հետեւյալը styles.css փաստաթղթում:

.topline {
border-top: հաստ ամուր # FFCC00;
}

Ես որոշեցի դա անել որպես «topline» կոչվող դաս, այլ ոչ թե պարզապես այդ կետերում բոլոր պարբերությունները սահմանելու: Այս կերպ, եթե որոշեմ, որ ես ուզում եմ պարբերություն ունենալ առանց վերին դեղին գծի, ես կարող եմ պարզապես թողնել դասի = "topline" պարբերության պիտակի մեջ եւ այն չի ունենա վերին սահման:

09-ից 10-ը

Պատկերացրեք պատկերները

Պատկերները սովորաբար սահմանում են նրանց սահմանը, դա միշտ չէ, որ տեսանելի չէ, եթե պատկերն անջատված է, բայց ես սիրում եմ իմ CSS ոճերի ոճով դասը, որը ավտոմատ կերպով անջատում է սահմանը: Այս ստեղնաշարի համար ես ստեղծեցի «noborder» դաս, եւ փաստաթղթի մեծ մասը այս դասի մասն են կազմում:

Այս պատկերների մյուս հատուկ մասը էջում տեղադրություն է: Ես ուզում էի, որ նրանք լինեն պարբերության մի մասը, առանց աղյուսակների օգտագործման, դրանք հարթելու համար: Դրա ամենալավ միջոցն այն է, որ օգտագործեք float CSS հատկությունը:

Տեղադրեք հետեւյալը styles.css փաստաթղթում:

#main img {
float: ձախ;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
սահման: 0px ոչ;
}

Ինչպես տեսնում եք, կան նաեւ պատկերների վրա դրված շերտային հատկություններ, համոզվելու համար, որ դրանք չեն ջարդվել դեմ դրված տեքստից, որը պարունակում է նրանց կողքին:

10-ից 10-ը

Այժմ նայեք ձեր ավարտված էջին

Ձեր CSS- ին պահելու դեպքում կարող եք վերբեռնել pets.htm էջը ձեր վեբ բրաուզերում: Ձեր էջը պետք է նման լինի այս նկարում պատկերված պատկերին, պատկերների հետ միասին եւ էջի ձախ կողմում տեղադրված նավիգացիան:

Հետեւեք այս նույն քայլերին ձեր կայքի բոլոր էջերի համար: Դուք նավարկության մեջ ցանկանում եք ունենալ մեկ էջ յուրաքանչյուր էջի համար: