ਕੋਰਸ ਸਾਲਾਨਾ

CSS ਅਧਿਆਪਕ ਪਾਠ

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

CSS ਫਰੇਮਵਰਕ

• سی ای اس فیمل وار نمونہ
• سی ای اس اندرون چادر
• سی ای اس حاشیه
• سی ای اس اضافی
• سی ای اس اضافی جوڑ

CSS ਸਥਾਨਾਂਤਰ

• سی ای اس نقطه نظر
• سی ای اس نسبی نقطه نظر
• سی ای اس تعلیمی نقطه نظر
• سی ای اس سائیڈنگ

CSS ਸੈਲੈਕਟਰ

• سی ای اس عناصر انتخابگر
• سی ای اس انتخابگر جمع
• سی ای اس کلاس انتخابگر تفصیلی
• سی ای اس id انتخابگر تفصیلی
• سی ای اس اپرائٹر انتخابگر تفصیلی
• سی ای اس وارث انتخابگر
• سی ای اس اولاد انتخابگر
• سی ای اس نزدیک ساتھی انتخابگر

ਚੋਣੀਆਂ ਕੋਰਸ

ਕੋਰਸ ਸਿਫਾਰਸ਼:

• کدوو3 سی درج کمپلکٹ

CSS ਕੋਲ ਸਾਫ ਰੰਗ ਦੇ ਪਿੱਨ ਵਰਤੇ ਜਾਣ ਦੀ ਆਗਿਆ ਹੈ, ਉਸ ਦੇ ਨਾਲ-ਨਾਲ ਪਿੱਨ ਚਿੱਤਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਮਿੱਤ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰਨ ਦੀ ਵੀ ਆਗਿਆ ਹੈ。

CSS ਇਸ ਦੇ ਸਬੰਧ ਵਿੱਚ HTML ਤੋਂ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਮਰੱਥਾ ਰੱਖਦਾ ਹੈ。

ਪਿੱਨ ਰੰਗ

ਇਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ background-color ਗੁਣਤੱਤ ਲਈ ਪਿੱਨ ਰੰਗ ਸੈਟ ਕਰੋ. ਇਹ ਗੁਣ ਕੋਈ ਵੀ ਲਾਗੂ ਰੰਗ ਮੁੱਲ ਮੰਗੇ ਹੈ。

ਇਹ ਨਿਯਮ ਤੱਤ ਦੇ ਪਿੱਨ ਨੂੰ ਗ੍ਰੇ ਸੈਟ ਕਰਦਾ ਹੈ:

p {background-color: gray;}

ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਪਿੱਨ ਰੰਗ ਤੱਤ ਦੇ ਲੇਖ ਤੋਂ ਬਾਹਰ ਥੋੜ੍ਹਾ ਫੈਲੇ, ਤਾਂ ਕੁਝ ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ ਵਧਾਓ:

p {background-color: gray; padding: 20px;}

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਾਰੇ ਤੱਤਾਂ ਲਈ ਪਿੱਨ ਰੰਗ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਇਹ body ਤੋਂ ਲੈ ਕੇ em ਅਤੇ a ਵਰਗੇ ਇੰਟਰਲਾਈਨ ਤੱਤਾਂ ਤੱਕ ਹੈ。

background-color ਨੂੰ ਵਿਰਾਸਤ ਨਹੀਂ ਹੁੰਦਾ, ਇਸ ਦਾ ਮੂਲ ਮੁੱਲ ਟ੍ਰਾਂਸਪੇਰੈਂਟ ਹੈ. transparent ਦਾ ਮਤਲਬ ਹੈ ਟ੍ਰਾਂਸਪੇਰੈਂਟ. ਯਾਨੀ, ਜੇਕਰ ਇੱਕ ਅਣਗਿਣਤ ਪਿੱਨ ਰੰਗ ਦਿੱਤਾ ਨਹੀਂ ਹੈ ਤਾਂ ਪਿੱਨ ਟ੍ਰਾਂਸਪੇਰੈਂਟ ਹੋਵੇਗਾ, ਤਾਕਿ ਉਸ ਦੇ ਪੂਰਵਪੁਰਖ ਤੱਤਾਂ ਦਾ ਪਿੱਨ ਦੇਖਣਾ ਹੋ ਸਕੇ।

ਪਿੱਨ ਚਿੱਤਰ

ਚਿੱਤਰ ਨੂੰ ਪਿੱਨ ਵਿੱਚ ਰੱਖਣ ਲਈ ਕਰਨਾ ਹੈ background-image attributebackground-image attribute ਦਾ ਮੂਲ ਰੂਪ ਵਿੱਚ ਮੁੱਲ none ਹੈ, ਜਿਸ ਦਾ ਮਤਲਬ ਹੈ ਕਿ background 'ਚ ਕੋਈ ਵੀ image ਨਹੀਂ ਰੱਖਿਆ ਗਿਆ ਹੈ。

background-image ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ, ਇਸ ਅਤੀਤ ਦਾ ਮੁੱਲ ਸੈੱਟ ਕਰਨਾ ਹੁੰਦਾ ਹੈ:

body {background-image: url(/i/eg_bg_04.gif);}

ਮੱਧਮਾਂਗ ਤੋਂ ਇਲਾਵਾ, ਮੱਧਮਾਂਗ ਵੀ body element ਵਿੱਚ ਲਾਈ ਜਾਂਦੀ ਹੈ, ਪਰ ਇਹ ਸਿਰਫ਼ ਇਸ ਤੋਂ ਪਰੰਪਰਾਗਤ ਨਹੀਂ ਹੈ।

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ paragraph ਨੂੰ background ਵਿੱਚ ਰੱਖਿਆ ਗਿਆ ਹੈ, ਜਿਸ ਨੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਹੋਰ ਭਾਗਾਂ 'ਤੇ background ਨਹੀਂ ਲਾਈਆ ਹੈ:

p.flower {background-image: url(/i/eg_bg_03.gif);}

ਤੁਸੀਂ ਹੋਰ ਵੀ inline element ਵਿੱਚ background image ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ, ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਵਿੱਚ background image ਸੈੱਟ ਕੀਤੀ ਗਈ ਹੈ:

a.radio {background-image: url(/i/eg_bg_07.gif);}

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਿਧਾਂਤਕ ਰੂਪ 'ਚ ਤੁਸੀਂ textareas ਅਤੇ select ਵਰਗੇ ਪਰਿਵਰਤਨ element ਦੇ background ਵਿੱਚ image ਵਰਤ ਸਕਦੇ ਹੋ, ਪਰ ਸਾਰੇ user agent ਇਸ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਬਹੁਤ ਬਿਹਤਰ ਤਰੀਕੇ ਨਾਲ ਨਹੀਂ ਸਖਤੀ ਨਾਲ ਹੱਲ ਕਰ ਸਕਦੇ ਹਨ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, background-image ਨੂੰ ਵੀ ਪ੍ਰਾਪਤ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਸਾਰੇ background attribute ਪ੍ਰਾਪਤ ਨਹੀਂ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।

background repeat

ਜੇਕਰ ਤੁਸੀਂ ਪੈਜ਼ 'ਤੇ background-image ਨੂੰ ਪਰਿਵਰਤਨ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ, ਇਸ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ background-repeat property

property ਦਾ ਮੁੱਲ repeat ਇਮੇਜ ਨੂੰ ਹੌਰੀਜ਼ਨਟਲ ਅਤੇ ਵੈਰਟੀਕਲ ਦੋਵੇਂ ਦਿਸ਼ਾਵਾਂ 'ਚ ਤਕਰੀਬਨ ਇੱਕ ਸਮਾਨ ਰੂਪ 'ਚ ਫੈਲਾ ਦਿੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਬੈਕਗਰਾਊਂਡ image ਦੀ ਆਮ ਪ੍ਰਕਿਰਿਆ। repeat-x ਅਤੇ repeat-y ਨਾਲ ਇਮੇਜ ਕੇਵਲ ਹੌਰੀਜ਼ਨਟਲ ਜਾਂ ਵੈਰਟੀਕਲ ਦਿਸ਼ਾ 'ਚ ਪਰਿਵਰਤਿਤ ਹੁੰਦੀ ਹੈ, no-repeat ਨਾਲ ਇਮੇਜ ਕਿਸੇ ਵੀ ਦਿਸ਼ਾ 'ਚ ਨਹੀਂ ਫੈਲਾਈ ਜਾਂਦੀ ਹੈ。

ਮੂਲ ਰੂਪ ਵਿੱਚ background-image ਇੱਕ element ਦੇ ਉੱਚੇ ਸੱਜੇ ਕੋਨੇ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ। ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਨੂੰ ਦੇਖੋ:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

background location

ਇਸ ਦਾ ਪ੍ਰਯੋਗ ਕਰ ਸਕਦੇ ਹਾਂ background-position propertybackground-image ਵਿੱਚ ਚਿੱਤਰ ਦਾ ਸਥਾਨ ਬਦਲ ਸਕਦੇ ਹਾਂ。

ਹੇਠ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ body element ਵਿੱਚ ਇੱਕ background image ਨੂੰ ਮੱਧਮਾਂਗ ਸਥਾਨ ਵਿੱਚ ਰੱਖਿਆ ਗਿਆ ਹੈ:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position: center;
  }

background-position property ਦੀ ਮੁੱਲ ਪ੍ਰਦਾਨ ਕਰਨ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ। ਪਹਿਲਾਂ ਤੋਂ ਕੁਝ ਕੀਵਰਡਜ਼ ਵਰਤ ਸਕਦੇ ਹਾਂ: top, bottom, left, right ਅਤੇ center। ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਕੀਵਰਡਜ਼ ਦੋਵੇਂ ਸਾਥੇ ਵਰਤੇ ਜਾਂਦੇ ਹਨ, ਪਰ ਹਰਦੀ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਲੰਬਾਈ ਮੁੱਲ ਵੀ ਵਰਤ ਸਕਦੇ ਹਾਂ, ਜਿਵੇਂ 100px ਜਾਂ 5cm, ਅੰਤ ਵਿੱਚ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਵੀ ਵਰਤ ਸਕਦੇ ਹਾਂ। ਵੱਖ-ਵੱਖ ਤਰ੍ਹਾਂ ਦੇ ਮੁੱਲ ਬੈਕਗਰਾਊਂਡ ਇਮੇਜ ਦੇ ਸਥਾਨ ਵਿੱਚ ਕੁਝ ਅੰਤਰ ਪੈਦਾ ਕਰਦੇ ਹਨ।

کیوورڈ

تصویر کی جگہ کی کیوورڈ آسان سے سمجھی جاسکتی ہیں، جو اپنے نام کے مطابق کام کرتی ہیں، مثلاً top right تصویر کو عناصر کی لینگ بائیں کونے میں موجود پراندراج کا ہوگا۔

نظام کے مطابق، مقادیر کیوورڈ کا آنا کسی بھی ترتیب میں ممکن ہوتا ہے، بلاکہ دو کیوورڈ سے زیادہ نہیں آئیں، جس میں ایک افقی اور دوسرا عمودی کی جگہ پر آئیں۔

اگر صرف ایک کیوورڈ آیا ہو، تو دوسرے کیوورڈ کو center کا طور پر مندرج کیا جائے گا۔

اس لئے اگر آپ کی خواہش ہو کہ ہر پاراگراف کی وسط سے اوپر میں ایک تصویر آئے، تو اس طرح کا اعلان کریں:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

اینجا معادل مقادیر کیوورڈ درج ہیں:

فیصد کا عدد

فیصد کا عدد کا انداز بہت پیچیدہ ہوتا ہے، اگر آپ کی خواہش ہو کہ تصویر کو عناصر میں مرکز میں رکھنا ہو، تو اس طرح سے آسان ہوگا:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

یہ تصویر کو مناسب طور پر مقرر کرے گا، جس کا مرکز عناصر کا مرکز سے یکساں ہوگا۔یعنی، فیصد کا عدد عناصر اور تصویر دونوں پر استعمال کیا جاتا ہے۔یعنی، تصویر میں 50% 50% کا نقطہ (مرکز نقطہ) عناصر میں 50% 50% کا نقطہ (مرکز نقطہ) سے یکساں ہوگا۔

اگر تصویر 0% 0% کی جگہ پر موجود ہو، تو اس کا اپنا اُپر درے کونہ عناصر کی لینگ بائیں کونے میں موجود پراندراج کا ہوگا، اگر تصویر کا مقام 100% 100% ہو، تو اس کا اُپر درے کونہ عناصر کی دائیں بائیں کونے میں موجود پراندراج کا ہوگا۔

اس لئے اگر آپ کی خواہش ہو کہ ایک تصویر کو افقی طور پر 2/3 اور عمودی طور پر 1/3 کی جگہ پر رکھنا ہو، تو اس طرح کا اعلان کریں:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

اگر صرف ایک فیصد کا عدد فراہم کیا جاتا ہے، تو اس مقادیر کو افقی مقادیر کے طور پر استعمال کیا جائے گا، اور عمودی مقادیر کو 50% کا طور پر مندرج کیا جائے گا، جو کہ کیوورد کا طور پر مشابه ہوتا ہے۔

background-position کا دفعیل مقادیر 0% 0% ہوتا ہے، جو عملی طور پر top left کے بجائے استعمال کیا جاتا ہے۔ یہ امر واضح کرتا ہے کہ کیونکہ پس منظر تصویر کبھی سے شروع ہوتا ہے، جس کا سبب اپنے عناصر کی لینگ بائیں کونے میں موجود پراندراج کا ہوا ہوتا ہے، مگر آپ نے مختلف مقادیر مقرر نہیں کیے ہوئی ہوئی ہوگا۔

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

ਆਪਣੇ ਅਨੁਭਵ ਲਈ ਪ੍ਰਯੋਗ ਕਰੋ

background-attachment ਪ੍ਰਤੀਯੋਗਿਤਾ ਦੀ ਮੂਲ ਕੀਮਤ ਹੈ scroll, ਯਾਨੀ ਮੂਲ ਰੂਪ ਵਿੱਚ, ਪੱਨਕੇ ਸਕ੍ਰੋਲ ਨਾਲ ਸਰਕਲ ਹੁੰਦਾ ਹੈ。

CSS 背景属性

آلے تالاب

سی ای اس مراجع دستنوشت

سی ای اس مثال

سی ای اس سنجش

سی ای اس درج

پانچایکتی سیلنک