آموزش CSS – قواعد اولیه نوشتن به زبان CSS

آموزش CSS – قواعد اولیه نوشتن به زبان CSS

آموزش CSS – قواعد اولیه نوشتن به زبان CSSطراحی سایت در کرج شرکت کیان تجارت فاوا

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

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

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

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

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

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

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

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

p

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

p {

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

p {

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

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

p {

color: red ;

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

p {

color:   red;

}

HTML

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

CSS

p {

color:   red;

}

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

 

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

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

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

HTML

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

CSS

p {

color:   red;

font-family:   tahoma;

}

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

 

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

پست مرتبط
یادگیری طراحی سایت

یادگیری طراحی سایت دغدغه بسیاری از جوانان برای پیداکردن شغل دلخواه و مطلوب خود است. افراد زیادی درباره طراحی سایت و درآمد آن آگاهی دارند اما بسیاری از سختی و مهم بودن یادگیری درست آن اطلاع ندارند ازاین رو درامد نه چندان مطلوب این شغل بسیاری را برای یادگیری ان ترغیب می کند و بسیاری […]

ادامه مطلب
JS
شرط در جاوا اسکریپت

بعد از نوشتن اولین دستور برنامه نویسی، بهتر است با مفهوم این دستورات آشنا شویم. همانطور که ملاحظه کردید، میان یک دستور جاوا با اچ تی ام ال، تفاوت است. اچ تی ام ال، یک صفحه ساده و ثابت را به ما می دهد؛ و جاوا، یک صفحه متحرک و هوشمند. با اچ تی ام […]

ادامه مطلب
پارامتر
پارامتر در جاوا اسکریپت

در این بخش به معرفی پارامتر در جاوا اسکریپت می پردازیم: پارامترهای اسکریپت: تگ اسکریپت، پارامترهایی دارد که با آنها آشنا می شویم. به این خط دقت کنید: <script language=”JavaScript” src=””> پارامتر زبان (language) ۱-اولین پارامتری که به چشم می خورد، زبان است. اسکریپت، یک زبان عمومی است که انواع و اقسامی دارد. یکی از […]

ادامه مطلب

دیدگاهتان را بنویسید