برای توضیح کامل نحوه عملکرد شیوه نامه های آبشاری در زیر بخوانید. ما برنامه های خود را در بالای صفحه نمایش می دهیم تا پیدا کردن و استفاده از آن آسان باشد. اگر در حال خواندن این مقاله از طریق ایمیل یا فید هستید، روی آن کلیک کنید CSS خود را فشرده کنید.
مگر اینکه واقعاً در حال توسعه سایت ها باشید، ممکن است شیوه نامه های آبشاری را کاملاً درک نکنید (CSS). CSS یک زبان شیوه نامه است که برای توصیف ظاهر و قالب بندی یک سند نوشته شده در آن استفاده می شود HTML or XML. از CSS می توان برای تعیین سبک ها برای عناصر مختلف مانند فونت، رنگ، فاصله و طرح استفاده کرد. CSS به شما این امکان را می دهد که ارائه سند HTML خود را از محتوای آن جدا کنید و حفظ و به روز رسانی سبک بصری وب سایت خود را آسان تر می کند.
ساختار زبان CSS
La انتخابگر عنصر HTML است که می خواهید به آن استایل بدهید و ویژگی و ارزش سبک هایی را که می خواهید برای آن عنصر اعمال کنید تعریف کنید:
selector {
property: value;
}به عنوان مثال، CSS زیر همه را می سازد <h1> عناصر موجود در صفحه دارای رنگ قرمز و اندازه فونت 32 پیکسل هستند:
CSS
h1 {
color: red;
font-size: 32px;
}تولید
عنوان
همچنین می توانید CSS را برای یک شناسه منحصر به فرد در یک عنصر مشخص کنید:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}تولید
یا یک کلاس را در چندین عنصر اعمال کنید:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}تولید
من می خواهم به برجسته یک کلمه در تگ span
می توانید به سه روش CSS را در سند HTML خود قرار دهید:
- CSS درون خطی، با استفاده از
styleویژگی در یک عنصر HTML - CSS داخلی، با استفاده از a
<style>عنصر در<head>سند HTML شما - CSS خارجی، با استفاده از یک فایل .css جداگانه که به سند HTML شما پیوند داده شده است
<link>عنصر در<head>سند HTML شما
CSS پاسخگو
CSS فوق العاده انعطاف پذیر است و می توان از آن برای تنظیم نمایش عناصر بر اساس وضوح صفحه استفاده کرد، بنابراین می توانید همان HTML را داشته باشید اما آن را بسازید. پاسخگو به وضوح دستگاه:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}فشرده سازی CSS
در مثال بالا می بینید که یک نظر، یک درخواست رسانه و چند سبک وجود دارد که از فاصله ها و فیدهای خط برای سازماندهی نمای CSS استفاده می کنند. این یک تمرین عالی است که CSS خود را در سایت خود کوچک کنید یا فشرده کنید تا اندازه فایل ها و متعاقباً زمان درخواست و ارائه استایل خود را کاهش دهید. این مقدار کمی نیست ... شما می توانید بیش از 50٪ صرفه جویی در برخی از نمونه های بالا مشاهده کنید.
بسیاری از پیکربندی‌های سرور ابزارهایی را ارائه می‌دهند که به‌طور خودکار CSS را فشرده می‌کنند و فایل Minified را در حافظه پنهان ذخیره می‌کنند تا مجبور نباشید این کار را به صورت دستی انجام دهید.
SCSS چیست؟
Sassy CSS (SCSS) یک پیش پردازنده CSS است که عملکرد و نحو اضافی را به زبان CSS اضافه می کند. قابلیت‌های CSS را با استفاده از متغیرها، ترکیب‌ها، توابع و سایر ویژگی‌هایی که در CSS استاندارد موجود نیستند، گسترش می‌دهد.
مزایای SCSS
- قابلیت نگهداری بهبودیافته: با استفاده از متغیرها، می‌توانید مقادیر را در یک مکان ذخیره کرده و مجدداً از آنها در سرتاسر شیوه نامه خود استفاده کنید، و حفظ و به‌روزرسانی سبک‌های خود را آسان‌تر می‌کند.
- سازماندهی بهتر: با میکسین‌ها، می‌توانید مجموعه‌هایی از سبک‌ها را گروه‌بندی کرده و مجدداً استفاده کنید، و شیوه نامه خود را منظم‌تر و خواندن آسان‌تر می‌کند.
- افزایش عملکرد: SCSS شامل بسیاری از ویژگی‌هایی است که در CSS استاندارد موجود نیستند، مانند توابع، ساختارهای کنترل (به عنوان مثال if/else)، و عملیات‌های حسابی. این اجازه می دهد تا برای یک ظاهر طراحی پویا و رسا.
- عملکرد بهتر: فایل‌های SCSS در CSS کامپایل می‌شوند، که می‌تواند با کاهش مقدار کدی که باید توسط مرورگر تجزیه شود، عملکرد را بهبود بخشد.
معایب SCSS
- منحنی یادگیری: SCSS دارای یک نحو متفاوت از CSS استاندارد است و قبل از اینکه بتوانید به طور موثر از آن استفاده کنید، باید این نحو جدید را یاد بگیرید.
- پیچیدگی اضافی: اگرچه SCSS می‌تواند صفحه سبک شما را سازماندهی‌تر و نگهداری آسان‌تر کند، اما همچنین می‌تواند پیچیدگی بیشتری را در پایگاه کد شما ایجاد کند، به خصوص اگر با ویژگی‌ها و نحو جدید آشنا نباشید.
- ابزار: برای استفاده از SCSS، به یک کامپایلر برای ترجمه کد SCSS شما به CSS نیاز دارید. این نیاز به نصب و ابزار اضافی دارد که می تواند مانعی برای ورود برخی از توسعه دهندگان باشد.
در مثال زیر، کد SCSS از متغیرها برای ذخیره مقادیر ($primary-color و $font-size) که می تواند در سرتاسر شیوه نامه استفاده مجدد شود. کد CSS که از این کد SCSS تولید می شود معادل است، اما متغیرها را شامل نمی شود. در عوض، مقادیر متغیرها مستقیماً در CSS استفاده می شوند.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}یکی دیگر از ویژگی های SCSS که در این مثال نشان داده شده است، سبک های تودرتو است. در کد SCSS، h1 سبک ها در داخل تودرتو هستند body سبک ها، که در CSS استاندارد امکان پذیر نیست. هنگامی که کد SCSS کامپایل می شود، سبک های تودرتو به سبک های جداگانه در کد CSS گسترش می یابد.
به طور کلی، SCSS مزایای زیادی نسبت به CSS استاندارد ارائه می دهد، اما مهم است که معاوضه ها را در نظر بگیرید و بر اساس نیازها و محدودیت های خود ابزار مناسب را برای پروژه خود انتخاب کنید.
من یک ورودی عالی دیگر در پیدا کردم وبلاگ نویسی حرفه ای در بهینه سازی CSS