اصول کدنویسی در CSS

Your browser doesn't support video.
Please download the file: video/mp4

سلام مجدد خدمت شما دوستداران آموزش های برنامه نویسی و آموزش طراحی وب.  من علیرضا حاتمی نیا هستم با قسمت دوازدهم آموزش HTML , css در خدمت شما هستم.
در جلسه قبل با مقدمه و آشنایی با CSS در خدمت شما بودیم. در این قسمت از آموزش با اصول کدنویسی در CSS آشنا می شوید.

کدنویسی یا استایل نویسی در CSS

به یاد دارید که در جلسه یازدهم آموزش طراحی وب با مفاهیم و مقدمات و شیوه نگارش و استایل نویسی CSS آشنا شدیم .
 قبل از آموزش استایل نویسی در CSS شما بایستی حتما با مفاهیمی مانند id و class آشنا شوید. درک مطلب این جلسه بسیار مهم و بسیار سادده است. پس امیدوارم که این جلسه رو بسیار جدی بگیرید.

خب همانطور که در جلسه قبل گفته شد برای استایل دهی به تگ های HTML سه روش استفاده می شود. اولین روش به صورت خطی بود که استایل ها درون تگ نوشته می شد. مانند زیر:

 <div style="background-color:red;">
<p> this is a test text </p>
</div>

نکته: در HTML اگر یک تگ زیر مجموعه ای از تگها باشد، آن تگ ها به عنوان فرزند تگ اصلی به حساب می آیند و تگ اصلی را والد یا پدر می خوانند و فرزندان کلیه خصوصیات پدر را به ارث می برند مگر اینکه دارای خصوصیات تعریف شده ای باشند.
 مثلا در مثال بالا رنگ زمینه تگ <p> هم قرمز می شود. زیرا زیرمجموعه تگ <div> به حساب می آید و خصوصیات آن را به ارث می برد.
اما استایل دهی در روش های درونی و خارجی با روش خطی فرق می کند. برای استایل دهی به تگ ها در این دو روش بایستی نام تگ مربوطه را آورده سپس اقدام به استایل نویسی کنیم.

مثال استایل نویسی css به روش درونی

مثلا در کد زیر که دارای دو تگ <p> می باشد ، برای تغییر رنگ زمینه تگ  <p> به صورت زیر عمل می کنیم:

 <html>
 <head>
  <style>
   P {background-color:green;}
  </style>
 </head>
 <body>
  <p> this is first text </p>
  <p> this is second text </p>
 </body>
</html>

با اجرای کد بالا متوجه خواهید شد که رنگ هر 2 تگ <p> به رنگ سبز تغییر خواهد کرد.

class در css

استفاده از این روش کمی کد نویسی را پیچیده و حجیم می کند. مثلا فرض کنید شما فقط می خواهید زمینه یکی از تگ های <p> به رنگ سبز تغییر کند و یا عناصر دیگر صفحه هم به صورت انتخابی رنگ زمینه شان سبز شود. آیا بایستی برای تک تک تگها استایل جداگانه ای نوشت ؟
جواب خیر است . در این زمان CSS راه حل ساده تری را در اختیار شما گذاشته است. شما در این زمان می توانید یک کلاس یا class را تعریف کرده و سپس استایل مورد نظر را به کلاس مربوطه نسبت دهید و بعد از آن هر تگی که می خواهید از آن استایل استفاده کند کافیست نام کلاس را در آن تگ بنویسید. در CSS ابتدای هر کلاس با نقطه (.) یا دات نشان داده می شود.

مثال استفاده از class در css

در مثال زیر 4 تگ <p> داریم و می خواهیم توسط تعریف class رنگ زمینه تگ <p> اول  و چهارم را به رنگ سبز تغییر دهیم. ابتدا کلاسی را با نام bgcolor-green (نام اختیاری) تعریف می کنیم سپس استایل background-color:green را به آن نسبت می دهیم:
 

 <html>
 <head>
  <style>
   .bgcolor-green {background-color:green;}
  </style>
 </head>
 <body>
  <p class="bgcolor-green"> this is first text </p>
  <p> this is second text </p>
  <p> this is third text </p>
  <p class="bgcolor-green"> this is fourth text </p>
 </body>
</html>

مثال:
فرض کنید کلاسی به نام bgcolor-green داریم که قصد دارید این کلاس فقط و فقط برای تگ های <p>  قابل اجرا باشد.
 

 <html>
 <head>
  <style>
   p.bgcolor-green {background-color:green;}
  </style>
 </head>
 <body>
  <h1 class="bgcolor-green"> this is title </h1>
  <p class="bgcolor-green">
   This id p tag
  </p>
 </body>
</html>

در مثال بالا کلاس bgcolor-green فقط برای تگ <p> عمل می کند.

شناسه یا id در CSS

اما گاهی اوقات شما عنصری منحصر به فرد در صفحه دارید که این عنصر بایستی دارای شناسه یکتا یا منحصر به فرد باشد. در این صورت از id برای این عنصر استفاده می کنیم. ابتدای نام آی دی یا id با علامت شارپ (#) مشخص می شود.

مثال برای id در CSS

مثلا فرض کنید که تگ <div> در صفحه دارای شماره سریال یک محصول در صفحه است. برای استایل دهی به آن به صورت زیر عمل می کنیم :
 

 <html>
 <head>
  <style>
   #serial-No {background-color:red;color:white;}
  </style>
 </head>
 <body>
  <div id="serial-No"> 026398489</div>
 </body>
</html>

نکته : در مثال بالا شما مجاز هستید که فقط یک عنصر در صفحه با شناسه serial-No داشته باشید. تگ های دیگر را نمی تواند با این شناسه مقدار دهی کنید.

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

برای این مطلب تاکنون نظری ارسال نشده است. شما اولین نفر باشید