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

چیست؟ CSS

قبل از هر چیز باید بدانیم که CSS چیست؟ با چه هدفی ایجاد شده است؟ و درنهایت با نحوه کار با CSS آشنا خواهیم شد.

  • CSS مخفف Cascading Style Sheets است و درواقع یک نوع زبان به حساب می آید که وظیفه اش طراحی ظاهر HTML و یا XML است.
  • درواقع CSS نحوه نمایش کدهای HTML به مخاطب و ظاهر صفحه وبسایت را مشخص میکند.
  • تنظیماتی که در CSS شکل میگیرند به دو صورت هستند:
    1. به صورت فایل داخلی: در این حالت یک قالب CSS داخل فایل HTML مشخصات ظاهری صفحه وبسایت را مشخص میکند.
    2. به صورت فایل خارجی: در این حالت یک صفحه CSS ساخته میشود و داخل آن یکسری تنظیمات ظاهری تعریف میشود، سپس در هر صفحه وبسایت داخل فایل HTML آن صفحه باید فایل CSS موردنظر فراخوانی شود.
  • از جمله مزایای CSS میتوانیم به همین موضوع اشاره کنیم که با استفاده از یک فایل CSS میتوانیم ظاهر چندین صفحه را تنظیم کنیم.
  • درواقع تگهای HTML برای تنظیم مشخصات ظاهری وبسایت مناسب نیستند و تنها هدف HTML تولید محتوا با استفاده از تگهای p و h است.

CSS نمونه کد

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

body {
  background-color: lightblue;
}

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

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

نتیجه کد

 

A Blue Heading

A paragraph.

 
Scroll to Top