የማስታወሻ ደብተርን ማቀፍ በ CSS የተሰናዳ ድረ ገጽ ፈጠረ

01 ቀን 10

የ CSS ቅጥ ወረቀት ይፍጠሩ

በተመሳሳይ ለኤች ቲ ኤም ኤል የተለየ የጽሑፍ ፋይል ስንፈጥር, ለኤስኤስኤል የጽሁፍ ፋይል ይፈጥራሉ. ለዚህ ሂደት ዕይታ ካስፈለገዎ እባክዎ የመጀመሪያውን አጋዥ ስልጠና ይመልከቱ. የ CSS አወቃቀሩ ገጽዎን በንዴፓድ ውስጥ ለመፍጠር የሚከተሉት ደረጃዎች እነሆ:

1. ባዶ መስኮት ለመክፈት File> New in Notepad ን ይምረጡ
2. ፋይል <ፋይል አስቀምጥ> ን ጠቅ በማድረግ ፋይሉን እንደ ሲኤስኤስ አስቀምጥ ...
3. በደረቅ አንፃፊዎ ውስጥ ወደ my_website ፎልደር ያስሱ
4. «እንደ አይነት አስቀምጥ» ወደ «ሁሉም ፋይሎች» ይቀይሩ
5. ፋይልዎን "styles.css" ይሰይሙት (ዋጋዎችን ያስቀምጡ) እና አስቀምጥን ጠቅ ያድርጉ

02/10

የ CSS ቅጥ ሉህን ወደ ኤች.ቲ.ኤም.ኤልዎ ያገናኙ

አንዴ ለድረ ገጽዎ ቅጥ ያለው ወረቀት ካገኙ በኋላ, ከድር ገጽ ጋር ማያያዝ ይኖርብዎታል. ይህንን ለማድረግ የማገናኛ መለያውን ትጠቀማለህ. የሚከተለውን የጭነት መለያ መለያ በ መለያዎችዎ የርስዎ የ Petsets.htm መለያዎች ውስጥ ያስቀምጡ.

03/10

የገበያ ማዕቀፎችን ያስተካክሉ

ለተለያዩ አሳሾች XHTML ሲጽፉ ሁሉም ሁሉም ነገሮች እንዴት እንደሚታዩ ያላቸው የተለየ ህዳጎች እና ህጎች ያላቸው ይመስላል. እንደ አብዛኛዎቹ አሳሾች ጣቢያዎ ተመሳሳይነት ያለው መሆኑን ለማረጋገጥ የተሻለው መንገድ እንደ ህዳጎች የመሳሰሉት ነገሮችን ወደ አሳሽ ምርጫ እንዳይተላለፍ ማድረግ ነው.

ጽሑፉ በዙሪያው ግራ ጠርዝ ላይ ያሉትን ገጾችን መጨመር አልፈልግም. የምናገኛቸውን ይዘቶች ባንኳኳም እንኳን, ከተመሳሳይ ባዶ እጀምራለሁ ማለት ጠርዝዎቹን ወደ ዜሮ አድርጌያለሁ. ይህንን ለማድረግ የሚከተለውን ወደ የእርስዎ styles.css ሰነድ ያክሉት:

html, body {
ኅዳግ: 0 ፒክስል;
ድብድብ: 0px;
ድንበር: 0px;
left: 0px;
ከላይ: 0 ፒክስል;
}

04/10

በዚህ ገጽ ላይ ቅርጸ ቁምፊውን በመለወጥ ላይ

ቅርጸ-ቁምፊ ብዙ ጊዜ በድር ገጽ ላይ ለመለወጥ የሚፈልጉት የመጀመሪያ ነገር ነው. በድረ-ገጹ ላይ ያለው ነባሪ ቅርጸ-ቁምፊ አስቀያሚ ሊሆን ይችላል, እና የዌብ አሳሽ እራሱ ነው, ስለዚህ ቅርጸ ቁምፊውን ካልገለፁ, ገጽዎ ምን እንደሚመስል አያውቁትም.

በአብዛኛው, ቁምፊዎችን በአንቀጽ ላይ ሊቀይሩ ይችላሉ, ወይም አንዳንዴ በአጠቃላይ በሰነድ እራሱ ላይ. ለጣቢያ ይህን ፎርማት በአርዕስቱ እና በአንቀጽ ደረጃ ላይ እናብራራለን. የሚከተለውን ወደ የእርስዎ styles.css ሰነድ ያክሉ:

ፒ, li {
ቅርጸ-ቁምፊ: 1em Arial, Helvetica, sans-serif;
}
h1 {
ቅርጸ-ቁምፊ: 2em Arial, Helvetica, sans-serif;
}
h2 {
ቁምፊ: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
ቅርጸ-ቁምፊ: 1.25em Arial, Helvetica, sans-serif;
}

በ 1em እንደ ጽሁፎች እና ዝርዝር ንጥልች መሰረታዊ መርሆቼን ጀመርኩ, እና ለዋና ርእሶቼ መጠን ለመወሰን ተጠቀመበት. ከ h4 ጥልቀት ያለው ርዕሰ-ጉዳይ መጠቀም አልፈልግም, ነገር ግን እንዲሰልም ለማድረግ ካሰቡ.

05/10

አገናኞችዎን ይበልጥ የሚያሳትፍ ነው

አገናኞች ነባሪ ቀለሞች በየጊዜው ለማይታዩ እና ለተጎበኙ አገናኞች ሰማያዊ እና ሐምራዊ ናቸው. ይህ ይህ መስፈርት ቢሆንም, የገጾችዎ የቀለም ገጽታ ጋር ላይመጣጠን ይችላል, ስለዚህ እንለውጠው. በርስዎ styles.css ፋይል ውስጥ የሚከተለውን ያክሉ:

a: link {
ፊደል-ቤተሰብ; Arial, Helvetica, sans-serif;
ቀለም: # FF9900;
ጽሑፍ-ማስገር: ከስር መስመር ላይ;
}
a: visited {
ቀለም: # FFCC66;
}
a: hover {
ዳራ; #FFFFCC;
ቅርጸ-ቁመት: ደማቅ;
}

ሶስት አገናኝ ቁምፊዎችን አዘጋጀሁ, ይህም: እንደ ነባሪ, አንድ: የተጎበኘነው ሲጎበኝ, ቀለሙን በመቀየር: አንዣብ. ከ: አንዣብብ አገናኙ የጀርባ ቀለም አግኝ እና ደማቁ ወደ ጎልቶ ለመጫን ጠቅ ያድርጉ.

06/10

የአሰሳ ክፍሎችን ማቀፍ

የመጀመሪያውን ኤችቲኤምኤል (navigation = "nav") የመግቢያ ክፍል ስላስገባን እንመነው. ዋነኛው ርዝመት ምን ያህል መሆን እንዳለበት መዘርዘር አለብን, እና ዋናው ጽሑፍ በርሱ ላይ እንዳይተነተን በመጠኑ በስተቀኝ በኩል እንዲሰፋ ማድረግ አለብን. በዙሪያዋ ድንበር አስቀምጣለሁ.

የሚከተለው CSS ወደ የእርስዎ styles.css ሰነድ ያክሉ

#nav {
ወርድ: 225 ፒክስል;
ህዳግ-ቀኝ: 15px;
ጠርዝ: መካከለኛ ጠንካራ # 000000;
}
#nav li {
list-style: ምንም;
}
.footer {
የቅርፀ ቁምፊ-መጠን: .75 ኤም;
ግልጽ; ሁለቱም;
ወርድ: 100%;
ጽሑፍ-አሰላለፍ; መሃል;
}

የዝርዝር-ቅጥ ባህርይ ምንም ዓይነት ነጥቦችን ወይም ቁጥሮች የሌለውን ዝርዝር በማቀናጀት ዝርዝሩን ያዘጋጃል, እና የቅጂ መብት ክፍል የቅጂ መብት ክፍል ያነሰ እና በክፍል ውስጥ ያተኮረው.

07/10

ዋናውን ክፍል አቀማመጥ

ዋናውን ክፍልዎን በአጠቃላይ አቀማመጥ አቀማመጥ በማስቀመጥ በድረ ገጽዎ ላይ እንዲቆዩ በሚፈልጉበት ቦታ በትክክል እንደተቀመጠ እርግጠኛ መሆን ይችላሉ. ትላልቅ መቆጣጠሪያዎችን ለመያዝ 800 ፒክስል ስፋት ያኖርኩ, ሆኖም ግን አነስ ያለ መቆጣጠሪያ ካለዎት, ይበልጥ ጠባብ ማድረግ ሊፈልጉ ይችላሉ.

የሚከተለውን በ your styles.css ሰነድ ላይ ያስቀምጡት:

#main {
ስፋት: 800px;
ከላይ: 0 ፒክስል;
አቀማመጥ: ፍጹም;
ወደ ግራ: 250px;
}

08/10

አንቀፆችዎን ማቀፍ

ቀደም ብዬ የአንቀጽ ቁምፊ (ቅርጸ-ቁምፊ) አድርጌ ስላዘጋጀሁ ለየት ባለ መልኩ ለማንበብ ለእያንዳንዱ አንቀጽ ትንሽ "kick" መስጠት እፈልግ ነበር. ይህን አድርጌ አንቀጹን ብቻ ከማስቀመጥ ይልቅ አንቀጹን በማጉላት በላይኛው ጠርዝ በማከል ነው.

የሚከተለውን በ your styles.css ሰነድ ላይ ያስቀምጡት:

.topline {
የድንበር-ጫፍ: ወፍራም ጠንካራ # FFCC00;
}

እኔም በዚህ መንገድ ሁሉንም አንቀጾች ከማወቅ ይልቅ "ቶሎጅን" ተብሎ በሚጠራው ክፍል ውስጥ ለማገልገል ወሰንኩኝ. በዚህ መንገድ, ያለ የላይኛው ቢጫ መስመር አባባል እንዲኖረኝ ከፈለግሁ, class = "topline" ን በአንቀጽ መለያው ውስጥ እተውት እና የላይኛው ድንበር አይኖረውም.

09/10

ምስሎችን ማራመድ

ምስሎች በአብዛኛው በዙሪያቸው በዙሪያቸው ክፈፍ አላቸው, ምስሉ አገናኝ ከሆነ እስካልሆነ ድረስ ይህ ሁልጊዜ አይታይም, ነገር ግን በሲኤስኤስ የትርጉም ጽሁፉ ውስጥ ድንበሬን ወዲያው ያጠፋል. ለዚህ የቅላጼ ጽሑፍ "የቅድመ-ልደት" መደብ ፈጥሬ ነበር እና በሰነዱ ውስጥ ያሉት አብዛኛዎቹ ምስሎች የዚህ ክፍል አካል ናቸው.

የእነዚህ ምስሎች ልዩ ክፍል በገጹ ላይ ያሉበት ቦታ ነው. እነሱ እነሱን ለማስተካከል ጠረጴዛዎችን በመጠቀም ሳይወሰዱ የነበሩትን አንቀፅ አካል እንዲሆኑ እፈልግ ነበር. ይህን ለማድረግ ቀላሉ መንገድ Float CSS ንብረቱን መጠቀም ነው.

የሚከተለውን በ your styles.css ሰነድ ላይ ያስቀምጡት:

#main img {
ተንሳፈው: ግራ;
ህዳግ-ቀኝ: 5 ፒክስል;
ህዳግ በታች: 15 ፒክስል;
}
.noborder {
ክፈፍ: 0 ፒክሰል የለም;
}

እንደምታየው, በምስሎቹ ላይ የተቀመጡ የንብረት ባህሪያት አሉ, በአንቀጾቹ ጠርዝ ላይ ካለው ተንጠልፋቸው ጽሑፍ ጋር አይጣጣሙም.

10 10

አሁን ያጠናቀቁትን ገጽ ይመልከቱ

አንዴ ካሲኤስዎን ካስቀመጡት በኋላ በድር አሳሽዎ ውስጥ የ petets.htm ገጽን እንደገና መጫን ይችላሉ. ገጽዎ በምስሉ ከሚታየው ጋር ተመሳሳይነት ያለው ገጽ መምሰል አለበት, በምስሎች ተሰልፈው እና አሰሳው በገጹ ግራ በኩል በትክክል ተቀምጧል.

ለዚህ ጣቢያ ሁሉንም የውስጣዊ ገጾች እነዚህን ተመሳሳይ ደረጃዎች ይከተሉ. በገፅዎት ውስጥ ለእያንዳንዱ ገጽ አንድ ገጽ እንዲኖርዎ ይፈልጋል.