সিএসএস শর্টহ্যান্ড বৈশিষ্ট্য

কিভাবে CSS শর্টহ্যান্ড বৈশিষ্ট্য ব্যবহার করবেন তা জানুন আপনার স্টাইলশীট তৈরি করতে কম জায়গা নেয়।

CSS শর্টহ্যান্ড বৈশিষ্ট্য আপনাকে কম লিখতে এবং বেশি করতে দেয়।

ধরা যাক আপনি আপনার h1 স্টাইল করতে চান জর্জিয়া এর সাথে উপাদান ফন্ট-ফ্যামিলি, 42 পিক্সেলের একটি ফন্ট-আকার এবং 1.25 এর একটি লাইন-উচ্চতা।

প্রথমে, আসুন নীচের সাধারণ CSS পদ্ধতিটি দেখি:

h1 {
    font-family: "Georgia", "serif";
    font-size: 42px;
    line-height: 1.25;
}

এখন CSS font ব্যবহার করার সাথে তুলনা করুন নিচের সংক্ষিপ্ত হস্ত পদ্ধতি:

h1 {
    font: 42px/1.25 "Georgia", "serif";
}

তিনটি লাইন একের মধ্যে ঘনীভূত!

শর্টহ্যান্ড বৈশিষ্ট্যগুলি একটি লাইনে বেশ কয়েকটি শৈলী ঘোষণাকে একত্রিত করে কাজ করে এবং আপনার কোডকে কম জায়গা নিতে দেয়।

শর্টহ্যান্ড কোড নিয়মিত পদ্ধতির মতো পঠনযোগ্য নাও হতে পারে, যা আরও অভিব্যক্তিপূর্ণ। যাইহোক, কারণ এটি নতুন। একবার আপনি এটি ব্যবহার শুরু করলে এটি দ্রুত দ্বিতীয় প্রকৃতিতে পরিণত হবে।

পয়েন্ট হোম ড্রাইভ করার জন্য আরও একটি শর্টহ্যান্ড CSS সম্পত্তির উদাহরণ দেখি।

এখানে 12px এর উপরের এবং নীচের প্যাডিং সহ একটি বোতাম এবং 20px এর বাম এবং ডান প্যাডিং রয়েছে:

এটি নিম্নলিখিত প্যাডিং বৈশিষ্ট্য ব্যবহার করে:

button {
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
}

এখন শর্টহ্যান্ড padding ব্যবহার করা যাক সম্পত্তি এবং সিএসএস কম ফোলা করা:

button {
    padding: 12px 20px; /* top-bottom, left-right */
}

চারটি লাইন একের মধ্যে ঘনীভূত!

padding উপরের শর্টহ্যান্ডটিকে দ্বি-মূল্য সংক্ষেপে বলা হয়, কারণ ভাল, এটি দুটি মান ব্যবহার করে।

• প্রথম মান 12px padding-top এর সাথে মিলে যায় এবং padding-bottom সম্পত্তি
• 20px মান padding-left এর সাথে মিলে যায় এবং padding-right .

এখানে CSS-এ শর্টহ্যান্ড বৈশিষ্ট্যের একটি সম্পূর্ণ তালিকা রয়েছে:

সব, অ্যানিমেশন, ব্যাকগ্রাউন্ড, সীমানা, বর্ডার-ব্লক-এন্ড, বর্ডার-ব্লক-স্টার্ট, বর্ডার-নিচ, বর্ডার-রং, বর্ডার-ইমেজ, বর্ডার-ইনলাইন-এন্ড, বর্ডার-ইনলাইন-স্টার্ট, বর্ডার-বাম, বর্ডার- ব্যাসার্ধ, সীমানা-ডান, সীমানা-শৈলী, সীমানা-শীর্ষ, সীমানা-প্রস্থ, কলাম-নিয়ম, কলাম, ফ্লেক্স, ফ্লেক্স-ফ্লো, ফন্ট, ফাঁক, গ্রিড, গ্রিড-এরিয়া, গ্রিড-কলাম, গ্রিড-সারি, গ্রিড- টেমপ্লেট, তালিকা-শৈলী, মার্জিন, মুখোশ, অফসেট, আউটলাইন, ওভারফ্লো, প্যাডিং, স্থান-বিষয়বস্তু, স্থান-আইটেম, স্থান-স্ব, স্ক্রোল-মার্জিন, স্ক্রোল-প্যাডিং, পাঠ্য-সজ্জা, পাঠ্য-জোর, রূপান্তর।

মজিলার সম্পূর্ণ CSS শর্টহ্যান্ড ডক্স দেখুন।

শর্টহ্যান্ডের সমস্ত বৈশিষ্ট্যই মুখস্ত করার মতো নয় কারণ সম্ভবত আপনি খুব কমই এগুলি ব্যবহার করবেন। যাইহোক, এই টিউটোরিয়াল font থেকে শর্টহ্যান্ড দুটি উদাহরণ এবং padding , হল সবচেয়ে বেশি ব্যবহৃত কিছু শর্টহ্যান্ড।

নিম্নলিখিত শর্টহ্যান্ড বৈশিষ্ট্যগুলিও দেখার মতো (কারণ আপনি সেগুলি প্রচুর ব্যবহার করবেন) margin , background , border , animation , transition , border-radius .