تبلیغات
تبلیغات متنی
محبوبترینها
ساقدوش کیست ؟ | وظیفه ساقدوش در مراسم عقد و عروسی چیست ؟
قایق‌سواری تالاب انزلی؛ تجربه‌ای متفاوت با چاشنی تخفیف
چگونه ویزای توریستی فرانسه را بگیریم؟
معرفی و فروش بوته گرافیتی ریخته گری
بهترین بروکر برای معاملات فارکس در سال 2024
تجربه رانندگی با لندکروز در جزیره قشم؛ لوکس‌ترین انتخاب
اکسپرتاپ: 10 شغل پردرآمد برای مهاجران کاری در کانادا
بهترین سایتهای خرید تیک آبی رسمی اینستاگرام در ایران
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1815665341
مبحث specificity در CSS -
واضح آرشیو وب فارسی:سایت ریسک: مبحث specificity در CSS amirabbas_p30magazine 12 ارديبهشت 1386, 13:49مبحث specificity یکی از مباحث مهم CSS هستش که کمی پیچیده هست. شما می دونید که میشه عناصر مختلف داخل صفحه رو با استفاده از گزینشگر ها (selectors) ی مختلفی در داخل صفحه انتخاب کنید و سبک خاصی رو به اونها اختصاص بدید. گاها پیش میاد که شما دستورات CSS رو نوشته اید و بعضی از این دستورات با هم تداخل دارند و رنگ یا اندازه و فونت یک عنصر در صفحه دو بار به طور مجزا در دو بخش مختلف کد تعیین شده و مقادیر هم با هم تفاوت دارند. برای مثال : h1 {color: red;} body h1 {color: green;} h2.grape {color: purple;} h2 {color: silver;} خوب در این شرایط مرورگر کدام سبک رو برای اعمال کردن به عنصر مربوطه انتخاب می کنه ؟ الان در مثال بالا یک بار رنگ متن داخل تگ h1 ، قرمز انتخاب شده و در دستور دیگری تمامی تگ هایی که داخل تگ body هستند با رنگ سبز مشخص شده. در اینجا مرورگر کدوم مقدار رو برتر می دونه و از اون استفاده می کنه ؟ خوب مشخصه که هر دو رنگ رو نمیشه با هم به کار برد و صد در صد یکی از دستورات بر اون یکی ارجحیت داره. خوب حالا این ارجحیت دستور ها چطور انتخاب می شوند. در اینجا مبحث specificity هر تگ و یا گزینشگر مشخص کننده ارجحیت هر دستوره خوب این ارجحیت چطور مشخص میشه و میزان اهمیت هر تگ و یا هر گزینشگر چقدره ؟ ارزش عناصر و گزینشگر ها به شکل یک عدد چهار رقمی حساب میشه که شبیه به اینه 0,0,0,0 خوب حالا اینجا لیست اهمیت گزینشگر ها و برچسب ها رو می نویسم 1- برای هر دستوری که به شکل درون خطی و داخل خود کد HTML نوشته میشه مقدار به این شکل هست 1,0,0,0 شما می تونید این رو 1000 بخونید. این بالاترین ارزشه و اگر شما مقدار مشخصی رو برای یک دستور به شکل درون خطی و در داخل کد HTML به شکل به کار بردن دستور ""=stlye به کار ببرید بر تمامی دستورات ارجحیت داره. مثلا شما در فایل CSS خودتون رنگ تگ <P> رو قرمز مشخص کردید ولی در داخل کد HTML رنگ تگ <P> رو به این شکل مشخص کرده اید : <p style="color: green;">youe text here</p> خوب الان رنگ تگ پاراگراف رو ما سبز مشخص کردیم و چون ارزش CSS درون خطی یا به عبارتی CSS inline از همه بیشتره در نتیجه متن داخل اون پاراگراف به رنگ سبز نمایش داده میشه. 2- دستوری که به یک id اختصاص داده شده باشه مقدار specificity اون به این شکله 0,1,0,0 شما میتونید این مقدار رو 100 بخونید. بعد از CSS درون دستوری این مقدار بالاترین ارزش رو داره و اگر شما مقداری رو برای یک id مشخص کنید اون مقدار بالاترین ارزش رو داره (البته کمتر از CSS درون خطی ) 3- مقدار specificity برای class و گزینشگر های کلاس کاذب (pseudo class selectors) و گزینشگر های خصوصیت (atribute selectors) این مقدار شبیه به اینه : 0,0,1,0 شما می تونید این مقدار رو 10 بخونید. بعد از اون دو مورد بالا این مقدار بالاترین ارزش رو داره. 4- مقدار specificity برای برچسب (tag selectos) و عناصر کاذب (pseudo elements) این مقدار شبیه به اینه: 0.0.0.1 شما میتونید این مقدار رو 1 بخونید. این مقدار کمترین ارزش رو داره. گزینشگر فراگیر (علامت *) و ترکیب کننده ها (علامت هایی مثل < که در کد CSS استفاده می شوند) ارزش صفر دارند و به حساب نمیان. خوب حالا چطور باید این مقادیر specificity رو در داخل کد حساب کنیم؟ برای محاسبه مقادیر باید اونها رو با هم جمع بزنیم. به این مثال دقت کنید: p em {color: purple;} /* specificity = 0,0,0,2 */ در این مثال ما دو گزینشگر برچسب داریم و هر کدوم از اونها ارزش یک داره و در نتیجه ارزش این دستور در کل میشه 2 و یا این مثال: div#sidebar *[href] {color: silver;} /* specificity = 0,1,1,1 */ خوب ما در مثال بالا یک گزینشگر برچسب داریم (همون div) یه id داریم (همون #sidebar) و یک گزینشگر خصوصیت داریم [href] و یک گزینشگر فراگیر داریم (همون علامت *) که مقدارش صفره. خوب مقدار specificity این دستور میشه: 100 تا برای گزینشگر آیدی + 10 تا برای گزینشگر خصوصیت + 1 برای گزینشگر برچسب = 111 خوب حالا در عمل این کد ها رو با هم مقایسه می کنیم h1 {color: red;} /* 0,0,0,1 */ body h1 {color: green;} /* 0,0,0,2 (winner)*/ در این مثال مقدار specificity دستور دوم بیشتره در نتیجه دستور دوم برنده این مقایسه هست و رنگ متن داخل اون تگ h1 به رنگ سبز نمایش داده میشه. و حالا یکی دیگه h2.grape {color: purple;} /* 0,0,1,1 (winner) */ h2 {color: silver;} /* 0,0,0,1 */ در این مثال هم دستور اول مقدار بیشتری رو داره و در مقایسه برنده میشه. و آخرین مثال html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */ li#answer {color: navy;} /* 0,1,0,1 (winner) */ در این مثال هم مقدار دوم به خاطر اینکه مقدار specificity بیشتری داره در مقایسه برنده میشه. یه مورد رو هم متذکر بشم مقدار ها به شکل ارزش مدال ها در المپیک حساب میشه. شما اگر 100 تا مدال برنز داشته باشید و رقیب شما تنها 1 مدال نقره داشته باشه در رده بندی بالاتر قرار می گیره. مثلا این دو مقدار رو در نظر بگیرید 0.0.0,24 و 0.0.1.0 در اینجا ارزش مقدار دوم بیشتره چون در جایگاه بالاتری قرار داره. حالا اینها رو شما حساب کنید و جواب رو بنویسید. برای تمرینه Style="" #wrapper #content {} #content .datePosted {} div#content {} #content {} p.comment .dateposted {} p.comment{} div p {} p {} یه بخش کوچیکش هم مونده که مربوط میشه به دستور important! که اون رو هم سر فرصت توضیح میدم منبع سایت خودم () :mrgreen: mohseni12345 14 ارديبهشت 1386, 11:12سلام ممنون مدتها دنبال یه همچین چیزی بودم ولی یه مشکل هست. من نتونستم از این خصوصیت استفاده کنم میشه یه کد کامل بزاری منظورم از کامل اینه که انواع حالتهای ممکن رو توش به کار ببری amirabbas_p30magazine 14 ارديبهشت 1386, 12:25من متوجه نشدم منظور شما چیه بحث سر خصوصیت نیست. بحث سر تعیین specifity هر دستور CSS هست. ما اصولش رو گفتیم. حالا شما با استفاده از اطلاعات داخل این مقاله باید بتونید ارزش هر دستور رو تعیین کنید و متوجه بشید که در بین دو دستور CSS کدوم ارزش بیشتری داره. حالت های مختلف نوشتن کد های سی اس اس بی نهایته و نمیشه کلیه حالت های ممکن نوشتن کد رو نوشت. mohseni12345 16 ارديبهشت 1386, 13:36ببخشید من اشتباه کردم فکر کردم میشه با این کار به هر خصوصیتی که خواصتیم الویت بالاتر یا پایین تری بدیم NabiKAZ 27 ارديبهشت 1386, 14:29خب خب خب ! به نظر من بحث بسیار خوب و جالبیه . یادم میاد یه مطلب در مورد css میخوندم یه جاش در حد یه خط نوشته بود که css های درون تگ ها در اولویت اول هستند بعد از اون css های درون style جاری صفحه و پس از اون style های درون فایلهای خارجی در اولویت هستند. در آخرهم به این جمع بندی رسیده بود که css هایی که به لحاظ فاصله به متون ما نزدیک تر هستند از اولویت بالاتری برخوردار هستند. البته شما در مقاله بالا این مطلب رو ریز تر بررسی کردید. در مورد تمرینی که در آخر آوردید، راستش با اینکه نمیدونم منبعتون کجاست اما وقتی بخشی از کد تمرین رو در گوگل سرچ کردم به یه مقاله به زبان چینی یا ژاپنی ()برخورد کردم که جواب همین تمرین رو عیناً نوشته بود!!! البته این رو هم بگم قبلش با برداشت های شما از مقاله جواب رو نوشتم و بعد مقایسه که کردم دیدم پاسخم درست بوده. ضمنا شما در ابتدای خط دوم از تمرین یه کارکتر # رو جا انداختید ! این رو هم اضافه کنم که تمامی دستورات تمرین به ترتیب اولویت اجرا ، نوشته شدند و این مطلب پس از محاسبه اولویت تک تک خطوط ، مشخص میشه. اینم پاسخ: Style="" 1,0,0,0 #wrapper #content {} 0,2,0,0 #content .datePosted {} 0,1,1,0 div#content {} 0,1,0,1 #content {} 0,1,0,0 p.comment .dateposted {} 0,0,2,1 p.comment{} 0,0,1,1 div p {} 0,0,0,2 p {} 0,0,0,1 باتشکر نبی amirabbas_p30magazine 27 ارديبهشت 1386, 14:42ممنون اون # رو به خط دوم تمرین اضافه کردم این تمرینها فکر کنم داخل کتاب CSS Mastery بود نوشته آقای Andy Budd کتابش هم بسیار کتاب جالبیه. حتما مطالعه کنید NabiKAZ 27 ارديبهشت 1386, 19:32نسخه free کتاب رو پیدا نکردم. amirabbas_p30magazine 27 ارديبهشت 1386, 20:14نبی جان اون کتاب تجاریه. نسخه مجانی نداره از اینجا دانلود کن h**p://rapidshare.de/files/23449341/1590596145.zip
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 226]
-
گوناگون
پربازدیدترینها