کورس جدول

CSS اعلیٰ درجہ تعلیم

• سی ایس ایس课外 کتاب
• سی ایس ایس معرف
• سی ایس ایل بنیادی زبان
• سی ایس ایل اعلی زبان
• سی ایس ایل نکاچار چناؤ سلیکٹر
• سی ایس ایل آئیڈی سلیکٹر
• سی ایس ایل کلاس سلیکٹر
• سی ایس ایل بنائش
• سی ایس ایل پس منظر
• سی ایس ایل متن
• سی ایس ایل فونت
• سی ایس ایل فہرست

CSS فلم نمونہ

• سی ایس ایل فریم ورک کی معرف
• سی ایس ایل اندرون فاصلہ
• سی ایس ایل کیرنل
• سی ایس ایل بیرونی فاصلہ
• سی ایس ایل بیرونی فاصلے کا جوڑ

CSS پوزیشن

• سی ایس ایل پوزیشننگ کی معرف
• سی ایس ایل نسبی پوزیشننگ
• سی ایس ایل مکمل پوزیشننگ
• سی ایس ایل بلاک کی بلاکنگ

CSS چناؤ کی وسیلہ

• سی ایس ایل عناصر سلیکٹر
• سی ایس ایل سلیکٹر گروپنگ
• سی ایس ایل کلاس سلیکٹر کی تفصیلات
• سی ایس ایل آئیڈی سلیکٹر کی تفصیلات
• سی ایس ایل اپنے سلیکٹر کی تفصیلات
• سی ایس ایل نکاچار سلیکٹر
• سی ایس ایل بیٹا عناصر سلیکٹر
• سی ایس ایل آسانی بھائی سلیکٹر

اختیاری کورس

کورس سفارش:

• کدوو3 سی کام ڈیوائز

عناصر کا فریم (border) محتوا اور پیدائش کے اطراف کا ایک یا کئی لینے کا ہوتا ہے۔

CSS border پرز کا استعمال، آپ کو عناصر کی فریم کا اسٹائل، چوڑائی اور رنگ کا تعین کرنے کی اجازت دیتا ہے۔

سی ایس ایل کیرنل

HTML میں، ہم پیدائش کے اطراف کی فریم بنانے کے لئے ٹیبل استعمال کرتے ہیں، لیکن CSS فریم پرزوں کی مدد سے، ہم بہتر اثر کی فریم بناسکتے ہیں اور یہ کسی بھی عناصر پر استعمال کی جاسکتا ہے۔

عناصر کی بیرونی پیدائش میں فریم (border) ہوتا ہے، عناصر کا فریم محتوا اور پیدائش کے اطراف کا ایک یا کئی لینے کا ہوتا ہے۔

فریم کی 3 پہلو ہیں: چوڑائی، اسٹائل اور رنگ۔ اس کی وجہ سے، اس میں ان 3 پہلوؤں کا تفصیل سے تعریف کیا جائے گا۔

فریم اور پس منظر

CSS معیارات نے کہا کہ فریم 'عناصر کا پس منظر کے اوپر' دیکھائی دیتی ہے، یہ بہت اہم ہے، کیونکہ کچھ فریم 'کچلے' (مثلاً dotted یا dashed فریم) کی طرح ہوتے ہیں، عناصر کا پس منظر فریم کی دیکھائی دیتی ہوتی ہے جو فریم کی دیکھائی دیتی ہوتی ہے اور فریم کی بیناگاہی کے درمیان نظر آنے والی ہوتی ہے۔

CSS2 نے کہا کہ پس منظر صرف پیدائش پر بندھا ہوتا ہے، نہ کہ فریم پر۔ بعد میں CSS2.1 نے بندوبست کیا: عناصر کا پس منظر محتوا، پیدائش اور فریم کا علاقہ کا پس منظر ہوتا ہے۔ زیادہ تر براوزر CSS2.1 کا تعاقب کرتے ہیں، لیکن کچھ قدیم براوزر کا نمائش مختلف ہوسکتا ہے۔

فریم کا اسٹائل

اسٹائل فریم کا سب سے اہم پہلو ہے، یہ نہ کہ اس کی وجہ سے فریم کا نمائش کنٹرول کرتا ہے (بائیں چاہئیے، اس کی وجہ سے فریم کا نمائش کنٹرول کرتا ہے)، بلکہ اگر اس کا اسٹائل نہ ہوتا تو فریم کچھ نہیں ہوتا۔

CSS کا border-style پرزے10 مختلف غیر inherit اسٹائل کا تعریف کیا گیا ہے، ان میں none بھی شامل ہے۔

مثلاً آپ کسی تصویر کی فریم کو outset کی تعریف کرسکتے ہیں، تاکہ وہ 'بکچن بٹن' کی طرح دیکھائی جائے:

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

متعدد اسٹائل کا تعریف

آپ کسی فریم کو متعدد اسٹائل کا تعریف کرسکتے ہیں، جیسے:

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

اس رول نے class نام کا aside کا پاراگراف کو چار طرح کا فریم اسٹائل کا تعریف کیا ہے: solid کا اوپر فریم، dotted کا راست فریم، dashed کا نیچل فریم اور double کا بائیں فریم۔

ہم نے دوبارہ اس کی وجہ سے یہ کہتے ہیں کہ اس میں 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؛ یا از یکی از سه کلیدword استفاده کنید که آن‌ها thin، medium (مقدار پیش‌فرض) و thick هستند.

نوٹ:CSS عرض دقیق سه کلیدword رو تعریف نمی‌کند، بنابراین یک کاربر می‌تواند 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;}

باریک نائیوکسی کی باریکائی 50 پیکسلو ہو، لیکن باریک نائیوکسی کا انداز 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;
  }

نوٹ:باریک نائیوکسی کا رنگ کی میل کی رنگ کی پیش کالر ہوتی ہے۔ اگر باریک نائیوکسی کا رنگ کا بیان نہیں کیا گیا تو اس کا رنگ پیش کالر کا ہوگا جو کہ متن کا رنگ سے مشابہت رکھتا ہوگا۔ دوسری جانب اگر کوئی علامت کو کسی متن نہیں رکھا گیا تو مثلاً ایک ٹیبل جس میں صرف تصاویر شامل ہیں، تو اس ٹیبل کا باریک نائیوکسی رنگ اس کا والد علامت کا متن کا رنگ ہوگا (کونورنسی کی وجہ سے رنگ کا رنگ کا اصول کا استعمال کیا جاتا ہے) جو کہ یہ والد علامت کونورنسی کا بنیادی علامت یا 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;}

آزمایش کنید

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

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

CSS بوردر خصوصیات

آلہ کا دفتر

CSS مرجع کتاب

CSS مثال

CSS امتحان

CSS تعلیم

سپانسر لنک