انتخابگرهای بیشتر و تصویر پس‌زمینه

۱. انتخابگر گروهی

گاهی چند عنصر مختلف باید استایل یکسانی بگیرند. به جای تکرار، نامشان را با ویرگول پشت سر هم می‌نویسیم.

/* روش طولانی */
h1 { color: #2f4f4f; }
h2 { color: #2f4f4f; }
h3 { color: #2f4f4f; }

/* روش کوتاه با انتخابگر گروهی */
h1, h2, h3 {
    color: #2f4f4f;
    font-family: Tahoma, sans-serif;
}

انتخابگر گروهی: نمونه 01-group-selector

شرح مثال

ویرگول بین انتخابگرها معنی «و» می‌دهد: این قانون روی h1 و h2 و h3، هر سه، اعمال می‌شود. هر نوع انتخابگری را می‌شود در گروه آورد، حتی مخلوطی از تگ و کلاس و آی‌دی: h1, .title, #main { ... }

۲. انتخابگر فرزندی

این انتخابگر می‌گوید «تنها عنصرهایی که داخل فلان عنصر هستند». فاصله بین دو نام، همین معنی را می‌دهد.

/* فقط پاراگراف‌هایی که داخل جعبه معرفی هستند */
.intro p {
    color: #555555;
    font-size: 18px;
}

/* فقط لینک‌هایی که داخل منو هستند */
.menu a {
    color: white;
    text-decoration: none;
}

/* فقط موردهای فهرستی که داخل پاورقی هستند */
.footer li {
    color: gray;
}

انتخابگر فرزندی: نمونه 02-descendant-selector

شرح مثال

فرض کنید صفحه شما بیست لینک دارد اما تنها می‌خواهید لینک‌های منو سفید باشند. اگر بنویسید a { color: white; } همه لینک‌ها سفید می‌شوند و لینک‌های وسط متن ناخوانا. با .menu a تنها لینک‌های داخل منو را هدف می‌گیریم.

این انتخابگر تا هر عمقی کار می‌کند. اگر لینک داخل یک li و آن هم داخل یک ul و آن هم داخل menu. باشد، بار دیگر .menu a پیدایش می‌کند.

۳. انتخابگر سراسری

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Tahoma, sans-serif;
}

انتخابگر سراسری: نمونه 03-universal-selector

شرح مثال

علامت ستاره یعنی «هر عنصری در صفحه، بدون استثنا». این همان کدی است که در فصل چهارم معرفی شد و از این پس در ابتدای هر فایل CSS می‌نویسیمش.

دلیل هر خط:

• margin: 0 و padding: 0 فاصله‌های پیش‌فرض مرورگر را پاک می‌کنند. مرورگرها خودشان به عنوان‌ها و پاراگراف‌ها فاصله می‌دهند و این فاصله در مرورگرهای مختلف کمی فرق دارد. با صفر کردن، از یک نقطه شروع یکسان و قابل پیش‌بینی آغاز می‌کنیم.
• box-sizing: border-box همان راه‌حل فصل قبل.
• font-family قلم را برای کل صفحه یکسان می‌کند و در فصل بعد کامل توضیح داده می‌شود.

۴. شبه‌کلاس hover

تا اینجا استایل‌ها ثابت بودند. حالا اولین استایل «واکنشی» را می‌بینیم: استایلی که تنها وقتی موس روی عنصر می‌رود اعمال می‌شود.

.btn {
    background-color: #2f4f4f;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
}

.btn:hover {
    background-color: #ff6347;
}

.card:hover {
    border-color: #ff6347;
}

a:hover {
    color: #ff6347;
}

شبه‌کلاس hover: نمونه 04-pseudo-class-hover

شرح مثال

hover: با دو نقطه به انتخابگر می‌چسبد و یعنی «در حالتی که موس روی این عنصر است». به این نوع انتخابگر شبه‌کلاس می‌گویند، چون مانند کلاس عمل می‌کند اما ما آن را در HTML ننوشته‌ایم؛ مرورگر خودش بر اساس وضعیت کاربر آن را اعمال و بعد برمی‌دارد.

دقت کنید که در قانون hover: تنها چیزی را می‌نویسیم که می‌خواهیم تغییر کند. بقیه ویژگی‌ها از قانون اصلی سر جایشان می‌مانند. اینجا تنها رنگ پس‌زمینه عوض می‌شود و padding و گردی گوشه دست‌نخورده باقی می‌مانند.

۵. تصویر پس‌زمینه

body {
    background-image: url('images/pattern.png');
}

.hero {
    height: 400px;
    background-image: url('images/school.jpg');
}

تصویر پس‌زمینه: نمونه 05-background-image

شرح مثال

مسیر تصویر داخل url() و بین گیومه نوشته می‌شود. قوانین مسیر دقیقاً همان‌هایی است که در فصل دوم دیدیم، با یک تفاوت مهم: مسیر نسبت به محل فایل CSS محاسبه می‌شود، نه فایل HTML. اگر فایل CSS شما در پوشه دیگری باشد، باید مسیر را از آنجا حساب کنید.

تفاوت با تگ img

سؤال ساده برای تصمیم‌گیری: اگر این تصویر حذف شود، آیا معنی صفحه ناقص می‌شود؟ اگر بله، از img استفاده کنید. اگر نه، پس‌زمینه بهتر است.

۶. تنظیمات تصویر پس‌زمینه

تصویر پس‌زمینه به تنهایی معمولاً نتیجه خوبی نمی‌دهد. اگر تصویر کوچک باشد تکرار می‌شود و اگر بزرگ باشد بریده می‌شود. سه ویژگی این را کنترل می‌کنند.

.hero {
    height: 400px;
    background-image: url('images/school.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pattern {
    background-image: url('images/dot.png');
    background-repeat: repeat;
}

.corner-logo {
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 80px;
}

تنظیمات پس‌زمینه: نمونه 06-background-position-size-repeat

شرح مثال

background-repeat تکرار تصویر را کنترل می‌کند:

background-size اندازه تصویر را تعیین می‌کند:

background-position می‌گوید کدام قسمت تصویر دیده شود. مقدارهای رایج: center، top، bottom یا ترکیبی مانند top left. وقتی از cover استفاده می‌کنید، center معمولاً بهترین انتخاب است، چون مهم‌ترین بخش هر عکسی معمولاً وسطش است.

background-size: cover;
background-position: center;
background-repeat: no-repeat;

۷. نمونه نهایی فصل

<body>
    <div class="hero">
        <h1>مؤسسه فنی و آموزشی کادوس</h1>
        <p>آموزش مهارت‌های واقعی بازار کار</p>
    </div>

    <div class="menu">
        <a href="#">خانه</a>
        <a href="#">دوره‌ها</a>
        <a href="#">تماس</a>
    </div>

    <div class="content">
        <h2>درباره ما</h2>
        <p>ما از سال ۱۳۹۰ در حال آموزش هستیم.</p>
        <a href="#" class="btn">مشاهده دوره‌ها</a>
    </div>
</body>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Tahoma, sans-serif;
}

.hero {
    height: 350px;
    background-image: url('images/campus.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    padding: 120px 40px;
    text-align: center;
}

.menu {
    background-color: #2f4f4f;
    padding: 15px;
    text-align: center;
}

.menu a {
    color: white;
    text-decoration: none;
    padding: 8px 18px;
}

.menu a:hover {
    color: #ff6347;
}

.content {
    padding: 40px;
}

h1, h2 {
    margin-bottom: 15px;
}

.content h2 {
    color: #2f4f4f;
}

.btn {
    display: inline-block;
    background-color: #2f4f4f;
    color: white;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 8px;
    margin-top: 20px;
}

.btn:hover {
    background-color: #ff6347;
}

نمونه نهایی فصل: نمونه 07-final-example

شرح مثال

هر چهار انتخابگر تازه این فصل در این کد استفاده شده‌اند:

• سراسری: قانون ستاره در بالای فایل، پایه کار را یکدست می‌کند.
• گروهی: h1, h2 به هر دو عنوان با یک قانون فاصله پایین می‌دهد.
• فرزندی: .menu a تنها لینک‌های منو را سفید می‌کند و .content h2 تنها عنوان داخل محتوا را رنگ می‌دهد. دقت کنید لینک btn. که داخل محتواست، رنگ سفید منو را نمی‌گیرد.
• hover: هم روی لینک‌های منو و هم روی دکمه، تا کاربر بفهمد این‌ها قابل کلیک هستند.

در بخش hero. هم سه تنظیم پس‌زمینه را با هم می‌بینید. padding: 120px 40px باعث می‌شود متن در ارتفاع سربرگ پایین‌تر بیاید و وسط‌تر به نظر برسد. در فصل هفتم روش بسیار بهتری برای وسط‌چین کردن عمودی یاد می‌گیریم.

یک نکته تازه هم اینجا هست: display: inline-block روی دکمه. چون a یک عنصر درون‌خطی است، padding عمودی روی آن درست عمل نمی‌کند. این خط رفتارش را عوض می‌کند تا مانند یک جعبه واقعی رفتار کند. درباره display در فصل ششم و هفتم بیشتر می‌خوانیم.

خلاصه فصل