آموزش CSS سی اس اس

آموزش CSS چیست و چه کاربردی در طراحی سایت دارد؟

CSS چگونه کار می کند؟

p { color: blue; background-color: white; }

• انتخابگر: عنصر یا گروهی از عناصر HTML را برای اعمال ظاهر مشخص می کند.
• ویژگی: بخشی از ظاهر، مانند رنگ، اندازه یا فاصله را نام می برد.
• مقدار: نتیجه مورد نظر را برای ویژگی تعیین می کند؛ برای مثال، رنگ آبی یا عرض ۲۰۰ پیکسل.

روش های نوشتن CSS در صفحه وب

CSS را می توان به چند شکل به صفحه افزود. انتخاب روش مناسب به اندازه پروژه، تعداد صفحات و میزان استفاده دوباره از قوانین بستگی دارد. در بیشتر وب سایت های چندصفحه ای، فایل خارجی انتخاب مناسبی است؛ اما برای آزمایش سریع یا تغییر محدود ممکن است روش های دیگر هم کاربرد داشته باشند. اطلاعات بیشتر درباره طریقه نوشتن CSS را نیز ببینید.

۱. CSS درون خطی

در روش درون خطی، ویژگی های CSS مستقیما در صفت style همان عنصر HTML نوشته می شوند. این راه برای آزمایش یک تغییر ساده یا اعمال استثنایی محدود مفید است، اما استفاده زیاد از آن نگهداری صفحه را دشوار می کند. همچنین جدا نبودن ظاهر از ساختار باعث می شود ویرایش یکسان چند عنصر زمان بیشتری ببرد.

<p style="background: blue; color: white;">A new background and font color with inline CSS</p>

برای صفحه آزمایشی یا تغییر یک عنصر خاص، این روش سریع است؛ اما برای طراحی بخش های مختلف یک سایت بهتر است سبک های مشترک را در بخش داخلی یا فایل جداگانه قرار دهید. در این صورت تغییرات کلی متمرکز می شوند و احتمال ناهماهنگی میان اجزای صفحه کاهش می یابد.

۲. CSS داخلی

در روش داخلی، قوانین CSS در تگ style و در بخش head صفحه قرار می گیرند. این شیوه برای صفحه هایی با تعداد محدود یا زمانی که سبک ها فقط در همان صفحه لازم هستند مناسب است. با تعریف انتخابگر برای کلاس ها می توان چند عنصر همان صفحه را با یک قانون کنترل کرد و از تکرار کد جلوگیری نمود.

<head>
<style>
hr { color: silver; }
p { margin-left: 20px; }
body { background-image: url("images/bg.gif"); }
</style>
</head>

یکی از محدودیت های CSS داخلی این است که قوانین آن به طور خودکار در صفحات دیگر در دسترس نیستند. اگر چند صفحه ظاهر مشترک دارند، باید قوانین تکرار شوند یا به فایل خارجی منتقل شوند. بنابراین پیش از انتخاب این روش، به امکان توسعه سایت و نیازهای آینده هم توجه کنید.

۳. CSS خارجی

در شیوه خارجی، قوانین در فایلی با پسوند css ذخیره می شوند و با تگ link به صفحه متصل می گردند. یک فایل می تواند در چندین صفحه استفاده شود؛ بنابراین تغییر یک قانون مشترک، ظاهر همه صفحات متصل را به روز می کند. این روش به تفکیک ساختار و نمایش کمک می کند و برای وب سایت های چندصفحه ای انتخابی کاربردی است.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

ویژگی width و height در CSS

ویژگی های width و height برای تعیین عرض و ارتفاع عناصر استفاده می شوند. مقدار این ویژگی ها می تواند با واحدهایی مانند px، درصد یا واحدهای نسبی بیان شود. پیکسل برای تعیین اندازه ثابت کاربرد دارد، در حالی که درصد و واحدهای نسبی به ساخت رابط های سازگار با اندازه های متفاوت صفحه کمک می کنند.

عرض و ارتفاع مناسب به نوع محتوا و فضای نمایش بستگی دارد. تعیین اندازه ثابت برای همه عناصر همیشه انتخاب خوبی نیست؛ برای نمونه، یک متن بلند ممکن است در صفحه کوچک از کادر بیرون بزند. در طراحی واکنش گرا می توان با ترکیب اندازه های انعطاف پذیر و قواعد media query، نمایش را برای موبایل و دسکتاپ تنظیم کرد.

در صفحه ویژگی width و height در CSS نمونه های بیشتری می بینید. برای مثال، کد زیر ارتفاع یک عنصر را تعیین می کند:

<div style="height:100px">

پس زمینه در CSS با ویژگی background

ویژگی background امکان تعریف رنگ یا تصویر پس زمینه و تنظیم نحوه نمایش آن را فراهم می کند. این ویژگی در زیبایی و خوانایی رابط اثرگذار است؛ با این حال باید رنگ پس زمینه و متن تضاد کافی داشته باشند تا محتوا برای کاربران به راحتی قابل خواندن باشد. راهنمای ویژگی Background جزئیات بیشتری ارائه می دهد.

• background-color: رنگ پس زمینه عنصر را تعیین می کند؛ برای نمونه، رنگ های نام دار یا کدهای رنگی قابل استفاده هستند.
• background-image: یک تصویر را به عنوان پس زمینه قرار می دهد. آدرس تصویر با تابع url مشخص می شود.
• background-repeat: تعیین می کند تصویر پس زمینه تکرار شود یا فقط یک بار نمایش داده شود؛ repeat-x تکرار افقی را مشخص می کند.
• background-attachment: نحوه حرکت تصویر پس زمینه در هنگام پیمایش را کنترل می کند. مقدار scroll حالت معمول و fixed حالت ثابت را نشان می دهد.
• background-position: جای قرارگیری تصویر را در عنصر مشخص می کند؛ مانند top right یا center.

body { background-color: #b0c4de; }

body { background-image: url('paper.gif'); }

body { background-image: url('gradient2.png'); background-repeat: repeat-x; }

body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed; }

body { background-image: url('img_tree.png'); background-repeat: no-repeat; background-position: top right; }

تنظیم فونت و متن با CSS

انتخاب قلم و وزن نوشته

ویژگی font-family برای معرفی قلم متن به مرورگر استفاده می شود. بهتر است چند قلم جایگزین تعریف شوند تا اگر قلم اول روی دستگاه کاربر موجود نبود، گزینه بعدی به کار رود. ویژگی font-style حالت معمولی یا مایل نوشته را مشخص می کند و font-weight برای تنظیم میزان ضخامت متن کاربرد دارد.

با ویژگی Font-Family می توان قلم دلخواه را معرفی کرد. افزودن قلم های جایگزین اهمیت دارد، زیرا ممکن است قلم انتخابی در رایانه یا تلفن همراه کاربر نصب نشده باشد. پشتیبانی از فایل های قلم نیز به مرورگر و قالب فایل بستگی دارد؛ بنابراین نمایش را در مرورگرهای مختلف بررسی کنید.

اندازه متن، ضخامت قلم و فاصله خطوط باید با نوع محتوا هماهنگ باشند. متن بدنه اگر بیش از اندازه کوچک باشد خواندن آن دشوار می شود و اگر اندازه عنوان ها به درستی تفکیک نشود، کاربر ساختار صفحه را به آسانی تشخیص نمی دهد. بهتر است مقیاس تایپوگرافی ثابتی برای عنوان ها، متن معمولی و توضیحات فرعی در نظر بگیرید.

body { font-size: 16px; font-family: Tahoma, Arial, sans-serif; color: #000033; }

رنگ متن و تراز آن

برای تعیین رنگ نوشته از ویژگی color استفاده می شود. رنگ را می توان با نام، کد هگزادسیمال یا مقدار RGB نوشت. هنگام انتخاب رنگ، کنتراست میان متن و پس زمینه را بررسی کنید؛ تضاد مناسب به خوانایی محتوا کمک می کند و استفاده بیش از حد از رنگ های متعدد می تواند تمرکز مخاطب را کاهش دهد.

• کد Hex: مانند #ff0000 که رنگ قرمز را نمایش می دهد.
• مقدار RGB: مانند rgb(255, 0, 0) که رنگ را با ترکیب سه مولفه مشخص می کند.
• نام رنگ: مانند red که نام متنی یک رنگ را به کار می برد.

text-align محل قرارگیری افقی متن را تنظیم می کند. مقادیر رایج آن شامل left، right، center و justify هستند. مقدار justify فاصله میان کلمات را در خطوط تنظیم می کند تا عرض خطوط هماهنگ شود؛ در متن های کوتاه ممکن است فاصله های نامتوازن ایجاد کند، پس بهتر است نتیجه را روی اندازه های مختلف صفحه بررسی کنید.

h1 { text-align: center; }
p.date { text-align: right; }
p.main { text-align: justify; }

ویژگی های text-decoration و text-transform

ویژگی text-decoration برای افزودن یا حذف تزییناتی مانند زیرخط، خط بالای نوشته یا خط روی متن استفاده می شود. یکی از کاربردهای آن حذف زیرخط لینک ها است؛ اما هنگام انجام این کار، نشانه های دیگری مانند رنگ یا حالت hover را در نظر بگیرید تا کاربر همچنان بتواند لینک را از متن عادی تشخیص دهد.

a { text-decoration: none; }
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }

ویژگی text-transform شیوه نمایش بزرگی و کوچکی حروف را در زبان هایی که این تفاوت را دارند کنترل می کند. همچنین text-shadow برای ایجاد سایه روی نوشته به کار می رود. این ویژگی ها باید با هدف مشخص و به اندازه استفاده شوند؛ جلوه های زیاد ممکن است خوانایی را کم کنند یا ظاهر صفحه را شلوغ نشان دهند.

برای آشنایی بیشتر با ویژگی های متن و رنگ، مطلب ویژگی Textcolor در CSS را مطالعه کنید. تعریف سبک روشن و یکپارچه برای متن، به کاربران کمک می کند عنوان، لینک، توضیح و بخش های مهم را سریع تر از یکدیگر تشخیص دهند.

تنظیم لیست ها در CSS

HTML فهرست های مرتب و نامرتب را در اختیار می گذارد و CSS شکل ظاهری نشانگرها و جایگاه آن ها را تنظیم می کند. برای نمونه، می توانید نوع نشانگر را تغییر دهید، آن را داخل یا بیرون محدوده متن قرار دهید یا از تصویر به عنوان نشانه استفاده کنید. این تنظیم ها در ساخت منوها و فهرست های محتوایی نیز کاربرد دارند.

ویژگی list-style-image یک تصویر را برای نشانگر فهرست معرفی می کند. اگر تصویر بارگذاری نشود یا در دسترس نباشد، داشتن یک نشانگر جایگزین باعث می شود ساختار فهرست از بین نرود. list-style-position محل قرارگیری نشانگر را با مقادیر inside یا outside مشخص می کند و list-style-type شکل نشانگر را تغییر می دهد.

ul { list-style: square url("sqpurple.gif"); }

در نمونه های کد، نام ویژگی صحیح برای تعیین شکل نشانگر list-style-type است. هنگام افزودن تصویر به فهرست، اندازه آن را متناسب با متن انتخاب کنید تا ردیف ها نامنظم نشوند. توضیح کامل تر در مطلب لیست ها در CSS ارائه شده است.

خواص Border، Margin و Padding در CSS

خاصیت Border

Border حاشیه پیرامون محتوای یک عنصر را مشخص می کند. می توان برای آن ضخامت، نوع خط و رنگ تعیین کرد. برای نمایش قابل پیش بینی، این سه مورد را به صورت روشن تعریف کنید و در صورت نیاز از border-radius برای گرد کردن گوشه ها کمک بگیرید.

خاصیت Margin

Margin فضای بیرونی عنصر است و فاصله آن را از عناصر مجاور تعیین می کند. می توان مقدار این فاصله را برای بالا، راست، پایین و چپ جداگانه تنظیم کرد. این ناحیه شفاف است و پس زمینه عنصر را به خود نمی گیرد؛ در نتیجه برای ایجاد فاصله میان بخش های مستقل صفحه کاربرد دارد.

خاصیت Padding

Padding فاصله میان محتوای عنصر و حاشیه داخلی آن را مشخص می کند. برخلاف margin، پس زمینه عنصر در فضای padding نیز دیده می شود. به طور خلاصه، margin فاصله بیرونی و padding فاصله داخلی را مدیریت می کند؛ ترکیب درست این دو ویژگی به نظم و خوانایی صفحه کمک می کند.

width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;

واحدهای اندازه گیری در CSS

واحدهای CSS برای بیان اندازه متن، فاصله، عرض و ارتفاع به کار می روند. برخی واحدها مقدار ثابتی دارند و برخی دیگر نسبت خود را با عنصر والد یا اندازه صفحه تعیین می کنند. انتخاب واحد مناسب به هدف طراحی و نیاز به واکنش گرایی بستگی دارد؛ استفاده از واحد نسبی در بخش هایی از صفحه می تواند تغییر اندازه را انعطاف پذیرتر کند.

• px: واحد پیکسل برای اندازه های مشخص و کنترل دقیق کاربرد دارد.
• %: اندازه را نسبت به محدوده یا عنصر والد بیان می کند.
• em و ex: واحدهای نسبی وابسته به اندازه قلم هستند.
• in، cm و mm: واحدهای فیزیکی اینچ، سانتی متر و میلی متر هستند و در صفحه نمایش کمتر از واحدهای انعطاف پذیر استفاده می شوند.
• pt و pc: واحدهای point و pica هستند که بیشتر در کاربردهای چاپی دیده می شوند.

برای متنی که باید در اندازه های متفاوت صفحه خوانا بماند، استفاده حساب شده از واحدهای نسبی و قواعد واکنش گرا مفید است. در مقابل، استفاده از اندازه ثابت در همه بخش ها ممکن است در نمایشگرهای کوچک فضای نامناسبی ایجاد کند. فهرست جزئیات در مطلب واحدهای شمارش در CSS آمده است.

کاربرد CSS در طراحی سایت و عملکرد صفحات

CSS نمایش محتوای HTML را کنترل می کند و به طراح امکان می دهد ظاهر عناصر را یکپارچه سازد. برای مثال، اندازه و رنگ عنوان، فاصله پاراگراف ها، ساختار منو و نحوه نمایش تصویر با قوانین CSS قابل تنظیم است. جدا کردن محتوا از سبک، تغییر ظاهر یک مجموعه از صفحات را ساده تر می کند و روند نگهداری سایت را بهبود می دهد.

مزایای استفاده از CSS

• هماهنگی طراحی: می توان مجموعه ای از قوانین را برای عناصر مشابه تعریف کرد تا صفحات ظاهر منسجم داشته باشند.
• نگهداری ساده تر: در روش فایل خارجی، تغییر یک قانون می تواند به همه صفحات متصل به آن اعمال شود.
• تفکیک محتوا از ظاهر: ساختار HTML از قواعد نمایش جدا می شود و ویرایش هر بخش روشن تر خواهد بود.
• کنترل بهتر نمایش: با media query و قواعد واکنش گرا می توان چیدمان را برای صفحه های مختلف تنظیم کرد.
• مدیریت بارگذاری: مرورگر می تواند فایل های CSS را ذخیره کند و در بازدیدهای بعدی دوباره از آن ها استفاده کند؛ البته نتیجه نهایی به نحوه پیاده سازی و اندازه فایل ها وابسته است.

CSS به تنهایی تضمین کننده سرعت بالای سایت نیست، اما استفاده درست از آن می تواند از تکرار کدهای نمایشی جلوگیری کند و مدیریت منابع را بهبود دهد. برای حفظ عملکرد، فایل ها را منظم نگه دارید، قواعد بلااستفاده را کاهش دهید و تصاویر را متناسب با اندازه نمایش بهینه کنید. سرعت و تجربه کاربری در کنار ساختار مناسب می توانند بر کیفیت کلی وب سایت اثر بگذارند.

اگر هدف شما جذب مخاطب از موتورهای جستجو است، طراحی فنی و محتوایی باید در کنار هم بررسی شوند. CSS به سازمان دهی ظاهر کمک می کند، اما جایگزین تولید محتوای مفید و بهینه سازی فنی نیست. برای آشنایی با این موضوع، راهنمای سئو را مطالعه کنید. همچنین لینک سازی باید با بررسی کیفیت و ارتباط سایت ها انجام شود؛ اطلاعات مربوط به خرید بک لینک را جداگانه و با توجه به دستورالعمل های موتورهای جستجو بررسی کنید.

نکات مهم برای یادگیری و استفاده از CSS

۱. از قواعد ساده شروع کنید

ابتدا انتخابگرها، رنگ، اندازه متن و فاصله ها را یاد بگیرید. سپس سراغ چیدمان، موقعیت دهی و طراحی واکنش گرا بروید. تمرین یک مفهوم در هر مرحله کمک می کند رابطه میان HTML و CSS را بهتر درک کنید.

۲. از کلاس ها برای سبک های قابل استفاده دوباره کمک بگیرید

اگر چند عنصر ظاهر مشترک دارند، به جای تکرار دستورهای درون خطی از یک کلاس استفاده کنید. این کار تغییرهای بعدی را سریع تر می کند و باعث می شود قوانین پروژه ساختار مشخص تری داشته باشند.

۳. نمایش را در اندازه های مختلف بررسی کنید

صفحه را فقط در یک نمایشگر آزمایش نکنید. عرض های متفاوت ممکن است باعث سرریز متن، فشردگی دکمه ها یا نامناسب شدن فاصله ها شوند. ابزار توسعه مرورگرها امکان شبیه سازی اندازه های مختلف را فراهم می کند.

۴. خوانایی کد را حفظ کنید

نام گذاری معنادار برای کلاس ها، گروه بندی قوانین مرتبط و حذف دستورهای تکراری، پیدا کردن و اصلاح خطاها را آسان تر می کند. نظم کد به ویژه وقتی چند نفر روی یک پروژه کار می کنند اهمیت دارد.

۵. نتیجه را در مرورگرهای مختلف بسنجید

پشتیبانی از ویژگی ها ممکن است در نسخه های مختلف مرورگر یکسان نباشد. پس از پیاده سازی، بخش های مهم سایت را در مرورگرهای رایج بررسی کنید و برای ویژگی های حساس، راهکار جایگزین مناسبی در نظر بگیرید.

نقشه راه پیشنهادی برای آموزش CSS

1. مبانی HTML را مرور کنید: شناخت تگ ها و ساختار صفحه، یادگیری انتخابگرهای CSS را ساده می کند.
2. قواعد پایه را تمرین کنید: رنگ، پس زمینه، اندازه، حاشیه و فاصله ها را روی یک صفحه ساده پیاده سازی کنید.
3. انتخابگرها را بیاموزید: انتخابگر عنصر، کلاس و شناسه را بشناسید و کاربرد هر کدام را در جای مناسب به کار ببرید.
4. قوانین را در فایل خارجی بنویسید: این کار به تفکیک بهتر کد و استفاده دوباره از سبک ها کمک می کند.
5. یک صفحه واکنش گرا بسازید: نمایش آن را در اندازه های مختلف آزمایش و مشکلات چیدمان را اصلاح کنید.

برای ادامه یادگیری می توانید موضوع های مرتبط را به ترتیب دنبال کنید:

• CSS چیست: آشنایی با مفهوم شیوه نامه آبشاری.
• طریقه نوشتن CSS: بررسی روش های افزودن CSS به صفحه.
• ویژگی Width و Height در CSS: تنظیم اندازه عناصر.
• ویژگی Background در CSS: تعریف و تنظیم پس زمینه.
• ویژگی FontFamily در CSS: انتخاب قلم مناسب.
• ویژگی Textcolor در CSS: کار با رنگ و ویژگی های متن.
• لیست ها در CSS: تغییر شکل و جایگاه نشانگرها.
• خواص Border، Margin و Padding در CSS: مدیریت حاشیه و فاصله.
• ویژگی Overflow در CSS: کنترل محتوای بیرون زده از محدوده.
• ویژگی Position در CSS: تنظیم موقعیت عناصر.
• ویژگی Opacity در CSS: تنظیم میزان شفافیت.
• واحدهای شمارش در CSS: شناخت واحدهای اندازه گیری.
• انتخابگرها در CSS: هدف گیری عناصر برای اعمال سبک.

جمع بندی آموزش CSS

CSS ابزار اصلی کنترل ظاهر صفحات وب است و در کنار HTML به ساخت تجربه ای منظم، خوانا و سازگار با اندازه های مختلف صفحه کمک می کند. با شناخت روش های درون خطی، داخلی و خارجی، ویژگی های پس زمینه و متن، واحدهای اندازه گیری و مدل جعبه، می توانید ساختار ظاهری صفحات را بهتر مدیریت کنید. برای یادگیری موثر، از قواعد ساده شروع کنید، تمرین های کوچک بسازید و نتیجه را در مرورگرها و اندازه های مختلف بسنجید. تسلط بر آموزش CSS پایه مهمی برای طراحی سایت استاندارد و توسعه رابط های کاربری کاربردی است.

سوالات متداول CSS