سبد (0)

تبلیغات

استفاده از css در HTML

CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.

Wiki


به چگونگی نمایش متن ها نگاه کنید...!

این متن قرمز است.

رنگ این متن آبی است و نام فونت آن Times است.

اندازه این متن 30 پیکسل است.

خودتان امتحان کنید


مثال - خودتان امتحان کنید

استفاده از Styleها، داخل صفحه HTML
چگونه Styleها را در قسمت <head> صفحه اضافه کنیم.

لینکی که خط زیر ندارد
چگونه یک لینک بدون خط زیر (underline) بسازیم.

لینک به یک فایل CSS خارجی
چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم.


تعیین شکل نمایش عناصر HTML با CSS

Wiki

CSS همراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.

برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:

  • برگه های استایل خارجی یا External style sheet
  • برگه های استایل داخلی یا Internal style sheet
  • استایل درون تگی یا Inline style

روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است. 

برای کسب اطلاعات بیشتر درباره CSS می توانید به لینک روبرو مراجعه نمایید: آموزش CSS


استایل درون تگی - Inline Styles

Wiki

قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.

طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

مثال: تنظیم رنگ پس زمینه عناصر HTML

خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>
خودتان امتحان کنید »

خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.

خودتان امتحان کنید: تنظیم رنگ پس زمینه با استفاده از روش قدیمی


مثال: تنظیم رنگ و اندازه و فونت عناصر HTML

خصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>
خودتان امتحان کنید »

خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.


مثال: ترازبندی متن

خصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:

مثال (استفاده از css در HTML)

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>
خودتان امتحان کنید »

خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.

خودتان امتحان کنید: ترازبندی عنوان با استفاده از روش قدیمی


برگه های استایل داخلی - Internal Style Sheet

Wiki

زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style داخلی استفاده کرد.

Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

برگه های استایل خارجی - External Style Sheet

Wiki

زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.

<head>
<link rel="stylesheet" type="text/css" href="/mystyle.css" />
</head>

تگ های Style در HTML

تگ توضیحات
<style>

برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.

<link />

هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.


تگ ها و خصوصیات منسوخ شده

Wiki

در HTML4 چندین تگ و خصوصیت برای Styleدهی استفاده می شود که این تگ ها در نسخه جدید HTML پشتیبانی نمی شود.

به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:

  • <font>
  • <center>
  • <strike>
  • color
  • bgcolor

دیدگاه‌ها  

0 # ali 1396-09-02 14:38
من از تک a در یک صفحه HTML استفاده کردم ولی وقتی از ویژگی زیر استفاده میکنم .. زیر لینک برداشته نمیشود. مشکل چیست به نظرتون؟
style="text-decoration:none;"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-09-09 08:10
برای حذف خط نمایش داده شده در زیر لینک ها باید از کد زیر استفاده کنید:
<head>
<style type="text/css">
a:link {text-decoratio n:none;} /* unvisited link */
a:visited {text-decoratio n:none;} /* visited link */
a:hover {text-decoratio n:underline;} /* mouse over link */
a:active {text-decoratio n:underline;} /* selected link */
</style>
</head>

در مثال خودتان امتحان کنید زیر، می توانید با کد بالا بیشتر آشنا شوید:
http://beyamooz.com/try_it_yourself/tryit.php?filename=trycss_link_decoration
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیررضا دنیامعلیزاده 1395-10-03 19:21
سلام.خیلی ممنونم بخاطره این وب سایت عالیتون واقا با مثال هایی ک میزنید همه چیز رو یادمیگیریم ...تا الان همچین سایت به این خوبی پیدا نکرذم...مثل وب سایت قبلی ک c# رو یاد میگرفتم استاد عزیزم این سایت هم معرفی کرد.منم به نوبه خودم این سایت کامل رو به دوستایی که دوس دارند برنامه نویسیو طراحی سایت یاد بگیرن این سایت رو معرفی میکنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # فرهنگ 1395-01-13 21:12
سلام خسته نباشید آموزش هاتون عالی است ... ممنونم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # yaser 1394-09-13 10:36
سلام خسته نباشید
کد زیر متن های که در تگ p باشند رو ابی میکنه ولی زدم فقط بگراندش زرد شد فقط همین ؟
p {color:blue;}
تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # hamid fa 1394-09-13 15:07
با سلام به شما دوست عزیز و گرامی
اگه منظورتون این کد هستش
p
{
color:blue;
}

که باید بهتون بگم این کد تمامی تگ های p موجود در صفحه رو رنگش رو آبی میکنه ... بنابراین احتمالا خصوصیت مذکور را بدرستی اعمال نکرده اید.

تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # سعید قلی پور 1394-07-12 22:38
واقعا متشکرم واقعا مرسی یاشا
خیلی کمکم کرد تو مرحله اول خوب پیش رفتم ایشالله که همین جور آموزش ادامه پیدا کنه من سی اس اس رو فراگیر بشم
دعاتون می کنم مرسی متشکر
دستتون درد نکنه
خیلی زحمت کشیدین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-07-12 23:11
سلام
ممنون از لطف شما
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # zmgl 1394-05-16 12:22
باسلام
اگه میشه در مورد ویژگی هایی که داخل تگ linkنوشته شده بیشتر توضیح دهیدواینکه hrefرو چه جوری مشخص می کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # amirkian 1394-05-31 12:19
آگر از ide استفاده میکنید
فایل css خود رو کشید و درون فایل html رهاش کنید؛خودش لینک میشود
به همین راحتی
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # شهربانو دوستی 1394-05-31 10:15
با توجه به تگ زیر :
< link rel="stylesheet " type="text/css" href="/mystyle. css" >
پارامتر stylesheet به این معنی است که استایلی که برای صفحه وبمان در نظر گرفته ایم یک استایل خارجی است اگر می خواهید برای تعداد زیادی از صفحات وب یک فرمت و style خاص را تعریف کنید بهتر است از این روش برای نوشتن کدهای css استفاده نمائید.
از این روش می توان برای کنترل تمامی اجزاء و تگهای مورد استفاده در کلیه صفحات یک وب سایت استفاده کرد. به طوری که با وارد کردن این Style Sheet در صفحات HTML یک وب سایت کلیه صفحات به طور یکسان از این Style Sheet استفاده می کنند و به راحتی می توان با اعمال تغییرات در این سند کلیه اجزاء و صفحات تشکیل دهنده یک وب سایت را کنترل نمود.
در مورد hrefشما باید ادرس کامل محل قرار گیری فایل css که می خواهید از آن در این صفحه استفاده کنید را وارد نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # somayeh 1394-02-03 11:14
سلام. مطمئنین که برنامه ی "لینک به یک فایل CSS خارجی" درسته؟!؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-02-03 12:16
حق با شماست، اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # html acal 1393-12-25 17:21
سلام
برای یادگیری جاوا اسکریبت لازمه که حتما HTML وcss رو به صورت کامل یاد بگیریم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # مظاهر نصوحی 1393-12-26 07:52
با هر دو باید آشنایی داشته باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # Masoud 1393-11-16 12:46
سلام
ممنون بابت سایت خوبتون .

دوستان و مدیر سایت لطفاً راهنمایی کنید html رو باید در چه حدی یاد بگیرم که برم برای آموزش css ؟

html خیلی تگ داره و با توجه به برنامه های شی گرا دیگه لازم همه تگ ها رو کار کنیم ! نظر شما چیه در چه حدی باید html رو یاد گرفت ؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-11-16 17:50
سلام
نیازی نیست که با تک تک عناصر HTML آشنا بشید به نظر بنده همین که با سرفصل های "آموزش مقدماتی HTML" و "آموزش پیشرفته HTML" آشنا بشوید کافی است. بعداً سر فرصت HTML5 را نیز مطالعه فرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # امیرکیان 1393-11-09 16:16
یک چیزی برای من سوال شده
وقتی می خواهیم در html توضیح بنویسیم،می نویسیم:
<!--This is a comment.-->
و تو css:
/* This is a comment. */
استفاده می کنیم،
------------------------
ولی اگر قرار باشد در فایل های داخلی CSS در قسمت HEAD از توضیحات استفاده کنیم ،آنوقت چه میشود؟!
اگر در فایل css از توضیجات html استفاده کنیم چه می شود.؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-11-10 12:04
برای اضافه کردن توضیحات CSS در قسمت head و داخل تگ style حتماً از /* */ استفاده کنید. والا خصوصیت ها اعمال نخواهند شد.
در فایل های CSS خارجی نیز، نمی توانید از توضیحات HTMLی استفاده کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مانی 1393-11-02 09:20
توی صفحه اصلی هر سایتی لینک هایی هست که رو هر کدوم کلیک کنیم مارو به یه صفحه دیگه از همون سایت می بره،حالا ممکنه که یکی ازین صفحات قالب کلی اش با بقیه فرق داشته باشه
منظورتون از صفحات مختلف و استایل هاشون همینه؟درست متوجه شدم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-11-04 09:35
بله دقیقاً حق با شماست، و برای تکمیل صحبت شما باید اضافه کنم که اگر صفحات ذکر شده دارای قالب یکسانی هستند، حتماً از CSS خارجی استفاده نمایید.
و اگر در بین صفحات مختلف سایت، یکی از صفحات مان قالب و یا طرح متفاوتی دارد می توانید از CSS داخلی استفاده کنید، هرچند در این مورد باز بهترین گزینه همان CSS خارجی است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Guest 1393-09-12 11:02
مثال رنگ پس زمینه ایراد داره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1393-09-13 08:02
ممنون، اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی