طراحی وب سایت در کرج
026-34204893
09101013858

آموزش 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  بیشتر آشنا خواهیم شد. هدف اصلی این جلسه آشنایی با قواعد نوشتاری سی‌اس‌اس بود. همراه ما در سایت کیان تجارت فاوا باشید .

پست مرتبط
سئو در کرج
سئو چیست؟ | سئو در کرج

SEO مجموعه ای از ابزارها و بهترین شیوه ها است که به وب سایت شما کمک می کند رتبه برتر در نتایج موتورهای جستجو را بدست آورد و بدین ترتیب ترافیک بیشتری را به سمت سایت شما و به طور بالقوه مشاغل بیشتری هدایت کند.(سئو در کرج) با این حال ، اگرچه SEO یک بار […]

ادامه مطلب
تجربه کاربری ۴ (UX) چیست؟ (قسمت چهارم )

طراحی تجربه کاربر زمینه ای بسیار گسترده ، چند رشته ای و جذاب است. محصولات و خدماتی را که بطور روزانه از آنها استفاده می کنیم شکل می دهد و می تواند منجر به موفقیت یک کسب و کار یا مارک تجاری را شود و یا منجر به شکست آن شود.(تجربه کاربری ۴) ۵-ارزش طراحی […]

ادامه مطلب
تجربه کاربری (UX)
تجربه کاربری (UX) چیست؟ (قسمت دوم )

طراحی تجربه کاربر زمینه ای بسیار گسترده ، چند رشته ای و جذاب است. محصولات و خدماتی را که بطور روزانه از آنها استفاده می کنیم شکل می دهد و می تواند منجر به موفقیت یک کسب و کار یا مارک تجاری را شود و یا منجر به شکست آن شود.(تجربه کاربری) ۳٫ رشته های […]

ادامه مطلب

پاسخی بگذارید