بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن در CSS
7
ساخت حاشیه (border) در CSS
4
عکس ها در CSS
2
ساخت انیمیشن در CSS
6
لینک ها (links) در CSS
5
رنگ ها در CSS
1
مباحث عمومی در CSS
10
×

دانلود فروشگاه اندروید کلیدستان

533

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

مشخصه class برای کلاس بندی بخش های مورد نظرمان برای اجرای کد CSS

قبلا گفتیم که مثلا با مشخصه color می توانیم فونت های درون بخش body صفحه html را به رنگ خاصی درآوریم ، اما ممکن است که مثلا بخش body صفحه html شامل تعداد زیادی پاراگراف باشد و ما تنها بخواهیم دو یا سه تا از آنها با رنگ فونت متفاوتی نمایش داده شوند . واضح است که اگر به صورت معمولی ، مشخصه color را روی بخش body صفحه html اعمال کنیم ، تمامی پاراگراف های درون آن تغییر رنگ خواهند داشت و این مد نظر ما نیست .

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

مثال

صفحه html ای با 5 پاراگراف ساخته و به سه تای آن پاراگراف ها ، نام کلاس color_change را اختصاص می دهیم و سپس در کدهای CSS ، رنگ تمامی پاراگراف های دارای نام کلاس color_change را با مشخصه color به رنگ قرمز تغییر می دهیم :


<html>
 
<head>
<style type="text/css">
.change_color {
               color:red;
              }      
</style>
</head>
 
<body>
 
<p class="change_color">paragraph number 1 .</p>
<p>paragraph number 2 .</p>
<p class="change_color">paragraph number 3 .</p>
<p>paragraph number 4 .</p>
<p class="change_color">paragraph number 5 .</p>
 
</body>
</html>

نکته مهم این است که حتما باید قبل از ذکر نام کلاس (class) ، علامت نقطه (.) نوشته شود .

نتیجه :

Result

ترکیب تگ div و مشخصه class برای کلاس بندی راحت تر در CSS :

ترکیب استفاده از تگ div و مشخصه class می تواند حجم کدنویسی را در هنگام کلاس بندی تگ های مختلف کاهش دهد . تگ div برای بخش بندی کدهای html به کار می رود (تبدیل کد html به بخش های مختلف) و بسیار سودمند است . برای درک این موضوع ، به مثال زیر توجه کنید :

مثال

یک صفحه html می سازیم که در آن 5 پاراگراف وجود دارد و می خواهیم که 3 پاراگراف اول با رنگ قرمز نمایش داده شوند . اگر تنها بخواهیم ، مشخصه class را برای تگ های p بنویسیم باید سه بار این کار را انجام دهیم . اما راه حل ساده تری هم وجود دارد و آن این است که سه پاراگراف اول را درون یک تگ div قرار بدهیم و سپس مشخصه class را برای تگ div تعیین کنیم . سپس زمانی که مشخصه color را برای تگ div به رنگ قرمز تغییر می دهیم باعث می شود پاراگراف های درون آن به رنگ قرمز نمایش داده شوند :


<html>
 
<head>
<style type="text/css">
.change_color {
               color:red;
              }      
</style>
</head>
 
<body>
 
   <div class="change_color">
<p>paragraph number 1 .</p>
<p>paragraph number 2 .</p>
<p>paragraph number 3 .</p>
   </div>
   
<p>paragraph number 4 .</p>
<p>paragraph number 5 .</p>
 
</body>
</html>

نتیجه :

Result

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

خوانده شد
مبحث بالا، مفید بود و سایت کلیدستان را دوست داشتم :
محبوب کردن این مبحث در گوگل :
اون چیزی که میخواستم نبود :
سوال دارم :
ارسال نظر :
نظرات 0 0 0

*** نظر بدهید

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای مشخصه های CSS

راهنمای مشخصه های CSS بر اساس حرف اول مشخصه :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

CSS Tutorials
مجموعه ویدئوهای آموزشی CSS - مجموعه CSS Tutorials
35
بستن منو
۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Sass & SCSS Tutorial for Beginners
مجموعه ویدئوهای آموزشی Sass و SCSS برای مبتدیان - مجموعه Sass & SCSS Tutorial for Beginners - از thenewboston.com
7
بستن منو
۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

Less CSS Tutorials for Beginners
مجموعه ویدئوهای آموزشی Less CSS برای مبتدیان - مجموعه Less CSS Tutorials for Beginners - از thenewboston.com
8
بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
5
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
10
مباحث عمومی، در HTML
10

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)