زنگ CSS: جلسه دوم - قواعد اولیه نوشتن به زبان CSS
اگر زبان HTML را به خوبی به یاد داشته باشید، حتما پی برده‌اید که کار طراحی وب و کدنویسی با اچ تی ام ال از آب خوردن هم چند درجه آسان‌تر است. حالا رفته رفته پی خواهید برد که استفاده از سی اس اس نیز، چندان کار سختی نیست.
نوشتن در سی اس اس سه مرحله کلی دارد:
مرحله‌ی اول: با روش‌هایی که در جلسه بعدی مفصل به آنها خواهیم پرداخت، المان های اچ تی ام ال خود را نام‌گذاری کنید.
مرحله‌ی دوم: المان‌هایی که در اچ تی ام ال نام گذاری کرده‌اید را در فایل سی‌اس‌اس خود صدا بزنید و آنها را مخاطب قرار دهید.
مرحله‌ی پایانی: حالا تنها کافیست تا تغییراتی که می‌خواهید را در جلوی نام المان‌ها بنویسید تا این تغییرات بر روی آن المان‌ها اعمال شود.
خب اگر آماده‌اید این سه مرحله ساده را با یک مثال کوچک شروع کنیم. برای مثال فرض کنید قصد داریم تمامی پاراگراف‌های موجود در صفحه را به رنگ قرمز در بیاوریم.
مرحله اول: برای اینکار در قدم اول باید المان اچ‌تی‌ام‌الی که قصد داریم آن را تغییر دهیم، صدا بزنیم یا اصطلاحا انتخاب کنیم. خوشبختانه اچ تی ام ال و سی اس اس از حروف یکسانی برای شناسایی المان‌ها استفاده می‌کنند. پس چون ما در اینجا ما قصد تغییر در متن‌ها را داریم و میدانیم که متن‌ها با تگ P در اچ تی ام ال نوشته می‌شوند، پس کلمه p را به عنوان نام این المان می‌نویسیم.
p
مرحله دوم: در جلوی المان انتخاب شده یک علامت } باز می‌کنیم:
p {
قدم سوم : بعد از کروشه، آن چیزی که قصد داریم در این المان تغییر کند را می‌نویسیم. مثلا اگر قصد تغییر در رنگ المان را داریم، کلمه Color به معنای رنگ را نوشته و جلوی آن : می‌گذاریم.
p {
color: رنگ دلخواه شما!
قدم چهارم: در جلوی دو نقطه، آن تغییری که قصد داریم بر روی صفحه اعمال شود را می‌گوییم: مثلا در رابطه با تغییر رنگ، نام یا کد شش رقمی رنگ مورد نظر را می‌نویسیم. مثلا در این مثال روبروی عبارت color: کلمه قرمز red نوشته می‌شود. بدین ترتیب ما با نوشتن color: red رنگ تمامی متن‌های داخل اچ تی ام ال را به قرمز تغییر داده‌ایم. دقت کنید که بعد از تمام شدن هر استایل، علامت ; قرار دهید. در غیر این صورت استایل‌های شما خوانده نمی‌شود.
p {
color: red ;
در نهایت: کروشه را می‌بندیم و تمام! حالا تمامی تگ‌های پاراگراف صفحه ما رنگ قرمز خواهند داشت.
p {
color: red;
}
HTML
متنی که قرار است با رنگ قرمز نوشته شود
CSS
p {
color: red;
}
متنی که قرار است با رنگ قرمز نوشته شود
نکته بسیار مهم: حتما دقت کنید که در انتهای هر دستور که داخل کروشه {} قرار می‌گیرد، یک علامت ; قرار دهید. بدین ترتیب سی‌اس‌اس می‌فهمد که کار شما با این المان تمام شده و دستور بعدی(یا همان خط بعدی) را اجرا می‌کند. در غیر این صورت اعمال تغییرات شما از جایی که دیگر علامت ; وجود ندارد، قطع می‌شود.
مثال دیگری را با هم مرور کنیم. فرض کنید بعد از قرمز کردن رنگ متن‌ها، در قدم بعدی می‌خواهیم علاوه بر رنگ متن را نیز با فونت tahoma به نمایش در بیاوریم.
برای اینکار باید یک خط دیگر به داخل {} که باز کرده‌ایم اضافه کنیم. این خط در واقع دستور تغییر فونت را نیز اعمال می‌کند. بنابراین نتیجه‌ی نهایی به صورت زیر می‌شود.
HTML
متنی که قرار است با رنگ قرمز و فونت تاهما نمایش داده شود
CSS
p {
color: red;
font-family: tahoma;
}
متنی که قرار است با رنگ قرمز و فونت تاهما نمایش داده شود
در جلسه‌ی بعدی با نحوه‌ی انتخاب و نام‌گذاری المان‌های اچ‌تی‌ام‌ال بیشتر آشنا خواهیم شد. هدف اصلی این جلسه آشنایی با قواعد نوشتاری سی‌اس‌اس بود. پس تا جلسه‌ی بعدی منتظر راه‌حل‌های جدید بمانید.
نظرات