CSS3 ۾ اهم تبديليون سمجھڻ
CSS2 ۽ CSS3 جي وچ ۾ سڀ کان وڏو فرق اهو آهي ته CSS3 کي مختلف حصن ۾ ورهايو ويو آهي، جنهن کي ماڊل سڏيو ويندو آهي. هنن ماڊل هر هڪ جي سفارش جي عمل جي مختلف مرحلن ۾ W3C وسيلي رستي ڪري رهي آهي. اهو عمل مختلف CSS ٺاهيندڙ CSS3 جي لاء ننڍڙي ٺاهيندڙن جي طرفان برائوزر ۾ قبول ۽ پلي ڪرڻ لاء اهو آسان بڻائي ڇڏيو آهي.
جيڪڏهن توهان هن عمل جي مقابلي ۾ سي ايس ڊي 2 سان ڇا ڪيو، جتي هر شيء هڪ واحد دستاويز سان گڏ سڀني ڪاسسلنگ انداز شيٽ جي معلومات سان گڏ ڪيو ويو، توهان کي سفارش کي ٽوڙڻ، ننڍڙي ٽڪرا، ٽڪرن کي ٽوڙڻ جي فائدن کي شروع ڪرڻ شروع ڪيو آهي. ڇو ته هر ماڊل انفرادي طور تي ڪم ڪيو پيو وڃي، اسان وٽ اسان جو CSS3 ماڊلز لاء برائوزر جي سپورٽ جي وڏي حد تائين آهي.
جئين ڪنهن به نئين ۽ تبديل ڪرڻ جي وضاحت سان، توهان جا طور تي ڪيترائي برائوزرن ۽ آپريٽنگ سسٽم ۾ پنهنجي CSS3 صفحن کي چڱي طرح جانچ ڪرڻ جي لاء يقيني بڻجن ٿيون. مقصد اهو ناهي ته ويب صفحا ٺاهي رهيا آهن انهي جو هر انداز ۾ هر برائوزر ۾ ساڳيو نظر ايندو، پر انهي کي يقيني بڻائڻ جيڪي توهان استعمال ڪندا آهيو، CSS3 شالن ۾ شامل آهن، انهن برائوزررن ۾ وڏو نظر ايندو آهي جيڪو انهن کي سپورٽ ڪري ٿو ۽ انهن کي شاندار طور پر برائوزرن لاء واپس ڪري ٿو نه.
نئون CSS3 چونڊيندڙ
CSS3 نئين نون طريقن جي گنجائش پيش ڪري ٿو جيڪو توهان نئين سي ايس ايس چونڊس سان ايس ايس قاعدن سان گڏ، هڪ گڏوگڏ هڪ گڏيل مجموعي سان ۽ ڪجهه نئين موسو-عناصر سان لکن ٿا.
ٽي نئون خاص چونڊيندڙ:
- Attribute شروعاتي مادون ۾ اھم عنصر [foo ^ = "بار"] عنصر آھي ھڪڙو خاصيت جو فوٽ سڏجي ٿو جيڪو "بار" سان شروع ٿئي ٿو مثال طور
- منسوب سان ٺهڪندڙ مماثلت اھڙيء طرح عنصر آھي [foo $ = "بار"] عنصر آھي ھڪڙو خاصيتون فائو آھي جنھن کي "بار" سان ختم ٿي ويندو آھي
- منسوب ۾ مکيه عنصر شامل آھي [foo * = "bar"] ان عنصر آھي ھڪڙو خاصيتون فائو آھي جنھن ۾ اھي لفظ "بار" مثال آھي
16 نوان تخلص ڪلاس:
- روٽ
- جو دستاويز جو جزا عنصر. HTML ۾ هي هميشه آهي.
- : ٻاراڻي ٻار (ن)
- هن کي استعمال ڪرڻ لاء صحيح ٻار عناصر يا ميڪنگن کي متبادل ڪرڻ لاء متغير استعمال ڪرڻ لاء استعمال ڪريو.
- : ٻارھ-آخري-ٻار (ن)
- آخري ڳالھه جنن جي آخري آخري عناصر کي چڪاس ڪريو.
- : نون جو قسم (ن)
- سمجهه وارين عناصر سان گڏ ساڳئي نالي سان هن دستاويز واري وڻ سان ملايو.
- : nth-آخري-قسم جو (ن)
- ڀائيواري عناصر سان گڏوگڏ ساڳيا نالو ھيٺئين کان مٿي ڳڻي رهيو آهي.
- : آخري ٻار
- ٻار جي آخري ٻار جو عنصر ملندو.
- : پهرين قسم جو قسم
- انهي قسم جو پهريون ڀاء عنصر ملندو.
- : آخري قسم جو قسم
- انهي قسم جو آخري ڀاء عنصر ملندو.
- :اڪيلو اولاد
- ھڪڙو اولاد ان جي والدين جو ھڪڙو اولاد آھي.
- صرف قسم جو قسم
- ھڪڙو ھڪڙي قسم جو ھڪڙو ھڪڙو ھڪڙو آھي.
- خالي ڪريو
- ٻارن جو ڪو عنصر نه ملندو آهي (ٽيڪسٽ نوڊز سميت).
- ھدف
- ھدف جو ھڪڙو عنصر ملندو آھي جيڪو ھدايتون وٺڻ واري آر ايل جي حوالي ڪري ٿو.
- : فعال
- اھو فعال ٿيو جڏھن فعال آھي.
- : معذور
- ان کي معذور ملندو آھي.
- : چڪاس ٿيل
- ان کي ٺهيل جو عنصر ملايو آهي (ريڊيو بٽڻ يا چيڪ بڪس).
- : نه
- ملندو جڏهن عنصر سادو چونڊيندڙن کي نٿو ملي.
هڪ نئون مجموعو
- عنصر ~ عنصر بي
- ٻڏل جڏهن عنصر بي پي جي جاء ڪجهه عنصر کان پوء، نه ئي فوري طور تي.
نئين خاصيت
CSS3 پڻ نئين ايس ايس ايس جي ملڪيت جو هڪ نمبر متعارف ڪرايو. انهن مان ڪيترن ئي پراپرڪٽس بصري طرزن ٺاهڻ جي ڪوشش ڪندا هئا انهي سان گڏ فٽشپشاپ جهڙوڪ گرافڪس پروگرام جي گنجائش سان گڏ ٿيندو. انهن مان ڪجهه، سرحد ريڊس يا خاني واري ڇانو وانگر، CSS3 تعارف کان پوء تعارف ٿي ويا آهن. ٻيا، جهڙوڪ فلڪس بوڪس يا سي ايس ڊي گرڊ نئين انداز ۾ آهن جيڪي اڃا تائين سي ايس ڊي 3 ٺاهيون ويون آهن.
CSS3 ۾، باڪس جو نمونو تبديل نه ڪيو ويو آهي. پر هڪ گلاس نئين انداز جي ملڪيت جا هوندا آهن جيڪي توهان جي دٻن جي پس منظر ۽ سرحد انداز ۾ مدد ڪري سگھن ٿا.
ھڪڙو پس منظر سان ميگ
پس منظر، تصوير، پس منظر واري پوزيشن، ۽ پس منظر-ورجايل شالي استعمال ڪندي توهان ڪيترن ئي پس منظر جون تصويرون بيان ڪري سگهو ٿا ته دٻي ۾ هڪ ٻئي جي مٿان رکيل هجي. استعمال ڪندڙ جي تصوير کي ويجھي تصوير آھي، ھيٺين پوئتي پوئتي آھي. جيڪڏهن ڪو پس منظر رنگ آهي، اهو سڀني تصويرن جي سطح کان هيٺ ڏنل آهي.
نئون پس منظر وارو خاصيتون
CSS3 ۾ ڪجهه نئون پس منظر جا خاصيتون آهن.
- پس منظر
- هي ملڪيت وضاحت ڪري ٿو ته پس منظر واري تصوير ڪلپ ڪيو وڃي. ڊفالٽ سرحد وارو دٻو آھي، پر اھو تبديل ڪرڻ واري دٻي يا مواد واري دٻي ۾ تبديل ٿي سگھي ٿو.
- پس منظر
- هي ملڪيت اهو سمجهاڻي ٿو ته ڇا پس منظر کي ڇڪڻ واري دٻي ۾ جڳهه هجڻ گهرجي، سرحد خانه، يا مواد خاني ۾.
- پس منظر
- هي ملڪيت توهان کي پس منظر واري تصوير جي سائيز کي ظاهر ڪرڻ جي اجازت ڏئي ٿي. اهو توهان کي ننڍن تصويرن جي صفحي کي پورو ڪرڻ جي اجازت ڏئي ٿو.
موجوده پس منظر جي خاصيتن جي تبديلين ۾ تبديليون
موجوده پس منظر طرز جي ملڪيت تي ڪجھ تبديليون پڻ آهن:
- پس منظر
- ھن ملڪيت لاء ٻه نوان قدر آھن: خلا ۽ گول. بغير ڪنهن ڪلپ کي بغير اندر خانه تصوير جي جاء تي خلائي جڳهه. گول جي پس منظر جي تصوير بچايو آهي انهي ڪري ته اهو دٻي ۾ مڪمل وقت ٽائل ٿيندو.
- پس منظر
- ھڪڙو نئون قدر "مقامي" شامل آھي، انھيء ڪري جو پس منظر جيڪو عنصر جي مواد سان طومار ڪندو جڏھن ان عنصر ھڪڙي اسڪول آھي.
- پس منظر
- پسمنظر شاهاڻي جائداد جي ماپ ۽ اصل جي ملڪيت ۾ اضافو آهي.
CSS3 سرحد جا خاصيتون
CSS3 حدن ۾، جيڪو اسان استعمال ڪيو ويو آھي (ٽائٽ، ٻٻر، ڊھيٽل، وغيره) جا شال آھن يا اھي ھڪڙي تصوير ھجي. گڏوگڏ، CSS3 گول ڪنڊن ٺاهڻ جي صلاحيت ۾ آڻيندو آهي. سرحد جون تصويرون دلچسپ آهن ڇو ته توهان سڀني چئن سرحدن جي تصوير ٺاهي رهيا آهيو ۽ پوء سي ايس کي ٻڌاء ته ڪيئن توهان جي سرحدين جي تصوير کي لاڳو ڪرڻ.
نئين سرحد جي اسپيشل پراٽس
CSS3 ۾ ڪجهه نئين سرحد جا خاصيتون آهن:
- سرحد ريڊس
- سرحد-مٿان-دڙو ريڊيوس ، سرحد-تري-دڙو-ريڊيوس ، سرحدن-بٽڻ -ٻي-بٻي-ريڊس ، سرحد-چوٻي بائیں-ريڊس
- اهي ملڪيت توهان جي سرحدن تي گول ڪنڊ ٺاهڻ ٺاهڻ جي اجازت ڏين ٿيون.
- سرحد واري تصوير جو ذريعو
- تصوير جي ماخذ فائل کي استعمال ڪندي سرحد جي اندازن جي ڀيٽ ۾ استعمال ڪيل اڳ ۾ ئي وضاحت ڪئي وئي آهي.
- سرحد جي شڪل واري شڪل
- سرحد جي شڪل وار کان اندروني آفس کي رد ڪري ٿو
- سرحد جي شڪل جي چوٽي
- توهان جي سرحد جي تصوير لاء چوٿين جي قيمت کي بيان ڪري ٿو.
- سرحد جي تصوير واري جڳهه
- اها حد مقرر ڪئي وئي آهي ته سرحد جي تصوير جي حصي سرحد سرحد خان کان وڌندي آهي.
- سرحد جي شڪل واري مرحلي
- غلطي کي سرحد جي شڪل ۽ وچين حصن کي ٽوڙي يا صاف ڪرڻ گهرجي.
- سرحد جي تصوير
- سڀني سرحدن جي تصوير جي ملڪيت لاء قابل قدر ملڪيت.
سرحدات ۽ پس منظر سان لاڳاپيل اضافي CSS3 پراپرڪٽس
جڏهن هڪ باڪس هڪ صفحه برڪ تي ڀڄي ويندو آهي، قطار جي لڪير لاء ڪالمن جي وقف (ان لائن عناصر) باڪس سجاڻ واري وقف جائداد واضح ڪري ٿو ته نئين بڪون ڪيئن سرحد ۽ پيڊنگ سان لپي ويندا آهن. پس منظر ڪيترن ئي ڀريل خانن جي وچ ۾ هن ملڪيت کي استعمال ڪري سگهجن ٿا.
اتي به هڪ بيڪس ڇانو ملڪيت آهي جيڪو باڪس عناصر ۾ ساد شامل ڪرڻ لاء استعمال ڪري سگهجي ٿو.
CSS3 سان، توهان هاڻي آساني سان هڪ ويب لنڪ قائم ڪري سگهو ٿا ڪيترن ئي شاخن جي بغير ٽي ڊي يا ٽيگ ٽئڪس جي عمارتن سان. توهان کي صرف برائوزر ٻڌايو ته ڪيترا ئي شاخ جسم جي عنصر هجڻ گهرجي ۽ انهن کي ڪيتري وڏن ڪمن جي هجڻ گهرجي. ان سان گڏ توهان سرحدون (ضابطو)، پس منظر رنگ شامل ڪري سگهو ٿا جيڪو ڪالمن جي اونچائي ڊگهو آهي، ۽ توهان جو ٽيڪسٽ پاڻمرادو سڀني ڪالمن ذريعي وهندي.
CSS3 کالم - ڪالمن جو تعداد ۽ چوٿين بيان ڪريو
ٽي ٽي نيون خاصيتون آهن جيڪي توهان جي ڪالمن جي تعداد ۽ چوڻي کي بيان ڪرڻ جي اجازت ڏين ٿا:
- ڪالهه جي چوٽي
- پنھنجي چوٿين کي پنھنجي شاخن کي طئي ڪرڻ گھرجي. پوء برائوزر هن ٽيڪسٽ کي وڌايو ويندو جيڪي وڏين ڪالن سان خلا کي ڀرڻ لاء.
- ڪالمن جي ڳڻپ
- صفحي تي شاخن جو تعداد بيان ڪري ٿو. برائوزر وري اسپوري ۾ ڪافي فوٽ وڏن ڪمن کي ٺاهي ڇڏيندو، پر رڳو نمبر جيڪو توھان بيان ڪيو آھي.
- اسڪرين
- شاٿند جي ملڪيت جتي توهان چوڻي يا ٽائيم جي وضاحت ڪري سگھو ٿا (يا ٻئي، پر اهو ئي گهٽ ۾ گهٽ احساس پيدا ٿئي ٿو).
CSS3 کالم خلا ۽ قاعدا
ساڳئي ملول منظر ۾ ڪالمن جي وچ ۾ فرق ۽ ضابطا رکيل آهن. گپ ڌار ڌار ڪالمن کي ڌڪيندو، پر قاعدن کي ڪوبہ جاء ڪونهي. جيڪڏهن هڪ ڪالمن جو فرق ان جي خلا کان وڌيڪ وسيع آهي، ته ان جي ڀرسان ڪالمن واري مٿان اوپلو ٿيندو. اتي ڪالمن جي اصولن ۽ فرقن لاء پنج نيون خاصيتون آهن.
- ڪالھ جوڙ
- شاخن جي وچ ۾ فرق جي چوٿين کي بيان ڪري ٿو.
- ڪالمن جو قاعدو رنگ
- ضابطي جو رنگ بيان ڪري ٿو.
- ڪالمن واري اصول جو انداز
- ضابطي جي انداز کي طئي ڪندو آهي (مضبوط، ڊيٽابيل، ٻٻر، وغيره).
- ڪالمن جي حڪمراني جي چوٿين
- قاعدي جي چوٿين کي بيان ڪري ٿو.
- ڪالمن واري اصول
- ھڪڙي جڳھھ ۾ سڀ ٽي ڪالمن جي حڪمراني جا خاصيت بيان ڪن ٿا.
CSS3 کالم بوڪ، کالم اسپيننگ، ۽ کالم کي ڀرڻ
ڪالمن جي وقفين ۾ پيادا ڪيل مواد ۾ ٽوڪ بيان ڪرڻ لاء استعمال ڪيل ساڳيو CSS2 اختيارن جو استعمال آهي، پر ٽي نئين خاصيتن سان: برٽ-کان ، بيڪ اپ بعد ، ۽ ٽوٽ اندر .
جدولن وانگر، توهان ڪالمن-span ملڪيت سان اسپاالن کي عناصر سيٽ ڪري سگھو ٿا. هي توهان کي سر لنڊن ٺاهڻ جي اجازت ڏئي ٿو جيڪا ڪنهن ڪيترن ئي ڪالمن وانگر اخبارن وانگر.
گھڙڻ جي ڪالمن جو فيصلو هر ڪالمن ۾ ڪيترو مواد ڪبو. تبليغ ٿيل ڪالمنٽس هر ڪالمن ۾ مواد جو ساڳيو مقدار رکڻ جي ڪوشش ڪندا آهن جڏهن ته خود صرف مواد کي انهي تائين پهچندي آهي جڏهن ته ڪالمن مڪمل ٿيندي آهي ۽ پوء ايندڙ اڳيان وڃي ٿي.
CSS3 ۾ وڌيڪ خاصيتون جيڪي CSS2 ۾ آرين شامل آهن
CSS3 ۾ ڪيتريون ئي اضافي خاصيتون آهن جيڪي CSS2 ۾ موجود ڪونه هئا، جن ۾ شامل آهن:
- ايس ايس ڊي سان ٺهيل ماڊل ۽ CSS3 گرڊ پوزيشن ماڊل : سي ايس آئيس سان گرڊ ٺاهي.
- CSS3 ٽيڪسٽ ماڊل : آئوٽيڪيشن ٽيڪسٽ ۽ سي ڊي سان پڻ ڊپ سيڊ ٺاهي.
- CSS3 رنگ ماڊل : هاڻي اوپنسي سان.
- خانداني نمونن ۾ تبديلين : هڪ مارچي جي ملڪيت سميت جيڪي ڪم ڪري رهيو آهي IE ٽئڪس.
- CSS3 صارف انٽرفيس ماڊل : توهان کي نئين کرسر ڏيندڙ، ڪارناما جي جوابن، گهربل فيلڊ، ۽ اڃا به ريزائجنگ عناصر .
- ميڊيا سوالون : ميڊيا سوالن کي جڏهن ڪئين طرز جو چادر استعمال ڪيو وڃي ته وضاحت ڪندي توهان کي وڌيڪ لچڪ جي اجازت ڏين ٿا. مثال طور، توهان هڪ شيٽ شيٽ جو وضاحت ڪري سگهي ٿو جيڪو صرف هٿيار ڊوائيسز لاء آهي جنهن سان 20em کان هڪ منظر واپار آهي.
- CSS3 روبي ماڊل : دستاويزن کي بيان ڪرڻ لاء متناسب روبي استعمال ڪرڻ وارن ٻولين جي حمايت مهيا ڪندو آهي.
- CSS3 پيجينڊ ميڊيا ماڊل : پيجاد ميڊيا لاء اڃا به وڌيڪ سپورٽ (پيپر، شفافيت، وغيره).
- پيدا ٿيل مواد : ايل ڊوڙيندڙ وارڊ ۽ پيٽرس، فوٽرنٽس، ۽ ٻين مواد جيڪي پروگرامن طور تي ٺاهيا ويا آهن، خاص طور تي پڊل ميڊيا لاء.
- CSS3 تقرير ماڊل : جندل سي ايس ۾ تبديل.