بستن دسته بندی
۸۰
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
نمایش دسته بندی ها (۸۰ آموزش)
مباحث اولیه برای آشنایی با CSS
مباحث اولیه برای آشنایی با CSS
7
نمایش متن، در CSS
نمایش متن، در CSS
16
ساخت حاشیه (border)، در CSS
ساخت حاشیه (border)، در CSS
4
عکس ها، در CSS
عکس ها، در CSS
7
انتخابگرها (Selector) (انتخاب عنصرهای صفحه)، در CSS
انتخابگرها (Selector) (انتخاب عنصرهای صفحه)، در CSS
9
بچه های (Child) عنصرها، در CSS
بچه های (Child) عنصرها، در CSS
0
اندازه عنصرها، در CSS
اندازه عنصرها، در CSS
1
موقعیت عنصرها، در CSS
موقعیت عنصرها، در CSS
3
تغییر شکل عنصرها، در CSS
تغییر شکل عنصرها، در CSS
4
عدم نمایش عنصرها، در CSS
عدم نمایش عنصرها، در CSS
2
ساخت انیمیشن، در CSS
ساخت انیمیشن، در CSS
6
لینک ها (Link)، در CSS
لینک ها (Link)، در CSS
6
رنگ ها (Color) و تعیین رنگ، در CSS
رنگ ها (Color) و تعیین رنگ، در CSS
2
فهرست ها (لیست ها - List)، در CSS
فهرست ها (لیست ها - List)، در CSS
2
جدول ها (Table)، در CSS
جدول ها (Table)، در CSS
2
فرم ها (Form)، در CSS
فرم ها (Form)، در CSS
2
دکمه ها (Button)، در CSS
دکمه ها (Button)، در CSS
2
صفحه نمایش (Screen)، در CSS
صفحه نمایش (Screen)، در CSS
0
مباحث عمومی، در CSS
مباحث عمومی، در CSS
5

نویسنده علیرضا گلمکانی
شماره کلید 533
گزینه ها

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

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

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

مثال

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

طرح رنگ

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

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

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

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

مثال

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

طرح رنگ

نتیجه :

خطا - صفحه را دوباره بارگذاری کنید

کپی برداری توسط سایر وب سایت ها، ممنوع بوده و پیگرد قانونی دارد. (بیشتر بدانید)

گزینه ها
به اشتراک گذاری (Share) در شبکه های اجتماعی
نظرات 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

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

مباحث اولیه
مباحث اولیه برای آشنایی با LESS
مباحث اولیه برای آشنایی با LESS
4
بستن دسته بندی
۱۰۴
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
مباحث اولیه برای آشنایی با HTML
24
نمایش متن (Text)، در HTML
نمایش متن (Text)، در HTML
16
نمایش عکس (Image)، در HTML
نمایش عکس (Image)، در HTML
6
لینک ها (Link)، در HTML
لینک ها (Link)، در HTML
2
فهرست ها (لیست ها - List)، در HTML
فهرست ها (لیست ها - List)، در HTML
1
جدول ها (Table)، در HTML
جدول ها (Table)، در HTML
7
فرم ها (Form)، در HTML
فرم ها (Form)، در HTML
21
کلاس های (Class) عنصرها، در HTML
کلاس های (Class) عنصرها، در HTML
1
id عنصرها، در HTML
id عنصرها، در HTML
0
چیدمان عنصرها (Element) در کنار هم، در HTML
چیدمان عنصرها (Element) در کنار هم، در HTML
2
تعیین مشخصات کلی صفحه (Page)، در HTML
تعیین مشخصات کلی صفحه (Page)، در HTML
7
ساختار کلی و بخش بندی صفحه (Page)، در HTML
ساختار کلی و بخش بندی صفحه (Page)، در HTML
2
نمایش یا عدم نمایش عنصرها (Element)، در HTML
نمایش یا عدم نمایش عنصرها (Element)، در HTML
1
عناصر گرافیکی، در HTML
عناصر گرافیکی، در HTML
1
رنگ ها (Color) و تعیین رنگ، در HTML
رنگ ها (Color) و تعیین رنگ، در HTML
1
دکمه ها (Button)، در HTML
دکمه ها (Button)، در HTML
2
پخش صدا (Audio)، در HTML
پخش صدا (Audio)، در HTML
1
کار با کیبورد (Keyboard)، در HTML
کار با کیبورد (Keyboard)، در HTML
2
اطلاعات و پردازش اطلاعات، در HTML
اطلاعات و پردازش اطلاعات، در HTML
1
مباحث عمومی، در HTML
مباحث عمومی، در HTML
6
بستن دسته بندی
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با W3.CSS
مباحث اولیه برای آشنایی با W3.CSS
11
متن ها (Text)، در W3.CSS
متن ها (Text)، در W3.CSS
1
رنگ ها (Color)، در W3.CSS
رنگ ها (Color)، در W3.CSS
6
عکس ها (Image)، در W3.CSS
عکس ها (Image)، در W3.CSS
9
خطوط حاشیه (border)، در W3.CSS
خطوط حاشیه (border)، در W3.CSS
3
حاشیه (Padding و Margin)، در W3.CSS
حاشیه (Padding و Margin)، در W3.CSS
1
کارت ها (Card)، در W3.CSS
کارت ها (Card)، در W3.CSS
1
فونت ها (Font)، در W3.CSS
فونت ها (Font)، در W3.CSS
1
فهرست ها (لیست - List)، در W3.CSS
فهرست ها (لیست - List)، در W3.CSS
4
راهنماها (Tooltip)، در W3.CSS
راهنماها (Tooltip)، در W3.CSS
0
انیمیشن ها (Animation)، در W3.CSS
انیمیشن ها (Animation)، در W3.CSS
5
بستن دسته بندی
۳۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
دسترسی سریع به دسته کلیدها :

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

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