files.free-learn.ir · Web viewAuthor Sadegh Asadi Created Date 12/16/2019 02:08:00 Last modified...

5
س یایجاد ک آموزش نحوه اClass درHTML 1 متعلق بهین فایل ا فری لرنت آموزشی سای می باشد. آزاد کامومده از آن برای عمستفاشد و ا می با[email protected] https://free-learn.ir / س یایجاد ک نحوه اClass درHTML عناصر و یا تگس دریجاد ک نحوه اهیم بان بخش میخوان در ای فری لرت آموزشیحترم و عزیز سای دوستان م هایHTML ه باشید.ن همراین بخش با من امه و تا پایا در ادا آشنا شویم ، لطفا های مشترکژگی همدیگر با ویشیاء در کناردین اجموعه ای از چن باشید، به مس رو شنیدهن اسم ک به ا شاید تایجاد را اس هایتوانیم ک شارپ نیز می همچون سی برنامه نویسض مثال ما در زبان هاییم ، بفر گویس می را کیم.ستفاده نمای از آنها و ا درHTML دیگردین تگیتر و چنراف یک تگ تراگ یک تگ پادین تگ مثست، فرض کنید ما چن گونه ا همین همدازه شون آبی و انگ شون تگ ها رن اینمه ییخواهیم ه که م داریم۱۳ ه ترین و بهین بهتریناشد، خب پیکسل بپس در گذاشته سس ک تگ هارو درون یک اینمه ی هر اینه که کاCSS های موردژگیس وی این ک براییم.و تعریف نمایمون ر نظرس ها تگده از کستفا ایتونیم باشته باشند، بفرض مثال ما م دای مادی براار زیاتفاده بسین اسس ها میتون ک هایHTML وراتده از دستستفا اپس بایجاد و س دسته ای ا بصورت روCSS کی را های مشترژگی آنها وی برای تعریف کرد. عناصر / تگ هایس دریجاد ک استفاده یا برای ا کلی شکلHTML ر می باشد : بصورت زی1 <element class="س"نام ک> کهelement یا تگ ما در عنصر همانHTML ( باشد و بجای میس نام کن رود نظرموس مورز باید نام ک نی) یم.نتخاب نمایم را ا نا دلخواه اینیتوانیم به. که میمرد نمای وا

Transcript of files.free-learn.ir · Web viewAuthor Sadegh Asadi Created Date 12/16/2019 02:08:00 Last modified...

Page 1: files.free-learn.ir · Web viewAuthor Sadegh Asadi Created Date 12/16/2019 02:08:00 Last modified by Sadegh Asadi Company

HTML در Classآموزش نحوه ایجاد کالس یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 1

[email protected]://free-learn.ir/

HTML در Class نحوه ایجاد کالس یا

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

شاید تا به االن اسم کالس رو شنیده باشید، به مجموعه ای از چندین اشیاء در کنار همدیگر با ویژگی های مشترک را کالس می گوییم ، بفرض مثال ما در زبان های برنامه نویسی همچون سی شارپ نیز میتوانیم کالس ها را ایجاد

و از آنها استفاده نماییم.

هم همین گونه است، فرض کنید ما چندین تگ مثال یک تگ پاراگراف یک تگ تیتر و چندین تگ دیگرHTMLدر پیکسل باشد، خب بهترین و بهینه ترین۱۳داریم که میخواهیم همه ی این تگ ها رنگ شون آبی و اندازه شون برای این کالس ویژگی های موردCSSکار اینه که همه ی این تگ هارو درون یک کالس گذاشته سپس در

نظرمون رو تعریف نماییم.

کالس ها میتونن استفاده بسیار زیادی برای ما داشته باشند، بفرض مثال ما میتونیم با استفاده از کالس ها تگ برای آنها ویژگی های مشترکی راCSS رو بصورت دسته ای ایجاد و سپس با استفاده از دستورات HTMLهای

تعریف کرد.

بصورت زیر می باشد :HTMLشکل کلی برای استفاده یا ایجاد کالس در عناصر / تگ های

1 <element class="نام کالس">

( نیز باید نام کالس مورد نظرمون رونام کالس می باشد و بجای )HTML همان عنصر یا تگ ما در elementکه وارد نماییم. که میتوانیم به دلخواه این نام را انتخاب نماییم.

Page 2: files.free-learn.ir · Web viewAuthor Sadegh Asadi Created Date 12/16/2019 02:08:00 Last modified by Sadegh Asadi Company

HTML در Classآموزش نحوه ایجاد کالس یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 2

[email protected]://free-learn.ir/

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

1

2

3

4

.ClassName

{

اینجا در اس اس سی دستورات

}

گذاشته سپس نام کالس را مینویسیم و در نهایت دستوراتنقطه باید اول یک CSS فراخوانی یک کالس در برای سی اس اس را مینویسیم.

HTML در DIVنحوه ایجاد کالس در تگ

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

( میگذاریم و سپس نام کالس را مینویسیم و. اول یک نقطه )CSSدر مرحله ی بعد برای فراخوانی اون کالس در در نهایت دستورات سی اس اس مورد نظرمون رو وارد مینماییم.

Page 3: files.free-learn.ir · Web viewAuthor Sadegh Asadi Created Date 12/16/2019 02:08:00 Last modified by Sadegh Asadi Company

HTML در Classآموزش نحوه ایجاد کالس یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 3

[email protected]://free-learn.ir/

لطفا به مثال زیر توجه نمایید.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

<style>

div.free-learn{

background-color:#1E90FF;

color:white;

text-align:center;

padding:5px;

}

</style>

</head>

<body>

<div class="free-learn">

Www.Free-Learn.Ir

</div>

</body>

</html>

امتحان کنید

Page 4: files.free-learn.ir · Web viewAuthor Sadegh Asadi Created Date 12/16/2019 02:08:00 Last modified by Sadegh Asadi Company

HTML در Classآموزش نحوه ایجاد کالس یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 4

[email protected]://free-learn.ir/

نیز استفاده نماییم، مثال در تگ های پاراگراف یاHTML میتونیم از کالس ها در هر یک از تگ های Divما عالوه بر استفاده نماییم.Class ما به راحتی میتوانیم از صفت کالس یا HTMLتیترها یا تگ لینک و دیگر عناصر

HTMLنحوه ایجاد کالس در تگ های

دقیقا همانندHTML ندارد، یعنی روش ایجاد کالس در دیگر تگ های HTML هیچ فرقی با دیگر تگ های DIVتگ کالس ایجاد کرد.HTML در بقیه ی تگ های DIV می باشد، پس بطور کلی میشه همانند تگ DIVتگ

را یاد بگیرید.HTMLبرای مثال لطفا به مثال های زیر توجه نمایید تا نحوه ی ایجاد کالس در انواع تگ های

پاراگرافنحوه ایجاد کالس در تگ

1

2

3

4

5

<body>

<p class="free-learn">

Salam Khobi? Man Sadegh Hastam.

</p>

</body>

امتحان کنید

Page 5: files.free-learn.ir · Web viewAuthor Sadegh Asadi Created Date 12/16/2019 02:08:00 Last modified by Sadegh Asadi Company

HTML در Classآموزش نحوه ایجاد کالس یا

می باشد و استفاده از آن برای عموم کامال آزاد می باشد. سایت آموزشی فری لرناین فایل متعلق به 5

[email protected]://free-learn.ir/

تگ های تیترنحوه ایجاد کالس در

1

2

3

4

5

<body>

<h3 class="free-learn">

Salam Khobi? Man Sadegh Hastam.

</h3>

</body>

امتحان کنید

Inlineنحوه ایجاد کالس در تگ های درون خطی یا

1

2

3

4

<body>

<p> WebSite <span class="mysite">Free-Learn</span> Is Free </p>

<a href="https://free-learn.ir" class="mysite bgblue">سایت آموزشی من</a>

</body>

امتحان کنید