سبک بصری و طرح بندی وبسایت توسط CSS یا Cascading Style Sheets است. اینها اسنادی هستند که نشانه گذاری HTML صفحه وب را تشکیل می دهند، و مرورگرهای وب را با دستورالعمل هایی در مورد نحوه نمایش صفحه هایی که از این نشانه گذاری هستند، ارائه می دهد. CSS یک طرح صفحه، و همچنین رنگ، تصاویر پس زمینه، تایپوگرافی و خیلی بیشتر را مدیریت می کند.
اگر به یک فایل CSS نگاه کنید، خواهید دید که مانند هر نشانه گذاری یا زبان برنامه نویسی، این فایل ها دارای نحو خاصی برای آنها هستند. هر صفحه سبک از تعدادی از قوانین CSS ساخته شده است. این قوانین، زمانی که به طور کامل گرفته می شوند، این است که سایت چه سبک است.
قسمت هایی از قانون CSS
یک قانون CSS متشکل از دو قسمت متمایز - انتخاب و اعلام. انتخاب کننده تعیین می کند که چه چیزی در یک صفحه طراحی شده است و اعلان چگونگی طراحی آن است. مثلا:
پ {
رنگ: # 000؛
}
این یک قانون CSS است. قسمت انتخاب کننده "p" است، که انتخابگر عنصر برای "پاراگرافها" است. بنابراین، ALL پاراگراف ها را در یک سایت انتخاب کنید و آنها را با این سبک (به جز مواردی که توسط سبک های خاص تر در جای دیگری در سند CSS شما هدف قرار می گیرند) انتخاب کنید.
بخشی از قانون که "color: # 000؛" می گوید چیزی است که به عنوان اعلامیه شناخته می شود. این اعلامیه از دو قطعه ساخته شده است: اموال و ارزش.
اموال قطعه "رنگ" این اعلامیه است. این تعیین می کند که کدام جنبه انتخابگر بصری تغییر خواهد کرد.
ارزش این است که چه ویژگی CSS انتخاب شده به آن تغییر خواهد کرد. در مثال ما، ما از مقدار hex مقدار # 000 استفاده می کنیم که اصطلاحا CSS برای "سیاه" است.
بنابراین، با استفاده از این قانون CSS، صفحه ما پاراگرافهای نمایش داده شده در فونت رنگ سیاه را داشته باشد.
CSS Property Basics
وقتی خواص CSS را بنویسید، نمیتوانید آنها را به راحتی بسازید. برای نمونه، "رنگ" یک ویژگی CSS واقعی است، بنابراین شما می توانید از آن استفاده کنید. این ویژگی چیزی است که رنگ متن یک عنصر را تعیین می کند. اگر شما سعی کردید از "متن رنگی" یا "font-color" به عنوان خواص CSS استفاده کنید، این امر شکست خواهد خورد، زیرا آنها جزئی از زبان CSS نیستند.
مثال دیگر ملک "تصویر پسزمینه" است. این ویژگی یک تصویر را می توان برای پس زمینه استفاده کرد، مانند این:
.logo {
background-image: url (/images/company-logo.png)؛
}
اگر سعی کردید از «تصویر پسزمینه» یا «تصویر پسزمینه» به عنوان یک ملک استفاده کنید، آنها شکست خواهند خورد، زیرا بار دیگر اینها خواص CSS نیستند.
برخی از خواص CSS
تعدادی از ویژگی های CSS وجود دارد که می توانید از آن برای ساخت سایت استفاده کنید. برخی از نمونه ها عبارتند از:
- مرز (شامل border-style، border-color و border-width)
- چسباندن (از جمله padding-top، padding-right، padding-bottom، and padding-left)
- حاشیه (حاوی حاشیه بالا، حاشیه سمت راست، حاشیه پایین و حاشیه سمت چپ)
- فونت خانواده
- اندازه فونت
- رنگ پس زمینه
- عرض
- ارتفاع
این خواص CSS بسیار عالی هستند که برای نمونه به عنوان مثال استفاده می شوند، زیرا همه آنها بسیار ساده هستند و حتی اگر شما CSS را نمی دانید، احتمالا می توانید حدس بزنید که چه چیزی بر اساس نام آنها انجام می شود.
دیگر خواص CSS وجود دارد که شما نیز با آن مواجه خواهید شد و ممکن است به نحوی واضح نیست که چگونه براساس نام آنها کار می کنند:
- شناور
- پاک کردن
- سرریز
- تبدیل متن
- Z-index
همانطور که در طراحی وب سایت عمیق تر می گویید، همه این خصوصیات و موارد دیگر (و استفاده از آن) را تجربه خواهید کرد!
خواص ارزش های لازم دارند
هر بار که از اموال استفاده می کنید، باید ارزش آن را بدهید - و خصوصیات خاصی می تواند مقادیر خاصی را بپذیرد.
در اولین نمونه ما از ویژگی "color"، ما باید از یک مقدار رنگ استفاده کنیم. این می تواند یک مقدار هگز ، ارزش RGBA، یا حتی کلمات کلیدی رنگ باشد. هر یک از این مقادیر کار می کند، با این حال، اگر از کلمه "غم انگیز" با استفاده از این ویژگی استفاده کردید، هیچ کاری انجام نمی دهد، زیرا به عنوان توصیفی به عنوان آن کلمه ممکن است، این ارزش در CSS قابل قبول نیست.
مثال دوم ما از "background-image" نیاز به یک مسیر تصویر برای استخراج یک تصویر واقعی از فایل های سایت شما می باشد. این ارزش / نحو مورد نیاز است.
تمام خواص CSS ارزش هایی دارند که انتظار می رود. مثلا:
- رنگ مرزی انتظار مقدار رنگی است
- اندازه مرزی انتظار می رود که مقدار اندازه، مانند پیکسل یا درصد باشد
- سبک های مرزی انتظار می رود یکی از سبک های محرمانه مورد استفاده برای این ویژگی، مانند "solid"
اگر از طریق فهرست خواص CSS بروید، متوجه خواهید شد که هر کدام از آنها دارای مقادیر خاصی هستند که برای ایجاد سبک هایی که برای آنها طراحی شده است استفاده می شود.
ویرایش توسط جرمی جیرارد