CSS پایه گرامر

CSS 语法

CSS ਨਿਯਮ ਦੋ ਪ੍ਰਮੁੱਖ ਹਿੱਸਿਆਂ ਤੋਂ ਬਣਦੇ ਹਨ: ਚੋਣਕਰਤਾ, ਅਤੇ ਇੱਕ ਜਾਂ ਕਈ ਦੇਣ。

selector {declaration1; declaration2; ... declarationN }

ਚੋਣਕਰਤਾ (selector) ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ ਜਿਸ ਐਲੀਮੈਂਟ ਦੇ ਸਟਾਈਲ ਨੂੰ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ ਹੈ ਉਹ ਐਲੀਮੈਂਟ ਹੁੰਦਾ ਹੈ。

ਹਰੇਕ ਦੇਣ ਇੱਕ ਮਾਪ ਅਤੇ ਇੱਕ ਮੁੱਲ ਤੋਂ ਬਣਦੀ ਹੈ。

ਮਾਪ (property) ਤੁਹਾਡੇ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਸਟਾਈਲ ਮਾਪ (style attribute) ਹਨ। ਹਰੇਕ ਮਾਪ ਦਾ ਇੱਕ ਮੁੱਲ ਹੈ। ਮਾਪ ਅਤੇ ਮੁੱਲ ਦਰਮਿਆਨ ਦਰਸ਼ਨਾ ਦਰਸਾਉਂਦਾ ਹੈ।

selector {property: value}

ਇਹ ਕੋਡ ਹੀ h1 ਐਲੀਮੈਂਟ ਦੇ ਲਿਖਤ ਰੰਗ ਨੂੰ ਲਾਲ ਕਰਦਾ ਹੈ ਅਤੇ ਫੋਂਟ ਸਾਈਜ਼ ਨੂੰ 14 ਪਿਕਸਲ ਸੈੱਟ ਕਰਦਾ ਹੈ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ, h1 ਚੋਣਕਰਤਾ ਹੈ, color ਅਤੇ font-size ਮਾਪ ਹਨ, red ਅਤੇ 14px ਮੁੱਲ ਹਨ。

h1 {color:red; font-size:14px;}

ਇਹ ਚਿੱਤਰ ਤੁਹਾਨੂੰ ਉੱਪਰ ਦੇ ਕੋਡ ਦੀ ਰੂਪਰੇਖਾ ਦਿਖਾਉਂਦਾ ਹੈ:

CSS 语法

ਸੁਝਾਅ:ਦੇਣ ਨੂੰ ਬੰਦ ਕਰਨ ਲਈ ਫਲੈਗਸ਼ਿਪ ਵਰਤੋਂ ਕਰੋ。

ਮੁੱਲਾਂ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਲਿਖਣਾਂ ਅਤੇ ਇਕਾਈਆਂ

ਅੰਗਰੇਜ਼ੀ ਸ਼ਬਦ red ਦੇ ਇਲਾਵਾ, ਅਸੀਂ ਸ਼ੈਕਸਟੀਮਲ ਰੰਗ ਮੁੱਲ #ff0000 ਦਾ ਉਪਯੋਗ ਕਰ ਸਕਦੇ ਹਾਂ:

p { color: #ff0000; }

ਬਾਇਟ ਬਚਾਉਣ ਲਈ, ਅਸੀਂ ਕ੍ਰਿਪਟ ਦੀ ਛੋਟੀ ਰੂਪ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ:

p { color: #f00; }

ਅਸੀਂ ਰੈਂਗ ਦੇ ਮੁੱਲ ਨੂੰ ਦੋ ਤਰ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

ਧਿਆਨ ਰੱਖੋ ਕਿ ਜਦੋਂ ਤੁਸੀਂ RGB ਪ੍ਰਤੀਸ਼ਤ ਦਾ ਉਪਯੋਗ ਕਰਦੇ ਹੋ ਤਾਂ ਪ੍ਰਤੀਸ਼ਤ ਸੰਕੇਤ ਲਗਾਉਣਾ ਚਾਹੀਦਾ ਹੈ, ਚਾਹੇ ਮੁੱਲ 0 ਹੋਵੇ ਜਾਂ ਨਹੀਂ। ਪਰ ਹੋਰ ਕਈ ਹਾਲਾਤਾਂ ਵਿੱਚ ਇਸ ਤਰ੍ਹਾਂ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ। ਉਦਾਹਰਣ ਵਜੋਂ, ਜਦੋਂ ਅਕਾਰ 0 ਪਿਕਸਲ ਹੈ ਤਾਂ 0 ਦੇ ਬਾਅਦ px ਇਕਾਈ ਨੂੰ ਨਹੀਂ ਲਗਾਉਣਾ ਚਾਹੀਦਾ, ਕਿਉਂਕਿ 0 ਹੀ 0 ਹੈ, ਚਾਹੇ ਇਕਾਈ ਕੀ ਹੋਵੇ।

ਕੁਤਾ ਲਿਖਣ ਨੂੰ ਯਾਦ ਰੱਖੋ

ਸੁਝਾਅ:ਜੇਕਰ ਮੁੱਲ ਕਈ ਸ਼ਬਦਾਂ ਵਾਲਾ ਹੈ ਤਾਂ ਮੁੱਲ ਨੂੰ ਕੁਤਾ ਵਿੱਚ ਲਿਖਣਾ ਚਾਹੀਦਾ ਹੈ:

p {font-family: "sans serif";}

ਬਹੁਦੇਣ

ਸੁਝਾਅ:ਜੇਕਰ ਕਿਸੇ ਇੱਕ ਦੇਣ ਤੋਂ ਵੱਧ ਦੇਣ ਦੀ ਜ਼ਰੂਰਤ ਹੈ ਤਾਂ ਹਰੇਕ ਦੇਣ ਨੂੰ ਸੈਕਸ਼ਨ ਨਾਲ ਵੰਡਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਨਿਚੋੜੇ ਇਹ ਉਦਾਹਰਣ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਿਵੇਂ ਇੱਕ ਲਾਲ ਰੰਗ ਦੇ ਮੱਧ ਪਾਠ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਆਖਰੀ ਨਿਯਮ ਹੈ ਕਿ ਸੈਕਸ਼ਨ ਨੂੰ ਨਹੀਂ ਲਗਾਉਣਾ ਚਾਹੀਦਾ ਕਿਉਂਕਿ ਸੈਕਸ਼ਨ ਅੰਗਰੇਜ਼ੀ ਵਿੱਚ ਇੱਕ ਵੰਡਕ ਨਹੀਂ ਹੈ ਬਲਕਿ ਸਮਾਪਤ ਕਰਨ ਵਾਲਾ ਚਿੰਨ੍ਹ ਹੈ। ਹਾਲਾਂਕਿ ਅਧਿਕਾਰੀ ਡਿਜ਼ਾਇਨਰ ਸਾਰੇ ਦੇਣ ਦੇ ਅੰਤ ਵਿੱਚ ਸੈਕਸ਼ਨ ਲਗਾਉਂਦੇ ਹਨ, ਇਸ ਦਾ ਫਾਇਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਮੌਜੂਦਾ ਨਿਯਮਾਂ ਵਿੱਚ ਦੇਣ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਦੇ ਸਮੇਂ ਗਲਤੀ ਕਮਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

p {text-align:center}; color:red;}

باید هر خط فقط یک ویژگی را توضیح دهید، این کار سبب افزایش خوانایی تعریف استایل می‌شود، مانند این:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

فضاها و حروف بزرگ و کوچک

بیشتر استایل‌ها شامل بیش از یک قاعده هستند و بیشتر قواعد شامل بیش از یک بیان هستند. استفاده از بیان‌های چندگانه و فضاهای خالی سبب می‌شود که استایل‌ها راحت‌تر ویرایش شوند:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

حضور یا عدم حضور فضاهای خالی تأثیری بر عملکرد CSS در مرورگر ندارد، همچنین، برخلاف XHTML، CSS به حروف بزرگ و کوچک اهمیت نمی‌دهد. اما یک استثنا وجود دارد: اگر با مستند HTML کار کنید، نام‌های class و id به حروف بزرگ و کوچک حساس هستند.