آموزش CSS

به کد زیر توجه کنید: p {color:red;}

این کد از سه بخش تشکیل شده:
p در اینجا به اصطلاح "انتخابگر" است، یعنی می خواهیم تغییرات را روی تگ p انجام دهیم.
color در اینجا "خصوصیت" است، یعنی می خواهیم خصوصیت رنگ تگ p را تغییر دهیم.
red "مقدار" است، یعنی می خواهیم رنگ قرمز را برای خصوصیت color انتخاب کنیم.

حالا که آشنایی مقدماتی با شکل یک کد CSS پیدا کردید، باید بدانید که کد های CSS را می شود به 3 روش در برنامه قرار داد؛ مثلا برای اینکه رنگ همه پاراگراف ها را قرمز کنیم، این سه روش به شکل زیر استفاده می شود:

روش اول: درون خود تگ، به این شکل:

<p style="color:red;" >ناز انگشتای بارون تو باغم می کنه</p>

البته توجه داشته باشید که وقتی درون خود تگ که در اینجا تگ <p> است،استایل را می نویسیم، فقط همان تگ تغییر می کند نه همه پاراگراف ها.

روش دوم: در بخش <head> صفحه HTML، به صورت زیر:

<html> <head> <style type="text/css" > p {color:red;} </style> </head> <body> <p>ناز انگشتای بارون تو باغم می کنه</p> </body> </html> روش سوم: درون یک فایل جداگانه با پسوند css در اینجا مثلا style.css که به شکل زیر است: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p style="color:red;" >ناز انگشتای بارون تو باغم می کنه</p> </body> </html>

و درون فایل style.css خصوصیت رنگ را به این شکل می نویسیم:

p { color:red; } به همین سادگی می توانید نوشتن css را شروع کنید.