بلاگ تخصصی دات نت نیوک ایران

وبلاگ تخصصی دات نت نیوک فارسی

بلاگ تخصصی دات نت نیوک ایران

وبلاگ تخصصی دات نت نیوک فارسی

این بلاگ با هدف رشد و فراگیر شدن دات نت نیوک در بین فارسی زبانان و مرجع کاملی برای شروع دات نت نیوک ، یادگیری، دانلود ماژول و اسکین، ماژول نویسی و فارسی سازی و اخبار روزانه آن خواهد بود

نویسندگان

زنگ CSS: جلسه دوم - قواعد اولیه نوشتن به زبان CSS

پنجشنبه, ۲۴ دی ۱۳۹۴، ۱۱:۰۲ ب.ظ

قانون کلی نوشتن سی اس اس:

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

نوشتن در سی اس اس سه مرحله کلی دارد: 

مرحله‌ی اول: با روش‌هایی که در جلسه بعدی مفصل به آنها خواهیم پرداخت، المان های اچ تی ام ال خود را نام‌گذاری کنید.

مرحله‌ی دوم: المان‌هایی که در اچ تی ام ال نام گذاری کرده‌اید را در فایل سی‌اس‌اس خود صدا بزنید و آن‌ها را مخاطب قرار دهید. 

مرحله‌ی پایانی: حالا تنها کافیست تا تغییراتی که می‌خواهید را در جلوی نام‌ المان‌ها بنویسید تا این تغییرات بر روی آن المان‌ها اعمال شود.

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

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

p

مرحله دوم: در جلوی المان انتخاب شده یک علامت } باز می‌کنیم:

p {

قدم سوم : بعد از کروشه، آن چیزی که قصد داریم در این المان تغییر کند را می‌نویسیم. مثلا اگر قصد تغییر در رنگ المان را داریم، کلمه Color به معنای رنگ را نوشته و جلوی آن :‌ می‌گذاریم.

p {

color: رنگ دلخواه شما!

قدم چهارم: در جلوی دو نقطه، آن تغییری که قصد داریم بر روی صفحه اعمال شود را می‌گوییم: مثلا در رابطه با تغییر رنگ، نام یا کد شش رقمی رنگ مورد نظر را می‌نویسیم. مثلا در این مثال روبروی عبارت color: کلمه قرمز red نوشته می‌شود. بدین ترتیب ما با نوشتن color: red رنگ تمامی متن‌های داخل اچ تی ام ال را به قرمز تغییر داده‌ایم.  دقت کنید که بعد از تمام شدن هر استایل، علامت قرار دهید. در غیر این صورت استایل‌های شما خوانده نمی‌شود. 

p {

color: red ;

در نهایت:‌ کروشه را می‌بندیم و تمام! حالا تمامی تگ‌های پاراگراف صفحه ما رنگ قرمز خواهند داشت.

p {

color:   red;

}

HTML

<p>متنی که قرار است با رنگ قرمز نوشته شود</p>

CSS

p {

color:   red;

}

متنی که قرار است با رنگ قرمز نوشته شود

 

نکته بسیار مهم: حتما دقت کنید که در انتهای هر دستور که داخل کروشه {} قرار می‌گیرد، یک علامت قرار دهید. بدین ترتیب سی‌اس‌اس می‌فهمد که کار شما با این المان تمام شده و دستور بعدی(یا همان خط بعدی) را اجرا می‌کند. در غیر این صورت اعمال تغییرات شما از جایی که دیگر علامت وجود ندارد، قطع می‌شود.

مثال دیگری را با هم مرور کنیم.  فرض کنید بعد از قرمز کردن رنگ متن‌ها، در قدم بعدی می‌خواهیم علاوه بر رنگ متن را نیز با فونت tahoma به نمایش در بیاوریم.

برای اینکار باید یک خط دیگر به داخل {} که باز کرده‌ایم اضافه کنیم. این خط در واقع دستور تغییر فونت را نیز اعمال می‌کند. بنابراین نتیجه‌ی نهایی به صورت زیر می‌شود.

HTML

<p>متنی که قرار است با رنگ قرمز و  فونت تاهما نمایش داده شود</p>

CSS

p {

color:   red;

font-family:   tahoma;

}

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

 

در جلسه‌ی بعدی با نحوه‌ی انتخاب و نام‌گذاری المان‌های اچ‌تی‌ام‌ال بیشتر آشنا خواهیم شد. هدف اصلی این جلسه آشنایی با قواعد نوشتاری سی‌اس‌اس بود. پس تا جلسه‌ی بعدی منتظر راه‌حل‌های جدید بمانید.

موافقین ۰ مخالفین ۰ ۹۴/۱۰/۲۴

نظرات (۱)

سلام میخوام وقتی مینویسم مهدی عباسی این وبلاگ گزینه اول بیاد ممکنه ؟

https://mahdiabbasi.blog.ir مهدی عباسی

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی