سی ایس ایس کا داخل کریا جاندا کس طرح?

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

سی ایس ایس کا استعمال کریا جاندا تین طریق

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

  • بیرونی سی ایس ایس
  • ਇੰਟਰਨਲ CSS
  • ਇਨਲਾਈਨ CSS

بیرونی سی ایس ایس

بیرونی سٹائل شیٹ کا استعمال کریا جاندا، آپ کو صرف ایک فائل کا تبدیلی کریا جاندا صرف آپ کو پورا ویب سائٹ کا بیعث تبدیلی کرنا چاہئیگا!

بغیر آپ کریا جاندا، هر ایک HTML پیراگراف کا بغیر آپ کریا جاندا <link> علامت میں بیرونی سٹائل شیٹ فائل کا حوالہ رکھنا چاہئیگا.

ਉਦਾਹਰਣ

بکستایل کا بیعث کریا جاندا، ایندکس پیراگراف کا بغیر آپ کریا جاندا <head> کا بغیر آپ کریا جاندا <link> علامت میں آپریشن ہوتا ہے:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

امتحان خود را بکنید

ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੈਡ ਕਿਸੇ ਵੀ ਟੈਕਸਟ ਐਡੀਟਰ ਵਿੱਚ ਲਿਖੀ ਜਾ ਸਕਦੀ ਹੈ, ਅਤੇ ਇਸ ਨੂੰ .css ਵਿਸਤਾਰ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

ਬਾਹਰੀ .css ਫਾਈਲ ਕੋਈ ਵੀ HTML ਟੈਗ ਨਹੀਂ ਰੱਖਣੀ ਚਾਹੀਦੀ ਹੈ。

"mystyle.css" ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

ਧਿਆਨ:ਪ੍ਰਤੀਯੋਗੀ ਦੀ ਮੁੱਲ ਅਤੇ ਇਕਾਈ ਵਿੱਚ ਖਾਲੀ ਜਗ੍ਹਾ ਨਾ ਜੋੜੋ (ਉਦਾਹਰਣ ਵਜੋਂ margin-left: 20 px;）。ਸਹੀ ਲਿਖਣਾ ਹੈ:margin-left: 20px;

ਇੰਟਰਨਲ CSS

ਜੇਕਰ ਇੱਕ HTML ਪੰਨੇ ਵਿੱਚ ਇੱਕਲੀ ਸਟਾਈਲ ਹੈ, ਤਾਂ ਇੰਟਰਨਲ ਸਟਾਈਲ ਸ਼ੈਡ ਦਾ ਉਪਯੋਗ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਇੰਟਰਨਲ ਸਟਾਈਲ ਸਟਾਈਲ ਸ਼ੈਡ ਹੈਂਡਲਰ ਵਿੱਚ <head> ਹਿੱਸੇ ਵਿੱਚ <style> ਇਲੈਕਟ੍ਰੌਨ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਉਦਾਹਰਣ

ਇੰਟਰਨਲ ਸਟਾਈਲ ਸਟਾਈਲ ਸ਼ੈਡ ਹੈਂਡਲਰ ਵਿੱਚ HTML ਪੰਨੇ ਦੇ <head> ਹਿੱਸੇ ਵਿੱਚ <style> ਇਲੈਕਟ੍ਰੌਨ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

امتحان خود را بکنید

ਇਨਲਾਈਨ CSS

ਇਨਲਾਈਨ ਸਟਾਈਲ (ਜਿਸ ਨੂੰ ਵੀ ਇਨਲਾਈਨ ਸਟਾਈਲ ਕਿਹਾ ਜਾਂਦਾ ਹੈ) ਇੱਕ ਇਲੈਕਟ੍ਰੌਨ ਲਈ ਵਿਲੱਖਣ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。

ਜੇਕਰ ਇਨਲਾਈਨ ਸਟਾਈਲ ਵਰਤਣਾ ਹੈ, ਤਾਂ ਸਬੰਧਤ ਇਲੈਕਟ੍ਰੌਨ ਵਿੱਚ style ਪ੍ਰਤੀਯੋਗੀ ਜੋੜੋ। style ਪ੍ਰਤੀਯੋਗੀ ਕੋਈ ਵੀ CSS ਪ੍ਰਤੀਯੋਗੀ ਹੋ ਸਕਦਾ ਹੈ。

ਉਦਾਹਰਣ

ਇਨਲਾਈਨ ਸਟਾਈਲ ਸਟਾਈਲ ਸ਼ੈਡ ਹੈਂਡਲਰ ਵਿੱਚ ਇਲੈਕਟ੍ਰੌਨ ਦੇ "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 {
  color: navy;
}

ਤਾਂ, ਕਿਸੇ ਇੱਕਇੰਟਰਨਲ ਸਟਾਈਲ ਸ਼ੈਡਤਾਂ <h1> ਇਲੈਕਟ੍ਰੌਨ ਲਈ ਨਿਮਨ ਸਟਾਈਲ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ:

h1 {
  رنگ: نارنجی;    
}

ਉਦਾਹਰਣ

ਜੇਕਰ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੈਡ ਨਾਲ ਜੋੜਿਆ ਗਿਆ ਹੈਬਾਅਦ ਵਿੱਚਮਿੱਥੇ ਹੋਏ, <h1> ਇਲੈਕਟ੍ਰੌਨ ਹਰੀ ਰੰਗ ਵਿੱਚ ਹੋਵੇਗਾ:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  رنگ: نارنجی;
}
</style>
</head>

امتحان خود را بکنید

ਉਦਾਹਰਣ

ਪਰ, ਜੇਕਰ ਇਹ ਬਾਹਰੀ ਸਟਾਈਲ ਸ਼ੈਡ ਨਾਲ ਜੋੜਿਆ ਗਿਆ ਹੈਪਹਿਲਾਂداخل استایل تعریف شده، عنصر <h1> آبی تیره خواهد بود:

<head>
<style>
h1 {
  رنگ: نارنجی;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

امتحان خود را بکنید

ترتیب تداخل

وقتی چندین استایل برای یک عنصر HTML تعیین می‌شود، از کدام استایل استفاده می‌شود؟

تمام استایل‌های موجود در صفحه بر اساس قوانین زیر به یک جدول استایل جدید "تداخل" می‌شوند، که اولویت اول بالا است:

  1. استایل‌های درون‌محتوایی (در عناصر HTML)
  2. استایل‌های خارجی و داخلی (در بخش head)
  3. استایل پیش‌فرض مرورگر

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

امتحان خود را بکنید