سی اس اس با html4 ظهور کرد و تونست خیلی سریع در بین توسعه دهندگان وب جای خودشو پیدا کنه. حین پیاده سازی طرح یه صفحه ی وب ، از مشخصه های متفاوت و البته متدوال css استفاده می کنیم ، اما بد نیست نگاهی هم به مشخصه هایی بندازیم که شاید تا حالا حتی گذری هم ازشون رد نشده باشیم و باهاشون آشنا نباشیم.

font-variant : normal | small-caps;

شاید تا به حال با این مشخصه آشنا نشده باشید ، همونطور که میبینید این مشخصه دو تا مقدار رو می پذیره ، کار این مشخصه این هست که نحوه ی نمایش فونت از چه نوعی باشه به صورت معمولی ( که خود مرورگر فونت رو به نمایش می گذاره ) یا به صورت small-caps ( که تماماً با حروف بزرگ به نمایش در میاد ). مثال زیر گویای کارایی این مشخصه ست :

font-variant: normal;

FONT-VARIANT: SMALL-CAPS;

تعیین شده در CSS1 ، متناسب با اکثر مرورگرها

content: normal | ” Content String “;

این مشخصه داخل دو شبیه المنت :after و :before استفاده میشه ، بدین صورت که امکان اضاقه کردن یک رشته رو به تگ اچ تی ام ال شما میده. از دو مقدار استفاده میکنه ، مقدار normal که صورت پیش فرض این مشخصه هست رشته ای رو اضافه نمی کنه. به مثال توجه کنید :

a:before { content: “click to continue: “; }

بدین صورت ابتدای نوشته ی هر لینکی رشته ی click to continue: اضافه میشه و خودشم لینک می خوره. البته این مشخصه مقدار های دیگه ای هم داره :

open-quote - close-quote - no-open-quote - no-close-quote - counter(section) - url(url) - attr(attribute)

open-quote و close-quote همونطوری که از اسمشون معلومه کوتیشن مارک رو باز و بسته می کنن و no-open-quote و no-close-quote هم کوتیشن مارک بر می دارن. مقدار counter برای شمارش ( جلوتر بهش می پردازیم ) ، url برای نمایش محتوا به صورت مدیا و attr هم برای نمایش محتوای attribute های استفاده شده در تگ هست. به مثال های زیر توجه کنید :

a:before { content: attr(href); } // displays href content before link text

p:before { content: url(image.jpg); } // displays image before p tag contents

تعیین شده در CSS2، متناسب با اکثر مرورگرها و با مروگر IE8 و IE9 ( در صورتی که تگ html شما !DOCTYPE باشه ) و فایرفاکس به خوبی کار میکنه

counter-increment: section | jumping-step;

این مشخصه برای شماره گذاری روی تگ های شما کاربرد داره. برای مثال فرض کنید چند تا تگ p تو صفحه ی شما هست و هر کدوم یک نکته ای رو در بر میگیره ، توسط این مشخصه به همراه مشخصه ی content می تونید به راحتی این تگ ها رو شماره گذاری کنید. به مثال زیر توجه کنید :

p { counter-increment: p 1; }
p:before { content: counter(p) “. “;}

بدین صورت اگه چند تا تگ p تو صفحه باشه به صورت زیر نمایش داده میشن :

۱. First Note

2. Second Note

3. Third Note

دقت کنین مشخصه ی counter-increment دارای دو مقدار هست یکی section ( که یک متغیر به نام دلخواه هست و اینجا p نام گذاری شده ) و یکی jumping-step ( که تعداد قدم های استفاده شده برای شماره گذاری رو معین می کنه که به صورت default عدد ۱ هست ) . مهمه که بدونید این مشخصه باید درون استایل خودِ تگ قرار بگیره!

و اما مقدار counter باعث شمردن متغیر p هست که ما اینجا p تعریف کردیم. به راحتی هم می تونید به این عدد مقدار دیگه ای هم اضافه کنید که ما اینجا “. ” رو اضافه کردیم.

تعیین شده در CSS2، متناسب با اکثر مرورگرها و با مروگر IE8 و IE9 ( در صورتی که تگ html شما !DOCTYPE باشه ) به خوبی کار میکنه

E>F { …. }

استفاده از این ویژگی در css کار رو برای طراح خیلی راحت می کنه و از استایل نویسی اضافی هم جلوگیری میکنه. این نوع نوشتن استایل که child selector نامیده میشه ، روی المنت های F ای که داخل المنت های E باشند تاثیر گذار خواهد بود. در واقع F المنت فرزندی است که E المنت پدرش هست. به مثال زیر توجه کنید.

ul > li { color: red; }

<ul>
<li>item 1</li>
<li>item 2</li>
<ul>
<li>item 3</li>
<li>item 4</li>
</ul>
<ol>
<li>item 5</li>
<li>iem 6</li>
</ol>
<li>item 7</li>
</ul>

استایل نوشته شده ی ما در این مثال item 1 ، item 2 ، item 3 , item 4 و item 7 رو به رنگ قرمز در خواهد آورد.

تعیین شده در CSS2 و متناسب با اکثر مرورگرها

هدف از این مطلب ، آشنایی با چند ویژگی css بود ، با اینکه حرف برای گفتن زیاده و برای خودمم هم یک جور آموزش به حساب میاد اما مطلب رو همینجا تموم می کنم چون توضیح دادن تو یک مطلب خیلی بیشتر از این نمیشه و سعی می کنم در آینده هم این مبحث رو ادامه بدم. امیدوارم مفید بوده باشه : )

ارادتمند