CSS یکی از مهمترین ابزارها در طراحی و زیباسازی ظاهر یک وب سایت می باشد. ما اصول و نحوه استفاده از CSS را به شما آموزش خواهیم داد
CSS می تواند سبک زیبایی HTML را تغییر دهد
CSS زبانی است که برای استایل دادن به یک صفحه وب استفاده می کنیم.
CSS چیست؟
- CSS مخفف عبارت Cascading Style Sheets است
- CSS نحوه نمایش عناصر HTML را بر روی صفحه، کاغذ یا رسانه های دیگر توضیح می دهد
- CSS مقدار زیادی از کار را ذخیره می کند. می تواند طرح بندی چندین صفحه وب را به طور همزمان کنترل کند
- شیوه های خارجی در فایل های CSS ذخیره می شوند
نمایش CSS - یک صفحه HTML - چند سبک!
در اینجا یک صفحه HTML را نشان خواهیم داد که با چهار شیوه نامه مختلف نمایش داده شده است. برای مشاهده سبک های مختلف، روی پیوندهای "Stylesheet 1"، "Stylesheet 2"، "Stylesheet 3"، "Stylesheet 4" در زیر کلیک کنید:
چرا از CSS استفاده کنیم؟
CSS برای تعریف سبک‌ها برای صفحات وب شما، از جمله طراحی، طرح‌بندی و تغییرات نمایش برای دستگاه‌ها و اندازه‌های مختلف صفحه استفاده می‌شود.
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}CSS یک مشکل بزرگ را حل کرد
HTML هرگز در نظر گرفته نشده بود که حاوی برچسب هایی برای قالب بندی یک صفحه وب باشد!
HTML برای توصیف محتوای یک صفحه وب ایجاد شده است، مانند:
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است.</p>
هنگامی که برچسب هایی مانند <font> و ویژگی های رنگی به مشخصات HTML 3.2 اضافه شد، یک کابوس برای توسعه دهندگان وب ایجاد شد. توسعه وب سایت های بزرگ، که در آن فونت ها و اطلاعات رنگی به هر صفحه اضافه می شد، به یک فرآیند طولانی و پرهزینه تبدیل شد.
برای حل این مشکل، کنسرسیوم وب جهانی (W3C) CSS را ایجاد کرد.
CSS قالب بندی سبک را از صفحه HTML حذف کرد!
CSS مقدار زیادی از کار را ذخیره می کند!
تعاریف سبک معمولاً در فایل‌های css خارجی ذخیره می‌شوند.
با یک فایل شیوه نامه خارجی، می توانید ظاهر کل یک وب سایت را با تغییر تنها یک فایل تغییر دهید!
CSS Syntax
یک قانون CSS از یک انتخابگر و یک بلوک اعلان تشکیل شده است.
انتخابگر به عنصر HTML که می خواهید به آن استایل بدهید اشاره می کند.
بلوک اعلان شامل یک یا چند اعلان است که با نقطه ویرگول از هم جدا شده اند.
هر اعلان شامل یک نام ویژگی CSS و یک مقدار است که با یک دونقطه از هم جدا شده اند.
چند اعلان CSS با نقطه ویرگول از هم جدا می شوند و بلوک های اعلان با بریس های فرفری احاطه شده اند.
p {
color: red;
text-align: center;
}مثال توضیح داده شده
pیک انتخابگر در CSS است (به عنصر HTML که می‌خواهید استایل دهید اشاره می‌کند: <p>).colorیک ویژگی است وredمقدار ویژگی استtext-alignیک ویژگی است وcenterمقدار ویژگی است