جستجو
برای جستجو متن مورد نظر وارد کنید و Enter بزنید برای بستن Esc بزنید.
CSS (Cascading Style Sheets) به شما اجازه می دهد تا صفحات وب با ظاهری عالی ایجاد کنید، اما چگونه در زیر هود کار می کند؟ این مقاله با یک مثال نحوی ساده توضیح می‌دهد که CSS چیست و همچنین برخی از اصطلاحات کلیدی در مورد زبان را پوشش می‌دهد.
پیش نیازها: سواد اولیه کامپیوتر، نرم افزار پایه نصب شده، دانش اولیه کار با فایل ها و اصول اولیه HTML (مطالعه مقدماتی بر HTML.)
در ماژول مقدمه ای بر HTML، توضیح دادیم که HTML چیست و چگونه برای علامت گذاری اسناد استفاده می شود. این اسناد در یک مرورگر وب قابل خواندن خواهند بود. سرفصل ها بزرگتر از متن معمولی به نظر می رسند، پاراگراف ها روی یک خط جدید شکسته می شوند و بین آنها فاصله وجود دارد. پیوندها رنگی و زیر خط کشیده شده اند تا از بقیه متن متمایز شوند. آنچه می‌بینید سبک‌های پیش‌فرض مرورگر است – سبک‌های بسیار ابتدایی – که مرورگر روی HTML اعمال می‌کند تا مطمئن شود که صفحه اساساً قابل خواندن است، حتی اگر استایل واضحی توسط نویسنده صفحه مشخص نشده باشد.
با این حال، اگر همه وب‌سایت‌ها به این شکل باشند، وب مکانی خسته کننده خواهد بود. با استفاده از CSS، می‌توانید دقیقاً نحوه ظاهر عناصر HTML در مرورگر را کنترل کنید و نشانه‌گذاری خود را با استفاده از هر طرحی که دوست دارید ارائه دهید.
همانطور که قبلا ذکر کردیم، CSS زبانی است برای تعیین نحوه ارائه اسناد به کاربران – نحوه استایل دهی، چیدمان و غیره. یک سند معمولاً یک فایل متنی است که با استفاده از یک زبان نشانه گذاری ساختار یافته است – HTML رایج ترین زبان نشانه گذاری است، اما ممکن است با زبان های نشانه گذاری دیگری مانند SVG یا XML نیز برخورد کنید. ارائه یک سند به کاربر به معنای تبدیل آن به فرمی قابل استفاده برای مخاطبان است. مرورگرهایی مانند فایرفاکس، کروم یا اج برای ارائه اسناد به صورت بصری، به عنوان مثال، روی صفحه نمایش کامپیوتر، پروژکتور یا چاپگر طراحی شده اند.
نکته: مرورگر گاهی اوقات یک عامل کاربر نامیده می شود، که اساساً به معنای یک برنامه رایانه ای است که یک شخص را در یک سیستم رایانه ای نشان می دهد. مرورگرها نوع اصلی عامل های کاربری هستند که هنگام صحبت در مورد CSS به آنها فکر می کنیم، با این حال، آنها تنها نیستند. عوامل کاربری دیگری نیز در دسترس هستند، مانند آنهایی که اسناد HTML و CSS را برای چاپ به PDF تبدیل می کنند.
CSS را می توان برای استایل بسیار ابتدایی متن سند – به عنوان مثال، برای تغییر رنگ و اندازه سرفصل ها و پیوندها استفاده کرد. می توان از آن برای ایجاد یک طرح بندی استفاده کرد – به عنوان مثال، تبدیل یک ستون متن به یک طرح با یک منطقه محتوای اصلی و یک نوار کناری برای اطلاعات مرتبط. حتی می توان از آن برای افکت هایی مانند انیمیشن استفاده کرد. برای نمونه های خاص به پیوندهای این پاراگراف نگاهی بیندازید.
CSS یک زبان مبتنی بر قانون است – شما قوانین را با مشخص کردن گروه‌هایی از سبک‌ها تعریف می‌کنید که باید برای عناصر خاص یا گروه‌هایی از عناصر در صفحه وب خود اعمال شوند. برای مثال، می توانید تصمیم بگیرید که عنوان اصلی در صفحه شما به صورت متن قرمز بزرگ نشان داده شود. کد زیر یک قانون CSS بسیار ساده را نشان می دهد که می تواند به استایلی که در بالا توضیح داده شد دست یابد:
h1 {
color: red;
font-size: 5em;
}در مثال بالا، قانون CSS با یک انتخابگر باز می شود. این عنصر HTML را انتخاب می کند که می خواهیم به آن استایل دهیم. در این مورد، ما سرفصل های سطح یک (h1) را یک ظاهر طراحی می کنیم. سپس مجموعه ای از بریس های مجعد { } داریم. در داخل مهاربندها یک یا چند اعلان وجود دارد که به شکل جفت دارایی و ارزش است. خاصیت (رنگ در مثال بالا) را قبل از دو نقطه و مقدار خاصیت را بعد از دو نقطه (در این مثال قرمز) مشخص می کنیم. این مثال شامل دو اعلان است، یکی برای رنگ و دیگری برای اندازه فونت. هر جفت یک ویژگی از عنصر(هایی) را که انتخاب می کنیم مشخص می کند (در این مورد h1)، سپس مقداری را که می خواهیم به آن خاصیت بدهیم مشخص می کند.
خواص CSS بسته به اینکه کدام ویژگی مشخص شده است مقادیر مجاز متفاوتی دارند. در مثال ما، ویژگی رنگ را داریم که می تواند مقادیر رنگ مختلفی را بگیرد. ما همچنین دارای ویژگی اندازه فونت هستیم. این ویژگی می تواند واحدهای اندازه های مختلف را به عنوان مقدار در نظر بگیرد. یک شیوه نامه CSS حاوی بسیاری از قوانین است که یکی پس از دیگری نوشته می شوند.
متوجه خواهید شد که برخی از ارزش ها را به سرعت یاد می گیرید، در حالی که برخی دیگر را باید جستجو کنید. صفحات خصوصیات فردی در MDN به شما یک راه سریع برای جستجوی ویژگی ها و مقادیر آنها در زمانی که فراموش می کنید یا می خواهید بدانید چه چیز دیگری می توانید به عنوان مقدار استفاده کنید، می دهد.
می‌توانید پیوندهایی به تمام صفحات دارایی CSS (همراه با سایر ویژگی‌های CSS) فهرست شده در مرجع MDN CSS پیدا کنید. از طرف دیگر، هر زمان که نیاز به یافتن اطلاعات بیشتر در مورد یک ویژگی CSS داشتید، باید به جستجوی “mdn css-feature-name” در موتور جستجوی مورد علاقه خود عادت کنید. مثلاً «mdn color» و «mdn font-size» را جستجو کنید!
از آنجایی که چیزهای زیادی وجود دارد که می توانید با استفاده از CSS به آنها استایل دهید، زبان به ماژول ها تقسیم می شود. با کاوش در MDN، ارجاع به این ماژول ها را مشاهده خواهید کرد. بسیاری از صفحات مستندات حول یک ماژول خاص سازماندهی شده اند. برای مثال، می‌توانید به مرجع MDN به ماژول Backgrounds and Borders نگاهی بیندازید تا بدانید هدف آن چیست و ویژگی‌ها و ویژگی‌هایی که دارد. در آن ماژول، پیوندی به مشخصات نیز خواهید دید که این فناوری را تعریف می کند (به بخش زیر نیز مراجعه کنید).
در این مرحله، لازم نیست زیاد نگران نحوه ساختار CSS باشید. با این حال، اگر به عنوان مثال، آگاه باشید که احتمالاً یک ویژگی خاص در میان چیزهای مشابه دیگر یافت می شود و بنابراین احتمالاً در همان مشخصات است، می تواند یافتن اطلاعات را آسان تر کند.
برای یک مثال خاص، اجازه دهید به ماژول Backgrounds and Borders برگردیم – ممکن است فکر کنید که منطقی است که ویژگی‌های رنگ پس‌زمینه و رنگ حاشیه در این ماژول تعریف شوند. و حق با شماست
تمام فناوری های استاندارد وب (HTML، CSS، جاوا اسکریپت و غیره) در اسناد غول پیکری به نام مشخصات (یا «مشخصات») تعریف شده اند، که توسط سازمان های استاندارد (مانند W3C، WHATWG، ECMA، یا Khronos) منتشر شده و به طور دقیق تعریف می شوند. این فناوری ها قرار است چگونه رفتار کنند. CSS تفاوتی ندارد – توسط گروهی در W3C به نام CSS Working Group توسعه داده شده است. این گروه از نمایندگان فروشندگان مرورگرها و سایر شرکت هایی که به CSS علاقه دارند تشکیل شده است. افراد دیگری نیز وجود دارند که به عنوان کارشناسان دعوت شده شناخته می شوند که به عنوان صداهای مستقل عمل می کنند. آنها به یک سازمان عضو مرتبط نیستند. ویژگی‌های جدید CSS توسط گروه کاری CSS توسعه یا مشخص می‌شوند – گاهی به این دلیل که یک مرورگر خاص علاقه‌مند به داشتن برخی قابلیت‌ها است، گاهی به این دلیل که طراحان و توسعه‌دهندگان وب درخواست یک ویژگی را دارند و گاهی اوقات به این دلیل که خود گروه کاری یک نیاز را شناسایی کرده است. CSS به طور مداوم در حال توسعه است و ویژگی های جدیدی در دسترس است. با این حال، یک چیز کلیدی در مورد CSS این است که همه سخت کار می کنند تا هرگز چیزها را طوری تغییر ندهند که وب سایت های قدیمی را خراب کند. یک وب سایت ساخته شده در سال 2000، با استفاده از CSS محدود موجود در آن زمان، هنوز باید در یک مرورگر قابل استفاده باشد.
به عنوان یک تازه وارد به CSS، احتمالاً مشخصات CSS را بسیار زیاد خواهید یافت – آنها برای مهندسین در نظر گرفته شده است تا از آنها برای اجرای پشتیبانی از ویژگی ها در عوامل کاربر استفاده کنند، نه برای توسعه دهندگان وب برای خواندن برای درک CSS. بسیاری از توسعه دهندگان باتجربه ترجیح می دهند به مستندات MDN یا سایر آموزش ها مراجعه کنند. با این وجود، دانستن وجود این مشخصات و درک رابطه بین CSS که استفاده می‌کنید، پشتیبانی مرورگر (به زیر مراجعه کنید) و مشخصات، ارزش دارد.
