استفاده از CSS در HTML
سی اس اس ، زبان ویژگی دهنده به عناصر صفحه در HTML است. در این آموزش شما را با نحوه استفاده از زبان CSS در عناصر HTML آشنا می کنیم.
سی اس اس ، همزمان با HTML 4 معرفی شد و وظیفه تعیین ویژگی های عناصر موجود در صفحه را بر عهده گرفت. تسلط و آشنایی با آن می تواند کمک قابل توجهی در طراحی بهتر و ساده تر کند.
به طور کلی ، به سه صورت مختلف می توانید از CSS در طراحی های خود استفاده کنید :
- استفاده از روش inline – با استفاده از عناصر تگ ها
- استفاده از سی اس اس جدا اما داخل صفحه – internal
- استفاده از فایل خروجی – external
اگرچه بهترین و متداول ترین روش ، استفاده از شیوه external ، یعنی استفاده از فایل خارجی است در این آموزش شما را با هر سه نوع شیوه استفاده ، آشنا خواهیم کرد.
اگر با سی اس اس آشنا نیستید ، نگران نباشید. به زودی با آموزش کامل سی اس اس نیز در خدمت شما خواهیم بود. اما به طور خلاصه ، خوب است بدانید که در سی اس اس می توانید همه ویژگی های یک عنصر ، از جمله فونت ، رنگ ، اندازه و … را ویرایش کنید.
استفاده از CSS به روش Inline
استفاده از روش inline ، در واقع برای تعیین یک سری ویژگی های خاص ، فقط برای یک تگ است. برای مثال می خواهید ویژگی های ظاهری یک تگ <h1> را تعیین کنید. برای این کار از عنصر style استفاده می کنیم. به مثال زیر توجه کنید :
<h1 style=”font-size: 14px”>GooyaIT</h1>
( کد font-size: 14px کد های سی اس اس هستند )
در کد بالا ، ویژگی font-size:14px فقط برای این تگ تنظیم شده است. پس اگر 10 تگ <h1> داشته باشیم ، این ویژگی فقط برای تگ مورد نظر ما اعمال شده است. یک مثال دیگر :
<p style=”color:blue;margin-left:20px;”>This is a paragraph.</p>
و یا این مثل که در آن ، پشت زمینه عناصر هدف قرار داده شده است :
<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>
در مثال روبه رو فونت ، رنگ نوشته و اندازه فونت را تغییر داده ایم :
<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>
در مثال بعدی ، نحوه تعیین جایگاه نوشته را با استفاده از دستور text-align می بینیم :
<html>
<body>
<h1 style=”text-align:center;”>Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
استفاده از CSS به روش Internal
شیوه بعدی استفاده از CSS ، روش نوشتن سی اس اس ، در داخل فایل طراحی است. اگر جلسه پیشین آموزش ما را مطالعه کرده باشید ، به خاطر خواهید آورد که تگ <style> برای نوشتن کد های CSS در صفحه کاربرد دارد. در این روش ، می توان ویژگی های جمعی یا فردی تگ های صفحه را معین نمود. از آنجایی که فعلا قصد آموزش CSS را نداریم ، تا همین حد بدانید که مانند مثال رو به رو ، می توانید کد های CSS خود را ، میان تو تگ <style> و </style> موجود در تگ <head> و </head> بنویسید.
توجه : استفاده از این شیوه ، برای تعیین ویژگی های خاص ، تنها برای صفحه فعلی است که آن را طراحی می کنیم.
<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
در مثال بالا ، ویژگی هایی برای تگ <body> در نظر گرفته شده است که پشت زمینه صفحه را زرد رنگ می کند : ( background-color: yellow ) و ویژگی نوشته ها به رنگ آبی نیز برای همه تگ های <p> در صفحه در نظر گرفته شده است : ( color:blue )
استفاده از CSS به روش External
در این روش ، می توان کد های CSS را در یک فایل خروجی ذخیره کرده و در فایل HTML به آن رجوع کرد. در طراحی های سایت های چند صفحه ای که صفحات طراحی های مشابه دارند ، این شیوه بسیار متداول و مناسب است. فرض کنید کد های خود را در فایل style.css ذخیره کرده ایم. همانطور که در آموزش پیشین عرض شد ، می توانید با استفاده از تگ <link> در تگ <head> به آن مراجعه و آن را در صفحه بارگزاری نمود. همانند مثال مقابل :
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
اگر می خواهید روش extrenal را بهتر درک کنید ، مثال زیر را دنبال کنید. ابتدا کد های زیر را در فایلی به نام style.css ذخیره نمایید : ( اگر ویرایشگر خاصی ندارید با استفاده از NotePad این کار را انجام دهید )
body {background-color:yellow;}
p {color:blue;}
حال بار دیگر در ویرایشگر خود ، در یک صفحه جدید ، کد های زیر را قرار دهید :
<html>
<head>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<p>A paragraph.</p>
</body>
</html>
و فایل را با فرمت html در کنار فایل style.css ذخیره کنید. سپس فایل html را با مرورگر خود باز کنید. همانطور که مشاهده خواهید کرد ، استایل هایی که در فایل style.css برای body و p در نظر گرفته اید اعمال خواهند شد.
هدف از این آموزش ، ضمن آشنا ساختن شما با دستورات CSS ، مشاهده چگونگی تعیین ویژگی عناصر صفحه توسط CSS بود.
ساده و مفید!