# مباحث مرتبط با توسعه وب > طراحی وب (Web Design) > سوال: span چیست؟

## kh1387

با سلام
وب سایتی رو دیدم که در قسمت masterPage برای ایجاد منو (menu) از span استفاده کرده بود.
کسی از دوستان می دونه این چیه و چطوری از اون می تونیم استفاده کنیم؟
با تشکر

----------


## sedamorde

دوست عزیز برای منو نمیدونم دقیقا چطوری span استفاده میشه. اما span معمولا برای تایین یک کلاس برای جز کوچک استفاده میشه (حداقل من باهاش اینکار رو میکنم) مثلا برای تایین رنگ یک کلمه در یک جمله :
This <span class="red">is</span> html

----------


## kh1387

اگه ممکنه می شه یه مثال بنویسید برای نوشتن span?

----------


## sedamorde

دوست عزیز من برات مثال نوشتم :
This <span class="small">is</span> html

یا 

This <span style="color:#F00;">is</span> html

----------


## kh1387

معذرت می خوام این کد ها رو باید در کدوم قسمت نوشت؟

----------


## salehbagheri

> معذرت می خوام این کد ها رو باید در کدوم قسمت نوشت؟


شما كدهاتون رو كجا مينويسيد؟ اين رو هم همون جا (برحسب نياز) بنويسيد!

اين هم خروجي كدهاي دوست عزيز SedaMorde :

This is Html
This is Html

----------


## kh1387

> شما كدهاتون رو كجا مينويسيد؟ اين رو هم همون جا (برحسب نياز) بنويسيد!
> 
> اين هم خروجي كدهاي دوست عزيز SedaMorde :
> 
> This is Html
> This is Html


 به عنوان یک style بنویسم؟
در تگهای مختلف بنویسم؟

----------


## rostamiani

Span تگی هست که خودش هیچ کاری انجام نمی ده.فقط یک قسمت از صفحه رو از بقیه جدا می کنه تا بتونیم به اون قسمت ویژگی هایی رو نسبت بدیم. مشابه div:
اینم کاربرد Span در سایت مرجع sitepoint.com

http://reference.sitepoint.com/html/span

----------


## rostamiani

> به عنوان یک style بنویسم؟
> در تگهای مختلف بنویسم؟


شما می تونید هر متن یا تگ دیگه ای رو داخل span بزارین
هر Style یا نام کلاسی هم که خواستین ،می تونید بهش بدید  :لبخند گشاده!: 

مثلا :


```
<span class="highlight" style="color=#FF0000"><a href="http://yahoo.com">Click here :D</a></span>
```

----------


## امید امرایی

و در تکمیل صحبت دوستان :
معنای Span در واقع یعنی یک محدوده خاص. به نوعی span یک محدوده خاص از یک سورس HTML  رو شامل می شه که می تونه به صورت مستقل عمل کنه .

----------


## __ziXet__

خود span نمیتونه تبدیل به یه منوی جذاب بشه! برنامه نویس از span به عنوان دو تا تگ برای ذخیره کردن استفاده کرده و جاوااسکریپت هست که عناصر و ویژگی های دیگه رو به span اضافه میکنه و اونو به صورت یه منو درمیاره!

----------


## reza10wert

> دوست عزیز من برات مثال نوشتم :
> This <span class="small">is</span> html
> 
> یا 
> 
> This <span style="color:#F00;">is</span> html


خوب مثلا فرقش با این کد چیه ؟
This <h1 style="color:red;">IS</h1> Html

----------


## MMSHFE

دوست عزیز، span و سایر تگهای مشابه مثل div و... برای متمایزکردن یک بخش از صفحه و قراردادن اون در یک محدوده بکار میرن تا بعداً با استفاده از CSS و Javascript بتونیم کارهای دلخواه رو با اون بخش انجام بدیم. حالا بعضی از این تگهای ایجاد محدوده مثل div بصورت بلوکی هستن یعنی متن قبل و بعدش شکسته میشه. برخی هم مثل span از نوع in-line هستن و وقتی توی یک سطر، بخشی از اون رو داخل span بگذاریم، متن قبل و بعدش شکسته نمیشه. برخلاف تگهایی مثل h1 و...، این تگها (div و span) ظاهر محتوای خودشون رو تغییر نمیدن و فقط اون رو متمایز میکنن (ازنظر کد، نه ازنظر ظاهری) تا بعداً همونطور که گفتم، درصورت تمایل بتونیم با CSS و JS کارهای دلخواه رو با اون بخش انجام بدیم. البته برای اینکه بتونیم روی این بخشها کار کنیم باید به اونها خصوصیاتی مثل class یا id بدیم (که البته استفاده از id در جاوا اسکریپت مرسوم تره). موفق باشید.

----------


## boy24iran

سلام
چه طور می شه چند کلمه رو پشته سر هم نوشت مثلاً
پشت پشت پشت پشت
لطفاً بگید که با چه تگهایی می شه نوشت و کدوم مرسوم تر  است

----------


## tamafi6

اینجارانگاه کن


```
<section class="rw-wrapper">
	<h2 class="rw-sentence">
				<div class="rw-words rw-words-1">
						<span>HTML5&amp;CSS3</span>
						<span>ارایه برنامه های جالب</span>
						<span>تاثیرگذاری بالا</span>
						<span>شناورسازی طرح ها</span>
						<span>ابزارباورنکردنی</span>
						<span>هوشمندی کدها</span>
				</div>
	</h2>
</section>
```

واینجا

.rw-words span:nth-child(1) { 
 -webkit-animation-delay: 10s; 
    -moz-animation-delay: 10s; 
         animation-delay: 10s; 
}
.rw-words span:nth-child(2) { 
 -webkit-animation-delay: 15s; 
    -moz-animation-delay: 15s; 
         animation-delay: 15s; 
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 20s; 
	-moz-animation-delay: 20s; 
	animation-delay: 20s; 
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 25s;
	-moz-animation-delay: 25s; 
	animation-delay: 25s; 
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 30s; 
	-moz-animation-delay: 30s; 
	animation-delay: 30s; 
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 35s;
	-moz-animation-delay: 35s; 
	animation-delay: 35s; 
}

نمونه هدربالامیتونی ببینی بعداز10ثانیه فعال میشه
http://pacifist.site88.net/form/form.html

----------

