Klasificētu stila lapu pārskats ar parauga stila lapu
Kad jūs izveidojat vietni no jauna, tas ir gudrs, lai sāktu ar noteiktajiem pamata stiliem. Tas ir tā, sākot ar tīru audeklu un svaigām sukām. Viena no pirmajām problēmām, ar kurām saskaras tīmekļa dizaineri, ir tas, ka tīmekļa pārlūkprogrammas ir atšķirīgas. Noklusējuma fontu lielums atšķiras no platformas uz platformu, noklusējuma fontu saime ir atšķirīga, daži pārlūkprogrammas definē maržas un polsterējumu ķermeņa atzīmē, bet citās tā nav, un tā tālāk. Apkopojiet šos pretrunas, definējot noklusējuma stilus savām tīmekļa lapām.
CSS un rakstzīmju kopums
Vispirms vispirms iestatiet CSS dokumentu rakstzīmju kopu uz utf-8 . Lai gan ir iespējams, ka lielākā daļa no jūsu izstrādātajām lapām ir angļu valodā, dažas no tām var būt lokalizētas, pielāgotas dažādiem valodu un kultūras apstākļiem. Kad tie ir, utf-8 vienkāršo procesu. Ārējo stilu sarakstā rakstzīmju kopas iestatīšanai nebūs priekšrocības virs HTTP galvenes , bet visās citās situācijās tas būs.
Ir viegli iestatīt rakstzīmju kopu. CSS dokumenta pirmajā rindiņā rakstiet:
@charset "utf-8";Tādā veidā, ja jūs izmantojat starptautiskās rakstzīmes satura īpašumā vai kā klases un ID nosaukumus, stila lapa joprojām darbosies pareizi.
Lapas lapas stils
Nākamā lieta pēc noklusējuma stila lapas vajadzībām ir stili, lai nulles robežas, polsterējums un robežas. Tas nodrošina, ka visi pārlūkprogrammas ievieto saturu tajā pašā vietā, un starp pārlūkprogrammu un saturu nav neviena slēpta atstarpe. Lielākajai daļai tīmekļa lapu tas ir pārāk tuvu teksta malai, taču ir svarīgi sākt to, lai fona attēli un izkārtojuma sadalījumi būtu pareizi ierindoti.
html, body {margin: 0px; polsterējums: 0 pikseļi; robeža: 0px; }Iestatiet noklusējuma sākotnējo vai fontu krāsu uz melnu un noklusējuma fona krāsu uz baltu. Lai gan tas, visticamāk, mainīsies lielākajā daļā tīmekļa lapas dizainu, sākotnēji pielāgojot šīs standarta krāsas uz ķermeņa, un HTML tagu padara lapu vieglāku lasīšanu un darbu.
html, body {color: # 000; fons: #fff; }Noklusējuma fontu stili
Fonta izmērs un fontu saime ir kaut kas, kas neizbēgami mainīsies pēc dizaina uzņemšanas, bet sāksies ar noklusējuma fonta lielumu 1 em un noklusējuma fontu saimi Arial, Geneva vai kādu citu sans-serif fontu. Izmantojot ems, lapa tiek pēc iespējas pieejama, un ekrānā ir salasāmāks sans-serif fonts.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }Var būt arī citas vietas, kur var atrast tekstu, bet p , th , td , li , dd un dt ir labs sākums bāzes fonta noteikšanai. Iekļaujiet HTML un ķermeņa tikai gadījumā, bet daudzi pārlūkprogrammas ignorē fontu izvēli, ja jūs definējat tikai savus fontus HTML vai ķermenim.
Virsraksti
HTML virsraksti ir svarīgi izmantot, lai palīdzētu jūsu vietnes izklāstam un ļaut meklētājprogrammām dziļāk iekļauties jūsu vietnē. Bez stiliem, tie visi ir diezgan neglīts, tāpēc visās no tām iestatiet noklusējuma stilus un definējiet fontu saimi un fontu lielumus katram.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }Neaizmirstiet saites
Saišu krāsu veidošana gandrīz vienmēr ir dizaina kritiska sastāvdaļa, bet, ja jūs tos nenosakāt noklusējuma stilos, iespējams, ka jūs aizmirstiet vismaz vienu no pseidoklasēm. Noteikt tos ar nelielām variācijām zilā krāsā un pēc tam tos mainīt, tiklīdz vietnei ir krāsu palete.
Lai iestatītu saites zilā nokrāsa, iestatiet:
- saites ir zilas
- apmeklētās saites ir tumši zilas
- novietojiet saites gaiši zilā krāsā
- aktīvās saites ir pat zilākas
kā parādīts šajā piemērā:
a: saite {color: # 00f; } a: apmeklēja {color: # 009; } a: hover {color: # 06f; } a: aktīvs {color: # 0cf; } Veidojot saites ar diezgan nekaitīgu krāsu shēmu, tas nodrošina, ka es neaizmirsīšu kādu no klasēm, kā arī padara tos mazliet skaļākus nekā noklusējuma zilā, sarkanā un purpursarkanā krāsā.Pilna stila lapa
Šeit ir pilna stila lapa:
@charset "utf-8"; html, body {margin: 0px; polsterējums: 0 pikseļi; robeža: 0px; krāsa: # 000; fons: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: saite {color: # 00f; } a: apmeklēja {color: # 009; } a: hover {color: # 06f; } a: aktīvs {color: # 0cf; }