استفاده از css در HTML
CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.
به چگونگی نمایش متن ها نگاه کنید...!این متن قرمز است. رنگ این متن آبی است و نام فونت آن Times است. اندازه این متن 30 پیکسل است. |
مثال - خودتان امتحان کنید
استفاده از Styleها، داخل صفحه HTML
چگونه Styleها را در قسمت <head> صفحه اضافه کنیم.
لینکی که خط زیر ندارد
چگونه یک لینک بدون خط زیر (underline) بسازیم.
لینک به یک فایل CSS خارجی
چگونه از تگ <link> برای اضافه کردن فایل CSS خارجی استفاده کنیم.
تعیین شکل نمایش عناصر HTML با CSS
CSS همراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.
برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:
- برگه های استایل خارجی یا External style sheet
- برگه های استایل داخلی یا Internal style sheet
- استایل درون تگی یا Inline style
روش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است.
برای کسب اطلاعات بیشتر درباره CSS می توانید به لینک روبرو مراجعه نمایید: آموزش CSS
استایل درون تگی - Inline Styles
قرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.
طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:
مثال: تنظیم رنگ پس زمینه عناصر HTML
خصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:
مثال (استفاده از css در 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)
<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)
<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
زمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style داخلی استفاده کرد.
Styleهای داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
برگه های استایل خارجی - External Style Sheet
زمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.
هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.
<link rel="stylesheet" type="text/css" href="/mystyle.css" />
</head>
تگ های Style در HTML
| تگ | توضیحات |
|---|---|
| <style> |
برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود. |
| <link /> |
هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود. |
تگ ها و خصوصیات منسوخ شده
در HTML4 چندین تگ و خصوصیت برای Styleدهی استفاده می شود که این تگ ها در نسخه جدید HTML پشتیبانی نمی شود.
به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:
- <font>
- <center>
- <strike>
- color
- bgcolor
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 68192
دیدگاه‌ها
سلام خسته نباشین و ممنون به خاطر سایت خوبتون من یه مشکلی دارم اونم اینه که من کلا کار با برنامه cuteftp رو بلد نیستم و اون قسمت اموزشتون که با این برنامه کار میکنید رو متوجه نمیشم ممنون میشم راهنماییم کنین
سلام و درود
1- زمانی برنامه CuteFTP مورد استفاده قرار می گیرد که یک هاست خریده باشید و بخواهید فایل ها رو از کامپیوترتون به هاست منتقل کنید.
2- تا زمانی که سایتتون رو کامپیوتر شخصی تون هست، برنامه CuteFTP کاربردی نخواهد داشت.
3- برای استفاده از برنامه CuteFTP حتما باید یک اکانت FTP داشته باشیم. با استفاده از اکانت مورد نظر می تونیم به هاست متصل بشیم و محتوای روی هاست رو مشاهده کنیم و فایل ها رو از کامپیوترمون به هاست منتقل کنیم.
4- در برنامه CuteFTP برای متصل شدن به هاست، منوی File -> New -> Ftp Site را انتخاب کنید. بلافاصله پنجرهای باز می شه که باید اطلاعات اکانت FTP را وارد کنید.
5- اگر نام کاربری و کلمه عبور را صحیح وارد کرده باشید، به هاست متصل می شید و در برنامه CuteFTP براحتی می توانید فایل ها را از روی کامپیوترتون کپی و داخل CuteFTP پیست کنید.
من از تک a در یک صفحه HTML استفاده کردم ولی وقتی از ویژگی زیر استفاده میکنم .. زیر لینک برداشته نمیشود. مشکل چیست به نظرتون؟
style="text-decoration:none;"
برای حذف خط نمایش داده شده در زیر لینک ها باید از کد زیر استفاده کنید:
<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>
در مثال خودتان امتحان کنید زیر، می توانید با کد بالا بیشتر آشنا شوید:
beyamooz.com/try_it_yourself/tryit.php?filename=trycss_link_decoration
سلام.خیلی ممنونم بخاطره این وب سایت عالیتون واقا با مثال هایی ک میزنید همه چیز رو یادمیگیریم ...تا الان همچین سایت به این خوبی پیدا نکرذم...مثل وب سایت قبلی ک c# رو یاد میگرفتم استاد عزیزم این سایت هم معرفی کرد.منم به نوبه خودم این سایت کامل رو به دوستایی که دوس دارند برنامه نویسیو طراحی سایت یاد بگیرن این سایت رو معرفی میکنم.
سلام خسته نباشید آموزش هاتون عالی است ... ممنونم
سلام خسته نباشید
کد زیر متن های که در تگ p باشند رو ابی میکنه ولی زدم فقط بگراندش زرد شد فقط همین ؟
p {color:blue;}
تشکر
با سلام به شما دوست عزیز و گرامی
اگه منظورتون این کد هستش
p
{
color:blue;
}
که باید بهتون بگم این کد تمامی تگ های p موجود در صفحه رو رنگش رو آبی میکنه ... بنابراین احتمالا خصوصیت مذکور را بدرستی اعمال نکرده اید.
تشکر
واقعا متشکرم واقعا مرسی یاشا
خیلی کمکم کرد تو مرحله اول خوب پیش رفتم ایشالله که همین جور آموزش ادامه پیدا کنه من سی اس اس رو فراگیر بشم
دعاتون می کنم مرسی متشکر
دستتون درد نکنه
خیلی زحمت کشیدین
سلام
ممنون از لطف شما
باسلام
اگه میشه در مورد ویژگی هایی که داخل تگ linkنوشته شده بیشتر توضیح دهیدواینکه hrefرو چه جوری مشخص می کنیم.
آگر از ide استفاده میکنید
فایل css خود رو کشید و درون فایل html رهاش کنید؛خودش لینک میشود
به همین راحتی
با توجه به تگ زیر :
< link rel="stylesheet " type="text/css" href="/mystyle. css" >
پارامتر stylesheet به این معنی است که استایلی که برای صفحه وبمان در نظر گرفته ایم یک استایل خارجی است اگر می خواهید برای تعداد زیادی از صفحات وب یک فرمت و style خاص را تعریف کنید بهتر است از این روش برای نوشتن کدهای css استفاده نمائید.
از این روش می توان برای کنترل تمامی اجزاء و تگهای مورد استفاده در کلیه صفحات یک وب سایت استفاده کرد. به طوری که با وارد کردن این Style Sheet در صفحات HTML یک وب سایت کلیه صفحات به طور یکسان از این Style Sheet استفاده می کنند و به راحتی می توان با اعمال تغییرات در این سند کلیه اجزاء و صفحات تشکیل دهنده یک وب سایت را کنترل نمود.
در مورد hrefشما باید ادرس کامل محل قرار گیری فایل css که می خواهید از آن در این صفحه استفاده کنید را وارد نمایید.
سلام. مطمئنین که برنامه ی "لینک به یک فایل CSS خارجی" درسته؟!؟
حق با شماست، اصلاح شد.
سلام
برای یادگیری جاوا اسکریبت لازمه که حتما HTML وcss رو به صورت کامل یاد بگیریم؟
با هر دو باید آشنایی داشته باشید.
سلام
ممنون بابت سایت خوبتون .
دوستان و مدیر سایت لطفاً راهنمایی کنید html رو باید در چه حدی یاد بگیرم که برم برای آموزش css ؟
html خیلی تگ داره و با توجه به برنامه های شی گرا دیگه لازم همه تگ ها رو کار کنیم ! نظر شما چیه در چه حدی باید html رو یاد گرفت ؟
سلام
نیازی نیست که با تک تک عناصر HTML آشنا بشید به نظر بنده همین که با سرفصل های "آموزش مقدماتی HTML" و "آموزش پیشرفته HTML" آشنا بشوید کافی است. بعداً سر فرصت HTML5 را نیز مطالعه فرمایید.
یک چیزی برای من سوال شده
وقتی می خواهیم در html توضیح بنویسیم،می نویسیم:
<!--This is a comment.-->
و تو css:
/* This is a comment. */
استفاده می کنیم،
------------------------
ولی اگر قرار باشد در فایل های داخلی CSS در قسمت HEAD از توضیحات استفاده کنیم ،آنوقت چه میشود؟!
اگر در فایل css از توضیجات html استفاده کنیم چه می شود.؟!
برای اضافه کردن توضیحات CSS در قسمت head و داخل تگ style حتماً از /* */ استفاده کنید. والا خصوصیت ها اعمال نخواهند شد.
در فایل های CSS خارجی نیز، نمی توانید از توضیحات HTMLی استفاده کنید.
توی صفحه اصلی هر سایتی لینک هایی هست که رو هر کدوم کلیک کنیم مارو به یه صفحه دیگه از همون سایت می بره،حالا ممکنه که یکی ازین صفحات قالب کلی اش با بقیه فرق داشته باشه
منظورتون از صفحات مختلف و استایل هاشون همینه؟درست متوجه شدم؟
بله دقیقاً حق با شماست، و برای تکمیل صحبت شما باید اضافه کنم که اگر صفحات ذکر شده دارای قالب یکسانی هستند، حتماً از CSS خارجی استفاده نمایید.
و اگر در بین صفحات مختلف سایت، یکی از صفحات مان قالب و یا طرح متفاوتی دارد می توانید از CSS داخلی استفاده کنید، هرچند در این مورد باز بهترین گزینه همان CSS خارجی است.
مثال رنگ پس زمینه ایراد داره
ممنون، اصلاح شد.