آموزش css – قسمت دوم(مقداردهی)
سلام
با جلسه دوم از آموزش css در خدمتتون هستیم، در جلسه قبلی یک مقدمه در رابطه با css گفتیم(برای مشاهده قسمت اول کلیک کنید)، در این قسمت می پردازیم به نحوه مقدارهی و مفهوم کلاس و آیدی، پس در ادامه با بپرسم همراه باشید.
آموزش:
برای مقدار دادن به یک تگ در css می توانیم از سه روش استفاده کنیم، که این سه روش عبارتند از:
- درون خطی
- صدا زدن تگ
- صدا زدن آیدی(id) و کلاس(Class)
درون خطی
مثال زیر را در نظر بگیرید:
|
۱ |
<p style="font-size: 12px; color: blue;"> beporsam.ir </p> |
در مثال بالا در داخل تگ p به تگ p استایل دادیم، برای استایل درون خطی می توانیم در تگ باز عبارت
|
۱ |
style= "" |
را باز و کدهای خودون رو بنویسم.
صدا زدن تگ
در این روش نام تگ یا نام کلاس یا آیدی که برای تگ تعریف کردیم را صدا میزنیم و کدهای Css را براش می نویسیم، تگ های از پیش تعریف شده مثل p,ul,تگهای h1 تا h6 و … را می توانیم بدون دادن کلاس یا آیدی مقدار دهی کنیم.
فرض کنید میخواهیم به تگ p استایل دهیم، برای این کار در قسمت کدهای css فقط کافیست به صورت زیر عمل کنیم:
|
۱ ۲ ۳ ۴ ۵ |
p{ text-align:right; font-size:۱۲px; color:khaki; } |
و تگ های از پیش تعریف شده(ثابت) را نیز می توانیم این چنین مقداردهی کنیم.
صدا زدن آیدی یا کلاس
در مطالب فوق چندین بار عبارات”آیدی(id)” و “کلاس(class)” را نام بردیم؛ حالا مفهوم id و class چیست و چه کارایی دارد؟
برای هر تگ در HTML می توانیم یک نام اختصاص دهیم که از این نام میتوانیم برای استایل دادن به آن تگ استفاده کنیم، حال این نام میتواند منحصر به فرد باشد(id) یا اینکه عمومی(class) باشد.
حال فرض کنید به تگ div زیر یک Id با نام div1 دادیم:
|
۱ |
<div id="div1"> beporsam.ir </div> |
حال میخواهیم در قسمت Css این آیدی را صدا بزنیم و کدهای css را براش بنویسیم، برای صدا زدن ID باید قبل از نام ID یک # قرار داده و سپس نام ID را نوشته، به صورت زیر:
|
۱ ۲ ۳ ۴ ۵ ۶ |
<style type="text/css"> #div1{ font-size:۱۸px; color:red; } </style> |
ID منحصر به فرد است، در هر صفحه HTML آیدی که برای تگ انتخاب می کنیم نباید تکراری باشد.
حالا یک تگ div دیگر تعریف و اینبار برای این تگ به جای تعریف ID، یک Class تعریف میکنیم:
|
۱ |
<div class="div2"> beporsam@gmail.com </div> |
سپس برای استایل دادن به این تگ، باید قبل از نام تگ . قرار بدیم، به صورت زیر:
|
۱ ۲ ۳ ۴ |
<style type="text/css"> .div2{ } </style> |
Class می تواند منحصر به فرد نباشد! از یک کلاس می توانیم برای بیش از یک تگ استفاده کنیم.
به دلیل طولانی نشدن این قسمت را به پایان می رسانیم، همراه ما باشید تا قسمت های بعدی …
هرگونه سوالی یا مشکلی در رابطه با مطلب فوق داشتید؛ در سایت بپرسید، پاسخگوی سوالات شما هستیم، برای پرسیدن سوال کلیک کنید.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید