files.free-learn.ir · web viewauthor sadegh asadi created date 12/16/2019 02:08:00 last modified...

Post on 13-Jan-2020

4 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

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

FreeLearn20181@gmail.comhttps://free-learn.ir/

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

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

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

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

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

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

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

تعریف کرد.

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

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

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

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

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

FreeLearn20181@gmail.comhttps://free-learn.ir/

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

1

2

3

4

.ClassName

{

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

}

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

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

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

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

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

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

FreeLearn20181@gmail.comhttps://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>

امتحان کنید

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

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

FreeLearn20181@gmail.comhttps://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>

امتحان کنید

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

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

FreeLearn20181@gmail.comhttps://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>

امتحان کنید

top related