طراحی وب: ۱- سلکتور

نوشته حسین بهنودی در ۹ مهر ۱۴۰۰

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

آناتومی کلی CSS به شکل زیر است. در ابتدا سلکتور نوشته می‌شود. و پس از آن دستورات مورد نظر درون {…} کِرلی بِرَکِت Curly Bracket می‌آید.

انواع سلکتور:

ساده
مرکب
شبه کلاس
شبه المنت
اتریبیوت

سلکتورهای ساده – Basic

۱- فراگیر – Universal

علامت ستاره یا Asterisk به تنهایی نوشته می شود.


* { color: black; }    /* همه المنت‌ها را برمی‌گزیند. */

۲- نوع – Type

تگ به تنهایی نوشته می‌شود.


X { color: black; }    /* همه المنت‌هایی که با تگ X هستند را برمی‌گزیند. */

۳- کلاس – Class

در ابتدای نام کلاس علامت دات (dot) نوشته می‌شود.


.X { color: black; }    /* المنت‌هایی که با کلاس X هستند را برمی‌گزیند. */

۴- آی دی – id

در ابتدای نام آی دی علامت هشتگ نوشته می‌شود.


#X { color: black; }    /* المنت‌هایی که با آی دی X هستند را برمی‌گزیند. */

۵- اتریبیوت – Attribute

اگر تنها نام اتریبیوت درون برکت Bracket […] نوشته شود.


[foo] { color: black; }

همه المنت‌هایی که اتریبیوت foo دارند را برمی‌گزیند. مهم نیست مقدار آن چه باشند.

اگر نام و مقدار اتریبیوت درون برکت نوشته شود.


[foo="bar"] { color: black; }

همه المنت‌هایی که اتریبیوت foo آنها برابر bar باشد را برمی‌گزیند.

سلکتورهای مرکّب – Combinator

سلکتور مرکب از ترکیب چند سلکتور ساده ساخته می‌شود.

۱- لیست – List

سلکتورهای ساده با کاما از هم جدا می‌شوند.


X, Y { color: black; }

هر المنتی را که با یکی از سلکتورهای X یا Y هم‌خوانی دارد را برمی‌گزیند.

۲- نوادگان – Descendant

سلکتورهای ساده با اسپیس Space از هم جدا می‌شوند.


X Y { color: black; }

هر المنت‌ Y ای که درون X هست را برمی‌گزیند. (بی واسطه یا با واسطه)

۳- فرزند بلافصل – Direct Child

سلکتورهای ساده با بزرگتر از هم جدا می‌شوند.


X > Y { color: black; }

هر المنت‌ Y ای که بی واسطه درون X هست را برمی‌گزیند.

۴- خواهر برادری – sibling

سلکتورهای ساده با تیلدا Tilde از هم جدا می‌شوند.


X ~ Y { color: black; }

هر المنت‌ Y ای که پس از X هست را برمی‌گزیند. (بلا فاصله یا با فاصله)

۵- خواهر برادری بلافصل – Adjacent sibling

سلکتورهای ساده با علامت جمع از هم جدا می‌شوند.


X + Y { color: black; }

هر المنت‌ Y ای که بلا فاصله پس از X هست را برمی‌گزیند.

سلکتورهای شبه کلاس – Pseudo-Classes

در ابتدای نام این سلکتورها یک علامت کولن Colon نوشته می‌شود.


:pseudo-classes { color: black; }

مانند یک کلاس کار می‌کند.

۱- فرزندی Child-Related

یک یا چند فرزند درون یک المنت را برمی‌گزیند.


X:first-child { color: black; }

اولین فرزند المنت X را برمی‌گزیند.


X:last-child { color: black; }

آخرین فرزند المنت X را برمی‌گزیند.


X:only-child { color: black; }

اگر المنت X تک فرزند داشت آن را برمی‌گزیند.


X:nth-child(n) { color: black; }

n امین فرزند المنت X را برمی‌گزیند.


X:nth-last-child(n) { color: black; }

n امین فرزند المنت X را از آخر برمی‌گزیند.

۲- خواهر برادری Sibling-Related

یک یا چند المنت درون یک المنت را برمی‌گزیند.


X:first-of-type { color: black; }

اولین المنت X درون یک المنت دیگر را برمی‌گزیند.


X:last-of-type { color: black; }

آخرین المنت X درون یک المنت دیگر را برمی‌گزیند.


X:only-of-type { color: black; }

المنت X را برمی‌گزیند، به شرط آنکه X درون یک المنت دیگر تک فرزند باشد.


X:nth-of-type(n) { color: black; }

n امین المنت X که درون یک المنت دیگر قرار دارد را برمی‌گزیند.


X:nth-last-of-type(n) { color: black; }

n امین المنت X از آخر که درون یک المنت دیگر قرار دارد را برمی‌گزیند.

۳- پیوندی Link-Related

بیشتر برای المنت از نوع لینک کاربرد دارد.


X:link { color: black; }

المنت X پیش از کلیک بر روی آن را برمی‌گزیند.


X:visited { color: black; }

المنت X پس از کلیک بر روی آن را برمی‌گزیند.

۴- ماوس Mouse-Related


X:hover { color: black; }

المنت X هنگامیکه نشانگر موس بر روی آن قرار گرفته است.


X:active { color: black; }

المنت X هنگامیکه کلید موس بر روی آن فشار داده شده است.


X:focus { color: black; }

المنت X هنگامیکه تمرکز بر روی آن است.

۵- ورودی – Input-Related


X:checked { color: black; }

المنت X هنگامیکه چک مارک خورده باشد.

۶- غیره


:root { color: black; }

المنت ریشه که همان html است.


:target { color: black; }

المنتی که id آن در انتهای URL آمده است.


:not(Y) { color: black; }

المنت‌هایی که Y نیستند.

سلکتورهای شبه المنت – Pseudo-Element

در ابتدای نام این سلکتورها دو علامت کولن Colon نوشته می‌شود.


::pseudo-element { color: black; }

یک المنت جدید درون المنت دیگر می‌سازد.


X::before { color: black; }

یک المنت درون یک المنت پیش از همه فرزندانش می‌سازد.


X::after { color: black; }

یک المنت درون یک المنت پس از همه فرزندانش می‌سازد.

پراپرتی content محتوای درون المنت را معیّن می‌کند.

برای تمرین و یادگیری بهتر به آدرس flukeout.github.io بروید.

مثال

در مثال زیر به کمک سلکتورهای before و after چیزی را پیش و پس از محتوای اصلی المنت اضافه می‌کنیم.

HTML


<p>tea</p>
<p>water</p>
<p>coffee</p>

CSS


p::before {
    content: "Drinking ";
    color: Red;
}

p::after {
    content: " After Meals.";
    color: Blue;
}

مثال

در مثال زیر به کمک سلکتور before تصویری را پیش از محتوای اصلی المنت اضافه می‌کنیم.

HTML


<p>Ali</p>
<p>Mahdi</p>
<p>Reza</p>

CSS


p::before {
    content: "";
    background: url(user.svg) no-repeat;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .1em;
}

Typicons

یک فونت اپن سورس و آزاد است که مجموعه کوچک و سبکی از آیکن‌های مورد نیاز شما را در خود فراهم آورده است. و شما می توانید آن ها را به سادگی در وب یا UI مورد نظر خود به کار برید.

موس خود را روی آیکن‌ها حرکت دهید. کد هر کدام در نوار پایین نمایش داده می‌شود. آن کد را در content به شکل زیر بنویسید.

مثال

در مثال زیر برای نمایش آیکن مورد نظر از تگ <i> استفاده شده است.

کلاس icon برای تنظیمات عمومی است. مثل نوع فونت، سایز، محل قرارگیری و …
کلاس بعدی (usr, cal, pen) تنها برای تعیین آیکن مورد نظر است. به کمک سلکتور before کد آیکن را مشخص می‌کنیم.

HTML


<p><i class="icon usr"></i>Mahdi</p>
<p><i class="icon cal"></i>May 1</p>
<p><i class="icon pen"></i>Edit</p>

CSS


@font-face {
    font-family: 'typicons';
    src: url('typicons.woff');
}

.icon::before {
    font: 1em 'typicons';
    display: inline-block;
    margin-right: .1em;
}

.usr::before { content: '\e12c'; }
.cal::before { content: '\e039'; }
.pen::before { content: '\e0c2'; }

تمرین

ابتدا یک پوشه به نام web2 بسازید. و در آن برای هر تمرین در هر جلسه پوشه‌ای جداگانه مشابه تصویر زیر بسازید. (ابتدا شماره جلسه سپس شماره تمرین)

تمرین ۱

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
با روش مثال بالا تغییراتی در آن بدهید تا همانند تصویر زیر شود

مثال

در مثال زیر می خواهیم عنوان یک دیتا را پیش از آن بنویسیم.

برای این کار به کمک سلکتور before مقدار یک اتریبیوت را پیش از محتوای اصلی المنت اضافه می‌کنیم.

HTML


<p data-label="Firstname">Ali</p>
<p data-label="Lastname">Mahdavi</p>
<p data-label="Age">16</p>

CSS


p::before {
    content: attr(data-label)": ";
}

مثال

در مثال زیر می خواهیم عنوان عکس را زیرش نمایش دهیم.

برای این کار به کمک سلکتور after مقدار یک اتریبیوت را پس از محتوای اصلی المنت اضافه می‌کنیم.

HTML


<picture data-title="Cute Duck">
    <img src="cute.jpg" />
</picture>

CSS


picture::after{
    content: attr(data-title);
}

مثال

در مثال زیر می خواهیم نوع یک دیتا را با نمایش یک آیکن پیش از نشان دهیم.

برای این کار به کمک سلکتور before مقدار یک اتریبیوت را پیش از محتوای اصلی المنت اضافه می‌کنیم.

HTML


<p data-icon="&#xe12c;">Mahdi</p>
<p data-icon="&#xe039;">May 1</p>
<p data-icon="&#xe0c2;">Edit</p>

CSS


@font-face {
    font-family: 'typicons';
    src: url('typicons.woff');
}

[data-icon]::before {
    content: attr(data-icon);
    font: 1em 'typicons';
    display: inline-block;
    margin-right: .1em;
}

تمرین ۲

این فایل را دانلود کنید.
آن را در فولدر web2 باز کنید.
با روش مثال بالا تغییراتی در آن بدهید تا همانند تصویر زیر شود

دسته: علوم کامپیوتری

برچسب: طراحی وب

تبدیل تصویر دوبعدی به انیمیشن

نمایش پیشرفته جدول در وب

پروژه videojs