ਕਿਵੇਂ ਸੀਐੱਸਐੱਸ ਬਣਾਉਣਾ ਹੈ

ਕਿਵੇਂ ਸਟਾਇਲ ਸ਼ੈਡ ਜੋੜਨਾ ਹੈ

ਬਰਾਉਜ਼ਰ ਇੱਕ ਸਟਾਇਲ ਸ਼ੈਡ ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ ਅਤੇ ਉਸ ਦੇ ਅਨੁਸਾਰ HTML ਦਸਤਾਵੇਜ਼ ਨੂੰ ਫਾਰਮੈਟ ਕਰਦਾ ਹੈ। ਸਟਾਇਲ ਸ਼ੈਡ ਜੋੜਣ ਦੇ ਤਿੰਨ ਤਰੀਕੇ ਹਨ:

ਬਾਹਰੀ ਸਟਾਇਲ ਸ਼ੈਡ

ਜਦੋਂ ਸਟਾਇਲ ਕਈ ਪੰਨਿਆਂ 'ਤੇ ਲਾਗੂ ਕਰਨੇ ਹਨ, ਤਾਂ ਬਾਹਰੀ ਸਟਾਇਲ ਸ਼ੈਡ ਇੱਕ ਆਦਰਸ਼ ਚੋਣ ਹੋਵੇਗੀ। ਬਾਹਰੀ ਸਟਾਇਲ ਸ਼ੈਡ ਦੀ ਵਰਤੋਂ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਫਾਇਲ ਵਿੱਚ ਬਦਲਣ ਨਾਲ ਪੂਰੇ ਸਾਈਟ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ। ਹਰ ਪੰਨਾ <link> ਟੈਗ ਨਾਲ ਸਟਾਇਲ ਸ਼ੈਡ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ。<link> ਟੈਗ ਦਸਤਾਵੇਜ਼ ਦੇ ਮੁੱਖ ਵਿੱਚ ਹੈ:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

ਬਰਾਉਜ਼ਰ ਫਾਇਲ mystyle.css ਵਿੱਚੋਂ ਸਟਾਇਲ ਐਲਾਨਾਂ ਨੂੰ ਪੜ੍ਹੇਗਾ ਅਤੇ ਉਸ ਦੇ ਅਨੁਸਾਰ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਫਾਰਮੈਟ ਕਰੇਗਾ。

ਬਾਹਰੀ ਸਟਾਇਲ ਸ਼ੈਡ ਕਿਸੇ ਵੀ ਟੈਕਸਟ ਐਡੀਟਰ ਵਿੱਚ ਸੋਧ ਸਕਦੇ ਹਨ। ਫਾਇਲ ਵਿੱਚ ਕੋਈ ਵੀ html ਟੈਗ ਹੋਣਾ ਨਹੀਂ ਚਾਹੀਦਾ ਹੈ। ਸਟਾਇਲ ਸ਼ੈਡ ਨੂੰ .css ਵਿਸਤਾਰ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਇੱਥੇ ਇੱਕ ਸਟਾਇਲ ਸ਼ੈਡ ਫਾਇਲ ਦਾ ਉਦਾਹਰਣ ਦਿੱਤਾ ਗਿਆ ਹੈ:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

ਪ੍ਰਤੀਯੋਗਿਤਾ ਮੁੱਲ ਅਤੇ ਇਕਾਈ ਦਰਮਿਆਨ ਖਾਲੀ ਜਗ੍ਹਾ ਨਾ ਛੱਡੋ। ਉਦਾਹਰਣ ਵਜੋਂ ਜਦੋਂ ਤੁਸੀਂ "margin-left: 20 px" ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਨਹੀਂ ਕਿ "margin-left: 20px" , ਤਾਂ ਇਹ ਕੇਵਲ IE 6 ਵਿੱਚ ਪ੍ਰਭਾਵੀ ਹੋਵੇਗਾ, ਪਰ ਮੋਜ਼ੀਲਾ/Firefox ਜਾਂ ਨੈਟਸਕੇਪ ਵਿੱਚ ਠੀਕ ਤਰ੍ਹਾਂ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ。

ਅੰਦਰੂਨੀ ਸਟਾਇਲ ਸ਼ੈਡ

ਜਦੋਂ ਇੱਕ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਵਿਸ਼ੇਸ਼ ਸਟਾਇਲ ਦੀ ਜ਼ਰੂਰਤ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਅੰਦਰੂਨੀ ਸਟਾਇਲ ਸ਼ੈਡ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ। ਤੁਸੀਂ <style> ਟੈਗ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਦੇ ਮੁੱਖ ਹੈੱਡਰ ਵਿੱਚ ਇੰਟਰਨਲ ਸਟਾਇਲ ਸ਼ੈਡ ਨਿਰਧਾਰਤ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਇਸ ਤਰ੍ਹਾਂ:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

ਇਨਲਾਈਨ ਸਟਾਇਲ

ਕਿਉਂਕਿ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਮਿਸ਼ਰਤ ਕਰਨਾ ਹੈ, ਇਨਲਾਈਨ ਸਟਾਇਲ ਸਟਾਇਲ ਸ਼ੈਡ ਦੇ ਕਈ ਲਾਭ ਨੂੰ ਹਾਰਦਾ ਹੈ। ਇਸ ਪ੍ਰਕਿਰਿਆ ਦੀ ਵਰਤੋਂ ਵਿੱਚ ਸਤਰਕ ਰਹੋ, ਉਦਾਹਰਣ ਵਜੋਂ ਜਦੋਂ ਸਟਾਇਲ ਕੇਵਲ ਇੱਕ ਤੱਕ ਵਰਤਿਆ ਜਾਵੇ ਹੋਵੇ।

ਟੈਕਸਟ ਸਟਾਇਲ ਵਰਤਣ ਲਈ, ਤੁਹਾਨੂੰ ਸਬੰਧਤ ਟੈਗ ਵਿੱਚ ਸਟਾਇਲ (style) ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਤਣਾ ਹੋਵੇਗਾ। ਸਟਾਇਲ ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਿੱਚ ਕੋਈ ਵੀ ਸੀਐੱਸਐੱਸ ਸੁਆਧਾਰ ਹੋ ਸਕਦਾ ਹੈ। ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ ਕਿ ਕਿਵੇਂ ਪੈਰਾਗ੍ਰਾਫ ਦੀ ਰੰਗ ਅਤੇ ਬਾਹਰੀ ਮਾਰਜਿਨ ਨੂੰ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ:

style="color: sienna; margin-left: 20px">
This is a paragraph

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {
  color: red;
  تکس الائن: left;
  فونٹ سائز: 8pt;
  }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {
  تکس الائن: رائٹ; 
  فونٹ سائز: 20پوائنٹ;
  }

اگر اس پیج میں اندرونی استایل تیبل کا سلسلہ بیرونی استایل تیبل سے منسلک ہوا ہو، تو h3 کا حاصل کیا جانے والا استایل یہ ہوگا:

رنگ: رنگ: رد; 
تکس الائن: رائٹ; 
فونٹ سائز: 20پوائنٹ;

کوئل رنگ کی کیمپنی کو بیرونی استایل تیبل سے وارث کیا جائیگا، جبکہ لکچر پاروٹ (text-alignment) اور فونٹ سائز (font-size) آئندہ استایل تیبل کی رول میں کچل دی جائیں گے。