# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) > آموزش: آموزش CSS

## mohsen_zelzela00

با سلام خدمت دوستان و اساتید محترم
در این تاپیک قصد دارم آموزش Css را که شامل 12  جلسه هست رو قرار بدم . من فایل های آموزشی رو آماده کردم ولی سعی می کنم که روزانه 1 پست قرار دهم.

و در آخر امیدوارم اساتید بزرگوار اشکالات این جزوه Css رو به صورت پیام خصوصی برای من بفرستند که من اونها رو در اینجا تصیح کنم . 
اگر دوستان استقبال کردند آموزش CSS3 رو هم قرار میدم.
سر فصل ها عبارتند از

CSS Syntaxروش های مختلف نوشتن کد CSSچگونه CSS را به صفحه لینک دهیمCSS Selector
سرفصل ها به مرور زمان کامل می شوند
 با تشکر

----------


## mohsen_zelzela00

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

{
Property:value ;
Property:value ;
    }
مثال :
P { color:red;   font-size:1.5em;  }
به سه روش می‌توان کد css نوشت :
External : توی یک فایل خارجی کد css را می‌نویسیم و سپس به html لینک می‌دهیم . در این روش همه صفحات می‌توانند از همان کدها استفاده کنند .
Embedded : نوشتن کدهای css به صورت Internal یعنی کدهای css را در قسمت head هر صفحه بنویسیم ؛ در این روش فقط همان صفحه می‌تواند از آن کد استفاده کند . به صورت زیر :
<style   type=” text/css”>
وسپس کدهای css را می‌نویسیم .
Inline : style را توی خود ِ تگ تعریف می‌کنیم . مثال :
<h1 style="color:red ; font-size:15px">Introduction</h1>

 لینک دادن یک فایل css به صفحه html :
<link  href="class.css"  rel="stylesheet"  type="text/css"/>
روش دوم برای لینک دادن :
<style type="text/css">
@import   url("stylesheet.css");</style>
Style Sheets For Print (And Other Media) :

all : برای تمام دستگاه‌ها .
Aural : برای دستگاه‌هایی که فقط ریدر هستند .
Braille : برای پرینترهای braille .
Handheld : برای دستگاه‌های موبایل و pda .
Print : برای پرینت گرفتن .
Projection : برای زمانی که از پروژکتور استفاده می‌کنیم .
Screen : برای زمانی که از lcd استفاده می‌کنیم .
Tv : برای تلویزیون .

مثال : 
<link href="screen.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>

----------


## ravand

ببخشيد داداش .
الان اگه از اين روش مثلا اسفاده كني چه اتفاقي مي افته؟


```
<link href="screen.css" rel="stylesheet" type="text/css" media="screen"/>
```

يعني قالب شما با نمايشگر lcd سازگار ميشه؟ :متفکر:

----------


## mohsen_zelzela00

> ببخشيد داداش .
> الان اگه از اين روش مثلا اسفاده كني چه اتفاقي مي افته؟
> 
> 
> ```
> <link href="screen.css" rel="stylesheet" type="text/css" media="screen"/>
> ```
> 
> يعني قالب شما با نمايشگر lcd سازگار ميشه؟


نه دوست عزیز این برای زمانی هست که ما بخواهیم صفحه رو بر روی صفحه نمایش(مانیتور،LCD و غیره نمایش دهیم)

----------


## mohsen_zelzela00

بخش دوم در مورد Selectorهای CSS هست که به جرات می تونم بگم مهمترین بحث CSS است
1. tag  selectors :
اولین سلکتور است و روی تمام تگ‌های مشابه اجرا می‌شود . مثال :
h2
{
    font-size:18px;
    color:blue;
    font-family:Times New Roman;
}
روی تمام تگ‌های h2 اجرا می‌شود .
2. class  selectors :
برای تخصیص یک ویژگی به چند تگ استفاده می‌شود ؛ با علامت  .  مشخص می‌شود .
.special
{
    font-size:10px;
    color:blue;
    font-family:Times New Roman;
}
کد html :
<h2 class="special">this h2 tag </h2>
<h2>this h2 tag</h2>
<p class="special">this p tag</p>
<p>this p tag</p>
نام یک کلاس می‌تواند هر چیزی باشد , فقط نمی‌تواند با عدد شروع شود .
نام کلاس به حروف کوچک و بزرگ حساس است
3. ID  selectors :
زمانی که می‌خواهیم یک ویژگی را فقط به یک تگ اختصاص بدهیم از این سلکتور استفاده می‌کنیم . برای این سلکتور از علامت # استفاده می‌کنیم .
مثال : کد html :
<div id="banner">This ID Selector</div>

کد css :
#banner
{
    background:#cc0000;
    height:300px;
    width:720px;
}
نمی‌توان یک ID را به چند تگ اختصاص داد .

----------


## cyrusthegreat

دوست عزیز سلام

ببخشید، سلکتور های شما به همین سه تا ختم می شه یا ادامه هم داره؟؟؟؟

----------


## mohsen_zelzela00

> دوست عزیز سلام
> 
> ببخشید، سلکتور های شما به همین سه تا ختم می شه یا ادامه هم داره؟؟؟؟


نه دوست عزیز ادامه دارد.

----------


## mohsen_zelzela00

What  Is a <div>?
تگی است که هر تگی را می‌توان درون آن قرار داد و برای طراحی ساختار صفحه به درد می‌خورد . div زمانی معنا پیدا می‌کند که برای آن کد css تعریف شده باشد . اختصاص یک کد css به چند تگ : از گروه‌های سلکتور استفاده می‌کنیم . مثال : کد css :

h1 , h2 ,h3 ,h4 , h5 , h6
   {
      Color:#F1CD33 ;
      }
کد html :
<h1>head1</h1>
<h2>head2</h2>
<h3>head3</h3>
<h4>head4</h4>
<h5>head5</h5>
<h6>head6</h6>
می‌توان حتی کلاس یا آی‌دی را در گروه ادغام کرد  مثال :

h1 , p , .copyright , #banner
{
            color:#f1cd33;
}

Universal selector :
این کد css روی تمام تگ‌های صفحه اعمال می‌شود . با علامت * مشخص می‌شود . مثال :

*
{
            font-weight:bold;
}

The Html Family Tree :
مثال برای تگ‌های پدر و فرزندی :  کد html :
<h1>
<strong>Mohsen is web developer</strong>
</h1>
<p>
A paragraph of <strong>important</strong> text.
</p>
کد css :
h1  strong
{
            color:red;
}
این یعنی تگ ‌strong که پدرش h1 است . پدر و فرزندی را با یک space بینشان نشان می‌دهند . مثال برای درخت : کد html :
<h1>h1</h1>
<p>abc <strong><a href="http://www.google.com/">google</a></strong> def</p>
<h2>h2</h2>
<ul>
<li><a href="http://www.google.com/">google</a></li>
<li><a href="http://www.google.com/">google</a></li>
<li><a href="http://www.google.com/">google</a></li>
</ul>
کد css :
li a
{
            font-family:Arial;
}
به جای اینکه بنویسیم li a می‌توانیم بنویسیم :

Ul  li a 
Body  li a
Html  li  a
Html  body  ul  li a
  مثال : کد html :

<div id="content">
<h1>Heading here</h1>
<p class="intro">Lorem ipsum dolor sit amet .</p>
<p>Lorem ipsum dolor <a href="#">sit</a> amet .</p>
</div>
<div id="nav">
<ul>
<li><a href="#" class="intro">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</div>
<div id="footer">
Lorem ipsum dolor <a href="#">sit</a> amet .</div>
  کد css اول :
#nav ul li a
{
            color:green;
}
با اجرای این کد css کلمات ِ item1,item2.item3 سبز رنگ می‌شوند . کد css دوم :
div .intro a
{
            color:red;
}
تغییری ایجاد نمی‌کند ؛ این کد css یعنی تگ a ای که فرزند ِ یک تگ دیگر با کلاس intro است و پدر آن تگ div است و ما همچین تگی نداریم . کد css سوم :
div.intro a
{
            color:red;
}
تغییری ایجاد نمی‌شود . فرق کد دوم و سوم : کد دوم یعنی تگ a ای که فرزند ِ یک تگ دیگر با کلاس intro است و پدر آن تگ div است ؛ اما کد سوم یعنی تگ div که کلاسشintro  باشد و درون این تگ یک تگa  باشد . کد css چهارم :
.intro  a
{
            color:yellow;
}
این کد یعنی تگ a ای که کلاس پدرش intro است . که باز هم تغییری ایجاد نمی‌کند چون همچین تگی وجود دارد .

   #foo  td  ,  th
{
      Color:red;
}
این کد معادل است با :

#foo  td
{
            color:red;
}
th
{
            color:red;
}

Attribute  selectors :
مثال :
a[href="www.yahoo.com"]
{
            color:red;
            font-weight:bold;
}
این یعنی تمام لینک‌هایی که به سایت یاهو داده شده است رنگ قرمز داشته باشند و bold باشند . Textbox :

   <input  type="text"  name="firstname"/>
مثال :
<p>First name :
<input type="text" name="firstname"/>
</p>
<p>Last name :
<input type="text" name="lastname"/>
</p>
دو ویژگی برای textbox : با استفاده از maxlength مشخص می‌کنیم که کاربر چند کاراکتر می‌تواند وارد کند . با استفاده ازsize مشخص می‌کنیم که چند کاراکتر به کاربر نشان داده شود . مثال :

<p>First name :
<input type="text" name="firstname" size="5" maxlength="5"/>
</p>
<p>Last name :
<input type="text" name="lastname"/></p>

Password :
مثال :

<p>password :
<input type="password" name="password"/></p>

Check  boxes  and  radio  buttons :
Check boxes : Choose more than one option
Radio buttons : Choose only one option
مثال :
<p>
what are some of your favorite food?</p>
<input type="checkbox" name="food" value="icecream" checked="checked"/>Ice cream<br/>
<input type="checkbox" name="food" value="eggsham"/>Green Eggs and Ham<br/>
<input type="checkbox" name="food" value="pizza"/>Pizza<br/>
<p>
What is your gender?</p>
<input type="radio" name="gender" value="male" checked="checked"/>Male<br/>
<input type="radio" name="gender" value="female"/>Female<br/>
 
Drop-down  lists :
برای درست کردن drop-down از تگ select استفاده می‌کنیم و برای درست کردن list از option استفاده می‌کنیم .  اگر size را برابر یک قرار دهیم drop-down list و اگر بیشتر از یک قرار دهیم list box درست می‌شود . اگر برای سایز مقدار قرار ندهیم به صورت defult برابر یک می‌باشد . مثال :
<p>What is your favorite food?</p>
<select name="food">
<option value="pizza">pizza</option>
<option value="icecream">Ice cream</option>
<option value="eggsham">Green Egg and Ham</option>
</select>
اگر size را برابر 2 یا 3 قرار دهیم تبدیل به listbox می‌شود . Multi-line  text  boxes :
کاربرد : برای گرفتن آدرس ، صورت جلسه ، کامنت و ...

<textarea    rows=”10”    cols=”40”    name=”comments” >please include any comments  here .</textarea>

----------


## ravand

> نه دوست عزیز این برای زمانی هست که ما بخواهیم صفحه رو بر روی صفحه نمایش(مانیتور،LCD و غیره نمایش دهیم)


خوب براي چي ميخوايم در نمايشگر lcd نمايش بديم؟ دليلش چيه؟

----------


## mohsen_zelzela00

> خوب براي چي ميخوايم در نمايشگر lcd نمايش بديم؟ دليلش چيه؟


منظور من از LCD همان مانیتور های شخصی(استفاده از کامپیوتر شخصی و لپ تاپ و .....) است

----------


## ravand

> منظور من از LCD همان مانیتور های شخصی(استفاده از کامپیوتر شخصی و لپ تاپ و .....) است


ببخشيد ولي حرف شما قانع كننده نبود!
شما اينجا گفتيد :



> Screen : برای زمانی که از lcd استفاده می‌کنیم .


خب چرا به جاي lcd نگفتن مثلا computer

----------


## mohsen_zelzela00

دوست عزیز به عکس زیر توجه کنید
Capture5.JPG

----------


## cyrusthegreat

دوست عزیز ravand 

نگاه کنید، این Media Type های CSS برای فهموندن به مرورگر هست که این استایل برای چه نوع کاربری استفاده بشه. یعنی با توجه به نوع کاربری این استایل می بایست استفاده بشه. بطور مثال handheld برای وسایلی مثل موبایل با اسکرین کوچک تعریف می شه و یا print برای تعیین استایلی هست که موقع پرینت با پرینتر می بایست استفاده بشه و در مورد screen، برای کامپیوتر های شخصی و کلا هرچیزی که در اون از مانیتور استفاده می شه تعریف می شه. حالا می خواد CRT باشه، LCD باشه، LED باشه و هر نوع دیگری از مانیتور.

----------


## mohsen_zelzela00

Submit  and reset :

دو نوع button داریم : reset و submit :

Submit برای فرستادن اطلاعات به سمت سرور است .

Reset برای پاک کردن اطلاعات است .

تمام تگ‌های input باید حتما درون تگ form قرار بگیرند در غیر این صورت داده‌ها  به سمت سرور فرستاده نمی‌شود .



Submit :

<input    type=”submit”    value=”submit”  />

مثال :

<form>

<input type="text"/>

<input type="reset" value="clear"/>

<select>

<option>select</option>

<option>C#‎</option>

<option>VB.net</option>

</select>

</form>

ادامه سلکتورها :

Attribute  selectors :

اگر بخواهیم به تمام textbox های موجود یک کد css تعلق بگیرد : مثلا :

input[type="text"]

{

            color:red;

            font-weight:bold;

}

اگر بخواهیم به تمام لینک‌های خارجی یک کدcss تعلق بگیرد : مثال :

کد html :

<a href="HTMLPage2.html">Internal Link</a>

<a href="http://www.yahoo.com">External Link</a>



کد css :

a[href^="http:"]

{

            color:green;

}

Href^=”http:” یعنی لینک‌هایی که با http: شروع می‌شوند ؛ که همان لینک‌های خارجی است .





گاهی میخواهیم تگ‌هایی را انتخاب کنیم که با یک کلمه یا حرف مشخص پایان می یابند ؛ مثلا میخواهیم برای همه فایل‌های pdf یک کد css تعریف کنیم ؛ از علامت $ استفاده می‌کنیم . مثال :

کد html :

<a href="HTMLPage2.html">Internal Link</a>

<a href="http://www.yahoo.com">External Link</a>

<a href="MSDN-MAG-0810.pdf">Download MAG MSDN</a>

کد css :

a[href$=".pdf"]

{

            color:green;

}

گاهی می خواهیم برای لینک‌هایی که حرف مشخصی درون ِ اسم ِ آنهاست یک کد css بنویسیم ؛ آنگاه از علامت * استفاده میکنیم . مثال :

کد html :

<a href="HTMLPage2.html">Internal Link</a>

<a href="http://www.yahoo.com">External Link</a>

<a href="MSDN-MAG-0810.pdf">Download MAG MSDN</a>

کد css :

a[href*="y"]

{

            color:green;

}



Advanced  Selectors :

Div p

{

Color : red ;

    }

در اینجا این کد css به تمام تگ‌های p که پدرشان ، پدربزرگشان ، جدشان و یا ... div باشد ؛ تعلق می گیرد. که بعضی حالات لازم داریم فقط تگ هایی که پدرشان تگ div است را نتخاب کنیم(پدر مستقیم یعنی پدر بزرگ و جد قبول نیست)

برای اینکه تگِ p‌ای انتخاب شود که فقط و فقط پدرش div باشد ؛ آن را به صورت زیر می‌نویسیم:

div>p

{

Color : red ;

     }

مثال : کد html :

<h2>Asp.net</h2>

<div>

<h2>C#‎.Net</h2>

</div>

کد css اول :

body h2

{

            color:red;

}

کد css دوم :

body>h2

{

            color:red;

}

اگر کد css اول اجرا شود ؛ هر دو عنوان یعنی Asp.Net  و C#‎.Net قرمزمی‌شوند اما اگرکد دوم اجرا شود فقط عنوان اول یعنی Asp.Net قرمزمی‌شود .

Adjacent Sibling :

تگ‌های خواهر و برادر : زمانی که پدر چند تگ یکی باشد ؛ آن تگ‌ها adjacent sibling محسوب می‌شوند و برای نشان دادن این رابطه از علامت + استفاده می‌شود . مثلا : p+em یعنی تگ ِ em‌ای که بلافاصله بعد از تگ ِ p آمده است .

مثال : کد html :

<h2>Heading</h2>

<p>C#‎.Net</p>

<p>Asp.Net</p>

کد css :

h2+p

{

            color:red;

}

C#‎.Net قرمز می‌شود .

IE5 و IE6 این سلکتور را ساپورت نمی‌کند .

کد css دوم برای همان کد html :

<h2>Heading</h2>

<div>

<p>C#‎</p>

</div>

تغییری ایجاد نمی‌شود ؛ چون هیچ p‌ای بعد از h2 وجود ندارد و div بین h2 و p واسط شده است .

کد css سوم :

<h2>Heading</h2>

dot net package

<p>C#‎</p>

<p>VB.Net</p>

<p>Asp.net</p>

پس از اجرا C#‎ قرمز می‌شود . یعنی متن واسط تاثیری ندارد .

Indirect Adjacent sibling :

مثال : کد html :

<div>

<h2>Heading</h2>

<p>the selector above matches this paragraph.</p>

<p>the selector above matches this paragraph.</p>

</div>

<p>the selector above does not match this paragraph.</p>

کد css :

h2~p

{

            color:red;

}

این کد css یعنی تمام pهایی که بعد از h2 آمده قرمز شوند . پس از اجرا پاراگراف اول و دوم قرمز می‌شوند اما پاراگراف سوم تغییری نمی‌کند .



Pseudo-Class and Pseudo-Elements :

کلاس‌ها و المان‌های کاذب :

کلاس‌های کاذب با علامت : شروع می‌شوند .

p:first-line

{

            color:red;

}

سطر اول پاراگراف قرمز می‌شود .

p:first-letter

{

            color:red;

}

حرف اول پاراگراف قرمز می‌شود .



گاهی می‌خواهیم قبل یا بعد از یک تگ , نوشته‌ای را به اضافه کنیم ؛ از after و before استفاده می‌کنیم .

p:before

{

            content:"HOT TIP!";

}

اگر run کنیم قبل از پاراگراف ، متن HOT  TIP!می‌آید . می توان به جای کلمه  before از after استفاده کرد که در آن صورت متن HOT  TIP! بعد از پاراگراف نشان داده خواهد شد .



Styles for Links :

هر لینک چهار STYLE دارد :

1 . link : حالت عادی یک لینک

a:link

{

Color: red ;

Font-size: 40px ;

     }

2 . visited : زمانی که از آن لینک بازدید کرده باشیم .

a:visited

{

Color: silver ;

Font-size: 40px ;  }

3 . Hover : زمانی که اشاره‌ گر موس را بر روی لینک می‌بریم .

a:hover

{

Border: 1px  solid  #800080;

Color: red ;

    }

Hover فقط برای لینک کاربرد ندارد ؛ می‌تواند روی هر تگی مثلا p یا div ویا ... اعمال شود . اما IE6 آن را فقط برای لینک ساپورت می‌کند .

4 . Active : لینک‌هایی که فعال باشند .

a:active

{

            border:1px solid #800080;

            color:red;

}



اگر بخواهیم همه آنها را در یک صفحه css بنویسیم بهتر است ترتیب زیر را رعایت کنیم :

a:link{ }

a:visited{ }

a:hover{ }

a:active{ }





Focus :

کاربرد : اگر اشاره گر روی textbox قرار گیرد ؛ رنگ ِ textbox عوض می‌شود و هر گاه که textbox راترک کند رنگش به حالت اولیه برمی‌گردد .

کد html :

<input type="text"/><br/>

<input type="password"/>

کد css :

input:focus

{

            background-color:#FFFFCC;

}

----------


## mohsen_zelzela00

دوستان اگر انتقاد یا پیشنهادی دارن می تونن به صورت پیام خصوصی برای بنده ارسال کنند
(چه از لحاظ بار علمی یا اینکه فن ارائه مطالب)

مرسی

----------


## sg.programmer

تشکر جالب بود
اگه زحمتی نیست بصورت یک مجموعه کرده و داخل یک فایل pdf قرار بدید تا از اون استفاده بشه

----------


## mohsen_zelzela00

> تشکر جالب بود
> اگه زحمتی نیست بصورت یک مجموعه کرده و داخل یک فایل pdf قرار بدید تا از اون استفاده بشه


دوست عزیز این آموزش در 10-11 جلسه هست اگه تمام جلسات تموم بشه به صورت یه فایل PDF قرارش میدم.

----------


## mohsen_zelzela00

:first-child
اولین فرزند ِ یک تگ را انتخاب می‌کند .
کد html :
<ul>
<li> Asp.Net </li>
<li> Vb.Net </li>
<li> C#‎‎ </li>
<li> Linq </li>
<li>Plinq </li>
<li> web desing </li>
</ul>
<ul>
<li> Html </li>
<li> Css </li>
<li> Javascript </li>
<li> JQuery </li>
</ul>


کد css اول :
li:first-child
{
    color:red;
}
بعد از run کردن اولین li هر کدام ازulها به رنگ قرمز نشان داده می‌شود .
کد css دوم :
ul:first-child
{
    color:red;
}
بعد از run کردن تمام ِ فرزندان ِ ul به رنگ قرمز درمی‌آیند .
کد html :

<ul>
<li> Asp.Net 
<ul>
<li>Ajax </li>
<li> JQuery </li>
</ul>
</li>
<li> Vb.Net </li>
<li> C#‎‎ </li>
<li> Linq </li>
<li> Plinq </li>
<li>web Desing </li>
</ul>
کد css :
li:first-child
{
    color:red;
}
تمام فرزندان درون ِ ul اول قرمزمی‌شوند .
Last-child :
کد html :
<div>
<h1> some header </h1>
<p> some Text </p>
</div>
<div>
<p> some Text </p>
<h1> some header </h1>
</div>
کد css :
div > p:last-child
{
    color:red;
}

empty :
 برای ایجاد فاصله به اندازه دلخواه :
تگی empty است که هیچ فرزندی , فاصله‌ای و یا کانتنتی نداشته باشد .
کد html :
<div></div>
کد css :
div:empty
{
    height:60px;
    width:100%;
    background-color:red;
}
:nth-child(N) :
به N به سه صورت می‌توان مقدار داد : 
Number : عدد
odd/even : زوج و فرد
an+b : به صورت فرمول
کد html :
<ul>
<li> Asp.Net </li>
<li>C#‎‎.Net </li>
<li>VB.Net </li>
<li> F#‎‎.Net </li>
<li> J#.Net </li>
<li> C++‎‎.Net </li>
<li> Linq </li>
<li> Plinq </li>
<li>JQuery </li>
</ul>
کد css اول :
li:nth-child(3)
{
    color:red;
 }
بعد از run کردن سومین li یعنی کلمه VB.Net قرمز می‌شود .
کد css دوم :
li:nth-child(odd)
{
    color:#f00;
}
تمام li های با اندیس فرد قرمز می‌شوند .
کد css سوم :
li:nth-child(even)
{
    color:#f00;
}
تمام li های با اندیس زوج قرمز می‌شوند .
کد css چهارم :
li:nth-child(3n+0)
{
    color:#f00;
}
Liهای با اندیس 3 و 6 و 9 را قرمز نشان می‌دهد .
کد css پنجم :
li:nth-child(-n+3)
{
    color:#f00;
}
Liهای با اندیس 1 و 2 و 3 قرمز می‌شوند .
:nth-last-child(N) :
از آخر می‌شمارد .
کد css ششم :
li:nth-last-child(2)
{
    color:#f00;
}
Li با اندیس 8 قرمز می‌شود .
کد css هفتم :
li:nth-last-child(-n+4)
{
    color:#f00;
}
Li های با اندیس 9 و 8 و 7و 6 قرمزمی‌شوند .

:nth-of-type :
کد html :

<div>
<p>dddddd</p>
<p>wwwww</p>
<p>lllllllllllllllll</p>
<p>ffffffffffff</p>
</div>
کد css :
div>p:nth-of-type(3)
{
    background:#f00;
}
پاراگراف سوم بک‌گراندی به رنگ قرمز خواهد داشت .

**************************************************  **پایان بحث Selectorها**************************************  ***************************

----------


## mohsen_zelzela00

نمی دونم چرا دوستان استقبال چندانی از این تاپیک نمی کنن .....
آیا مطالبی که گفته شده برای دوستان مفید هست یا نه؟؟؟؟؟؟

----------


## ravand

من كه لذت بردم. و دائم مطالب شما رو ميخونم. اگه اين مطالب به پايان رسيد  كتابش كنيد خيلي عالي ميشه.

----------


## mohsen_zelzela00

> من كه لذت بردم. و دائم مطالب شما رو ميخونم. اگه اين مطالب به پايان رسيد  كتابش كنيد خيلي عالي ميشه.


چشم دوست عزیز ، من حتماً این کار رو می کنم . ولی اینجوری که بو ش میات زیاد از این تاپیک استقبال نشده ولی خب من ادامه میدم چون من این 12 جلسه رو آماده کردم امیدوارم به شما دوستان کمکی هر چند کوچک کرده باشم

----------


## mrmazmamfi

> نمی دونم چرا دوستان استقبال چندانی از این تاپیک نمی کنن .....
> آیا مطالبی که گفته شده برای دوستان مفید هست یا نه؟؟؟؟؟؟


سلام داداش 
دمت گرم ، خیلی عالی و خوب داره مباحث جلو میره ، من که خیلی حال کردم .
ممنون

----------


## masoudalmas

برادر استقبال ميشه. ادامه بدين لطفا. هميشه واسه اين مسايل استقبال كننده هست .  :چشمک:  :تشویق:

----------


## mohsen_zelzela00

> برادر استقبال ميشه. ادامه بدين لطفا. هميشه واسه اين مسايل استقبال كننده هست .


دوست عزیز حتماً میزارم ولی الان خیلی سرم شلوغه یه خورده وقت پیدا کنم میزارم.

----------


## mohsen_zelzela00

Height :
برای مشخص کردن ارتفاع یک box استفاده می‌شود .
مقادیری که می‌تواند اختیار کند عبارتند از :
height : { Iength  |  Percentage  |  auto  |  inherit }
length : به آن مستقیماً بر حسب پیکسل مقدار می‌دهیم ؛ مثلاً 15px 
Percentage : به آن به صورت درصد مقدار می‌دهیم ؛ مقدار آن درصدی از مقدار تگ ِ پدر است . 
Auto : هر چقدر که به مقدار متن اضافه شود ، به مقدار box هم اضافه می‌شود .
Inherit : به اندازه تگ ِ پدرش ارتفاع دارد . 
کد css اول :
#Demo
{
    height:150px;
    background-color:#D728D7;
}
ارتفاع این تگ به اندازه 150px است .
کد css دوم :
body
{
    height:800px;
}
#Demo
{
    height:30%;
    background-color:#D728D7;
}
ارتفاع box به اندازه سی درصد ِ 800px می‌شود .
min-height :
حداقل ارتفاع ِ یک  boxرا مشخص می‌کند .
#Demo
{
    min-height:200px;
    background-color:#FF3399;
}
max-height :
مشخص می‌کند که ارتفاع یک box تا کجا می‌تواند زیاد شود .
#Demo
{
    min-height:200px;
    max-height:800px;
    background-color:#0000ba;
}
Width :
عرض یک box را مشخص می‌کند .
Width : { length  |  percentage  |  auto  |inherit }
#Demo
{
    width:90px;
    min-height:50px;
    max-height:800px;
    background-color:#0000ba;
}
min-width : { length  |  percentage  |inherit }


121.JPG
margin :
فاصله یک تگ با تگ ِ پدرش از بالا با margin-top مشخص می‌شود .
فاصله یک تگ با تگ ِ پدرش از راست با margin-right مشخص می‌شود .
فاصله یک تگ با تگ ِ پدرش از پایین با margin-bottom مشخص می‌شود .
فاصله یک تگ با تگ ِ پدرش از چپ با margin-left مشخص می‌شود .
margin : { length  |  percentage  |  auto  |inherit }
کد html :
<div>Test1</div>
<div id="Demo">Test2</div>
<div>Test3</div>
<div>Test4</div>
کد css :
#Demo
{
    margin-top:50px;
}
Test2 از Test1 )تگ بالایی‌اش) به اندازه 50px فاصله می‌گیرد .
اگربه جای margin-top از margin-bottom استفاده کنیم از تگ ِ پایینی خودش به اندازه 50px فاصله می‌گیرد .
#Demo
{
    width:300px;
    margin-left:100px;
    background-color:#0000ab;
}
تگ دوم به اندازه 50px از سمت چپ فاصله گرفته و درون یک box با بک‌گراند آبی و عرض 300px قرار می‌گیرد .
اگر بخواهیم یک تگ از همه جهت‌ها به مقدار مشخصی فاصله بگیرد :
Margin : <margin-top> <margin-right> <margin-bottom> <margin-left>

----------


## mrmazmamfi

سلام
داداش دیگه ادامه نمیدی  ؟ 
جلسات تموم شد ؟ 
ممنون

----------


## simorgh-hossein

آره مثل اینکه کل CSS این بود !!!!!!!!! :گیج:

----------


## sg.programmer

> نمی دونم چرا دوستان استقبال چندانی از این تاپیک نمی کنن .....
> آیا مطالبی که گفته شده برای دوستان مفید هست یا نه؟؟؟؟؟؟


تشکر خیلی جالب هست 
اگه اتمام رسید کتاب کنید لطفاً

----------


## mohsen_zelzela00

> آره مثل اینکه کل CSS این بود !!!!!!!!!


 نه دوست عزیز این کل CSS نیست ولی الان سرم یه خورده شلوغه دوباره میام

----------


## M0TR!X

سلام.

یکی مایه بزاره تا اینجاشو pdf  کنه.

----------


## mohsen_zelzela00

Margin :Margin : <margin-top> <margin-right> <margin-bottom> <margin-left>
مثال : 

 p 
{
 Margin : 10px  0  5px  20px ;
}

این کد همانند کد زیر است : 
 
P
{
margin-top:10px ;
margin-right:0 ;
margin-bottom:5px ;
margin-left:20px ;
}

اگر به margin سه عدد بدهیم عدد اول برای top عدد دوم برای right/left وعدد سوم برای bottom و اگر دو عدد بدهیم اولی برای top/bottom و دومی برای right/left خواهد بود . و اگر فقط یک عدد داده شود برای تمام جهت‌ها خواهد بود .


مثال : کد css : 

#Demo
{
            width:300px;
            margin:100px 50px;
            background-color:#0000ab;
}

کد html : 
 
<div>Test1</div>
<div id="Demo">Test2</div>
<div>Test3</div>
<div>Test4</div>

مثال دوم : کد html : 
 
<div id="Demo">
If Peter Piper picked a peck 
of pickled peppers ,
wheres the peck of picked peppers 
Peter Piper picked?</div>


کد css : 
 
#Demo
{
            margin:2em;
            border:thin solid black;
            width:10em;
            margin-left:auto;
}

نتیجه  : اگر margin-left برابرauto  قرار بگیرد آن تگ به سمت راست می‌رود  و اگر margin-right برابر auto قرار بگیرد آن تگ به سمت چپ می‌رود و اگر margin-right و margin-left برابر auto قرار بگیرد آن تگ وسط قرار می‌گیرد . البته باید برای ان تگ width تعیین کنیم .Padding :
فاصله border (حاشیه) هر تگ با content همان تگ را با استفاده از padding مشخص می‌کنند .
مقدار اولیه آن برابر صفر است .
مثال: کد html قبلی و کد css : 

#demo
{
            padding-top:50px ;
            background-color:#0000ab ;
            margin: 2em auto ;
            border-top:thin solid black ;
            width:10em ;
}

پس از run کردن متن درون یک box آبی در وسط صفحه قرار می‌گیرد و متن از حاشیه بالای کادر آبی به اندازه 50px فاصله دارد . 
 
Padding : < Padding -top> < Padding -right> < Padding -bottom> < Padding -left>
border :
حاشیه یک تگ را مشخص می‌کند . 
نوع حاشیه : 

Border- top-style : { none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit } ;

None  : هیچی
Hidden : مخفی
Dotted : نقطه‌چین
Dashed : خط تیره
Solid : منجعد
Double : دو خط
Groove و  Ridgeو  Inset و Outset : سه بعدی

ضخامت حاشیه :
 

border-top-width : { thin | medium | thick | length | inherit }

اما بهتر است به جای این مقادیر ، به آن عدد بدهیم . چون browser‌های مختلف این مقادیر را به اندازه‌های متفاوتی نمایش می‌دهند . مثال : کد css : 
 

#Demo
{
   border-top-width:2px;
   border-top-style:solid;
   padding:50px;
   margin:2em auto;
   width:10em;
}

رنگ حاشیه : 
 
Border-top-color : { color | transparent | inherit }
Transparent رنگ حاشیه را شفاف می‌کند .
مثال : 

#Demo
{
            border-top-width:2px ;
            border-top-style:solid ;
            border-top-color: red ;
            padding:50px ;
            margin:2em auto ;
            width:10em ;
}
 

Border-top : 
 
Border-top : { [border-width]  [border-style]  [border-color]  | inherit }  ;
 
 
#Demo
{
            border-top:2px solid red;
            padding:50px;
            margin:2em auto;
            width:10em;
}

دستوراتِ  right و  left و bottom هم مشابه دستورات ِ top است . 
اگر بخواهیم به چهار جهت style بدهیم : 

Border-style : top  right  bottom  left

مثال : 
 
#Demo
{
            border-style:outset dotted double groove ;
            border-width:2px 3px 4px 5px ;
            border-color:red green black blue ;
            padding:50px ;
            margin:2em auto ;
            width:10em ;}

----------


## mohsen_zelzela00

border-width :
#Demo
{
    border-style:outset  dotted  double  groove;
    border-width:2px  3px  4px  5px;
    padding:50px;
    margin:2em  auto;
    width:10em;
}
border-color :
#Demo
{
    border-style:outset  dotted  double  groove;
    border-width:2px  3px  4px  5px;
    border-color:red  green  black  blue;
    padding:50px;
    margin:2em  auto;
    width:10em;}
اگر width و  styleو  colorهر چهار جهت یکسان باشد این کدنویسی بهینه نیست ؛ از دستور border عمل می‌کنیم که این دستور به ترتیب اول width وسپس style و در آخر color می‌گیرد :
#Demo
{
    border:3px  solid  blue ;
    padding:50px ;
    margin:2em auto ;
    width:10em ;
}
مثال : کد html :
<div id="Demo">
<ul>
<li>Home</li>
<li>Content</li>
<li>About Us</li>
<li>Servies</li>
</ul>
</div>
کد css :
#Demo>ul li
{
    list-style-type:none;
    border:1px solid #abab00;
    width:80px;
    background-color:#4162FC;
}
#Demo>ul li:hover
{
    background-color:#CC0066;
}
نکته : اگر به margin مقدار منفی بدهیم دو تگ (لایه) روی هم قرار می‌گیرند و هر کدام که مقدار z-index آن بیشتر باشد روی آن یکی قرار می‌گیرد .
برای رنگ دادن به صورت کد از سیستم RGB استفاده می‌کنیم . دو عدد اول برای رنگ قرمز , دو عدد دوم برای رنگ Green و دو عدد سوم برای رنگ Blue استفاده می‌شوند . اعداد برمبنای عدد 16 هستند . اگر از همه رنگ‌ها به یک مقدار استفاده کنیم رنگ سفید (#FFFFFF) به دست می‌آید و زمانی که به همه رنگ‌ها مقدار صفر (#000000) می‌دهیم رنگ مشکی درست می‌شود .
List properties :
List-style-type : { circle | disc | square | Armenian | decimal | decimal-leading-zero |Georgian |lower-alpha |lower-greek |lower-latin | lower-roman |upper-alpha | upper-latin | upper-roman | none | inherit }

List-style-position :
List-style-position : { inside | outside | inherit }
مشخص می‌کند که علامت‌های کنار li‌ها در بیرون کادر یا درون آن قرار بگیرند .

مثال : کد css :
li.square
{
    list-style-type:square;
    list-style-position:outside;
}
li.disc
{
    list-style-type:disc;
    list-style-position:inside;
}
li.circle
{
    list-style-type:circle;
}
کد html :
<ul>
<li class="square">This list item has a square marker.</li>
<li class="square">This list item has a square marker.</li>
<li class="disc">This list item has a disc marker.</li>
<li class="disc">This list item has a disc marker.</li>
<li class="circle">This list item has a circle marker.</li>
<li class="circle">This list item has a circle marker.</li>
</ul>

List-style-image :
List-style-image : {url |none | inherit }
اگر بخواهیم در لیست در کنار هر item یک image قرار بگیرد از این دستور استفاده می‌کنیم .
li.disc
{
    list-style-type:disc;
    list-style-position:inside;
    list-style-image:url("down.png");
}
List-style :
List-style : { list-style-type  list-style-position  list-style-image | inherit }

Color and backgrounds :
Background-color : { color | transparent | inherit }
رنگ پس‌زمینه را مشخص می‌کند . 
کد html :
<div id="example">background-color</div>

کد css :
#example
{
    border:2px dotted #000 ;
    padding:20px ;
    width:200px ;
    height:300px ;
    background-color:orange ;
}
Background-image :
Background-image : { url | none | inherit }
body
{
    background-image:url("down.png");
}
Background-repet : { repet | repet-x | repet-y | no-repet | inherit }
عکسی که در صفحه قرار می‌دهیم به صورت defult در محور x و y ریپیت می‌شود . این دستور مشخص می‌کند که عکس فقط در محور y و یا فقط در محور x تکرار شود و یا اصلا در صفحه تکرار نشود .
body
{
    background-image:url("down.png");
    background-repeat:repeat-x;
}
عکس فقط در محور x تکرار می‌شود .
طراحی botton : کد css :
.btn
{
    background-image:url("b.png");
    border:1px solid black;
    font-size:8pt;
    padding-bottom:5px;
    font-family:Tahoma, Arial;
    width:150px;
    height:26px;
    text-align:center;
}
کد html :
<input type="button" value="Convert to pdf" class="btn"/>

Background-attachment  :
Background-attachment : { scroll | fixed | inherit }
مشخص می‌کند که با حرکت دادن scroll عکس بک‌گراند حرکت کند یا ثابت بماند .

----------


## ravand

آقاي mohsen_zelzela00 خيلي خوب بود. متشكرم.
يه سوال داشتم: من يه قالب ساختم و ميخواستم كاري كنم كه وقتي قالب با يك نمايشگر بزرگ برخورد ميكنه قالب هم بزرگ بشه اين كار رو براي div و دادن درصد بهش تونستم انجام بدم ولي عكس زمينه ي div رو نتونستم كاريش كنم كه بطور خودكار بزرگ بشه. حتي اگر هم بتونيم عكس زمينه ي div رو بزرگ بكنيم اين بار مشكل پايين امدن كيفيت عكس هست. اينم بگم كه من منظورم عكس زمينه ي سايت نيست . منظورم عكس زمينه ي div هست.
متشكرم.

----------


## mohsen_zelzela00

> آقاي mohsen_zelzela00 خيلي خوب بود. متشكرم.
> يه سوال داشتم: من يه قالب ساختم و ميخواستم كاري كنم كه وقتي قالب با يك نمايشگر بزرگ برخورد ميكنه قالب هم بزرگ بشه اين كار رو براي div و دادن درصد بهش تونستم انجام بدم ولي عكس زمينه ي div رو نتونستم كاريش كنم كه بطور خودكار بزرگ بشه. حتي اگر هم بتونيم عكس زمينه ي div رو بزرگ بكنيم اين بار مشكل پايين امدن كيفيت عكس هست. اينم بگم كه من منظورم عكس زمينه ي سايت نيست . منظورم عكس زمينه ي div هست.
> متشكرم.


دوست عزیز اگه بخوایید این کار رو بکنید به نظر من باید یه سایز استاندارد در نظر بگیرید که بر روی تمام نمایشگرها به صورت یه اندازه ثابت نمایش داده بشه اگه هم نه می خوایید یه عکس در پس زمینه بزارید و عکستون یه چیز ساده باشه می تونید با استفاده از Repate اونو در کل Div تکرار کنید در غیر این صورت باید با JS(بهتره از JQ) استفاده کنید

----------


## ravand

> دوست عزیز اگه بخوایید این کار رو بکنید به نظر من باید یه سایز استاندارد در نظر بگیرید که بر روی تمام نمایشگرها به صورت یه اندازه ثابت نمایش داده بشه


چه سايز استانداردي؟ با چه واحدي؟




> اگه هم نه می خوایید یه عکس در پس زمینه بزارید و عکستون یه چیز ساده باشه می تونید با استفاده از Repate اونو در کل Div تکرار کنید در غیر این صورت باید با JS(بهتره از JQ) استفاده کنید


من متوجه منظور شما نشدم ميشه مثالي بزنيد چون اينطوري من متوجه نميشم.
خيلي برام اين موضع مهمه از هر كي هم پرسيدم نتيجه اش نداشته.
متشكرم.

----------


## mohsen_zelzela00

> چه سايز استانداردي؟ با چه واحدي؟
> 
> 
> من متوجه منظور شما نشدم ميشه مثالي بزنيد چون اينطوري من متوجه نميشم.
> خيلي برام اين موضع مهمه از هر كي هم پرسيدم نتيجه اش نداشته.
> متشكرم.


 من خودم برای تمام سیستم های خودم از 1000px استفاده می کنم

برای Repate شدن به مثال پست قبل رجوع کنید مثال Button

----------


## ravand

> برای Repate شدن به مثال پست قبل رجوع کنید مثال Button


ببينيد من نميخوام يك عكس رو پشت سر هم در محور x يا y تكرار كنم.من يه عكس مشخصي رو ميخوام . چاپ بكنم.

من اين هزار پيكسلي هم كه ميگيد امتحان كردم و فايده اي نداره.

----------


## mohsen_zelzela00

> ببينيد من نميخوام يك عكس رو پشت سر هم در محور x يا y تكرار كنم.من يه عكس مشخصي رو ميخوام . چاپ بكنم.
> 
> من اين هزار پيكسلي هم كه ميگيد امتحان كردم و فايده اي نداره.


 من دقیقاً متوجه نمی شم اگه خواستید یه عکس از کاری که می خواهید انجام بدید را واسم بفرستید به صورت پیام خصوصی

----------


## mohsen_zelzela00

سوال یکی از دوستان

سلام یه سوال داشتم اگه ما یه div داشته باشیم که بخوایم از دوتا css خاصیت  بهش بدیم چیکار باید انجام بدیم ؟ فرض کنید که از id نخوایم استفاده کنی

پاسخ:

شما می تونید به یک المان دو کلاس هم اختصاص بدید به صورت زیر

<div class="a b">

که دی اینجا a  یک کلاس است و B هم همچنین

----------


## reza_edu

با اجازه دوست گل که این تاپیک رو زدن اینم فکر کنم بدرد هممون میخوره.

----------


## lady64

آقای محسن زلزله مباحثتون خوبه ، پس چرا ادامه نمیدید ؟من که واقعا سپاسگزارم. :لبخند:

----------


## Maryam IT

میگم که چرا ادامه نمیدید؟ :متفکر: 

خیلی خوب بود!حیفه... :افسرده:

----------

