সিএসএসে '@' প্রতীকটির উদ্দেশ্য কী?

148

আমি এই প্রশ্নটি পেরিয়ে গিয়েছি এবং আমি লক্ষ্য করেছি যে ব্যবহারকারী এমন কিছু স্বরলিপি ব্যবহার করছে যা আমি আগে কখনও দেখিনি:

@font-face {
   /* CSS HERE */
}

তাহলে এই @প্রতীকটি কি CSS3 এ নতুন কিছু, বা পুরানো কিছু যা আমি কোনওভাবেই উপেক্ষা করেছি? এটি কী আপনি যেখানে ব্যবহার করেন এমন কোনও আইডি #এবং ক্লাস ব্যবহারের মতো .? গুগল আমাকে এ সম্পর্কিত কোনও ভাল নিবন্ধ দেয়নি। @সিএসএসে প্রতীকের উদ্দেশ্য কী ?

css syntax symbols

— hristo
সূত্র

177

@সিএসএস 1-এর দিন থেকে প্রায় হয়েছে @import, যদিও সাম্প্রতিক @media(সিএসএস 2, সিএসএস 3) এবং @font-face(সিএসএস 3) কনস্ট্রাক্টগুলিতে এটি তর্কযোগ্যভাবে ক্রমশ সাধারণ হয়ে উঠছে । @সিনট্যাক্স নিজেই, যদিও, আমি হিসাবে উল্লেখ করেছে, না নতুন।

এগুলি সমস্ত সিএসএস -এ-বিধি হিসাবে পরিচিত । এগুলি ব্রাউজারের জন্য বিশেষ নির্দেশাবলী, বিধি এবং বৈশিষ্ট্যগুলি ব্যবহার করে ওয়েব ডকুমেন্টগুলিতে (এক্স) এইচটিএমএল / এক্সএমএল উপাদানগুলির স্টাইলিংয়ের সাথে সরাসরি সম্পর্কিত নয়, যদিও তারা কীভাবে শৈলী প্রয়োগ করা হয় তা নিয়ন্ত্রণে গুরুত্বপূর্ণ ভূমিকা পালন করে।

কিছু কোড উদাহরণ:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

@font-faceনিয়মগুলি আপনার ডিজাইনে ব্যবহারের জন্য কাস্টম ফন্টগুলি সংজ্ঞায়িত করে যা সবসময় সমস্ত কম্পিউটারে পাওয়া যায় না, তাই কোনও ব্রাউজার সার্ভার থেকে একটি ফন্ট ডাউনলোড করে সেই কাস্টম ফন্টে পাঠ্য সেট করে যেমন ব্যবহারকারীর কম্পিউটারে ফন্ট থাকে।
@mediaনিয়মাবলী , মিডিয়া ক্যোয়ারীগুলির সাথে একত্রে (পূর্বে কেবলমাত্র মিডিয়া ধরণের ) কোনও পৃষ্ঠা প্রয়োগ করা হয় এবং কোন মিডিয়া পৃষ্ঠায় প্রদর্শিত হচ্ছে তার উপর ভিত্তি করে নিয়ন্ত্রণ করে না my আমার কোড উদাহরণে কেবলমাত্র একটি নথি মুদ্রণের সময় সমস্ত পাঠ্য সেট করা উচিত একটি সাদা (কাগজ) পটভূমি বিরুদ্ধে কালো। আপনি মুদ্রণ মিডিয়া, মোবাইল ডিভাইস এবং আরও ফিল্টার আউট করতে মিডিয়া ক্যোয়ারী এবং সেগুলির জন্য স্টাইল পৃষ্ঠাগুলি ব্যবহার করতে পারেন।

নিয়ম-কানুনের বাছাইকারীদের সাথে কোনও সম্পর্ক নেই। তাদের পরিবর্তিত প্রকৃতির কারণে, বিভিন্ন বিধি-বিধিগুলি বিভিন্ন বিভিন্ন মডিউল জুড়ে বিভিন্ন উপায়ে সংজ্ঞায়িত করা হয়। আরও উদাহরণ অন্তর্ভুক্ত:

(এই তালিকাটি বহুদূর থেকে দূরে)

আপনি এমডিএন -তে আর একটি অ-অবসন্ন তালিকা খুঁজে পেতে পারেন ।

— বোল্টক্লক
সূত্র

2

@ মিডিয়া প্রিন্ট {/ * আপনি কি কোনও ভিডিও বা অডিও ফাইল মুদ্রণের চেষ্টা করছেন ?? * /}

— কুর্ডপৃষ্ঠা

26

@ একটি নিয়ম সংজ্ঞায়িত করতে ব্যবহৃত হয়।

@import
@page
@media
@ ফন্ট সামনি
@charset
@namespace

উপরেরগুলি at-ruleএস বলা হয় ।

— ফ্র্যাঙ্কী
সূত্র

2

"একটি নিয়ম সংজ্ঞায়িত" বলতে কী বোঝ?

— হিস্টো

1

বিধি-বিধানগুলি সিএসএস বিধিগুলির একটি গোছা encapsulate করে এবং নির্দিষ্ট কিছুতে তাদের প্রয়োগ করে। ( htmldog.com/guides/cssadvanced/atrules )

— ফ্র্যাঙ্কি

7

@ মিডিয়ার একটি উদাহরণ যা এটি আরও চিত্রিত করতে কার্যকর হতে পারে:

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

এটি ছোট স্ক্রিনে একটি ছোট চিত্র ব্যবহার করে, পর্দার আকারে শর্তাধীন চিত্রের আকারের পরিবর্তিত হবে। প্রথম ব্লক 1440px প্রস্থ পর্যন্ত পর্দা সম্বোধন করবে; দ্বিতীয়টি 1440px এর চেয়ে বড় স্ক্রিনগুলিকে সম্বোধন করবে।

এটি ট্যাবগুলির মতো জিনিসগুলির সাথে কাজে আসে যা ছোট স্ক্রিনগুলিতে ড্রপ বা স্ক্রলকে ভাসমান; আপনি প্রায়শই ছোট স্ক্রিনে ট্যাব লেবেলের ফন্টের আকারটি একটি বিন্দু আকারের নীচে ফেলে দিতে পারেন এবং সেগুলি সব ফিট করে রাখতে পারেন।

— BobRodes
সূত্র

1

@ একটি বিধি নির্দিষ্টকরণ হিসাবে ব্যবহৃত হয়। মত@font-face

— r3st0r3
সূত্র

1

প্রোবোর্ডস সিএসএস স্টাইল এগুলিকে ভেরিয়েবল হিসাবে ব্যবহার করে।

তাদের সিএসএস পৃষ্ঠাগুলির একটি থেকে একটি ছোট স্নিপ্প্যাট এখানে:

@wrapper_width: 980px;
@link_color: #c06806;
@link_font: 100% @default_forum_text_font_family;
@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }
table { table-layout: fixed; }
a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

দ্রষ্টব্য: নেটিভ নয়, প্রথম মন্তব্য দেখুন।

— Tcll
সূত্র