مباحث عمومی در CSS

[P O U R I A]

فهرست مطالب:

1. تعیین رنگ پس زمینه یک عنصر با مشخصه background-color در CSS
2. تعیین ارتفاع و پهنای عناصر با مشخصه های height و width در CSS
3. margin ، padding و border در CSS
4. مخفی کردن یک عنصر (element) با مشخصه display در CSS (عدم نمایش عنصر)
5. عدم نمایش اسکرول بار (scrollbar)، با کدهای CSS
6. ساخت منوی شناور (Floating Menu)، با کدهای CSS
7. تعیین دو نوع نمایش برای صفحه، یکی هنگام نمایش صفحه در کامپیوتر و دیگری برای پرینت (print) صفحه، با کدهای CSS
8. تغییر شکل موس، با استفاده از مشخصه cursor در CSS
9. تعیین نحوه چیدمان عناصر صفحه بر روی یکدیگر، با مشخصه z-index در CSS
10. نیمه شفاف نمایش دادن یک عنصر، در CSS

منبع: kelidestan

 

[P O U R I A]

تعیین رنگ پس زمینه یک عنصر با مشخصه background-color در CSS

تعیین رنگ پس زمینه یک عنصر با مشخصه background-color در CSS

با استفاده از مشخصه background-color می توانیم رنگ پس زمینه یک عنصر را تعیین کنیم . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#CC00CC]#paragraph[/COLOR] [COLOR=#00AA00]{[/COLOR]
               [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0F0[/COLOR][COLOR=#00AA00];[/COLOR]
           [COLOR=#00AA00]}[/COLOR]      
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<p id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"paragraph"[/COLOR][COLOR=#00AA00]>[/COLOR]paragraph number [COLOR=#CC66CC]1[/COLOR] .</p[COLOR=#00AA00]>[/COLOR] 
<p[COLOR=#00AA00]>[/COLOR]paragraph number [COLOR=#CC66CC]2[/COLOR] .</p[COLOR=#00AA00]>[/COLOR] 
<p[COLOR=#00AA00]>[/COLOR]paragraph number [COLOR=#CC66CC]3[/COLOR] .</p[COLOR=#00AA00]>[/COLOR] 

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

ابتدا برای یکی از پاراگراف ها ، یک id به نام paragraph تعیین کرده ایم . سپس درون تگ style به این id ارجاع داده ایم و با استفاده از مشخصه background-color ، تعیین کرده ایم که رنگ پس زمینه پاراگراف دارای این id ، به صورت سبز رنگ باشد .

[h=4]نتیجه :[/h]

 

[P O U R I A]

تعیین ارتفاع و پهنای عناصر با مشخصه های height و width در CSS

تعیین ارتفاع و پهنای عناصر با مشخصه های height و width در CSS

در CSS ، مشخصه height برای تعیین ارتفاع و مشخصه width برای تعیین پهنای (عرض) یک عنصر به کار می رود . به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#CC00CC]#paragraph_1[/COLOR] [COLOR=#00AA00]{[/COLOR]
                 [B]height[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]80px[/COLOR][COLOR=#00AA00];[/COLOR]
                 [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]80px[/COLOR][COLOR=#00AA00];[/COLOR]
                 [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0F0[/COLOR][COLOR=#00AA00];[/COLOR]
             [COLOR=#00AA00]}[/COLOR]   
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<p id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"paragraph_1"[/COLOR][COLOR=#00AA00]>[/COLOR]paragraph number [COLOR=#CC66CC]1[/COLOR] .</p[COLOR=#00AA00]>[/COLOR] 
<p[COLOR=#00AA00]>[/COLOR]paragraph number [COLOR=#CC66CC]2[/COLOR] .</p[COLOR=#00AA00]>[/COLOR] 

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

پاراگراف اول را با id با نام paragraph_1 مشخص کرده ایم و سپس درون تگ style ، به آن id ارجاع داده ایم . توسط مشخصه height ، تعیین کرده ایم که ارتفاع عنصر برابر 80px باشد و توسط مشخصه width ، تعیین کرده ایم که پهنای (عرض) عنصر برابر 80px در نظر گرفته شود . همچنین با مشخصه background-color ، تعیین کرده ایم که پس زمینه پاراگراف مورد نظرمان به صورت سبز رنگ نمایش داده شود تا به آسانی بتوانیم اندازه پاراگراف را ببینیم .

[h=4]نتیجه :[/h]

 

[P O U R I A]

margin ، padding و border در CSS

margin ، padding و border در CSS

برای هر عنصر (یا هر ناحیه) در CSS ، چندین بخش به صورت شکل زیر تعریف می شود :


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

برای اینکه به صورت عملی با این بخش ها آشنا شوید و یاد بگیرید که چگونه اندازه هر یک از این بخش ها را تعیین کنید ، به مثال زیر توجه کنید :

مثال :

ابتدا کدهای زیر رو می نویسیم تا 9 ناحیه با اندازه های یکسان ، اما با رنگ های پس زمینه متفاوت ، داشته باشیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#6666FF].class_1[/COLOR] [COLOR=#00AA00]{[/COLOR]
             [B]float[/B][COLOR=#00AA00]:[/COLOR][B]left[/B][COLOR=#00AA00];[/COLOR]
                 [B]height[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]130px[/COLOR][COLOR=#00AA00];[/COLOR]
                 [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]130px[/COLOR][COLOR=#00AA00];[/COLOR]
             [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_1[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0F9[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]     
[COLOR=#CC00CC]#id_2[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#9F3[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_3[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#F66[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_4[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0FF[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_5[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#93C[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR] 
[COLOR=#CC00CC]#id_6[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#F00[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_7[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#CF0[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_8[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#F60[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_9[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0F9[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]                                      
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_1"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_2"[/COLOR][COLOR=#00AA00]>[/COLOR]text.v/div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_3"[/COLOR][COLOR=#00AA00]>[/COLOR]text.v/div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_4"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_5"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_6"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_7"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_8"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_9"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

نتیجه :


اکنون کدها را تغییر می دهیم تا ناحیه ای که در وسط قرار گرفته است ، دارای مقداری margin و padding باشد :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#6666FF].class_1[/COLOR] [COLOR=#00AA00]{[/COLOR]
             [B]float[/B][COLOR=#00AA00]:[/COLOR][B]left[/B][COLOR=#00AA00];[/COLOR]
                 [B]height[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]130px[/COLOR][COLOR=#00AA00];[/COLOR]
                 [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]130px[/COLOR][COLOR=#00AA00];[/COLOR]
             [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_1[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0F9[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]     
[COLOR=#CC00CC]#id_2[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#9F3[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_3[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#F66[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_4[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0FF[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_5[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#93C[/COLOR][COLOR=#00AA00];[/COLOR]
          [B]padding[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]10px[/COLOR][COLOR=#00AA00];[/COLOR]
          [B]margin[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]10px[/COLOR][COLOR=#00AA00];[/COLOR]
          [B]height[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]90px[/COLOR][COLOR=#00AA00];[/COLOR]
          [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]90px[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR] 
[COLOR=#CC00CC]#id_6[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#F00[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_7[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#CF0[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_8[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#F60[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]  
[COLOR=#CC00CC]#id_9[/COLOR] [COLOR=#00AA00]{[/COLOR]
          [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0F9[/COLOR][COLOR=#00AA00];[/COLOR]
          [COLOR=#00AA00]}[/COLOR]                                      
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_1"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_2"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_3"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_4"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_5"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_6"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_7"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_8"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]
<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR] id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"id_9"[/COLOR][COLOR=#00AA00]>[/COLOR]text.</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

دقت شود که اندازه این ناحیه را کوچکتر کرده ایم تا نظم قرارگیری تمامی ناحیه ها در کنار هم ، خراب نشود . این نکته بسیار مهم است و شما همیشه باید اندازه های ناحیه ، مقدار margin ، مقدار padding و ضخامت border را در نظر بگیرید تا طراحی سایت به هم نخورد . علاوه بر این ، من به شما توصیه می کنم که حتما طراحی خود را در مرورگرهای مختلف تست کنید زیرا بعضی مرورگرها (مخصوصا internet explorer) ممکن است نتیجه متفاوتی را به شما نمایش بدهند .

مشخصه padding را برابر 10px تعیین کرده ایم که باعث می شود که مقدار padding برای هر چهار جهت (بالا ، پایین ، چپ و راست) ، برابر 10px در نظر گرفته شود . برای margin نیز به همین صورت است و چون جهتی را مشخص نکرده ایم بنابراین مقدار تعیین شده برای margin ، برای هر چهار جهت می باشد . مشخصه های دیگری نیز وجود دارند که توسط آنها می توان padding یا margin را تنها برای یک جهت انتخاب نمود . مثلا برای جهت راست ، دو مشخصه padding-right و margin-right وجود دارد .

نتیجه :





ناحیه ای که سفید رنگ است ، مربوط به میزان margin تعیین شده می باشد . علاوه بر این ، اگر دقت کنید ، کلمه text نسبت به حالت قبل ، از حاشیه های پس زمینه رنگی ، فاصله گرفته است که به دلیل مشخصه padding می باشد .

 

[P O U R I A]

مخفی کردن یک عنصر (element) با مشخصه display در CSS (عدم نمایش عنصر)

مخفی کردن یک عنصر (element) با مشخصه display در CSS (عدم نمایش عنصر)

فرض کنید قصد داشته باشیم که بخشی از سایت (یک عنصر) را از دید کاربران مخفی کنیم. برای این منظور، می توانیم مشخصه زیر را برای آن عنصر به کار ببریم :
display:none;

به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
[COLOR=#6666FF].class_1[/COLOR] [COLOR=#00AA00]{[/COLOR]
             [B]display[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]none[/COLOR][COLOR=#00AA00];[/COLOR]
         [COLOR=#00AA00]}[/COLOR]                                       
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]1[/COLOR]</p[COLOR=#00AA00]>[/COLOR]
<p class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR][COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]2[/COLOR]</p[COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]3[/COLOR]</p[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

عدم نمایش اسکرول بار (scrollbar)، با کدهای CSS

عدم نمایش اسکرول بار (scrollbar)، با کدهای CSS

چنانچه بخواهیم اسکرول بار (scrollbar) در صفحه HTML نمایش داده نشود، باید برای تگ body صفحه HTML ، مشخصه CSS زیر را قرار بدهیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]overflow[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]hidden[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]

یعنی به صورت زیر :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body style[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"overflow:hidden;"[/COLOR][COLOR=#00AA00]>[/COLOR]
</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

برای اینکه اسکرول بار (scrollbar)، تنها در جهت y نمایش داده نشود، مشخصه CSS زیر را برای تگ body صفحه HTML می نویسیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]overflow-y[COLOR=#00AA00]:[/COLOR][COLOR=#993333]hidden[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]

برای اینکه اسکرول بار (scrollbar)، تنها در جهت x نمایش داده نشود، مشخصه CSS زیر را برای تگ body صفحه HTML می نویسیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]overflow-x[COLOR=#00AA00]:[/COLOR][COLOR=#993333]hidden[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]

 

[P O U R I A]

ساخت منوی شناور (Floating Menu)، با کدهای CSS

ساخت منوی شناور (Floating Menu)، با کدهای CSS

منوی شناور (Floating Menu)، به منویی گفته می شود که اگر کاربر، به بالا یا پایین صفحه برود (با اسکرول بار)، محل آن منو در صفحه، ثابت باشد.

برای آشنایی با نحوه کدنویسی برای ساخت یک منوی شناور (Floating Menu)، به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div[COLOR=#6666FF].floating-menu[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]position[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]fixed[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]right[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]10px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]top[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]10px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]background[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#FF6[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]border[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]1px[/COLOR] [COLOR=#993333]solid[/COLOR] [COLOR=#CC00CC]#000[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]width[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]150px[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]z-index[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC66CC]100[/COLOR][COLOR=#00AA00];[/COLOR]
        [COLOR=#00AA00]}[/COLOR]
div[COLOR=#6666FF].floating-menu[/COLOR] a[COLOR=#00AA00],[/COLOR] div[COLOR=#6666FF].floating-menu[/COLOR] h3 [COLOR=#00AA00]{[/COLOR]
        [B]display[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]block[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]margin[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC66CC]0[/COLOR] [COLOR=#993333]0.5em[/COLOR][COLOR=#00AA00];[/COLOR]
        [COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"floating-menu"[/COLOR][COLOR=#00AA00]>[/COLOR]
<h3[COLOR=#00AA00]>[/COLOR]منوی شناور [COLOR=#00AA00]([/COLOR]Floating Menu[COLOR=#00AA00])[/COLOR]</h3[COLOR=#00AA00]>[/COLOR]
<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"#"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک اول</a[COLOR=#00AA00]>[/COLOR]
<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"#"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک دوم</a[COLOR=#00AA00]>[/COLOR]
<a href[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"#"[/COLOR][COLOR=#00AA00]>[/COLOR]لینک سوم</a[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]1[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]2[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]3[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]4[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]5[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]6[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR][COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]7[/COLOR].</p[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

مهمترین بخش کدها، مشخصه CSS زیر می باشد که باعث می شود محل منو، ثابت باقی بماند :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]position[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]fixed[/COLOR][/FONT]
[/FONT][/COLOR]

همچنین، کدهای زیر، موقعیت نسبی منو، نسبت به کناره های پنجره نمایش دهنده صفحه، را تعیین کرده است :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]right[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]10px[/COLOR][COLOR=#00AA00];[/COLOR]
[B]top[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]10px[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]
مشاهده پیوست Untitled.jpg
در کادر بالا، چنانچه اسکرول بار را به بالا یا پایین ببرید، محل منو تغییری نمی کند و ثابت خواهد بود.

 

[P O U R I A]

تعیین دو نوع نمایش برای صفحه، یکی هنگام نمایش صفحه در کامپیوتر و دیگری برای پرینت (print) صفحه، با کدهای CSS

تعیین دو نوع نمایش برای صفحه، یکی هنگام نمایش صفحه در کامپیوتر و دیگری برای پرینت (print) صفحه، با کدهای CSS

با استفاده از کدهای CSS ، می توانیم تعیین کنیم که صفحه مورد نظر ما، در هنگام نمایش در کامپیوتر، دارای یک سری ویژگی ها باشد و هنگامی که پرینتی از صفحه را تهیه می کنیم، دارای یک سری ویژگی های دیگر باشد. برای این منظور، باید از @media استفاده کنیم.

مثلا فرض کنید که بخواهیم برای دو حالت نمایش در کامپیوتر و پرینت از صفحه، دو نوع فونت متفاوت تعریف کنیم (در هنگام پرینت گرفتن از صفحه، متن با فونتی دیگر نمایش داده شود)، برای این منظور، کدهای CSS زیر را باید بنویسیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#A1A100]@media screen[/COLOR]
[COLOR=#00AA00]{[/COLOR]
p[COLOR=#6666FF].bodyText[/COLOR] [COLOR=#00AA00]{[/COLOR][B]font-family[/B][COLOR=#3333FF]:verdana[/COLOR][COLOR=#00AA00],[/COLOR] arial[COLOR=#00AA00],[/COLOR] [COLOR=#993333]sans-serif[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#00AA00]}[/COLOR]

[COLOR=#A1A100]@media print[/COLOR]
[COLOR=#00AA00]{[/COLOR]
p[COLOR=#6666FF].bodyText[/COLOR] [COLOR=#00AA00]{[/COLOR][B]font-family[/B][COLOR=#3333FF]:georgia[/COLOR][COLOR=#00AA00],[/COLOR] times[COLOR=#00AA00],[/COLOR] [COLOR=#993333]serif[/COLOR][COLOR=#00AA00];[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]

اکنون فرض کنید که بخواهیم تعریف کنیم که اندازه فونت ها، برای هر دو حالت (نمایش در کامپیوتر و پرینت از صفحه)، یکسان باشد، برای این منظور، کدهای CSS زیر را می نویسیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#A1A100]@media screen, print[/COLOR]
[COLOR=#00AA00]{[/COLOR]
p[COLOR=#6666FF].bodyText[/COLOR] [COLOR=#00AA00]{[/COLOR][B]font-size[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]20pt[/COLOR][COLOR=#00AA00]}[/COLOR]
[COLOR=#00AA00]}[/COLOR][/FONT]
[/FONT][/COLOR]

 

[P O U R I A]

تغییر شکل موس، با استفاده از مشخصه cursor در CSS

تغییر شکل موس، با استفاده از مشخصه cursor در CSS

با استفاده از کدهای CSS ، می توانیم تعیین کنیم که وقتی کاربر موس خود را بر روی یک عنصر از صفحه HTML می برد، شکل موس تغییر داده شود.

به مثال زیر توجه کنید :

[h=4]مثال :[/h]می خواهیم زمانی که کاربر، موس خود را بر روی یک تگ div می برد (اولین تگ div)، به شکل موس، یک علامت سوال نیز افزوده شود (علامت help)، برای این منظور، کدهای زیر را می نویسیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
 
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
div[COLOR=#6666FF].class_1[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#0FF[/COLOR][COLOR=#00AA00];[/COLOR]
        [B]cursor[/B][COLOR=#00AA00]:[/COLOR][COLOR=#993333]help[/COLOR][COLOR=#00AA00];[/COLOR]
        [COLOR=#00AA00]}[/COLOR]       
div[COLOR=#6666FF].class_2[/COLOR] [COLOR=#00AA00]{[/COLOR]
        [B]background-color[/B][COLOR=#00AA00]:[/COLOR][COLOR=#CC00CC]#F96[/COLOR][COLOR=#00AA00];[/COLOR]
        [COLOR=#00AA00]}[/COLOR]                                        
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]
 
<body[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_1"[/COLOR][COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR]some [COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]1[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

<div class[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"class_2"[/COLOR][COLOR=#00AA00]>[/COLOR]
<p[COLOR=#00AA00]>[/COLOR]some [COLOR=#993333]text[/COLOR] [COLOR=#CC66CC]2[/COLOR].</p[COLOR=#00AA00]>[/COLOR]
</div[COLOR=#00AA00]>[/COLOR]

</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]

 

[P O U R I A]

تعیین نحوه چیدمان عناصر صفحه بر روی یکدیگر، با مشخصه z-index در CSS

تعیین نحوه چیدمان عناصر صفحه بر روی یکدیگر، با مشخصه z-index در CSS

با استفاده از مشخصه z-index در CSS، می توانیم تعیین کنیم که ترتیب قرارگیری عناصر یک صفحه، بر روی یکدیگر، چگونه باشد. مثلا به شکل زیر توجه کنید :


سه نوار رنگی قرار گرفته در بالای تصویر، مربوط به منوی سایت بوده است که قصد داشته ایم که ثابت باشد و بنابراین چنانچه کاربر به پایین صفحه برود، این منو همچنان در مکان خود ثابت باقی می ماند، اما همان طور که در شکل مشاهده می کنید، ستاره ها بر روی منو قرار گرفته اند. یعنی هنگامی که کاربر به پایین صفحه می رود، اگر بخشی که در زیر منو قرار می گیرد، دارای ستاره ها باشد، ستاره ها بر روی منو نمایش داده می شوند. ولی ما قصد داریم که ستاره ها در زیر منو پنهان شوند. مشکل از اینجا ناشی شده است که ستاره ها دارای اولویت بالاتر برای نمایش در صفحه هستند (برای قرارگیری بر روی سایر قسمت های صفحه). برای تغییر اولویت نمایش یک عنصر، باید برای مشخصه z-index آن، یک عدد دیگر (بزرگتر یا کوچکتر) انتخاب کنیم.

نحوه تعیین z-index برای یک عنصر، به صورت زیر می باشد (مثالی برای تگ div) :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<div style[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"z-index:1000;"[/COLOR][COLOR=#00AA00]>[/COLOR]</div[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

 

[P O U R I A]

نیمه شفاف نمایش دادن یک عنصر، در CSS

نیمه شفاف نمایش دادن یک عنصر، در CSS

برای نیمه شفاف نمایش دادن یک عنصر، باید کدهای CSS برای آن عنصر را مشابه کدهای زیر بنویسیم :

[COLOR=#000000][FONT=Tahoma][FONT=monospace]filter[COLOR=#00AA00]:[/COLOR]alpha[COLOR=#00AA00]([/COLOR]opacity[COLOR=#00AA00]=[/COLOR][COLOR=#CC66CC]50[/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR]
opacity[COLOR=#00AA00]:[/COLOR][COLOR=#CC66CC]0.5[/COLOR][COLOR=#00AA00];[/COLOR][/FONT]
[/FONT][/COLOR]

کدهای بالا، برای 50 درصد شفافیت می باشد (مقدار شفافیت را می توانید به دلخواه تغییر بدهید).

به مثال زیر توجه کنید :

[h=4]مثال :[/h]

[COLOR=#000000][FONT=Tahoma][FONT=monospace]<html[COLOR=#00AA00]>[/COLOR]
<head[COLOR=#00AA00]>[/COLOR]
<style type[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"text/css"[/COLOR][COLOR=#00AA00]>[/COLOR]
img[COLOR=#CC00CC]#myID[/COLOR] [COLOR=#00AA00]{[/COLOR]
        filter[COLOR=#00AA00]:[/COLOR]alpha[COLOR=#00AA00]([/COLOR]opacity[COLOR=#00AA00]=[/COLOR][COLOR=#CC66CC]50[/COLOR][COLOR=#00AA00])[/COLOR][COLOR=#00AA00];[/COLOR]
        opacity[COLOR=#00AA00]:[/COLOR][COLOR=#CC66CC]0.5[/COLOR][COLOR=#00AA00];[/COLOR]
[COLOR=#00AA00]}[/COLOR]
</style[COLOR=#00AA00]>[/COLOR]
</head[COLOR=#00AA00]>[/COLOR]

<body[COLOR=#00AA00]>[/COLOR]

<p[COLOR=#00AA00]>[/COLOR]www[COLOR=#6666FF].iran-eng[/COLOR].com</p[COLOR=#00AA00]>[/COLOR]
<img src[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"myImage.png"[/COLOR][COLOR=#00AA00]>[/COLOR]
<img id[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"myID"[/COLOR] src[COLOR=#00AA00]=[/COLOR][COLOR=#FF0000]"myImage.png"[/COLOR][COLOR=#00AA00]>[/COLOR]


</body[COLOR=#00AA00]>[/COLOR]
</html[COLOR=#00AA00]>[/COLOR][/FONT]
[/FONT][/COLOR]

[h=4]نتیجه :[/h]