یک مثال عملی
پنجشنبه, ۱۹ اسفند ۱۳۹۵، ۱۰:۴۷ ق.ظ
حالا که مطالب اولیه در مورد css و نحوه استفاده از شیوه نامه ها را یاد گرفتیم، بیایید به صورت عملی یک مثال کوچک را بررسی و امتحان کنیم. همانطور که گفته شد کدهای css که به آنها قانون (rule) می گوییم، مجموعه ای از کدهای دستوری متنی هستند که می توانیم آنها را داخل یک فایل اچ تی ام ال یا خارج یک فایل اچ تی ام ال قرار دهیم. برای ایجاد فایل css این مثال از یک ویرایشگر متن بسیار ساده استفاده می کنیم: Notepad. برای بازکردن نرم افزار Notepad در کامپیوتر من که از ویندوز 7 استفاده می کنم باید به این آدرس رفت: Start> All Programs> Accessories> Notepad
حالا که یک فایل جدید Notepad باز شد، کدهای زیر را کپی کنید و داخل فایل Notepad بچسبانید و فایل را با نام cssStyle.css یا هر نام دلخواه دیگر ذخیره کنید. به پسوند .css توجه کنید، این فایل حتما باید با پسوند .css ذخیره شود. کدهای نمونه:
حالا که یک فایل جدید Notepad باز شد، کدهای زیر را کپی کنید و داخل فایل Notepad بچسبانید و فایل را با نام cssStyle.css یا هر نام دلخواه دیگر ذخیره کنید. به پسوند .css توجه کنید، این فایل حتما باید با پسوند .css ذخیره شود. کدهای نمونه:
p {font-family: "B Yekan"; font-size: 12px; text-align: right;}
نگران کدهای بالا نباشید، اگر دقیقا نمی دانید این ویژگی ها و مقدارها دقیقا چه کاری انجام می دهد فقط آنها را کپی کرده و در داخل فایل css خود قرار دهید. در آینده با همه این ویژگی ها آشنا خواهید شد. البته نام هر ویژگی و مقدار آن تا حدود زیادی نحوه عملکرد آن را مشخص می کند.
حالا نوبت به ایجاد فایل اچ تی ام ال می رسد. برای ایجاد فایل اچ تی ام ال نیز از Notepad استفاده می کنیم. یک فایل خالی دیگر ایجاد می کنیم و کدهای زیر را داخل آن قرار می دهیم. اچ تی ام ال نسخه 5 به ما کمک می کند که تگ های اچ تی ام ال فایل ما بسیار ساده و کوتاه باشند:
<!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <link href="cssStyle.css" rel="stylesheet" type="text/css"> <title>فایل نمونه</title> </head> <body> <p>یک متن نمونه</p> </body> </html>حالا فایل بالا را ذخیره می کنیم و یک نام دلخواه با پسوند .html به آن می دهیم. فقط توجه داشته باشید به خاطر اینکه در داخل کدهای بالا از فونت های فارسی استفاده کرده ایم، در نرم افزار Notepad در قسمت Encoding گزینه UTF-8 را انتخاب کنید که فونت های فارسی ما به درستی نمایش داده شوند. توجه داشته باشید که باید فایل cssStyle.css دقیقا در همان پوشه ای قرار داشته باشد که فایل اچ تی ام ال شما قرار دارد تا فایل اچ تی ام ال بتواند فایل شیوه نامه را پیدا کند (به خاطر اینکه آدرس این فایل را در داخل تگ link به این شکل تعریف کرده ایم). خروجی فایل بالا متنی خواهد بود که متن داخل تگ <p> با فونت B Yekan و با اندازه 12 پوینت و به صورت راست چین نمایش داده می شود.
