CSS තේරීම්. තේරීම් කමිටුව වර්ග

ඔබට නිශ්චිත වර්ණ නියම කිරීමට අවශ්ය සෑම වේ. එය කරන්නේ කෙසේද? සම්මත CSS තේරීම් ඔවුන් එකවර සියලු කොටස් සඳහා පරාමිතීන් බවයි, ලේබල සඳහා සුදුසු නැත. විසඳුම සරල ය. පන්තියේ සාමාජිකයන් සදනන. class = 'නිල්', තෙවන - - class = 'හරිත' උදාහරණයක් ලෙස, පළමු = 'රතු', දෙවන div class ලැබීය. දැන් ඔවුන් CSS වගු භාවිතා තෝරා ගත හැක.

කාරක රීති බොහෝදුරට පහත සඳහන් පරිදි වේ: පන්ති යන නම ලිවීම විසින් අනුගමනය, ලක්ෂ්යයක් සලකුෙණන් හඳුන්වනු ලබන්ෙන් ( "."). පළමු ඒකකය කළමනාකරණය කිරීමට, ඉදිකිරීම් .red භාවිතා කරන්න. දෙවන - .blue සහ එසේ මත.

වැදගත්! එය පන්ති නාලවල අර්ථවත් වටිනාකම් භාවිතා කිරීම රෙකමදාරු කරනු ලැබේ. එය අක්ෂර පරිවර්තනය (උදා, krasiviy-blok) හෝ ලිපි / අංක (ojfh834871) අහඹු සංයෝජන භාවිතා කිරීමට නරක ආකෘති පත්රය ලෙස සැලකේ. මෙම කේතය, ඔබ ඔබ ව්යාපෘතිය ආරම්භ කළ පසු නිරත වන අය මුහුණ බව දුෂ්කරතා ගැන සඳහන් නොකලත්, ව්යාකූල ලබා ගැනීමට බැඳී ඇත. හොඳම විකල්පය - එවැනි BEM ලෙස, ඕනෑම ක්රමවේදයක් භාවිතා කිරීමට.

වාසි - සාපේක්ෂ වශයෙන් ඉහළ නම්යතාවය.

අවාසි - විවිධ බලවේග ඔවුන් එකවර සංස්කරණය කළ බව, ඉන් අදහස් වන්නේ එකම පන්තියේ, විය හැකිය. ප්රශ්නය ක්රමවේදය මෙන්ම preprocessors උරුමය මගින් විසදිය ඇත. ඔවුන් බොහෝ සෙයින් වැඩ සරල, ඔබේ අත් අඩු, sass හෝ වෙනත් preprocessor ලබා ගැනීමට වග බලා ගන්න.

හැඳුනුම්පත තේරීම්

මෙම අනුවාදය මතය coders හා වැඩසටහන්කරුවන් ගැන අපැහැදිලි වේ. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. සාවද්ය අයදුම් ඔවුන් උරුමය ප්රශ්න ඇති කර ගත හැකි නිසා සමහර CSS නිබන්ධන, ID භාවිතය නිර්දේශ කරන්නේ නැහැ. කෙසේ වෙතත්, බොහෝ විශේෂඥයන් ක්රියාකාරීව සැකැස්ම පුරා ඔවුන් කටයුතු කර ඇත. ඔබ තීරණය කරන්න. # »), затем имя блока. පවුම ලකුණ ( "#"), එසේ නම්, වාරණ නම: කාරක රීති බොහෝදුරට පහත පරිදි වේ. #red. උදාහරණයක් ලෙස, #red.

отличается от класса по нескольким параметрам. හැඳුනුම්පත ක්රම කිහිපයක් පන්ති සිට වෙනස් වේ. ID. පළමුව, පිටුව දෙකක් සර්වසම හැඳුනුම්පත විය නොහැක. ඔවුන් අද්විතීය නමක් පැවරී ඇත. දෙවනුව, එවැනි තේරීම් ඉහළ ප්රමුඛතාවක් ඇත. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. මෙය ඔබ රතු ඒකකයක් පන්ති නියම නම් සහ CSS වගු රතු නියම අර්ථය පසුබිම් වර්ණය, පසුව එම id නිල් එය අනුයුක්ත සහ නිල් වර්ණය නියම, ඒකකය නිල් හැරී ඇත.

වාසි - ඔබ ටැග් සහ පන්ති මෝස්තර නොසලකා හරිමින්, නිශ්චිත මූලද්රව්ය පාලනය කළ හැකිය.

ID и class. අවාසි - ID සහ පන්තියේ විශාල සංඛ්යාවක් අහිමි කර ගැනීමට පහසුය.

වැදගත්! ID вам, в общем-то, не нужны. ඔබ BEM ක්රමවේදය (හෝ එහි සමරූපී) භාවිතා කරන්නේ නම්, ඔබට ID, සාමාන්යයෙන්, අවශ්ය නැත. මෙම තාක්ෂණය ඒ තරම් වඩාත් පහසු සැකැස්ම සුවිශේෂී පන්ති භාවිතය ඇතුළත් වේ.

විශ්ව තේරීම්

{}. කාරක රීති: Starlets ලකුණ ( "*") සහ සඟල වරහන්, එනම්, {*} ...

පිටුවේ සියලු මූලද්රව්ය වරක් ඇතැම් ලක්ෂණ අනුයුක්ත කිරීම සඳහා යොදා ගනී. විට මෙම ප්රයෝජනවත් විය හැක්කේ කෙසේද? box-sizing: border-box. උදාහරණයක් ලෙස, ඔබ පිටුව දේපල කොටුව-sizing සකස් කිරීමට අවශ්ය නම්: දේශ-කොටුව. div *{}. ලේඛනයේ සියලු සංරචක පාලනය සඳහා යොදා ගත පමණක් නොව හැකි, පමණක් නොව, එම නම් කරන ලද වාරණ සියලු දරුවන් පාලනය කිරීමට, උදාහරණයක් ලෙස, div * {}.

වාසි - ඔබ වරකට භාණ්ඩ විශාල සංඛ්යාවක් පාලනය කළ හැකිය.

අවාසි - නම්යශීලී ප්රමාණවත් නොවේ. මීට අමතරව, මෙම තේරීම් භාවිතය, සමහර අවස්ථාවල දී මෙම පිටුව වැඩ වේගය.

ගුණාංග

නිශ්චිත විශේෂණය සමග අංගයක් පාලනය කල හැක. උදාහරණයක් ලෙස, ඔබ විසින් වෙනස් ගති ලක්ෂණය වර්ගය සමග ආදාන ටැග් ගණනාවක් තියෙනවා. ඔවුන්ගෙන් එක් කෙනෙක් - පෙළ, දෙවන - රහස් පදය, තුන්වන - අංකය. ඇත්ත වශයෙන්ම, ඔබ එක් එක් පන්තිය හෝ ID සැකසිය හැක, නමුත් එය සෑම විටම පහසු නැත. ගුණාංග CSS තේරීම් එය උපරිම සහිත නිරවද්යතාව ඇතැම් ටැග් සඳහා වටිනාකම් නියම කිරීමට හැකි වෙනවා. උදාහරණයක් ලෙස, මේ වගේ:

ආදාන [වර්ගය = 'පෙළ'] {}

මෙම තේරීම් ආදාන පෙළ වර්ගය සමග සියලු ගුණාංග තෝරා ඇත.

මෙම මෙවලම ඉතා නම්යශීලී වන අතර ටැග් ඕනෑම සමග භාවිතා කල හැකි, වන ගුණාංග ද ඇති විය හැක. නමුත් එම සියලු නොවේ! තැටියක CSS පිරිවිතර වඩාත් පහසු සමග අංග පාලනය කර ගැනීමේ හැකියාව ඇත!

ඔබගේ පිටුව ආරෝපණය තැන් දරණුව = "නමක් ඇතුළත් කරන්න" සහ ආදාන තැන් දරණුව = "මුරපදය ඇතුලත් කරන්න" සමග ආදාන ඇති බව සිතන්න. ඔවුන් ද තේරීම් භාවිතා තෝරා ගත හැක! මෙය සිදු කිරීම සඳහා පහත දැක්වෙන ව්යුහය භාවිතා කරන්න:

ආදාන [තැන් දරණුව = "නම ඇතුල් කරන්න"] {} හෝ ආදාන [තැන් දරණුව = "මුරපදය ඇතුලත් කරන්න"]

ලක්ෂණ සහිත සමහර විට වඩාත් නම්යශීලී. ගේ ඔබ හා සමාන ගුණාංග මාතෘකාව (උදාහරණයක් ලෙස, "කැස්පියන්" සහ "කැස්පියන්") සමග ටැග් ගණනාවක් තිබෙනවා කියා. දෙකම තෝරා ගැනීම සඳහා, පහත සඳහන් තේරීම් භාවිතා කරන්න:

[හිමිකම් * = "Kaspiysk"]

CSS වන "කැස්පියන්", එනම්. ඊ, එවිට, "කැස්පියන්" සහ "කැස්පියන්" සංකේත වේ මාතෘකාව සියලු භාණ්ඩ තෝරා ඇත.

ඔබට කිසියම් චරිතයක් ගුණාංග ආරම්භ බව ටැග් තෝරා ගත හැකිය:

[හිමිකම් ^ = "ඔබට අවශ්ය චරිතයක්"] {}

හෝ ඒවා අවසන්:

[හිමිකම් $ = "හරි චරිතයක්"] {}.

වාසි - උපරිම නම්යතාවය. ඔබ පන්ති අත්වැරදීම් තොරව ඕනෑම දැනට පවතින පිටුවක් අංග තෝරා ගත හැකිය.

අවාසි - සාපේක්ෂව කලාතුරකින් භාවිතා පමණක් විශේෂිත අවස්ථාවල දී. කාරණය පන්තියේ බොහෝ සංවිධානය කිරීමට වඩා පහසු වන බැවින්, බොහෝ වෙබ් නිර්මාණකරුවන් ක්රමවේදය, කැමති කොටු වරහන් "සම තැන" හා ලකුණු. මීට අමතරව, මෙම තේරීම් Internet Explorer සංස්කරණ 7 සහ පහත දී වැඩ කරන්නේ නැහැ. කෙසේ වෙතත්, ගිය දැන් පැරණි Internet Explorer අවශ්ය කරන්නේ?

ව්යාජ පන්ති තේරීම්

ව්යාජ තත්වය අංගයක් හැඳින්වේ. උදාහරණයක් ලෙස ,: සැරිසරා - ඔබ පියාසර කරන විට කුමක් පිටුවේ කොටසක් සිදු ,: සංචාරය - සංචාරය ලින්ක් එක. පළමු දරුවා සහ:: පසුගිය ළමා එය ද වැනි අංග ඇතුළත් වේ.

එය ස්තුති මෙය බැලීම සදහා ඔබට JavaScript භාවිතය තොරව "සජීවී" පිටුවක් කළ හැකි නිසා තේරීම් මෙම වර්ගයේ ක්රියාශීලීව, නූතන සැකැස්ම භාවිතා වේ. උදාහරණයක් ලෙස, ඔබ වග බලා ගන්න ඔබට එහි වර්ණ වෙනස් BTN පන්ති සමග බොත්තම පියාසර කළ බව ද අවශ්ය වෙනවා. මෙය සිදු කිරීම සඳහා, පහත සඳහන් ආකෘතිය භාවිතා කරයි:

.btn: පියාසර {

පසුබිම වර්ණ: රතු,

}

රූපලාවන්ය බොත්තම මූලික ගුණ සඳහන් කළ හැක, සංක්රමණයට දේපල, උදාහරණයක් ලෙස, 0.5s - මෙම නඩුවේ, බොත්තම ක්ෂණිකව බ්ලෂ් නැහැ, හා දෙවන අර්ධ තුළ.

ගුණ - පුළුල් ලෙස පිටු "පුනර්ජීවනය" සඳහා භාවිතා වේ. භාවිතා කිරීමට පහසු.

අවාසි - ඔවුන් නොවේ. මෙය ඇත්තටම ප්රයෝජනවත් මෙවලමකි. කෙසේ වෙතත්, අද්දැකීම් අඩු වෙබ් නිර්මාණකරුවන් ව්යාජ පන්ති මහත් අහිමි විය හැක. ප්රශ්නය අධ්යයන සහ විසඳා ඇත.

ව්යාජ තේරීම්

"ව්යාජ" - මේ HTML නොවන, පිටුවේ කොටස් ඇත, නමුත් ඔවුන් තවමත් කළමනාකරණය කළ හැකිය. ඔබ තේරුම් ගන්න බැරි වෙලා තියෙන්නේ? එය පෙනේ වඩා පහසු වේ. උදාහරණයක් වශයෙන්, ඔබ, වෙනත් කුඩා සහ කළු පෙළ හැර විශාල හා රතු වැල ප්රථම ලිපිය, කරන්න ඕන. ඇත්තෙන්ම, යම් පන්තිය සමග පරිච්ඡේදයක දී එම ලිපියේ නිගමනය කළ හැකි, නමුත් එය දිගු හා කම්මැලි දෙයක්. එය ලිපිය පළමු :: සමස්ත ඡේදය තෝරා සහ ව්යාජ භාවිතා කිරීමට වඩාත් පහසු වේ. එය පළමු ලිපිය පෙනුම පාලනය කිරීමට අවස්ථාව ලබා දෙයි.

ව්යාජ මූලද්රව්ය ඉතා විශාල සංඛ්යාවක් ඇත. සාර්ථක නොවිය තනි ලිපියේ ඒවා ලැයිස්තු. ඔබ ඔබේ ජනප්රිය සෙවුම් යන්ත්රය තුළ අදාළ තොරතුරු සොයා ගත හැකි වනු ඇත.

වාසි - පිටුව පෙනුම සකස් කිරීම සඳහා වන නම්යශීලී ලබා දෙයි.

අවාසි - ඔවුන්ට නව බොහෝ විට ව්යාකූල වේ. පමණක් යම් බ්රව්සර වැඩ මේ ආකාරයේ බොහෝ තේරීම්.

සාරාංශ ගත කිරීමට

තේරීම් - ලියවිල්ල ප්රවාහය පාලනය සඳහා ප්රබල අවියක්. ඔහුට ස්තුති, ඔබ පිටුව සෑම තනි සංරචකයක් තෝරා ගත හැකිය (භාගික වශයෙන් පමණක් පවා ඇත). ලබා ගත හැකි සියලු විකල්ප ඉගෙන, හෝ ඔවුන් ලිවීමට වග බලා ගන්න. ඔබට අන්තර් මූලද්රව්ය නවීන මෝස්තර හා කැබලි අක්ෂර සමග සංකීර්ණ පිටු නිර්මාණය කරන විට මෙය විශේෂයෙන් වැදගත් වේ.