ከቅደምት ስቲል ወረቀት ጋር የተከታታይ ስቴቶች ዝርዝር አጠቃላይ እይታ
አንድ ድር ጣቢያ በምንም መልኩ ሲገነቡ ከተገለጹት መደበኛ ቅጦች ጋር መጀመር ብልህነት ነው. በንጹህ ሸራ እና ትኩስ ብሩሽዎች ጀምሮ ልክ ነው. የድር ዲዛይን ከሚያጋጥሟቸው የመጀመሪያ ችግሮች አንዱ የድር አሳሾች የተለያዩ ናቸው. ነባሪ ቅርጸ ቁምፊ ከመሣሪያ ስርዓት ተነስቶ የተለየ ነው, ነባሪ የቅርፀ ቁምፊ ቤተሰብ የተለየ ነው, አንዳንድ አሳሾች በሰውነት ስያሜ ላይ ህዳጎች እና ማሸጊያዎችን እና ሌሎች ደግሞ የማይፈልጉትን እና የመሳሰሉትን ያብራራሉ. የድር ገፆችዎ ነባሪ ቅጦችን በመተርጎም እነዚህን ውጫዊ ለውጦች ያግኙ.
CSS እና ቁምፊ ስብስብ
የመጀመሪያዎቹን ነገሮች መጀመሪያ, የሲኤስኤል ሰነዶችን ስብስብ ወደ ዩኤስኤ-8 ያዘጋጁ. እርስዎ የሚዘጋጁት አብዛኛዎቹ ገጾች በእንግሊዘኛ የተጻፉ ሊሆኑ ቢችሉም አንዳንዶቹ ሊተረጎሙ ይችላሉ, ለተለያዩ ቋንቋዎችና ባህላዊ ሁኔታዎች የተዘጋጁ ናቸው. እነሱ ሲሆኑ ኡፕ-8 ሂደቱን ቀላል ያደርገዋል. በውጫዊ የቅጥ ሉህ ላይ የተቀመጠው ገጸ-ባህሪ በ HTTP ርእስ ላይ ቅድሚያ አያደርግም, በሁሉም ሁኔታዎች ውስጥ ግን ይከሰታል.
የቁምፊ ስብስብን ማዘጋጀት ቀላል ነው. ለሲኤስሲ ሰነድ የመጀመሪያው መስመር ጻፍ-
@charset "utf-8";በዚህ መንገድ, በይዘት ንብረት ውስጥ ወይም እንደ ክፍል እና የመታወቂያዎች ስም አለምአቀፍ ቁምፊዎችን የሚጠቀሙ ከሆነ, የቅጥ ሉህ አሁንም በትክክል መስራቱን ይቀጥላል.
የገጽ አካልን መፈተሽ
የሚቀጥለው ነገር ነባሪ የቅጥ ሉህ ፍላጎቶች ህዳጎች, ድብዳጊያዎች እና ጠርዞች ያለ ዜሮ ቅጦች ናቸው. ይህ ሁሉም አሳሾች ይዘቱን በአንድ ቦታ ላይ ያስቀምጣሉ, እና በአሳሽ እና በይዘቱ መካከል ምንም የተደበቁ ክፍተቶች የሉም. ለአብዛኛዎቹ የድረ-ገጾች, ይህ ለፅሁፍ ጠርዝ በጣም ቅርብ ነው, ነገር ግን የዳራ ምስሎች እና የአቀንስ ክፍሎች በትክክል የተሰቀሉትን ለመጀመር እዚህ መጀመር አስፈላጊ ነው.
html, ሰው {margin: 0px; ድብድብ: 0px; ድንበር: 0px; }ነባሪው ቅድመ-ገፅ ወይም የቅርፀ-ቁምፊ ቀለም ወደ ጥቁር እና ነባሪው የመደብ ቀለም ወደ ነጭ አዘጋጅ. ይህ ለአብዛኛዎቹ የድረ-ገጽ እቅዶች በአብዛኛው የሚቀየር ቢሆንም, እነዚህ መደበኛዎቹ ቀለሞች በሰውነት እና ኤችቲኤምኤል መለያ ላይ ሲቀመጡ ገጹን ለማንበብ እና አብሮ ለማንበብ ቀላል ያደርገዋል.
html, body {ቀለም: # 000; ጀርባ: #fff; }ነባሪ የፊደላት ቅጦች
የቅርፀ ቁምፊ እና የቅርጸ ቁምፊ ቤተሰብ ንድፍ ከተያዘ በኋላ የሚቀያየር ነገር ግን ነባሪ የቅርጸ ቁምፊ መጠን 1 እና ነባሪ ቅርጸ ቁምፊ ቤተሰብ Arial, ጄኔቫ ወይም ሌላ ረፍ ያሉ ባለ-ቁምፊ ቅርጸ-ቁምፊዎች ይጀምራሉ. የእሱ አጠቃቀም ገጹን በተቻለ መጠን ተደራሽ እንዲሆን ያስቀምጠዋል, እና ያለ-ሰረት ቅርጸ-ቁምፊ በማያ ገጹ ላይ ይበልጥ ግልፅ ነው.
html, body, p, tt, td, li, dd, dt {ቅርጸ ቁምፊ: 1 ኛ Arial, Helvetica, sans-serif; }ጽሑፍን የሚያገኙበት ሌሎች ቦታዎች ሊኖሩ ይችላሉ, ግን p , t , td , li , dd , እና dt መሰረታዊ ቅርጸቱን ለመተርጎም ጥሩ ጅምር ናቸው. ቢቻል እንኳን ኤችቲኤምኤል እና አካላትን ያካትቱ, ግን ቅርፀ ቁምፊዎችዎን ለኤች ቲ ኤም ኤል ወይም አካል ብቻ ካወቁ ብቻ የቅርጸ ቁምፊ ምርጫዎችን ይጥሳሉ.
ዋና ዋና ዜናዎች
የኤች ቲ ኤም ርዕስ ርዕሶች የድረ ገጽዎን ዝርዝር ለመንደፍ እና የፍለጋ ሞተሮችዎ በጣቢያዎ ውስጥ ጠለቅ ብለው እንዲሰሩ ማድረግ አስፈላጊ ነው. ያለ ዘይቤ ሁሉም ሁሉም በአስከፊ መልኩ አስቀያሚ ናቸው, ስለዚህ ሁሉም ነባሪ ቅጦችን አቀናጅተው ለእያንዳንዱ እያንዳንዳቸው የቅርፀ ቁምፊ ቤተሰብ እና የቅርፀ ቁምፊ መጠኖች ይግለጹ.
h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {ቅርጸ ቁምፊ-መጠን: 1.5em; } h3 {ቅርጸ ቁምፊ-መጠን: 1.2em; } h4 {ቅርጸ ቁምፊ-መጠን: 1.0em; } h5 {ቅርጸ ቁምፊ-መጠን: 0.9 ደ; } h6 {font-size: 0.8em; }አገናኞችን አትርሺ
የአገናኝ ቀለሞቹን ማሳለጥ ሁልጊዜም የንድፍ ወሳኝ አካል ነው, ነገር ግን በነባሪው ቅጦች ላይ ካልገለፁ, ቢያንስ ቢያንስ አንዱን የውሸት ክፍሎችን መርሳት ይችላሉ. እነሱን በትንሹ ትንሽ ሰማያዊ በሆነ ሁኔታ መለየት እና በመቀጠል ለጣቢያው የቀለም ቤተ-ስዕላት ካለዎት መለወጥ.
አገናኞቹን በሰማያዊ ጥላ ለመወሰን, አዘጋጅ:
- አገናኞች እንደ ሰማያዊ
- አገናኞችን እንደ ጥቁር ሰማያዊ ጎብኝተዋል
- አሪፍ አገናኞች እንደ ቀላል ሰማያዊ
- ገባሪ አገናኞች አልፎ አልፎ ሰማያዊ
በዚህ ምሳሌ እንደሚያሳየው:
a: link {color: # 00f; } a: visited {ቀለም: # 009; } a: hover {color: # 06f; } ንቁ; {color: # 0cf; } ከአደገኛ ጎጂ ቀለም ጋር የሚያገናኟቸውን አገናኞች በደብ በመፍጠር ማንኛውንም ክፍሎቼን ፈጽሞ አልረሳውም, እንዲሁም ከነባሪ ሰማያዊ, ቀይ እና ወይን ጠጅ ይልቅ ያነሱ ድምጻቸውን እንዲያድርባቸው ያደርጋል.የሙሉ ቅጥ ሉህ
የሙሉ ቅጥ ወረቀት እነሆ:
@charset "utf-8"; html, ሰው {margin: 0px; ድብድብ: 0px; ድንበር: 0px; ቀለም # 000; ጀርባ: #fff; } html, body, p, tt, td, li, dd, dt {ቅርጸ ቁምፊ: 1 ኛ Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {ቅርጸ ቁምፊ-መጠን: 1.5em; } h3 {ቅርጸ ቁምፊ-መጠን: 1.2em; } h4 {ቅርጸ ቁምፊ-መጠን: 1.0em; } h5 {ቅርጸ ቁምፊ-መጠን: 0.9 ደ; } h6 {font-size: 0.8em; } a: link {color: # 00f; } a: visited {ቀለም: # 009; } a: hover {color: # 06f; } ንቁ; {color: # 0cf; }