የቅጥ መምህራን እና መታወቂያዎችን በመጠቀም

ክፍሎች እና መታወቂያዎች የ CSS ዎን ያራግፉ

ዛሬ ድር ላይ ድር ጣቢያዎችን መገንባት የ CSS (የሽግግር ቅጥ ሉሆችን) ጥልቀት መረዳትን ይጠይቃል. እነዚህ በአሳሽ መስኮት ውስጥ እንዴት እንደሚገጣጠም ለመወሰን አንድ ድር ጣቢያ እርስዎ የሰጡት መመሪያ ነው. ለኤችኤምኤል ሰነድዎ ተከታታይ "ቅጦችን" መተግበር ይችላሉ, ይህም የድረ-ገጹን መልክ እና ስሜት ይፈጥራል.

ከላይ የተጠቀሱትን ቅጦች በአንድ ሰነድ ላይ መተግበር የሚችሉበት በርካታ መንገዶች አሉ, ነገር ግን አብዛኛውን ጊዜ በአንድ ሰነድ ውስጥ ባሉ አንዳንድ ክፍሎች ላይ ቅጥን መጠቀም ይፈልጋሉ ነገር ግን የሁሉም አባል ምሳሌዎች አይደሉም.

በሰነድ ውስጥ ለበርካታ አባሎች ሊተገበሩ የሚችሉበት ቅጥ, ለእያንዳንዱ የግለሰብ የስታስቲክስ ደንብ በድጋሚ መሞከር ሳይኖርብዎት ሊፈልጉ ይችላሉ. እነዚህን የተፈለጉ ቅጦች ለማግኘት, የክፍልንና መታወቂያ ኤች ቲ ኤም ኤል አይነቶችን ይጠቀማሉ. እነዚህ ባህርያት በሁሉም ኤችቲኤምኤል መለያዎች ላይ ሊተገበሩ የሚችሉ አጠቃላይ ዓየም ባህርያት ናቸው. ይሄ ማለት በየምድብዎ ውስጥ ክፍሎችን, አንቀጾችን, አገናኞችን, ዝርዝሮችን ወይም ማንኛውንም ሌሎቹን የኤች ቲ ኤም ኤል ክፍሎች እየሰሩ ቢሆኑም, ወደ መደብ እና መታወቂያ ባህሪያት ወደ ይህንን ተግባር እንዲያከናውኑ ያግዙዎታል!

የመደብ መምረጫዎች

የክፍሉ መምረጫው በአንድ ተመሳሳይ ኤለመንት ላይ ወይም በዶክመንቱ ላይ መለያዎችን እንዲያቀናብሩ ያስችልዎታል. ለምሳሌ, በሰነዱ ውስጥ ከቀሩት ፅሁፎች ውስጥ በተለየ ቀለም የተደነገጉትን የተወሰኑ የጽሑፍ ክፍሎችዎ ይፈልጉ ይሆናል. እነዚህ ትኩረት የተደረገባቸው ክፍሎች በገጹ ላይ የሚያዋቅሩት "ማንቂያ" ሊሆን ይችላል. አንቀጾቻችንን በሚከተሉት ክፍሎች ውስጥ ሊመድቡ ይችላሉ:

p {ቀለም: # 0000ff; }
p.alert {ቀለም: # ff0000; }

እነዚህ ቅጦች የሁሉንም አንቀፆች ቀለም ወደ ሰማያዊ (# 0000ff) ያዋቅራሉ, ነገር ግን "ማንቂያ" ባህርይ ባህርይ የያዘው ማንኛውም ክፍል በቀይ (# ff0000) ውስጥ ይገለጣል. ይህ የሆነበት ምክንያት የመደብተቢያው መለያ ከመለያ ሲስተም ከሚጠቀመው የመጀመሪያው የሲ.ኤስ. ደንብ ይልቅ ከፍተኛ ልዩነት ስላለው ነው.

ከሲ.ኤስ.ኤ. ጋር ሲሰሩ, በጣም የተበጀ ደንብ ያልተወሰነን ይሻራል. ስለዚህ በዚህ ምሳሌ, በጣም የተለመደው ደንቦች የሁሉንም አንቀጾች ቀለም ያስቀምጣል, ግን ሁለተኛው, የበለጠ ግልጽ የሆነ ደንብ በአንዳንድ አንቀጾች ላይ ብቻ አቀማመጥን ይሽራል.

ይሄ በአንዳንድ የኤችቲኤምኤል መለያ ላይ ጥቅም ላይ ሊውል የሚችለው:

ይህ አንቀጽ በሰማያዊ መልክ ይታያል, ይህም ለገጹ ነባሪ ነው.

ይህ አንቀጽ በሰማያዊ ነው.

እና ይህ ክፍሉ በመደበኛ ሰማያዊ ቀለም ከኤለሜን መራጭ አቀማመጥ ከተለጠፈ ጀምሮ ይህ አንቀጽ በቀይ ይታያል.

በምሳሌው ውስጥ, "p.alert" ቅጥያው ይህንን "ማንቂያ" ክፍል የሚጠቀሙት የአንቀጽ ክፍሎች ላይ ብቻ ይሠራል.ይህን ክፍል በበርካታ የኤች ቲ ኤም ኤል አባሎች ውስጥ መጠቀም ከፈለጉ, በቀላሉ የኤች ቲ ኤም ኤል አባልን ከመጀመሪያው የቅጥ ጥሪ (ጊዜውን (.) ቦታውን መተውዎን እርግጠኛ ይሁኑ), እንደሚከተለው ነው:

.alert {background-color: # ff0000;}

ይህ ክፍል አሁን ሊፈልግ ለሚፈልገው ማንኛውም ክፍል አሁን ይገኛል. የ "ማንቂያ" የመደብ ሁኔታ ባህሪ እሴት ያለው ማንኛውም ኤች.ቲ.ኤል. ይሄንን ቅጥ ይቀበላል. ከዚህ በታች ባለው ኤችቲኤም ውስጥ የ "ማንቂያ" መደብ የሚጠቀሙ አንቀጾች እና አንደኛ ደረጃ አለን. ሁለቱም በካሊፎርኤስ ላይ ባየናቸው የሲኤስኤል አምሳያ መሠረት የቀይ ቀለም ቀለም ይኖራቸዋል.

ይህ አንቀጽ በቀይ የተፃፈ ይሆናል.

እና ይህ h2ም ደግሞ ቀይ ነው.

በዛሬው ጊዜ በድር ጣቢያዎች ላይ የክምችት ባህርያት በአብዛኛዎቹ አካላት ላይ ጥቅም ላይ ይውላሉ ምክንያቱም መታወቂያው ከሚታየው አንድ እይታ ጋር ለመስራት የቀለለ ነው. የተወሰኑ የኤችቲኤምኤል ገጾች በክፍል ባህሪያት እንዲሞሉ ያገኟቸዋል, አንዳንዶቹ በሰነድ ውስጥ ብዙ ጊዜ ተደጋግፈው እና አንዴ ብቻ ሊታዩ ይችላሉ.

የመታወቂያ መምረጫዎች

የመታወቂያው መምረጫዎ ከአንድ መለያ ወይም ሌላ የኤችቲኤምኤል አባል ጋር ሳይጨምር ስም ለስርዓት ቅጥ እንዲሰጡ ያስችልዎታል. ስለ አንድ ክስተት መረጃን የያዘ ኤችቲኤምኤል መለያዎ ላይ ክፍል መኖሩን ይናገሩ.

ለዚህ ክፋይ የ "ክስተት" መታወቂያ መታወቂያ ሊሰጡዎት ይችላሉ, እና ያንን ክፍፍል ከ1-ፒክስል ጥቁር ድንበር ጋር ማጋራት ከፈለጉ የማረጋገጫ ቁጥር እንደሚከተለው ይጻፉ:

#event {border: 1px solid # 000; }

በመምረጫ መምረጫው ላይ ያለው ተግዳሮት በ HTML ሰነድ ውስጥ ሊደገሙ አለመቻላቸው ነው. የተለየ መሆን አለባቸው (በጣቢያዎ በርካታ ገጾች ላይ ተመሳሳይ መታወቂያ መጠቀም ይችላሉ, ግን በእያንዳንዱ ኤች ቲ ኤም ኤል ሰነድ ውስጥ አንድ ጊዜ ብቻ ነው). ስለዚህ ይህን ድንበር የሚያስፈልጉ 3 ክስተቶች ካሉዎት ለእያንዳንዳቸው «event1», «event2» እና «event3» መለያዎችን እና ቅጥ ያላቸውን መታወቂያዎች መስጠት አለብዎት. ስለዚህም "ክስተትን" ከላይ የተጠቀሰውን የ "ክስተት" መገለጫ ባህሪ ለመጠቀም ቀላል እና ሁሉም በአንድ ጊዜ እንዲሰሩ ቀላል ይሆናል.

በመታወቂያ መለያ ባህሪያት ያለው ሌላ ፈታኝ ሁኔታ ከክፍል ባህሪያት ከፍ ያለ ልዩነት ያላቸው መሆኑ ነው. ይህ ማለት ቀደም ሲል የተመሰረተ ቅፅን የሚሽረው የሲኤስኤል (CSS) ካስፈለገዎት በመታወቂያዎች ላይ በጣም ጥገኞች ከሆኑ ምን ማድረግ እንዳለብዎት ነው. ለዚህ ምክንያቱ ብዙ የድር ገንቢዎች እሴቱን በእውቂያቸው ላይ አይጠቀሙም, ይሄን እሴት አንድ ጊዜ ብቻ ለመጠቀም ቢሞክሩም ይልቁንም በአብዛኛዎቹ ቅጦች ላይ ለተወሰኑ ተኮር የክፍል አይነታዎች ተለዋውጠው ነው.

የመታወቂያ ባህሪያት ወደ መጫወት የሚገቡበት አንዱ አካባቢ ማለት በገጹ መልህቅ አገናኞች ውስጥ ያለ ገጽ መፍጠር ከፈለጉ ነው. ለምሳሌ, በአንዱ ገጽ ላይ ሁሉንም ይዘት የያዘ የፓርሎግራም ቅጥ ድር ጣቢያ ካለዎት የዚያው የተለያዩ ክፍሎች ላይ «ዝለል» የሚያደርጉ አገናኞች ካሉዎት. ይሄ እነዚህን የመልዕክት አገናኞች የሚጠቀሙ የመታወቂያ ባህሪያትና የፅሁፍ አገናኞችን በመጠቀም ነው.

በ <# ምልክት> ቀድመህ ያንን ያንተን እሴት ወደ አገናኙ የ href ባህሪ (አያይዘህ) ማካተት ትችላለህ, ይሄ እንደዚሁ:

ይህ አገናኝ

ሲጫኑ ወይም ሲነኩ ይህ አገናኝ ይህ መታወቂያ ባህርይ ካለው የገጽ ክፍል ይንቀሳቀሳል. በገጹ ላይ ምንም ኤለመንት ጥቅም ላይ ካልዋለ, አገናኙ ምንም ነገር አያደርግም.

ማስታወስ, በአንድ ገጽ ውስጥ ገጽ ውስጥ አገናኝን መፍጠር ከፈለጉ, የመታወቂያ መለያ ባህሪያት መጠቀም ይፈለጋሉ, ነገር ግን አሁንም ድረስ ወደ አጠቃላይ የሲሲኤስ የቅንጅቶች ዓላማዎች ወደ ክፍል መዞር ይችላሉ. ይሄ ዛሬ ገጾችን ያቆየኋቸው - እኔ የምስጢር መምህራንን በተቻለ መጠን ተጠቀምኩኝ እና ወደ የ ID መታሸራሸር ብቻ የምጠቀመው የሲ.ኤ.ሲ.ሲ እንደ ማያያዣ ብቻ ሳይሆን እንደ ገጽ ውስጥ አገናኝ ነው.

የመጀመሪያ ጽሑፍ በጄኒፈር ክርኒን. በ 8/9/17 በጄረሚ ጊራርድ የተስተካከለው