سری سوم آموزش CSS

          علی 
            بازدید : 191
          یکشنبه 10 فروردین 1393
           نظرات (0)
        

ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻣﻲ داﻧﻴﺪ ﺑﺎ وﺟﻮد اﻳﻨﻜﻪ ﺑﺮﺧﻲ از ﻋﻨﺎﺻﺮ در ﺻﻔﺤﻪ ﺑﺎ ﻫﻢ ﺗﻔﺎوت دارﻧﺪ، از ﻳﻚ ﺗﮓ HTML ﺑﺮاي اﻳﺠﺎد آﻧﻬﺎ

اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد.ﺑﺮاي ﻣﺜﺎل ﺑﺮﺧﻲ از اﻳﻦ ﻋﻨﺎﺻﺮ را ﻛﻪ از ﺗﮓ <input>در ﺑﻪ وﺟﻮد آوردن آﻧﻬﺎ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد ﻣﻲ ﺗﻮاﻧﻴﺪ در زﻳﺮ ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ:

<input type="text">

ﻛﺎدرﻫﺎي ﻣﺘﻨﻲ ﻛﻪ در ﻓﺮﻣﻬﺎ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد.

<input type="checkbox">

ﭼﻚ ﺑﺎﻛﺲ ﻫﻢ ﺑﺎ اﺳﺘﻔﺎده از ﺗﮓ <input>ﺑﻪ وﺟﻮد ﻣﻲ آﻳﺪ.

<input type="radio">

در ﺳﺎﺧﺘﻦ دﻛﻤﻪ ﻫﺎي رادﻳﻮ ﻫﻢ از ﻫﻤﺎن ﺗﮓ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد.

<"input type="button>

اﻳﻦ ﺗﮓ در ﺳﺎﺧﺘﻦ ﻫﻢ اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد.

<"input type="submit>

ﺑﺮاي ﺳﺎﺧﺘﻦ دﻛﻤﻪ ارﺳﺎل ﻓﺮم ﻫﻢ از ﺗﮓ <input>اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد.

ﺣﺎﻻ ﻓﺮض ﻛﻨﻴﺪ ﻣﺎ در ﻳﻚ ﺻﻔﺤﻪ از ﭼﻨﺪ ﻧﻤﻮﻧﻪ از ﻋﻨﺎﺻﺮ ﺑﺎﻻ اﺳﺘﻔﺎده ﻛﺮده اﻳﻢ وﻟﻲ ﻓﻘﻂ ﻣﻲ ﺧـﻮاﻫﻴﻢ وﻳﮋﮔﻴﻬـﺎي ﻳﻜـﻲ از

آﻧﻬﺎ را ﺗﻐﻴﻴﺮ دﻫﻴﻢ. دو روش ﺑﺮاي اﻳﻦ ﻛﺎر وﺟﻮد دارد: ﻳﻜﻲ اﺳﺘﻔﺎده از ﻛﻼس اﺳﺖ ﻛﻪ در اﻳﻦ روش اﮔﺮ ﺗﻌـﺪاد زﻳـﺎدي از

ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ در ﺻﻔﺤﻪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ ﺑﺎﻳﺪ ﺑﻪ ﻫﻤﺎن ﺗﻌﺪاد از ﺷﻨﺎﺳﻪ class در ﺗﮕﻬـﺎي آﻧﻬـﺎ اﺳـﺘﻔﺎده ﻛﻨـﻴﻢ و

ﻣﻤﻜﻦ اﺳﺖ اﻳﻦ ﻛﺎر ﺑﺎﻋﺚ اﻓﺰاﻳﺶ ﺣﺠﻢ ﺻﻔﺤﻪ ﻳﺎ ﻣﻮﺟﺐ ﺳﺨﺘﻲ در ﻧﻮﺷﺘﻦ ﻛﺪ ﺷﻮد. روش دوم ﺗﻌﺮﻳﻒ ﻛﺮدن ﺳﻠﻜﺘﻮر

input ﺑﺮاي ﻋﻨﺎﺻﺮ ﻣﻮرد ﻧﻈﺮ اﺳﺖ ﻛﻪ ﺑﻪ ﺻﻮرت زﻳﺮ اﻧﺠﺎم ﻣﻲ ﮔﻴﺮد:

ﻓﺮض ﻛﻨﻴﺪ ﻣﻲ ﺧﻮاﻫﻴﻢ ﻓﻘﻂ ﻋﺮض ﻛﺎدرﻫﺎي ﻣﺘﻨﻲ را در ﺻﻔﺤﻪ ﺗﻐﻴﻴﺮ دﻫﻴﻢ. در ﺻﻮرﺗﻲ ﻛﻪ در اﺳﺘﺎﻳﻞ از ﺳﻠﻜﺘﻮر input

ﺑﻪ ﺗﻨﻬﺎﻳﻲ اﺳﺘﻔﺎده ﻛﻨﻴﻢ ﻋـﺮض ﻫﻤـﻪ ﭼـﻚ ﺑﺎﻛﺴـﻬﺎ ، دﻛﻤـﻪ ارﺳـﺎل، دﻛﻤـﻪ ﻫـﺎي رادﻳـﻮ و ﺳـﺎﻳﺮ ﻋﻨﺎﺻـﺮي ﻛـﻪ از ﺗـﮓ

<input>اﺳﺘﻔﺎده ﻛﺮده اﻧﺪ ﻧﻴﺰ ﺗﻐﻴﻴﺮ ﻣﻲ ﻛﻨﺪ. ﺑﺮاي اﻧﺠﺎم اﻳﻦ ﻛﺎر ﻣﻲ ﺗﻮاﻧﻴﺪ ﺳﻠﻜﺘﻮر را ﺑﻪ ﺻﻮرت زﻳﺮ ﺗﻌﺮﻳﻒ ﻛﻨﻴﻢ:

input[type="text"] {

width: 200px

}

ﻛﺪ اﺳﺘﺎﻳﻠﻲ ﻛﻪ در ﺑﺎﻻ ﻧﻮﺷﺘﻴﻢ ﻓﻘﻂ ﺑﺮ روي ﻛﺎدر ﻫﺎي ﻣﺘﻨـﻲ ﻛـﻪ در آﻧﻬـﺎ از ﺷﻨﺎﺳـﻪ "type="text اﺳـﺘﻔﺎده ﺷـﺪه

اﺳﺖ اﺛﺮ ﻣﻲ ﮔﺬارد.

اﻟﺒﺘﻪ اﻳﻦ روش ﻣﻤﻜﻦ اﺳﺖ در ﻣﺮورﮔﺮ Internet Explorer ﭘﺸﺘﻴﺒﺎﻧﻲ ﻧﺸﻮد اﻣـﺎ ﻣﺮورﮔﺮﻫـﺎي Firefox و

Opera از آن ﭘﺸﺘﻴﺒﺎﻧﻲ ﻣﻲ ﻛﻨﻨﺪ.

ﺳﻠﻜﺘﻮر id

روش دﻳﮕﺮي ﻛﻪ ﺑﺮاي ﺗﻌﺮﻳﻒ اﺳﺘﺎﻳﻞ وﺟﻮد دارد اﺳﺘﻔﺎده از id اﺳﺖ. ﺷﻨﺎﺳﻪ id اﺣﺘﻤﺎﻻً در آﻳﻨـﺪه ﺟـﺎﻳﮕﺰﻳﻦ ﺷﻨﺎﺳـﻪ

name در ﺗﮕﻬﺎي HTML ﻣﻲ ﺷﻮد ﺑﻨﺎ ﺑﺮ اﻳﻦ در ﻫﺮﺻﻔﺤﻪ ﻧﺒﺎﻳﺪ ﺑﻴﺶ از ﻳﻚ ﺑﺎر از ﻫﺮ ID اﺳﺘﻔﺎده ﺷﻮد. اﮔـﺮ ﺑـﻴﺶ

از ﻳﻚ ﺑﺎر از ﻳﻚ id اﺳﺘﻔﺎده ﺷﻮد ﻛﺎراﻳﻲ ﺻﻔﺤﻪ ﺗﻐﻴﻴﺮي ﻧﻤﻲ ﻛﻨﺪ وﻟﻲ ﺻﻔﺤﻪ اﻋﺘﺒﺎر ﺧﻮد را از دﺳﺖ ﻣﻲ دﻫـﺪ . ﺳـﻠﻜﺘﻮر

id ﺑﺎ ﻋﻼﻣﺖ # ﻣﺸﺨﺺ ﻣﻲ ﺷﻮد. ﺑﺎ اﺳﺘﺎﻳﻞ زﻳﺮ ﻫﻤﻪ ﻋﻨﺎﺻﺮ ﻛﻪ ﺷﻨﺎﺳﻪ id="border" دارﻧﺪ ﺑﺎ ﻛﺎدري ﺳـﺒﺰ رﻧـﮓ

ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ:

#border { border: green thin solid }

ﺑﺮاي ﻣﺜﺎل ﻣﺎ از اﺳﺘﺎﻳﻞ ﺑﺎﻻ در اﻳﻦ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻛﺮده اﻳﻢ. ﺣﺎﻻ ﻛﺪ زﻳﺮ را وارد ﺻﻔﺤﻪ ﻣﻲ ﻛﻨﻴﻢ:

<h3/> اﻳﻦ ﻳﻚ ﺳﺮﻓﺼﻞ ﺑﺎ اﻧﺪازه 3 اﺳﺖ <"h3 id="border>

<div id="border"> ﻳﻚ ﻗﺴﻤﺖ اﻳﻦ div اﺳﺖ </div>

در ﻗﺴﻤﺖ زﻳﺮ ﻣﻲ ﺗﻮاﻧﻴﺪ ﻧﺘﻴﺠﻪ ﻛﺪ ﺑﺎﻻ را ﻣﺸﺎﻫﺪه ﻛﻨﻴﺪ:

اﻳﻦ ﻳﻚ ﺳﺮﻓﺼﻞ ﺑﺎ اﻧﺪازه 3 اﺳﺖ

اﻳﻦ ﻗﺴﻤﺖ ﻳﻚ div اﺳﺖ

ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻛﻼس را ﻣﻲ ﺗﻮاﻧﺴﺘﻴﻢ ﺑﺮاي ﻳﻚ ﻋﻨﺼﺮ ﻣﺸﺨﺺ ﺗﻌﺮﻳﻒ ﻛﻨﻴﻢ در ﻣﻮرد id ﻧﻴﺰ ﻣﻲ ﺗﻮاﻧﻴﻢ اﻳﻦ ﻛﺎر را اﻧﺠﺎم

دﻫﻴﻢ. ﺑﻪ اﺳﺘﺎﻳﻞ زﻳﺮ ﺗﻮﺟﻪ ﻛﻨﻴﺪ:

p#border { border: green thin solid }

اﺳﺘﺎﻳﻞ ﺑﺎﻻ ﻓﻘﻂ روي ﭘﺎراﮔﺮاﻓﻲ ﻛﻪ ﺷﻨﺎﺳﻪ id="green" در آن ﺑﻪ ﻛﺎ رﻓﺘﻪ اﺛﺮ ﻣﻲ ﮔﺬارد.

ﻧﻜﺘﻪ : ﻫﺮﮔﺰ ﻧﺎم ﻳﻚ id را ﺑﺎ ﻳﻚ ﻋﺪد آﻏﺎز ﻧﻜﻨﻴـﺪ ﭼـﻮن در اﻳـﻦ ﺻـﻮرت ﻣﺮورﮔﺮﻫـﺎي Mozilla و Firefox ﻧﻤـﻲ

ﺗﻮاﻧﻨﺪ از آن اﺳﺘﻔﺎده ﻛﻨﻨﺪ.

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
آموزش هک و امنیت \| قسمت ۵ دورک نویسی	1	415	parisa98
پيش ثبت نام دانشگاه علمي کاربردي	0	243	bhrprn
دفترچه ثبت نام بدون کنکور دانشگاه آزاد	0	174	bhrprn
چتروم تابستانه	1	346	admin
آموزش هک و امنیت \| قسمت ۴ دیفیس کردن سایت با باگXSS	0	292	admin