جدول دوره‌ها

درس‌های پیشرفته CSS

• کتاب خارجی CSS
• مقدمه CSS
• زبان پایه CSS
• زبان پیشرفته CSS
• انتخاب‌گرهای مشتق CSS
• انتخاب‌گرهای id CSS
• انتخاب‌گرهای کلاس CSS
• ایجاد CSS
• زمینه CSS
• متن CSS
• فون CSS
• لیست CSS

مدل قاب CSS

• مبانی مدل جعبه CSS
• مجاورت داخلی CSS
• پیرامون CSS
• مجاورت خارجی CSS
• ادغام مجاورت‌های خارجی CSS

محاسبه‌ی CSS

• مقدمه به موقعیت CSS
• موقعیت نسبی CSS
• موقعیت مطلق CSS
• پرش در CSS

انتخاب‌گر CSS

• انتخاب‌گرهای عناصر CSS
• گروه‌بندی انتخاب‌گرهای CSS
• شرح انتخاب‌گرهای کلاس CSS
• شرح انتخاب‌گرهای id CSS
• شرح انتخاب‌گرهای ویژگی CSS
• انتخاب‌گرهای نسل CSS
• انتخاب‌گرهای فرزند CSS
• انتخاب‌گرهای برادر نزدیک CSS

درس‌های انتخابی

پیشنهاد دوره‌ای:

• جعبه خارق‌العاده CodeW3C.com

حاشیه‌ی عنصر (border) شامل یک یا چند خط دور محتوای عنصر و پادپایه است.

ویژگی border CSS به شما اجازه می‌دهد تا سبک، عرض و رنگ حاشیه‌ی عنصر را تعیین کنید.

پیرامون CSS

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

حاشیه‌ی خارجی عنصر در داخل حاشیه‌ی عنصر (border) قرار دارد. حاشیه‌ی عنصر شامل یک یا چند خط دور محتوای عنصر و پادپایه است.

هر حاشیه شامل سه جنبه است: عرض، سبک و رنگ. در این بخش‌ها، ما این سه جنبه را به شما توضیح خواهیم داد.

حاشیه و پس‌زمینه

نکته‌ای که CSS规范 اشاره می‌کند این است که حاشیه در بالای پس‌زمینه‌ی عنصر نقاشی می‌شود. این بسیار مهم است، زیرا برخی از حاشیه‌ها ‘قطعی’ هستند (مثلاً حاشیه‌ی خط‌چین یا خطی)، پس‌زمینه‌ی عنصر باید بین بخش‌های قابل مشاهده‌ی حاشیه قرار گیرد.

CSS2 نشان می‌دهد که پس‌زمینه تا پادپایه‌ها گسترش می‌یابد، نه تا حاشیه. CSS2.1 این را تصحیح کرده است: پس‌زمینه‌ی عنصر شامل محتوای عنصر، پادپایه و منطقه‌ی حاشیه است. اغلب مرورگرها از تعریف CSS2.1 پیروی می‌کنند، اما برخی از مرورگرهای قدیمی ممکن است رفتار متفاوتی داشته باشند.

سبک حاشیه

سبک یکی از مهم‌ترین جنبه‌های حاشیه است، نه به این دلیل که سبک کنترل نمایش حاشیه را دارد (البته، سبک واقعاً نمایش حاشیه را کنترل می‌کند)، بلکه به این دلیل که بدون سبک، اصلاً حاشیه‌ای وجود ندارد.

سبک CSS ویژگی border-style۱۰ نوع سبک غیر inherit مختلف شامل none تعریف شده است.

به عنوان مثال، می‌توانید برای یک تصویر حاشیه‌ای به نام outset تعریف کنید تا به نظر برسد که مانند ‘دکمه‌ی برآمده’ است:

a:link img {border-style: outset;}

تعریف چندین سبک

می‌توانید برای یک حاشیه چندین سبک تعریف کنید، به عنوان مثال:

p.aside {border-style: solid dotted dashed double;}

این قوانین برای پاراگراف‌هایی با نام aside، چهار نوع سبک حاشیه‌ای تعریف می‌کند: حاشیه‌ی عمودی خطی، حاشیه‌ی افقی خط‌چین، حاشیه‌ی عمودی خطی و حاشیه‌ی افقی دوخطی.

ما دوباره دیدیم که این مقدار به ترتیب top-right-bottom-left انتخاب شده است، و در بحث درباره‌ی استفاده از چندین مقدار برای تنظیم پادپایه‌های مختلف نیز این ترتیب دیده شده است.

تعریف سبک تک

اگر می‌خواهید برای یکی از اضلاع پنجره‌ی عناصر، سبک حاشیه‌ای تعیین کنید و نه برای همه‌ی 4 اضلاع، می‌توانید از ویژگی‌های سبک حاشیه‌ی تک استفاده کنید:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

بنابراین، این دو روش معادل هستند:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

توجه:اگر بخواهید از روش دوم استفاده کنید، باید ویژگی‌های یک طرف را پس از ویژگی‌های خلاصه‌سازی قرار دهید. زیرا اگر ویژگی‌های یک طرف را قبل از border-style قرار دهید، مقدار ویژگی‌های خلاصه‌سازی بر روی مقدار یک طرف‌ها غلبه خواهد کرد.

عرض حاشیه

شما می‌توانید از ویژگی border-widthعرض حاشیه مشخص کنید.

دو روش برای تعیین عرض حاشیه وجود دارد: می‌توانید مقدار طولی مشخصی را مشخص کنید، مانند 2px یا 0.1em؛ یا از یکی از سه کلیدواژه زیر استفاده کنید، که آن‌ها thin، medium (مقدار پیش‌فرض) و thick هستند.

توجه:CSS عرض دقیق سه کلیدواژه خاص را تعریف نمی‌کند، بنابراین یک کارگزار کاربر ممکن است thin، medium (مقدار پیش‌فرض) و thick را به ترتیب به 5px، 3px و 2px تنظیم کند، در حالی که کارگزار کاربر دیگر ممکن است آن‌ها را به ترتیب به 3px، 2px و 1px تنظیم کند.

بنابراین، می‌توانیم عرض حاشیه را به این صورت تنظیم کنیم:

p {border-style: solid; border-width: 5px;}

یا:

p {border-style: solid; border-width: thick;}

تعریف عرض یک طرف

شما می‌توانید عرض هر یک از حاشیه‌های عنصر را به ترتیب top-right-bottom-left تنظیم کنید:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

مثال بالا نیز می‌تواند به این صورت کوتاه شود (این روش به عنوانمقدار کپی):

p {border-style: solid; border-width: 15px 5px;}

شما همچنین می‌توانید با استفاده از این ویژگی‌ها، عرض هر یک از حاشیه‌ها را تنظیم کنید:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

بنابراین، قوانین زیر با مثال‌های بالا معادل هستند:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

بدون حاشیه

در مثال‌های قبلی، مشاهده کرده‌اید که برای نمایش نوع خاصی از حاشیه، باید سبک حاشیه را تنظیم کنید، مانند solid یا outset.

آیا اگر border-style را به none تنظیم کنیم چه اتفاقی خواهد افتاد:

p {border-style: none; border-width: 50px;}

با اینکه عرض لبه 50px است، اما استایل لبه به none تنظیم شده است. در این حالت، نه تنها استایل لبه از بین می‌رود، بلکه عرض آن نیز به 0 تبدیل می‌شود. لبه ناپدید می‌شود، چرا؟

این به دلیل اینکه اگر استایل لبه none باشد، یعنی لبه اصلاً وجود ندارد، لبه نمی‌تواند عرضی داشته باشد، بنابراین عرض لبه به طور خودکار به 0 تنظیم می‌شود، مهم نیست که شما قبلاً چه مقداری تعریف کرده‌اید.

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

h1 {border-width: 20px;}

به دلیل اینکه مقدار پیش‌فرض border-style none است، اگر استایل مشخص نشده باشد، به معنای border-style: none است.بنابراین، اگر می‌خواهید لبه‌ها ظاهر شوند، باید یک استایل لبه را مشخص کنید.

رنگ لبه

تنظیم رنگ لبه بسیار ساده است. CSS از یک روش ساده استفاده می‌کند ویژگی border-color، که می‌تواند همزمان تا 4 مقدار رنگ را پذیرا باشد.

می‌توان از هر نوع مقدار رنگ استفاده کرد، به عنوان مثال می‌تواند رنگ‌های نام‌گذاری شده، شصت‌هشت‌سانی و RGB باشد:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

اگر مقدار رنگ کمتر از 4 عدد باشد، تکرار مقدارها موثر خواهد بود. به عنوان مثال، قوانین زیر رنگ لبه‌های بالا و پایین پاراگراف را به رنگ آبی و لبه‌های چپ و راست را به رنگ قرمز مشخص می‌کند:

p {
  border-style: solid;
  border-color: blue red;
  }

توجه:رنگ پیش‌فرض لبه‌ها رنگ پیش‌زمینه عنصر است. اگر رنگی برای لبه‌ها تعریف نشده باشد، با رنگ متن عنصر مشابه خواهد بود. از سوی دیگر، اگر عنصر هیچ متنی نداشته باشد، فرض کنید یک جدول است که فقط شامل تصاویر است، رنگ لبه‌های این جدول رنگ متن عنصر والد است (زیرا color می‌تواند ارث‌برداری کند). این عنصر والد ممکن است body، div یا یک table دیگر باشد.

تعریف رنگ‌های یک‌طرفه

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

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

برای مشخص کردن لبه‌های سیاه خطی برای عنصر h1 و لبه‌های قرمز سمت راست، می‌توانید به این صورت مشخص کنید:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

لبه شفاف

ما قبلاً توضیح دادیم که اگر لبه‌ها بدون استایل باشند، عرضی ندارند. اما در برخی موارد ممکن است بخواهید یک لبه غیرقابل‌دیدن ایجاد کنید.

CSS2 به رنگ‌های شفاف برای لبه‌ها معرفی شد. این مقدار برای ایجاد لبه‌های غیرقابل‌دیدن با عرض مشخص استفاده می‌شود. به مثال زیر نگاه کنید:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

ما برای لینک‌های بالا به شرح زیر سبک‌گذاری کرده‌ایم:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

آزمایش کنید

به نوعی، استفاده از word transparent، استفاده از لبه‌ها مانند پادری داخلی است؛ علاوه بر این، یک مزیت دیگر این است که می‌توان آن را در زمان مورد نیاز قابل مشاهده کرد. این لبه‌های شفاف مانند پادری داخلی هستند، زیرا پس‌زمینه عنصر به منطقه لبه‌ها گسترش می‌یابد (اگر پس‌زمینه قابل مشاهده باشد).

موضوع مهم:قبل از IE7، IE/WIN از پشتیبانی از word transparent پشتیبانی نمی‌کرد. در نسخه‌های قبلی، IE بر اساس مقدار color عنصر، رنگ لبه را تنظیم می‌کرد.

ویژگی‌های حاشیه CSS

لوازم‌کفش

دستورالعمل‌های CSS

مثال‌های CSS

آزمون CSS

آموزش CSS

لینک‌های حامی