جهت مشاهده نتایج و تست کدها از ادیتور آنلاین استفاده کنید (کلیک کنید).

CSS نحوه کار با

به طور کلی syntax مربوط به CSS به این صورت است که ابتدا باید selector مدنظرمان را مشخص کنیم و درنهایت مشخصات موردنظر را داخل آکولاد برای آن selector تعیین کنیم.

برای طراحی ظاهر selector میتوانیم تنظیمات مختلف را داخل آکولاد قرار دهیم البته توجه کنید که بین مشخصه های مختلف با قرار دادن سمیکالن (;) میتوانیم این مشخصه ها را از یکدیگر جدا کنیم.

 

CSS نمونه کد

در مثال زیر نمونه ای از کد CSS را نشان داده ایم. همانطور که مشاهده میکنید selectorهای مختلف از جمله body, h1, p به منظور اعمال یکسری تنظیمات انتخاب شده اند. درنهایت برای تک تک این selectorها داخل آکولاد مشخصات دلخواهمان را وارد کردیم. در این مثال رنگ پس زمینه آبی روشن برای صفحه وب در نظر گرفته ایم، همچنین نوشته های با فرمت h1 به صورت وسط چین با رنگ سفید طراحی شدند و درنهایت برای نوشته های فرمت p سایز 20 پیکسل و فونت verdana تعریف کرده ایم.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Scroll to Top