CSS کا داخل کرنا کا طریقہ

جب براوزر استایل شیٹ پڑھتا ہے تو وہ اس استایل شیٹ میں موجود معلومات کی بنیاد پر HTML ڈاکومن کو فارمیٹ کرتا ہے。

استایل شیٹ کا استعمال کی تین طریق

استایل شیٹ کا داخل کرنا کے تین طریق ہیں:

  • بیرونی CSS
  • اندرونی سی ایس ایس
  • اندرونی سی ایس ایس

بیرونی CSS

بیرونی استایل شیٹ کا استعمال کرکے آپ کو صرف ایک فائل کو تبدیل کرکے پورا ویب سائٹ کا انداز تبدیل کرنا ہوگا!

ہر ایک HTML پیج کو <head> حصے کے <link> علامت میں بیرونی استایل شیٹ فائل کی مراجع شامل کرنی ہوتی ہے。

مثال

آؤٹر سائیزی HTML پیج کا <head> حصے میں <link> علامت میں دفعہ کی جاتی ہیں:

<!DOCTYPE html>
<html>



<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

亲自试一试

باہری استایل شیٹ کو کسی بھی ٹیکسٹ اڈیٹر میں لکھا جاسکتا ہے اور اس کو .css امتداد سے محفوظ رکھنا چاہیئے۔

باہری .css فائل کو کوئی بھی ایچ تی ایل علامت شامل نہیں کیا جانا چاہیئے。

"mystyle.css" ایسا ہے:

"mystyle.css"

body {
  بگارنگ رنگ: لائٹ بلو;
}
h1 {
  رنگ: نیوی;
  margin-left: 20px;
}

تذکرہ:کوئی بھی اقدار اور اکائی کے درمیان خالی جگہ نہیں لگائی جانی چاہیئے (مثلاً margin-left: 20 px;）。درست لکھت:margin-left: 20px;

اندرونی سی ایس ایس

اگر ایک HTML پیج کسی واحد استایل کی حامل ہو تو اندرونی استایل شیٹ استعمال کی جاسکتی ہے。

اندرونی استایل head سیکشن کے اندر <style> علامت میں طے کی جاتی ہے。

مثال

اندرونی استایل HTML پیج کی <head> سیکشن کے اندر <style> علامت میں طے کی جاتی ہے:

<!DOCTYPE html>
<html>



<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

亲自试一试

اندرونی سی ایس ایس

اندرونی استایل (جسے اندرسری استایل بھی کہا جاتا ہے) ایک واحد علامت کیلئے منفرد استایل استعمال کی جاسکتی ہے。

اگر اندرونی استایل استعمال کرنا ہو تو مرتبط علامت کیلئے style اقدار اضافے کریں۔style اقدار کسی بھی سی ایس ایس اقدار کو شامل کرسکتا ہے。

مثال

اندرونی استایل مرتبط علامت کی "style" اقدار میں طے کی جاتی ہے:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

亲自试一试

تذکرہ:اندرسری استایل کئی استایل شیٹ کی مزیدات کو جاگر نہیں رکھتی (جس میں مواد اور نمائش کو ایک ساتھ میکس کیا گیا ہوا ہو)。اس طریقے کو بچود سے استعمال کریں。

کئی استایل شیٹ

اگر مختلف استایل شیٹ میں ایک ہی انتخاب گر (علامت) کیلئے کچھ امر طے کیا گیا ہوا تو آخری پڑھے گئے استایل شیٹ کی اقدار استعمال کی جائیں گی。

اگر کسیباہری استایل شیٹتو <h1> علامت کیلئے مندرجہ بالا استایل طے کی گئی ہوگی:

h1 {
  رنگ: نیوی;
}

بعد میں، اگر کسیاندرونی استایل شیٹتو <h1> علامت کیلئے مندرجہ بالا استایل طے کی گئی ہوگی:

h1 {
  color: orange;    
}

مثال

اگر اندرونی استایل باہری استایل شیٹ سے جڑا ہوا ہوبعد میںاگر کچھ طے کیا گیا ہوا تو <h1> علامت نارنجی رنگ میں بنائی جائیگی:

亲自试一试

مثال

لیکن اگر وہ باہری استایل شیٹ سے جڑا ہوا ہوپہلے定义了内部样式，则

元素将是深蓝色：

亲自试一试

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）
  2. 外部和内部样式表（在 head 部分）
  3. 浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

亲自试一试