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

1396/3/28 علیرضا حاتمی نیا 7269

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

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

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

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

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

مثلا در کد زیر که دارای دو تگ <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> به رنگ سبز تغییر خواهد کرد.

استفاده از این روش کمی کد نویسی را پیچیده و حجیم می کند. مثلا فرض کنید شما فقط می خواهید زمینه یکی از تگ های <p> به رنگ سبز تغییر کند و یا  عناصر دیگر صفحه هم به صورت انتخابی رنگ زمینه شان سبز شود. آیا بایستی برای تک تک تگها استایل جداگانه ای نوشت ؟
جواب خیر است . در این زمان CSS راه حل ساده تری را در اختیار شما گذاشته است. شما در این زمان می توانید یک کلاس را تعریف کرده و سپس استایل مورد نظر را به کلاس مربوطه نسبت دهید و بعد از آن هر تگی که می خواهید از آن استایل استفاده کند کافیست نام کلاس را در آن تگ بنویسید. در 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 برای این عنصر استفاده می کنیم. ابتدای نام آی دی یا id با علامت شارپ (#) مشخص می شود. مثلا فرض کنید که تگ <div> در صفحه دارای شماره سریال یک محصول در صفحه است . برای استایل دهی به آن به صورت زیر عمل می کنیم :
 

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

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

آموزش این قسمت از طراحی وب به پایان رسید. برای این قسمت از آموزش یک ویدیو آموزشی تهیه شده که لینک دانلود آن را برای شما قرار می دهم. ممنون از همراهی شما

دانلود PDF قسمت دوازدهم آموزش طراحی وب

دانلود ویدیو

کلمات کلیدی

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت