CSS 2 Quick-start Tutorial in Persian

‫ﻛﺎرﮔﺎه ﻮز ﻲ ﺗﻮﺳﻌﻪ وب‬
‫ر آﻣﻮزﺷﻲ ﻮ‬
‫ﺑﺨﺶ دوم - ‪CSS‬‬

‫اراﺋﻪ: ﻋﺒﺎس ﻧﺎدري‬
‫اﻧﺠﻤﻦ ﻋﻠﻤﻲ داﻧﺸﺠﻮﻳﻲ‬
‫ﻣﻬﻨﺪﺳﻲ ﻛﺎﻣﭙﻴﻮﺗﺮ‬
‫داﻧﺸﮕﺎه ﺷﻬﻴﺪ ﺑﻬﺸﺘﻲ‬ ‫ﻧﺴﺨﻪ 1‬

‫‪ CSS‬ﭼﻴﺴﺖ ؟‬

‫‪ CSS‬ﻳﺎ ‪ Casacading Style Sheets‬ﻳﻚ اﺳﺘﺎﻧﺪارد ﻗﺎﻟﺐ ﺑﻨﺪي ﻇﺎﻫﺮي اﺳﻨﺎد اﺳﺖ.‬ ‫•‬
‫•ﻣﻌﻤﻮل ﺗﺮﻳﻦ اﺳﺘﻔﺎده ‪ CSS‬ﺑﺮاي ﻗﺎﻟﺐ ﺑﻨﺪي اﺳﻨﺎد وب )‪ (HTML‬ﻣﻨﻈﻮر ﻣﻲ ﺷﻮد.‬
‫•ﺑﺎ ﭘﻴﭽﻴﺪه ﺷﺪن وب ﻫﺎ، ﺗﺼﻤﻴﻢ ﺑﺮ آن ﺷﺪ ﺗﺎ ﻣﺤﺘﻮا از ﻗﺎﻟﺐ ﺑﻨﺪي ﺗﻔﻜﻴﻚ ﺷﻮد و ﺗﻮﺳﻌﻪ وب‬
‫ﺗﺴﻬﻴﻞ ﮔﺮدد.‬

‫‪ CSS‬ﺳﻪ ﻧﺴﺨﻪ اﺻﻠﻲ دارد:‬
‫ﻲ ر‬ ‫•‬
‫1 ‪ :CSS‬در ﺳﺎل 6991 ﺗﻮﺳﻂ ‪ W3C‬اﺳﺘﺎﻧﺪارد ﺷﺪ.‬ ‫•‬
‫•2 ‪ :CSS‬در ﺳﺎل 8991 ﺗﻮﺳﻂ ‪ W3C‬اﺳﺘﺎﻧﺪارد ﺷﺪ و ﻫﻨﻮز ﺑﻪ ﻋﻨﻮان اﺳﺘﺎﻧﺪارد ﺑﻜﺎر ﻣﻲ رود.‬
‫ﻲ‬

‫•3 ‪ :CSS‬ﻫﻨﻮز در دﺳﺖ ﺗﻮﺳﻌﻪ ﺗﻮﺳﻂ ‪ W3C‬اﺳﺖ.‬

‫‪ CSS‬ﺑﺑﻪ دﻟﻴﻞ ااﻣﻜﺎن ااﺳﺘﻔﺎده ﻣﺠﺪد، ﺑﺑﻪ ﺷﺪت ﺗﻮﺳﻌﻪ وب را ﺳﺎده و ﺳﺮﻳﻊ ﻣﻲ ﻛﻨﺪ.‬
‫ﺮﻳﻊ ﻲ‬ ‫ﻮ‬ ‫ﺠ‬ ‫ن‬ ‫ﻴﻞ‬ ‫•‬
‫ﻫﻤﭽﻨﻴﻦ ﻗﺎﻟﺐ ﺑﻨﺪي ﺻﻔﺤﺎت ﺑﺎ اﺳﺘﻔﺎده از آن در ﻗﺎﻟﺐ ﺗﻴﻤﻲ ﻣﻘﺪور ﺧﻮاﻫﺪ ﺑﻮد.‬

‫‪ CSS‬از ﻃ ﻖ اﻧ ﺨﺎ ﮕ ﺎ ﻗﺎﻟﺐ ﺑﻨﺪي راا ﺳﺮﻋﺖ ﻣﻲ ﺑﺨﺸﺪ. ﻫﻤﭽﻨﻴﻦ از ﻣﻮﺗﻮر اﻧﺘﺨﺎﺑﮕﺮ‬
‫ﺗ اﻧ ﺨﺎ ﮕ‬ ‫ﻨ‬ ‫ﺨﺸ‬ ‫ﻃﺮﻳﻖ اﻧﺘﺨﺎﺑﮕﺮﻫﺎ ﻗﺎﻟ ﻨ‬ ‫•‬
‫‪ CSS‬در ﻛﺎرﺑﺮدﻫﺎي دﻳﮕﺮ ﺑﻬﺮه ﻓﺮاوان ﺑﺮده ﻣﻲ ﺷﻮد.‬

‫‪ :Layout Engine‬ﺑﺮﻧﺎﻣﻪ اﻳﺴﺖ در ﻛﺎوﺷﮕﺮﻫﺎ ﻛﻪ ﺳﻨﺪ ‪ HTML‬و ﻓﺎﻳﻞ ‪ CSS‬را درﻳﺎﻓﺖ‬ ‫•‬
‫ﻛﺮده، ﺧﺮوﺟﻲ ﮔﺮاﻓﻴﻜﻲ ﺑﺮ روي ﻔﺤﻪ ﺗ ﻟ ﺪ ﻣﻲ ﻧ ﺎ ﺪ.‬
‫ﺻﻔﺤﻪ ﺗﻮﻟﻴﺪ ﻧﻤﺎﻳﺪ‬ ‫ﮔ اﻓ ﻜ‬ ‫ﻛ د ﺧ‬

‫‪ :Selector Engine‬ﻣﻮﺗﻮرﻳﺴﺖ ﺑﺮ روي ﻛﺎوﺷﮕﺮ ﻛﻪ زﻳﺮﻣﺠﻤﻮﻋﻪ اي از ﺑﺮﭼﺴﺐ ﻫﺎي‬ ‫•‬
‫‪ HTML‬را اﻧﺘﺨﺎب ﻣﻲ ﻛﻨﺪ.‬

:‫ ﮔﺮاﻣﺮ ﺑﺴﻴﺎر ﺳﺎده اي دارد، ﺑﺎ ﭼﻨﺪ ﻣﺜﺎل آﻧﺮا ﺑﺮرﺳﻲ ﻣﻲ ﻛﻨﻴﻢ‬CSS •
Template:
Selection {
Property: value;
Property: value;
P l
//Comment /*Comment */
}

Example:
div.main {
background-color:#777777;
border-width: 1
b d idth 1px;
border-style: solid;
font family: Tahoma ;
font-family: ‘Tahoma’;
}

‫‪ CSS‬ﺟﺰﺋﻴﺎت ﮔﺮاﻣﺮي ﻣﺨﺘﻠﻔﻲ ﻧﻴﺰ دارد ﻛﻪ در ﻃﻲ اﻳﻦ اراﺋﻪ ﺑﺎ آﻧﻬﺎ ﺑﻴﺸﺘﺮ آﺷﻨﺎ ﺧﻮاﻫﻴﻢ‬ ‫•‬
‫ﺷﺪ.‬

‫در ﺳﻪ ﺟﺎي ﻣﺨﺘﻠﻒ ﻣﻲ ﺗﻮان از ‪ CSS‬اﺳﺘﻔﺎده ﻛﺮد:‬ ‫•‬
‫•‬
‫ﻓﺎﻳﻞ ﻫﺎي ‪ :CSS‬ﻣﻲ ﺗﻮان ‪ CSS‬را در ﻓﺎﻳﻠﻲ ﺟﺪاﮔﺎﻧﻪ ﻧﻮﺷﺖ و آﻧﺮا در ‪ HTML‬اﻓﺰود.‬

‫•ﺑﺮﭼﺴﺐ ﻫﺎي ‪ Style‬در داﺧﻞ ﻓﺎﻳﻞ ‪ :HTML‬ﻣﻲ ﺗﻮان ﺑﺎ اﻓﺰودن ﺑﺮﭼﺴﺐ ‪ Style‬در ‪Head‬ﻳﺎ‬
‫‪ Body‬ﻳﻚ ﺳﻨﺪ، ‪ CSS‬ﺗﻌﺮﻳﻒ ﻛﺮد.‬

‫ﺻﻔﺖ ‪ Style‬ﺑﺮاي ﺑﺮﭼﺴﺐ ﻫﺎ: ﻣﻲ ﺗﻮان در ﻳﻜﻲ از ﺻﻔﺘﻬﺎي ﻫﺮ ﺑﺮﭼﺴﺐ، ‪ CSS‬آﻧﺮا ﺗﻌﺮﻳﻒ ﻛﺮد.‬ ‫•‬
‫در اﻳﻦ ﺣﺎﻟﺖ دﻳﮕﺮ اﻧﺘﺨﺎﺑﮕﺮ ﻣﻄﺮح ﻧﻴﺴﺖ و ﻗﺎﻟﺐ ﺑﻨﺪي ﺗﻨﻬﺎ ﺑﺮاي آن ﺑﺮﭼﺴﺐ اﻋﻤﺎل ﻣﻲ ﺷﻮد.‬

‫ﺰ ﺶ ﻲ‬ ‫ﺮ‬ ‫ﻮ‬ ‫ﺰ ن‬ ‫ﻲ ﻮ‬ ‫ﻮع ﺮ‬ ‫•‬
‫ﺳﻪ ﻧﻮع ﺗﻌﺮﻳﻒ ‪ CSS‬ﻣﻲ ﺗﻮاﻧﻨﺪ ﻫﻤﺰﻣﺎن ﺑﺎﺷﻨﺪ. اوﻟﻮﻳﺖ آﻧﻬﺎ ﺑﻪ ﺗﺮﺗﻴﺐ اﻓﺰاﻳﺶ ﻣﻲ ﻳﺎﺑﺪ.‬

‫•اﺳﺘﻔﺎده از ﺣﺎﻟﺖ ﺳﻮم )‪ (Inline CSS‬ﺗﻮﺻﻴﻪ ﻧﻤﻲ ﺷﻮد و ﺟﺪاﺑﻮدن ﻣﺤﺘﻮي از ﻗﺎﻟﺐ را زﻳﺮ‬
‫ﺳﻮال ﻣﻲ ﺑﺮد، اﻣﺎ در ﺟﺎﻫﺎي ﺧﺎﺻﻲ اﺳﺘﻔﺎده از آن ﻛﺎر را راﺣﺘﺘﺮ ﻣﻲ ﻛﻨﺪ.‬
‫ﻣ‬ ‫ﺧﺎﺻ‬ ‫ﻣ ﺑﺮد‬

:HTML ‫ ﺟﺪا و اﺳﺘﻔﺎده از آن در‬CSS ‫ﺗﻌﺮﻳﻒ در ﻓﺎﻳﻞ‬ •
//SomeFile.css
//S Fil

input[text] {

width:200px;

background color:#000000;

border:solid 0px;

}



<head>

<link rel="stylesheet" href=“SomeFile css" type="text/css" />
rel stylesheet href SomeFile.css type text/css

</head>

:HTML ‫ در ﺑﺪﻧﻪ ﺳﻨﺪ‬CSS ‫ﺗﻌﺮﻳﻒ‬ •
<head>
h d

<style>

Div {

color:#ff0000;

text-align:center;

}

P{

font-size: 16px;}
</style>

</head>

:‫ در ﺻﻔﺖ ﻳﻚ ﺑﺮﭼﺴﺐ‬CSS ‫ﺗﻌﺮﻳﻒ‬ •
<div style=‘background-color:black;color:white;’>
di l ‘b k d l bl k l hi ’

<p style=‘font-family:tahoma;’>

This is some text with tahoma font

</p>
</div>

‫ﭼﮕﻮﻧﮕﻲ اﻧﺘﺨﺎب ﺑﺮﭼﺴﺒﻬﺎ‬

‫ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن اﻳﻨﻜﻪ ﻳﻚ ‪ CSS‬ﺑﻪ ﻛﺪاﻣﻴﻦ اﺷﻴﺎء ﻳﻚ ﺻﻔﺤﻪ اﻋﻤﺎل ﺷﻮد، ﺑﺎﻳﺪ از اﻧﺘﺨﺎﺑﮕﺮﻫﺎ‬ ‫•‬
‫ااﺳﺘﻔﺎده ﻧﻧﻤﻮد. ﻫﺮ اﻧﺘﺨﺎب ﮔﺮ ﻚ ﺎ ﭼﻨﺪ ﺷﻲء در ﻚ ﺻﻔﺤﻪ ‪ HTML‬راا اﻧﺘﺨﺎب ﻣﻲ ﻛﻨﺪ و ﺳﭙﺲ ﻣﻲ‬
‫ﻛ‬ ‫اﻧ ﺨﺎ‬ ‫ﻳﻚ ﻔ‬ ‫ﺷ‬ ‫اﻧ ﺨﺎ ﮔ ﻳﻚ ﻳﺎ‬ ‫ﻔﺎ‬
‫ﺗﻮان ﻗﺎﻟﺐ ﻫﺎي ﻣﻮرد ﻧﻈﺮ را ﺑﻪ آن اﻋﻤﺎل ﻛﺮد.‬

‫اﻧﺘﺨﺎﺑﮕﺮﻫﺎي ‪ CSS‬ﺗﻨﻮع و ﻗﺪرت ﺑﻪ ﺳﺰاﻳﻲ دارﻧﺪ ﺑﻨﺎﺑﺮاﻳﻦ در اﻳﻦ ﺑﺨﺶ در ﺣﺪي ﻛﻪ ﻧﻴﺎزﻫﺎي اوﻟﻴﻪ‬ ‫•‬
‫ﻣﺮﺗﻔﻊ ﺷﻮﻧﺪ آﻧﻬﺎ را ﺑﺮرﺳﻲ ﺧﻮاﻫﻴﻢ ﻛﺮد.‬

‫اﻧﺘﺨﺎﺑﮕﺮ ﻫﺎ در دو ﻧﺤﻮه اوﻟﻴﻪ ﺗﻌﺮﻳﻒ ‪ CSS‬ﻫﺎ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻫﺴﺘﻨﺪ ﺑﻪ ﻗﺎﻟﺐ زﻳﺮ:‬ ‫•‬
‫{ ‪SelectorStatement‬‬

‫;‪Css Properties & Values‬‬

‫}‬

‫اﻧﺘﺨﺎب ﺗﻤﺎم ﺑﺮﭼﺴﺐ ﻫﺎ : *‬

‫اﻧﺘﺨﺎب ﺑﺮﭼﺴﺐ ﻫﺎي ﺧﺎص: ‪tagName‬‬
‫‪t N‬‬

‫اﻧﺘﺨﺎب ﺑﺮﭼﺴﺒﻲ از زﻳﺮﺑﺮﭼﺴﺐ ﻫﺎي ﻳﻚ ﺑﺮﭼﺴﺐ دﻳﮕﺮ: ‪ParentTag DescendantTag‬‬

‫اﻧﺘﺨﺎب ﺑﺮﭼﺴﺒﻲ از ﻓﺮزﻧﺪان ﻳﻚ ﺑﺮﭼﺴﺐ دﻳﮕﺮ : ‪ParentTag > ChildTag‬‬

‫اﻧﺘﺨﺎب ﺑﺮﭼﺴﺒﻲ ﺑﻌﺪ از ﻳﻚ ﺑﺮﭼﺴﺐ دﻳﮕﺮ: 2‪Tag1 + Tag‬‬

‫اﻧﺘﺨﺎب ﺑﺮﭼﺴﺒﻲ ﺑﺎ ﺻﻔﺘﻲ ﺧﺎص: ]”‪Tag[attrib=“value‬‬
‫آﻧﺘﺨﺎب ﻳﻚ ﺑﺮﭼﺴﺐ در وﺿﻌﻴﺖ ﻫﺎي ﺧﺎص:‬
‫آ‬

‫ﺑﺮﭼﺴﺒﻲ ﻛﻪ ﻣﺎوس روﻳﺶ اﺳﺖ ‪Tag:hover‬‬ ‫ﻟﻴﻨﻚ دﻳﺪه ﻧﺸﺪه ‪Tag:link‬‬

‫ﺑﺮﭼﺴﺐ درﺣﺎل ﻛﻠﻴﻚ ‪Tag:active‬‬ ‫ﻟﻴﻨﻚ دﻳﺪه ﺷﺪه ‪Tag:visited‬‬

‫ﺑ ﭼ ﺐ ﻓﻌﺎل ﺻﻔﺤﻪ ‪Tag:focus‬‬
‫ﺑﺮﭼﺴﺐ‬

‫ﻫﻤﺎﻧﻄﻮر ﻛﻪ ﻗﺒﻼ ذﻛﺮ ﺷﺪ، ﻫﺮ ﺑﭽﺴﺐ در ‪ HTML‬ﻣﻲ ﺗﻮاﻧﺪ ﺻﻔﺎت ﺧﺎﺻﻲ را داﺷﺘﻪ ﺑﺎﺷﺪ. ﺻﻔﺎﺗﻲ ﻛﻪ‬ ‫•‬
‫در ‪ CSS‬ﺑﻪ ﺎ ﻛ ﻚ ﻣﻲ ﻛﻨﻨﺪ، دو ﺻﻔﺖ ‪ class , id‬ﻫﺴﺘﻨﺪ. ﺎ اﺧﺘﺼﺎص دادن ااﻳﻦ دو ﺻﻔﺖ ﺑﻪ ﻚ‬
‫ﻳﻚ‬ ‫ﻔ‬ ‫ا‬ ‫ﺑﺎ اﺧ ﺎ‬ ‫ﻔ‬ ‫ﻛ‬ ‫ﻣﺎ ﻛﻤﻚ‬
‫ﺑﺮﭼﺴﺐ در ‪ HTML‬ﻣﻲ ﺗﻮان وﻳﮋﮔﻴﻬﺎي ‪ CSS‬آﻧﺮا ﺑﻪ ﺳﺎدﮔﻲ ﻛﻨﺘﺮل ﻛﺮد.‬

‫ﺑﺎ ﺗﻌﺮﻳﻒ ﻳﻚ ﻛﻼس ﺧﺎص ﺑﺮاي ﺑﺮﭼﺴﺒﻲ ، ﻣﻲ ﺗﻮان آﻧﺮا ﺟﺰو دﺳﺘﻪ اي ﻗﺮار داد ﻛﻪ وﻳﮋﮔﻴﻬﺎي ‪CSS‬‬ ‫•‬
‫ﻣﺸﺘﺮك ﺧﺎﺻﻲ ﺑﺮ روي ﻫﻤﮕﻲ آﻧﻬﺎ اﻋﻤﺎل ﺷﻮد.‬

‫ﺑﺎ ﺗﻌﺮﻳﻒ ﻳﻚ ﻣﺸﺨﺼﻪ ﻣﻨﺤﺼﺮه )‪ (Unique Identifier‬ﺑﺮاي ﻳﻚ ﺑﺮﭼﺴﺐ، ﻣﻲ ﺗﻮان ﻛﻨﺘﺮل ﻫﺎي‬ ‫•‬
‫ﺧﺎﺻﻲ از ﻃﺮﻳﻖ ‪CSS‬و ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﺑﺮ روي آن ﺑﺮﭼﺴﺐ اﻋﻤﺎل ﻛﺮد.‬
‫ل ﺮ‬ ‫و ﺮ ﭙ ﺮ رو ن ﺮﭼ‬ ‫ﻲ ز ﺮﻖ‬

‫ﺑﺎﻳﺪ ﺗﻮﺟﻪ ﮔﺮدد ﻛﻪ ‪ id‬ﻫﻴﭻ دو ﺑﺮﭼﺴﺒﻲ در ﻳﻚ ﺳﻨﺪ ‪HTML‬ﻧﺒﺎﻳﺪ ﻳﻜﺴﺎن ﺑﺎﺷﻨﺪ، در ﻏﻴﺮ اﻳﻨﺼﻮرت‬ ‫•‬
‫ﻧﺘﺎﻳﺞ ﻗﺎﺑﻞ ﭘ ﺶ ﺑﺑﻴﻨﻲ ﻧﺨ اﻫﺪ ﺑ د.‬
‫ﭘﻴﺶ ﻨ ﻧﺨﻮاﻫﺪ ﺑﻮد‬

*{
font-family: “Tahoma”, “Trebuchet”,”MS Sans Serif”
}
div.Container {
border-width: 1px;
}
P#title {
font-weight:bold;
}
H1 + P {
font-style:italic;
}
input [type=‘button’] {
border-style:none;
}
Body Form > input[type=‘text’] {
text-align:center;
}
DIV P * [title] {
color:#ffffff;
}

‫ﺑﺮاي اﻳﻨﻜﻪ ‪ CSS‬ﺧﺎﺻﻲ را ﺑﻪ ﭼﻨﺪ اﻧﺘﺨﺎﺑﮕﺮ ﻳﻜﺠﺎ اﻋﻤﺎل ﻛﻨﻴﻢ، ﻣﻲ ﺗﻮاﻧﻴﻢ آﻧﻬﺎ را ﺑﻪ ﺻﻮرت ﮔﺮوﻫﻲ‬ ‫•‬
‫ﻗﺮار دﻫﻴﻢ:‬
‫ﻗا‬

‫{ ]’‪div.Container , p , input[type=‘text‬‬

‫; ’‪font-family: ‘Tahoma’, ‘Comic Sans MS‬‬

‫}‬
‫در ﺻﻮرﺗﻲ ﻛﻪ ﭼﻨﺪ دﺳﺘﻮر ﻳﻜﺴﺎن ‪ CSS‬ﺑﻪ ﻳﻚ ﺑﺮﭼﺴﺐ ﺧﺎص اﻋﻤﺎل ﺷﻮﻧﺪ، آﺧﺮﻳﻦ آﻧﻬﺎ ﺑﺎﻗﻲ ﻣﻲ‬ ‫•‬
‫ﻣﺎﻧﺪ.‬

‫‪CSS‬ﺑﺎ اﺳﺘﻔﺎده از ﻋﺒﺎرات ﺟﺎوااﺳﻜﺮﻳﭙﺖ ﻣﻲ ﺗﻮاﻧﺪ ﻣﻘﺎدﻳﺮ ﭘﻮﻳﺎ )ﻧﺴﺒﺖ ﺑﻪ ﺷﺮاﻳﻂ ‪ (Client‬را ﺑﻪ‬ ‫•‬
‫‪ Property‬ﻫﺎ اﻋﻤﺎل ﻛﻨﺪ:‬

‫;‪Width: expression( document.width /2 )px‬‬

‫ﻣﺸﺨﺼﻪ ﻫﺎي اﺳﺘﺎﻧﺪارد 2 ‪CSS‬‬

Background ‫ : ﺧﻼﺻﻪ اي ﺑﺮاي ﺗﻨﻈﻴﻢ ﺗﻤﺎم ﻣﺸﺨﺼﺎت‬Background o
‫ : وﺿﻌﻴﺖ ﻗﺮارﮔﻴﺮي ﺗﺼﻮﻳﺮ در‬B k
Background-Attachement
d Att h t (scroll,fixed)o
( ll fi d)
.‫ﺑﺎﺷﺪ، ﺑﺎ ﺟﺎﺑﺠﺎﻳﻲ ﺻﻔﺤﻪ ﭘﺸﺖ ﺻﻔﺤﻪ آن ﺣﺮﻛﺖ ﻧﺨﻮاﻫﺪ ﻛﺮد‬fixed ‫، در ﺻﻮرﺗﻲ ﻛﻪ‬Background

‫ : رﻧﮓ ﭘﺸﺖ ﺻﻔﺤﻪ‬Background-color (RGB Value) o
‫ز‬ ‫ﻣﻲ ﺮ‬ ‫: ﻳﺎ ﻣﻘﺪار‬Background-image o
‫ﻳﻚ‬URL(adress) ‫ ﻲ ﮔﻴﺮد و ﻳﺎ ﺑﺎ اﺳﺘﻔﺎده از‬none ‫ر‬ g g
(‫آدرس ﻓﺎﻳﻞ ﺗﺼﻮﻳﺮي )آدرس وب‬

top left center center , … ‫: ﻘﺎد ي ﺎﻧﻨﺪ‬Background-position
left, ‫ ﻣﻘﺎدﻳﺮي ﻣﺎﻧﻨﺪ‬Background position o
‫: در ﺻﻮرﺗﻲ ﻛﻪ از ﺗﺼﻮﻳﺮ اﺳﺘﻔﺎده ﺷﻮد، روش ﺗﻜﺮار آﻧﺮا ﻣﺸﺨﺺ ﻣﻲ‬Background-repeato
no-repeat, repeat-x,repeat-y,repeat ‫ﻛﻨﺪ. ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از‬

‫‪ :Border‬ﺧﻼﺻﻪ اي ﺑﺮاي ﺗﻨﻈﻴﻢ ﻣﺸﺨﺼﺎت ﺣﺎﺷﻴﻪ، ﺑﻪ ﺗﺮﺗﻴﺐ ﻋﺮض، ﻧﻮع و رﻧﮓ ﻣﻲ ﮔﻴﺮد.‬‫‪o‬‬
‫آ‬ ‫‪Border-widtho‬‬
‫‪ :B d‬ﻋﺮض ﺣﺎﺷﻴﻪ )ﺿﺨﺎﻣﺖ آن( ﺑﻪ ﻋﺪد، درﺻﺪ و واﺣﺪ ﻫﺎي دﻳﮕﺮ اﻧﺪازه‬ ‫‪idth‬‬

‫‪ :Border-coloro‬رﻧﮓ ﺣﺎﺷﻴﻪ ﺑﻪ ‪RGB‬‬

‫‪ :Border-styleo‬ﻧﻮع ﺣﺎﺷﻴﻪ از ﻣﻘﺎدﻳﺮ ,‪none, hidden, dotted, dashed, solid‬‬
‫‪double, groove, ridge, inset, outset‬‬
‫‪,g‬‬ ‫, ‪, g‬‬ ‫,‬

‫ط ﺑﻪ ﺣﺎﺷﻴﻪ ﻧﻧﻮاﺣﻲ ﺨ ﻠﻒ )ﺑﺎﻻ، ﭘﺎﻳﻴﻦ، ﭼﭗ، راﺳﺖ(ﻣﻲ ﺗﻮاﻧﻴﺪ ااز ﭼﻬﺎر‬
‫ﺎ‬ ‫ﺗ اﻧ‬ ‫ا‬ ‫ا ﻣﺨﺘﻠﻒ ﺎﻻ ﺎ‬ ‫ﺎﺷ‬ ‫ﺑﺮاي ﺗﻐﻴﻴﺮ ﺗﻨﻈﻴﻤﺎت ﻣﺮﺑﻮط‬
‫ا ﺗﻐ ﺗ ﻈ ﺎ‬ ‫‪o‬‬
‫وﻳﮋﮔﻲ ﺑﺎﻻ ﺑﻪ ﻫﻤﺮاه ﻧﺎم ﻃﺮف ﻣﻮرد ﻧﻈﺮ اﺳﺘﻔﺎده ﻧﻤﺎﻳﻴﺪ، ﺑﺮاي ﻣﺜﺎل:‬
‫‪Border-left-width‬‬‫‪o‬‬
‫‪Border-top-coloro‬‬
‫‪Border-bottomo‬‬

url(file), auto, ‫: ﺷﻤﺎﻳﻞ اﺷﺎره ﮔﺮ ﻣﺎوس را ﻣﻌﻴﻦ ﻣﻲ ﺳﺎزد، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از‬Cursoro
crosshair, default, pointer, move, e-resize, ne-resize, nw-resize n-
crosshair default pointer move e resize ne resize nw resize , n
resize, se-resize, sw-resize, s-resize, w-resize , text, wait , help
none, inline, block, list- ‫: ﻧﺤﻮه ﻧﻤﺎﻳﺶ ﻳﻚ ﺑﺮﭼﺴﺐ، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از‬Display o
item, run-in, compact, marker, table, inline-table , ….
left, right, ‫: ﮔﺮاﻳﺶ و ﺷﻨﺎوري ﻳﻚ ﺑﺮﭼﺴﺐ ﺑﻪ ﻃﺮﻓﻲ ﺧﺎص، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از‬Float o
none
Static, ‫: ﻧﺤﻮه ﻗﺮارﮔﻴﺮي ﻳﻚ ﺑﺮﭼﺴﺐ در ﻳﻚ ﺳﻨﺪ، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از‬Position o
Relative, Absolute,
Relative Absolute Fixed

‫‪ :Height‬ارﺗﻔﺎع ﻳﻚ ﺑﺮﭼﺴﺐ در ﺳﻨﺪ. ﻣﺸﺨﺼﻪ اﻧﺪازه اي‬ ‫‪o‬‬
‫‪ :Li H i hto‬ﻓﺎﺻﻠﻪ ﺑﻴﻦ دو ﺧﻂ ﻣﺘﻦ در ﺳﻨﺪ‬
‫‪Line-Height‬‬

‫‪ :Max-Heighto‬ﺣﺪاﻛﺜﺮ ارﺗﻔﺎﻋﻲ ﻛﻪ ﻳﻚ ﺑﺮﭼﺴﺐ ﻣﻲ ﺗﻮاﻧﺪ داﺷﺘﻪ ﺑﺎﺷﺪ‬

‫‪ :Min-Heighto‬ﺣﺪاﻗﻞ ارﺗﻔﺎع ﻳﻚ ﺑﺮﭼﺴﺐ‬

‫‪ :Widtho‬ﻋﺮض ﻳﻚ ﺑﺮﭼﺴﺐ‬

‫‪ :Max-Widtho‬ﺣﺪاﻛﺜﺮ ﻋﺮض ﻳﻚ ﺑﺮﭼﺴﺐ‬

‫‪ :Min-Widtho‬ﺣﺪاﻗﻞ ﻋﺮض ﻳﻚ ﺑﺮﭼﺴﺐ‬‫‪dh‬‬

‫: ﻣﻴﺎﻧﺒﺮي ﺑﺮاي اﻋﻤﺎل ﻣﺸﺨﺼﺎت ﻛﺎﻣﻞ ﻓﻮﻧﺖ و ﻗﻠﻢ‬Font o
.‫: ﻧﺎم ﻗﻠﻢ، ﺑﻬﺘﺮ اﺳﺖ ﻟﻴﺴﺘﻲ از ﻗﻠﻤﻬﺎ ﺑﺴﺘﻪ ﺑﻪ ﭘﺸﺘﻴﺒﺎﻧﻲ از ﺳﻴﺴﺘﻢ ﻫﺎ اﻧﺘﺨﺎب ﺷﻮد‬F t F il o
Font-Family
.‫ ﺧﻮب ﻧﻤﺎﻳﺶ داده ﻣﻲ ﺷﻮﻧﺪ‬Tahoma ‫ﻣﻌﻤﻮﻻ ﻧﻮﺷﺘﻪ ﻫﺎي ﻓﺎرﺳﻲ ﺑﺎ ﻗﻠﻢ‬

‫: اﻧﺪازه ﻗﻠﻢ. ﻫﻢ ﻣﻲ ﺗﻮاﻧﺪ از اﻧﻮاع ﻣﻘﺪاري ﻗﺮار داده ﺷﻮد ﻫﻢ ﻣﻲ ﺗﻮاﻧﺪ ﻳﻜﻲ از ﻣﻘﺎدﻳﺮ‬Font-Size o
xx-small, x-small, small, medium, large, x-large, xx-large, ‫ﻣﺠﺎز ﺑﺎﺷﺪ‬
smaller, larger
‫: ﻛﺸﻴﺪﮔﻲ ﻓﻮﻧﺖ )ﻓﺎﺻﻠﻲ اﻓﻘﻲ ﻣﺎﺑﻴﻦ ﺣﺮﻓﻬﺎي آن(ﻳﺎ ﻣﻘﺪار ﻋﺪدي ﻳﺎ ﻳﻜﻲ از‬Font-Stretch
Font Stretch o
normal, wider, narrower, ultra-condensed, extra-condensed, ‫ﻣﻘﺎدﻳﺮ‬
condensed, semi condensed, semi expanded, expanded, extra expanded,
condensed semi-condensed semi-expanded expanded extra-expanded
ultra-expanded

Normal, Italic, o
Normal Italic Oblique ‫: ﻳﻜﻲ از ﻣﻘﺎدﻳﺮ‬Font-Style
‫ﻘﺎد‬ ‫ﻜ‬

‫ و ﻳﺎ ﻣﻘﺪار ﻋﺪدي‬normal, bold, bolder, lighter ‫: ﻳﻜﻲ از ﻣﻘﺎدﻳﺮ‬Font-Weighto

o
‫: ﻣﻴﺎﻧﺒﺮي ﺑﺮاي ﺗﻨﻈﻴﻤﺎت ﻟﻴﺴﺖ. ﺑﻪ ﺗﺮﺗﻴﺐ، ﻧﻮع ، ﻣﻮﻗﻌﻴﺖ و ﺗﺼﻮﻳﺮ ﻟﻴﺴﺖ را ﻣﻲ ﮔﻴﺮد‬List-Style

l(fil ) List-Style-Imageo
none , url(file) :Li t St l I

inside, outside :List-style-Positiono

none, disc, circle, ‫: ﺷﻜﻞ ﻣﻮارد ﻟﻴﺴﺖ، ﻣﻮارد ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از‬List-Style-Typeo
square, decimal, decimal-leading-zero, lower-roman, upper-roman,
q , , g , , pp ,
lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin,
hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana,
cjk ideographic,
hiragana-iroha, katakana-iroha
(auto ‫: ﻓﺎﺻﻠﻪ ﻋﻼﻣﺖ ااز ﻧﻮﺷﺘﺎر )ﻣﻘﺪار ﺎ‬Marker Offset
‫ﺷ ﺎ ﻘ ا ﻳﺎ‬ ‫ ﻓﺎ ﻠ ﻼ‬Marker-Offset o

‫‪o‬‬
‫‪ :Margin‬ﻣﻴﺎﻧﺒﺮي ﺑﺮاي ﺗﻨﻈﻴﻤﺎت ﻛﻨﺎره. ﺑﻪ ﺗﺮﺗﻴﺐ اﻧﺪازه ﻛﻨﺎره ﻫﺎي ﺑﺎﻻ، راﺳﺖ، ﭘﺎﻳﻴﻦ و ﭼﭗ را ﻣﻲ‬
‫ﮔ د ) ﺎ ﺘﮕ د(‬
‫ﮔﻴﺮد ﺳﺎﻋﺘﮕﺮد‬

‫‪ :Margin-left, Margin-right, Margin-top, Margin-bottom‬ﻣﻘﺪار ﻛﻨﺎره، ﻣﻘﺪار‬ ‫‪o‬‬
‫ﻳﺎ ‪auto‬‬

‫‪o‬‬
‫‪ :Padding‬ﻣﻴﺎﻧﺒﺮي ﺑﺮاي ﺗﻨﻈﻴﻢ ﻣﺸﺨﺼﺎت ﻻﻳﻲ ﮔﺬاري، ﺑﻪ ﺗﺮﺗﻴﺐ ﺑﺎﻻ، راﺳﺖ، ﭘﺎﻳﻴﻦ و ﭼﭗ‬

‫‪ :Padding-left, Padding-right, Padding-top, Padding-bottomo‬ﻣﻘﺪار ﻻﻳﻲ‬
‫ﮔﺬاري، ﻣﻘﺪار ﻳﺎ ‪auto‬‬

‫‪o‬‬
‫‪ :Outline‬ﻣﻴﺎﻧﺒﺮي ﺑﺮاي ﺗﻤﺎم ﺗﻨﻈﻴﻤﺎت ﺧﻂ ﺣﺎﺷﻴﻪ، ﺑﻪ ﺗﺮﺗﻴﺐ رﻧﮓ، ﻧﻮع و ﻋﺮض‬

‫‪Outline-coloro‬‬
‫‪ :O tli‬رﻧﮓ ﺧﻂ ﺣﺎﺷﻴﻪ ﺑﻪ ‪RGB‬‬ ‫‪l‬‬

‫,‪none, dotted‬‬ ‫‪ :Outline-styleo‬ﻧﻮع ﺧﻂ ﺣﺎﺷﻴﻪ ﻳﻚ ﺷﻲء، اﻧﻮع ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از‬
‫‪dashed, solid , double , groove, ridge, inset, outset‬‬
‫‪ :Outline-width‬ﻗﻄﻮري ﺧﻂ ﺣﺎﺷﻴﻪ، ﻣﻘﺪار ﻋﺪدي ﻳﺎ ﻳﻜﻲ از ﻣﻘﺎدﻳﺮ ,‪thin, thick‬‬
‫ﺮ‬ ‫ﻲ ز‬ ‫ي‬ ‫ر‬ ‫ﻮري‬ ‫‪o‬‬
‫‪medium‬‬

‫‪ :Overflow‬در ﺻﻮرﺗﻲ ﻛﻪ ﻣﺤﺘﻮﻳﺎت ﻳﻚ ﺑﺮﭼﺴﺐ در آن ﺟﺎي ﻧﮕﻴﺮﻧﺪ، اﻳﻦ ﻣﺸﺨﺼﻪ ﻣﻌﻴﻦ ﻣﻲ‬ ‫‪o‬‬
‫,‪Visible, Hidden, Auto‬‬
‫ﺳﺎزد ﻛﻪ ﭼﻪ اﺗﻔﺎﻗﻲ ﺑﻴﺎﻓﺘﺪ. ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ ااز ‪Visible Hidden Auto Scroll‬‬
‫ﺎ ﺎﺗ‬ ‫ﻘﺎ‬ ‫اﺗﻔﺎﻗ ﺎﻓ‬ ‫ﺎ ﻛ‬

‫‪ :Position‬ﻧﺤﻮه ﻗﺮارﮔﻴﺮي ﺑﺮﭼﺴﺐ ﻧﺴﺒﺖ ﺑﻪ ﺳﻨﺪ، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از ,‪Static, Relative‬‬ ‫‪o‬‬
‫‪Absolute, Fixed‬‬
‫‪ :Vertical-Align‬ﻧﺤﻮه ﻗﺮارﮔﻴﺮي ﻋﻤﻮدي ﻳﻚ ﺑﺮﭼﺴﺐ در داﺧﻞ ﺑﺮﭼﺴﺐ ﭘﺪر ﺧﻮد را ﻣﺸﺨﺺ‬ ‫‪o‬‬
‫ﻣﻲ ﻛﻨﺪ. ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از ,‪baseline, sub, super, top, text-top, middle‬‬
‫‪ bottom, text-bottom‬و ﻳﺎ ﻣﻘﺪار ﻋﺪدي‬
‫ر‬

‫‪ :Z-Index‬اوﻟﻮﻳﺖ ﻗﺮارﮔﻴﺮي در ﺑﻌﺪ ﺳﻮم در ﺻﻔﺤﻪ )ﻳﻌﻨﻲ ﺟﻠﻮ ﭘﺸﺖ دﻳﮕﺮ ﺑﺮﭼﺴﺐ ﻫﺎ(. ‪ Auto‬ﻳﺎ‬ ‫‪o‬‬
‫ﻳﻚ ﻋﺪد‬

‫‪ :Border-Collapse‬ﻣﻌﻴﻦ ﻣﻲ ﺳﺎزد ﻛﻪ ﺣﻮاﺷﻲ ﺟﺪاول ﺟﺪا ﺑﺎﺷﻨﺪ و ﻳﺎ ﻳﻚ ﻣﺠﻤﻮﻋﻪ ﺧﻂ ﺑﻬﻢ‬ ‫‪o‬‬
‫ﭘﻴﻮﺳﺘﻪ ﺑﺎﺷﻨﺪ. ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ‪Separate , Collapse‬‬
‫ﺎ‬ ‫ﻘﺎ‬ ‫ﺎﺷ‬

‫‪o‬‬
‫‪ :Border-Spacing‬ﻓﺎﺻﻠﻪ ﻣﻴﺎن دو ﺣﺎﺷﻴﻪ ﺟﺪول، ﺗﻨﻬﺎ در ﺻﻮرﺗﻲ ﻛﻪ ‪ Seperate‬ﺑﺎﺷﺪ.‬

‫‪ :Empty-Cellsٍo‬ﻣﺸﺨﺺ ﻣﻲ ﻛﻨﺪ ﻛﻪ ﺳﻠﻮل ﻫﺎي ﺧﺎﻟﻲ در ﻣﺪل ‪ Seperate‬ﻧﻤﺎﻳﺶ داده ﺷﻮﻧﺪ و‬
‫ﻳﺎ ﺧﻴﺮ. ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ‪Show/Hide‬‬

‫‪ :Table Layout‬اﻟﮕﻮرﻳﺘﻢ ﻧﺤﻮه ﻧﻤﺎﻳﺶ ﺳﻠﻮﻟﻬﺎي ﻳﻚ ﺟﺪول، ‪Auto/Fixed‬‬ ‫‪o‬‬

‫‪ :Color‬رﻧﮓ ﻳﻚ ﻣﺘﻦ را ﻣﺸﺨﺺ ﻣﻲ ﺳﺎزد، ‪RGB‬‬ ‫‪o‬‬
‫‪ :Di ti o‬ﺟﻬﺖ ﻣﺘﻦ )و ﻣﺤﺘﻮﻳﺎت(ﻳﻚ ﺑﺮﭼﺴﺐ را ﻣﺸﺨﺺ ﻣﻲ ﺳﺎزد، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ‪LTR/RTL‬‬
‫‪Direction‬‬

‫‪ :Text-Aligno‬ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ‪Left, Right, Center, Justify‬‬

‫‪ :Text-Decorationo‬اﻓﺰودن اﻓﻜﺘﻲ ﺑﻪ ﻣﺘﻦ، ﻣﻘﺎدﻳﺮ ﻣﺠﺎز ﻋﺒﺎرﺗﻨﺪ از ,‪none, underline‬‬
‫‪overline, line-through, blink‬‬
‫,‬ ‫, ‪g‬‬
‫‪o‬‬
‫‪ :Text-Indent‬ﺗﻮ رﻓﺘﮕﻲ اوﻟﻴﻦ ﺧﻂ ﻳﻚ ﻣﺘﻦ. ﻣﻘﺪار ﻋﺪدي‬

‫‪ :Word Spacingo‬ﻓﺎﺻﻠﻪ ﻣﻴﺎن ﻟﻟﻐﺎت ﻚ ﻣﺘﻦ، ‪ normal‬ﺎ ﻣﻘﺪار ﻋﺪدي‬
‫ﻳﺎ ﻘ ا‬ ‫‪ Word-Spacing‬ﻓﺎ ﻠ ﺎ ﺎ ﻳﻚ‬

‫‪ :Letter-Spacingo‬ﻓﺎﺻﻠﻪ ﻣﻴﺎن ﺣﺮوف ﻳﻚ ﻣﺘﻦ، ‪ normal‬ﻳﺎ ﻣﻘﺪار ﻋﺪدي‬

‫ﺗﺴﻠﻂ ﻛﺎﻣﻞ ﺑﺮ ‪CSS‬‬

‫در ‪ CSS‬رﻧﮕﻬﺎ را ﺑﻪ دو ﺷﻴﻮه ﻣﻲ ﺗﻮان ﻣﺸﺨﺺ ﻛﺮد:‬ ‫‪o‬‬
‫ﺗﻌﻴﻴﻦ ﻣﻘﺪار 42 ﺑﻴﺘﻲ ‪ RGB‬آ ﺎ‬
‫آﻧﻬﺎ‬ ‫ا 4‬ ‫‪o‬‬
‫‪o‬اﺳﺘﻔﺎده از ﻧﺎم رﻧﮓ‬

‫در روش اول 61 ﻣﻴﻠﻴﻮن رﻧﮓ ﻣﺨﺘﻠﻒ ﺑﺮاي اﻧﺘﺨﺎب وﺟﻮد دارﻧﺪ، اﻣﺎ در روش دوم ﺣﺪود 002 رﻧﮓ‬ ‫‪o‬‬
‫ﺑﺎ ﻧﺎم ﻫﺎي ﻣﺨﺘﻠﻒ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻫﺴﺘﻨﺪ.‬

‫‪o‬‬
‫ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن رﻧﮓ ﺑﺎ ﻧﺎم آن، ﻛﺎﻓﻴﺴﺖ ﻧﺎم رﻧﮓ را ﺑﻨﻮﻳﺴﻴﺪ: ‪Cyan, Purple‬‬

‫‪o‬ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن رﻧﮓ ‪ ،RGB‬ﭘﺲ از ﻗﺮار دادن ﻋﻼﻣﺖ # ﺑﻪ ﺗﺮﺗﻴﺐ ﻣﻘﺪار ‪ R‬و ‪ G‬و ‪ B‬را در‬
‫ﻣﺒﻨﺎي 61 وارد ﻣﻲ ﻛﻨﻴﻢ: 00‪#FFFFFF , #00FF‬‬

‫ﻫﻤﭽﻨﻴﻦ ﻣﻲ ﺗﻮان ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن ﮓ ‪ RGB‬ﺑﻪ ﺻﻮرت روﺑﺮو ﻋﻤﻞ ﻛ‬
‫ﻞ ﻛﺮد:‬ ‫رﻧﮓ‬ ‫ﻛ‬ ‫ا‬ ‫ا‬ ‫‪o‬‬
‫)01,552,001(‪ RGB‬و ﻳﺎ)%001,%02,%07(‪RGB‬‬

‫ﺗﻤﺎﻣﻲ ﻣﻘﺎدﻳﺮ اﻧﺪازه اي در ‪ CSS‬واﺣﺪ ﻫﺎي ﻣﺘﻔﺎوﺗﻲ را ﻣﻲ ﭘﺬﻳﺮﻧﺪ. ﭘﺎﻳﻪ اي ﺗﺮﻳﻦ واﺣﺪ ﻫﻤﺎن‬ ‫‪o‬‬
‫‪ Pixel‬ااﺳﺖ ﻛﻪ ﺎ ‪ px‬در اﻧﺘﻬﺎي ﻣﻘﺪار ﻣﺸﺨﺺ ﻣﻲ ﮔﺮدد. واﺣﺪﻫﺎي دﻳﮕﺮ ﻋﺒﺎرﺗﻨﺪ ااز:‬
‫ﮕ ﺎﺗ‬ ‫ا ﺎ‬ ‫ﮔ‬ ‫اﻧ ﺎ ﻘ ا ﺸﺨ‬ ‫ﻛ ﺑﺎ‬
‫%: درﺻﺪ!‬ ‫‪o‬‬
‫‪ :Ino‬اﻳﻨﭻ‬

‫‪ :Cmo‬ﺳﺎﻧﺘﻴﻤﺘﺮ‬

‫‪ :Mmo‬ﻣﻴﻠﻴﻤﺘﺮ‬

‫‪ :Emo‬اﻧﺪازه ﻓﻮﻧﺖ‬

‫‪ 1/72 :Pto‬اﻳﻨﺘﭻ‬

‫‪pt 12 :Pco‬‬
‫‪p‬‬

‫‪ :Pxo‬ﻳﻚ ﻧﻘﻄﻪ‬

‫ﺷﻔﺎﻓﻴﺖ )‪ (Transparency‬ﻳﻚ ﻋﻤﻠﻴﺎت ﭘﻴﭽﻴﺪه ﺑﺮاي ﺳﻴﺴﺘﻢ ﻫﺎﻳﻴﺴﺖ ﻛﻪ ﻛﺎرت ﮔﺮاﻓﻴﻜﻲ‬ ‫‪o‬‬
‫ﻗﺪرﺗﻤﻨﺪي ﻧﺪا د و ﻣﻮﺗﻮر ﮔﺮاﻓﻴﻜﻲ ﻛﺎوﺷﮕﺮ ﺑﺮاي ﭘﻴﺎده ﻛﺮدن آن ﺸﺪت زﻳﺮ ﺑﺎر ﻗﺮار ﻣﻲ ﮔ د.‬
‫ﮔﻴﺮد‬ ‫ﺗ ﮔ اﻓ ﻜ ﻛﺎ ﺷﮕ ا ﺎد ﻛ د آ ﺑﺸﺪت ز ﺎ ﻗ ا‬ ‫ﻗﺪ ﺗ ﻨﺪ ﻧﺪارد‬

‫ﺑﺎ اﺳﺘﻔﺎده از ﺷﻔﺎﻓﻴﺖ ﻣﻲ ﺗﻮان ﺟﺬاﺑﻴﺖ ﺑﺼﺮي را ﺑﺴﻴﺎر ﺑﺎﻻﺗﺮ ﺑﺮد، اﻣﺎ ﺑﺎﻳﺪ دﻗﺖ داﺷﺖ ﻛﻪ ﻛﻨﺪي‬ ‫‪o‬‬
‫ﭘﺮدازش ﺗﺼﻮﻳﺮي ﺳﺎﻳﺖ ﺑﺮاي ﻛﺎرﺑﺮ اﻳﺠﺎد ﻣﺰاﺣﻤﺖ ﻧﻜﻨﺪ.‬

‫ﻣﺘﺎﺳﻔﺎﻧﻪ ﻛﺎوﺷﮕﺮ ‪ IE‬ﺑﺮاي ﺷﻔﺎﻓﻴﺖ از دﺳﺘﻮرات ﺧﻮد اﺳﺘﻔﺎده ﻣﻲ ﻛﻨﺪ ﻛﻪ اﺳﺘﺎﻧﺪارد ﻧﻴﺴﺘﻨﺪ.‬‫‪o‬‬
‫‪ o‬ﺑﺮاي اﻳﺠﺎد ﺷﻔﺎﻓﻴﺖ در ﻛﺎوﺷﮕﺮﻫﺎي اﺳﺘﺎدارد، از 5. : ‪ Opacity‬اﺳﺘﻔﺎده ﻣﻲ ﺷﻮد.‬

‫‪ o‬اي ا ﺠﺎد ﺷﻔﺎﻓ ﺖ در ‪ IE‬از )05=‪ filter:alpha(opacity‬ا ﺘﻔﺎده ﻣﻲ ﺷ د.‬
‫اﺳﺘﻔﺎده ﺷﻮد‬ ‫ﺑﺮاي اﻳﺠﺎد ﺷﻔﺎﻓﻴﺖ د‬
‫‪o‬ﺑﺮاي اﻳﻨﻜﻪ ﺷﻔﺎﻓﻴﺖ در ﺗﻤﺎﻣﻲ ﻛﺎوﺷﮕﺮﻫﺎ درﺳﺖ ﻧﻤﺎﻳﺶ داده ﺷﻮد ﻻزم اﺳﺖ ﻫﺮدو دﺳﺘﻮر ﺑﺎﻻ ﺑﻜﺎر‬
‫روﻧﺪ.‬

‫ﻛﺎوﺷﮕﺮﻫﺎﻳﻲ ﻣﺎﻧﻨﺪ ‪ Firefox‬دﺳﺘﻮرات ‪ CSS‬وﻳﮋه اي دارﻧﺪ )اﻟﺒﺘﻪ ‪ IE‬ﻧﻴﺰ دﺳﺘﻮرات ﻣﺨﺼﻮص ﺧﻮد‬ ‫‪o‬‬
‫راا دا ا ﺖ( .‬
‫داراﺳﺖ‬

‫ﻋﺒﺎرت ‪ –moz-border-radius‬ﻣﻲ ﺗﻮاﻧﺪ ﮔﻮﺷﻪ ﻫﺎي ﻣﺴﺘﻄﻴﻞ ﻫﺎ را از ﺗﻴﺰي درآورده و آﻧﻬﺎ را‬ ‫‪o‬‬
‫ﻧﺮم ﻛﻨﺪ: ;‪-moz-border-radius: 5px‬‬

‫اﺳﺘﻔﺎده از اﻳﻦ ﻋﺒﺎرت و راه ﺣﻞ ﻫﺎي ﻣﺸﺎﺑﻪ ﭘﻴﺸﻨﻬﺎد ﻧﻤﻲ ﺷﻮد زﻳﺮا اﻳﻦ ﻧﻤﺎ ﺗﻨﻬﺎ در ‪ Firefox‬ﻗﺎﺑﻞ‬ ‫‪o‬‬
‫ﻣﺸﺎﻫﺪه ﺧﻮاﻫﺪ ﺑﻮد.‬

‫‪o‬‬
‫‪ CSS‬ﺗﻮاﻧﺎﻳﻲ آﻧﺮا داراﺳﺖ ﻛﻪ ﺑﺮاي رﺳﺎﻧﻪ ﻫﺎي ﺧﺎص ﺗﻔﺎوت ﻛﻨﺪ! ﺑﺮاي ﻣﺜﺎل ﻣﻲ ﺗﻮاﻧﻴﺪ ‪ CSS‬ﻳﻚ‬
‫ﺎ ﺖ راا ﻃﻮري ﺗ ﻒ ﻛﻨ ﺪ ﻛﻪ ﻧﮓ ﻧ ﺷﺘﻪ ﻫﺎي آن ﻗ ﺰ ﺎﺷﺪ وﻟﻲ ﻫﻨﮕﺎم ﻨﺖ ﻣﺸﻜﻲ ﺷ د.‬
‫ﺗﻌﺮﻳﻒ ﻛﻨﻴﺪ رﻧﮓ ﻧﻮﺷﺘﻪ ﺎ آ ﻗﺮﻣﺰ ﺑﺎﺷﺪ ﻟ ﻨﮕﺎ ﭘﺮﻳﻨﺖ ﺸﻜ ﺷﻮد‬ ‫ﺳﺎﻳﺖ ﻃ‬

‫ﺑﺮاي ﻣﺸﺨﺺ ﻛﺮدن اﻳﻨﻜﻪ ‪ CSS‬را ﺑﺮاي ﭼﻪ رﺳﺎﻧﻪ اي ﻣﻲ ﻧﻮﻳﺴﻴﻢ، از ‪ @media‬اﺳﺘﻔﺎده ﻣﻲ‬ ‫‪o‬‬
‫ﻛﻨﻴﻢ:‬

‫‪@media screen‬‬

‫};0000‪* { color:#ff‬‬

‫‪@media print‬‬

‫};000000#:‪* { color‬‬
‫رﺳﺎﻧﻪ ﻫﺎي ﻣﻌﻤﻮل ﻋﺒﺎرﺗﻨﺪ از: ,‪all, braille, handheld, print, projection, screen, tv‬‬
‫…‬

‫‪ CSS‬را ﻗﻮرت ﺑﺪه!‬

‫ﻓﺎﻳﻞ ‪ HTML‬اي ﻛﻪ در ﺗﻤﺮﻳﻨﺎت ‪ HTML‬ﺳﺎﺧﺘﻪ اﻳﺪ و ﺗﻤﺎﻣﻲ ﺑﺮﭼﺴﺐ ﻫﺎ را داراﺳﺖ، ﺑﺎ اﺳﺘﻔﺎده از‬ ‫‪o‬‬
‫ﺗﻤﺎﻣﻲ ﺑﺮﭼﺴﺐ ﻫﺎي ‪ CSS‬ﻗﺎﻟﺐ ﺑﻨﺪي ﻛﻨﻴﺪ. ﺳﻌﻲ ﻛﻨﻴﺪ زﻳﺒﺎﻳﻲ ﻛﺎﻓﻲ و ﻗﺎﻟﺐ ﺑﻨﺪي ﻣﻨﺎﺳﺐ ﺑﺮاي ﺳﻨﺪ‬
‫ا‬ ‫ﺎ‬ ‫ﻗﺎﻟ‬ ‫ﺎ ﻛﺎﻓ‬ ‫ﻛ‬ ‫ﻛ‬ ‫ﻗﺎﻟ‬ ‫ﺎ‬ ‫ﺗ ﺎ‬
‫اﺗﻔﺎق ﺑﻴﺎﻓﺘﺪ! در داﺧﻞ ﺳﻨﺪ ﺗﻨﻬﺎ ﻣﻲ ﺗﻮاﻧﻴﺪ ﺑﺮﭼﺴﺒﻬﺎي ‪ DIV‬و ‪ SPAN‬اﺿﺎﻓﻪ ﻛﻨﻴﺪ و ﻳﺎ ﺑﻪ ﺑﺮﭼﺴﺐ ﻫﺎي‬
‫ﻣﻮﺟﻮد ‪ ID , CLASS‬ﺑﻴﺎﻓﺰاﻳﻴﺪ.‬

‫ﺑﺪون اﺳﺘﻔﺎده از ﺟﺪاول و ﺗﻨﻬﺎ ﺑﺎ اﺳﺘﻔﺎده از ‪ CSS‬ﻳﻚ ﺻﻔﺤﻪ ﺳﻪ ﺳﺘﻮﻧﻲ )ﻣﺎﻧﻨﺪ ‪ (SBCE.ir‬ﺑﺴﺎزﻳﺪ.‬ ‫‪o‬‬
‫‪o‬آﻳﺎ ﻣﻲ ﺗﻮان ﺑﺎ اﺳﺘﻔﺎده از ‪ CSS‬ﻣﻨﻮ ﺳﺎﺧﺖ؟ اﮔﺮ ﺑﻠﻪ راه ﺣﻞ را ﻣﻌﻴﻦ ﻛﻨﻴﺪ.‬

‫‪o‬ﻣﺰاﻳﺎ و ﻣﻌﺎﻳﺐ ﻧﻮﺷﺘﻦ ‪ CSS‬در ﻳﻚ ﻓﺎﻳﻞ ﺟﺪاﮔﺎﻧﻪ را ﺑﺮﺷﻤﺎرﻳﺪ.‬

‫‪o‬ﺑﺎ اﺳﺘﻔﺎده از ‪ CSS‬ﻳﻚ ‪ taskbar‬ﺑﺮاي ﻳﻚ ﺻﻔﺤﻪ ﺑﺴﺎزﻳﺪ ﻛﻪ ﻫﻤﻮاره در ﻗﺴﻤﺖ ﭘﺎﻳﻴﻦ ﭘﻨﺠﺮه‬
‫ﻛﺎوﺷﮕﺮ )ﻧﻪ ﻟ ﺎ ااﻧﺘﻬﺎي ﺳﻨﺪ( ﺑﺎﺷﺪ.‬
‫ﺎﺷ‬ ‫ﻟﺰوﻣﺎ ﺎ‬ ‫ﻛﺎ ﺷﮕ‬

CSS 2 Quick-start Tutorial in Persian

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

CSS 2 Quick-start Tutorial in Persian