چرتک بلاگ

سلام دوستان امیدوارم حالتون خوب باشه :) تو این قسمت در ابتدا قراره سلکتور های تو در تو رو بررسی کنیم و ببینیم که مثلا چطور میشه تمام لینک های موجود در یک div با کلاس خاص رو به شکل دکمه در آورد. بعدش وراثت رو توضیح میدیم و دقیق میدونیم چرا لینک ها به صورت پیش فرض به رنگ آبی هستن. پس با ما همراه باشین!

سلکتور تو در تو در CSS

فرض کنین میخوایم یک چیزی مثل این بسازیم: (عکس از قالب شماره 52 عرفان هستش. به پست بعدی مربوط هستش.)

شاید چیزی که اول از همه به ذهنتون بیاد این باشه که به هر لینک توی اون جعبه یک کلاس btn بدیم (اگر قسمت کلاس ها رو دیده باشین) ولی اینطوری واقعا وقت گیر هست. ما میخوایم به div مون بگیم اگر لینکی داشتی به این شکل درش بیار. اینجاست که پای CSS Combinators میاد وسط! فرض کنین این div بالایی یک کلاس به اسم tags داره. اگر ما .tags رو بنویسیم و بعدش یک فاصله و a بنویسیم، به زبان ساده میگیم از کلاس tags بچت که تگ a هست باید این مشخصات داشته باشه :) مثال زیر رو ببینین:

<style>
.tags a {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    padding: 4px 6px; /* bala va payin:4px, rast va chap:6px */
    margin: 2px 0px; /* bala va payin:2px, rast va chap:0px */
    display: inline-block;
}
</style>
<div class="tags">
    <a href="http://google.com">گوگل</a>
    <a href="http://instagram.com">اینستاگرام</a>
    <a href="http://blog.ir">بلاگ</a>
</div>

تو کد بالا هر چیزی که بین دو تگ style هست مربوط به css هستش و میتونین این رو در فایل css خارجی تون هم بنویسین. ما الان در این کد CSS تمام تگ های a که در کلاس tags هستن رو انتخاب کردیم و گفتیم این دستورات رو روش اعمال کن (تقریبا در مورد همشون به جز مورد آخری قبلا گفتم. البته مارجین و پدینگ هم یکمی توضیحات لازم داشت) اگر کد بالا رو در یک سند html کپی کنین نتیجه کار مشابه عکسی میشه که قبلا دیدین! یعنی اینطوری:

شاید بپرسین  اینا که اصلا شبیه نیستن! رنگشون... اون خط زیرشون... حتی فونتشون! گرفتی ما رو؟ این مسئله برمیگرده به وراثت.

وراثت در CSS

تو قالب عرفان تعریف شده که اولا هر چی لینک هست خط زیر نداشته باشه. دوما هر لینکی که در قسمت ساید بار هست به رنگ سیاه باشه و بدنه سایت (body) هم فونتش tahoma باشه. بخاطر همین اگر ما ویژگی خاصی رو ننوسیم مرورگر میره از آباء و اجداد اون سکلتوره میپرسه

داداش این ویژگی رو داری؟ نوه نتیجت به این احتیاج داره.

اگر ویژگی که مد نظر ماست حتی در سلکتور html و body هم تعریف نشده باشه مرورگر خودش دست به عمل میزنه و ویژگی و مقدار پیش فرضی که داره رو روی این tags اعمال میکنه. بخاطر همین لینک های ما به رنگ آبی هستن و خط زیر هم دارن (چون اینا ویژگی های پیشفرض مرورگر هستن). اگر این کد رو تو ویرایشگرتون در بلاگ بیان بزنین و دکمه پیش نمایش پست رو بزنین شاید نتیجه به شکل دیگه ای باشه!

برای اینکه مثال ما کاملا دقیق باشه کد رو بدین سان کامل میکنیم:

<style>
.tags a {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    padding: 4px 6px; /* bala va payin:4px, rast va chap:6px */
    margin: 2px 0px; /* bala va payin:2px, rast va chap:0px */
    display: inline-block;
    text-decoration:none;
    color:back;
    font-family:tahoma;
}
</style>
<div class="tags">
    <a href="http://google.com">گوگل</a>
    <a href="http://instagram.com">اینستاگرام</a>
    <a href="http://blog.ir">بلاگ</a>
</div>

text-decoration:none میگه من دکوراسیون متن نمیخوام! (خط زیر یک دکوراسیون هست مثلا) بزار معمولی باشه.

font-family:tahoma هم میگه فونتش تاهوما باشه. با color هم که آشنا هستین...

همین :) اگر کد بالا رو بنویسین، وضعیت بهتره.

اگر در کد های css دیدین مثلا اینطوری نوشته:

.sidebar .tags a {
...
}

این یعنی تگ a که داخل هر چیزی که کلاس tags رو داره که اون هم در تگی با کلاس sidebar هست رو مورد هدف قرار بده و دستورات رو اعمال کن! در واقعیت داریم کدهامون رو مشخص تر میکنیم.(این زمانی کاربرد داره که بخواین کد هاتون رو از نو رونویسی کنین یعنی اگر قبلا در کلاس tags مشخص کرده بودین که رنگ متن سیاه باشه اگر اینطوری بنویسین میتونین اینجا رنگ جدیدی که میخواین رو اعمال کنین. خودش بحث جدایی هست.) اگر بخوایم چیز نا مفهومی که گفتم رو در html نشون بدیم اینطوریه:

...
<element class="sidebar">
...
    <element class="tags">
        <a>کد اینجا اعمال میشود!</a>
        ...
    </element>
...
</element>
...

که element هر چیزی میتونه باشه! تگ p یا div یا span یا هر چیزی سه نقطه هم یعنی اینکه کد های html بیشتری اونجا هست.

خب این هم از این قسمت :) امیدوارم کاربردی بوده باشه. دیگه تقریبا آماده هستیم قالبمون رو ویرایش کنیم و در قسمت بعدی همین کار رو انجام خواهیم داد! فعلا فقط از شما انتظار میره بدونین

.tags a {
}

یعنی چی! به غیر از فاصله علائم دیگه ای مثل + ~ <  هم وجود دارن که معنای خاصی دارن و میتونین از این لینک اون ها رو یاد بگیرین. در این لینک هم کل سلکتور های CSS موجود هست (به لینک های اول مقاله توجه کنین) . امیدوارم از این قسمت هم استفاده کرده باشین. در پناه حق!

پ.ن: این تنظیم ساعت حین انتشار و بعد از ظهر قبل از ظهر اعصاب برامون نزاشته :/