روش استفاده از CSS – آموزش سی اس اس

روش استفاده از CSS :

همان طور که در آموزش قبل درباره روش استفاده از CSS اشاره ی کوتاهی شد، شما می توانید از کدهای CSS به سه طریق خارجی (External)، داخلی (Internal) و درون خطی (Inlin) در صفحات HTML استفاده کنید.

۱- روش اول، شیوه نامه خارجی:

در اولین روش استفاده از CSS ، یک سند CSS را با پسوند css. ذخیره می کنیم و در فایل HTML با استفاده از تگ لینک <link> در قسمت head وب سایت، فایل CSS فراخوانی می شود.

مثلا اگر بخواهیم از یک فایل CSS با نام style .css در سند HTML استفاده کنیم، آدرس فایل style.css را توسط تگ لینک <link> ، در قسمت head اضافه می کنیم؛ به صورت زیر:

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

در تگ لینک <link> ، خاصیت href آدرس فایل را مشخص می کند؛ حال اگر فایل style.css در پوشه ی دیگری به نام stylesheets بود، آدرس آن به صورت زیر تغییر خواهد کرد:

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

۲- روش دوم، شیوه نامه داخلی:

در این روش نیازی به فایل CSS خارجی نیست و دستورات CSS ، با استفاده از برچسب <style> در قسمت head به صفحه مورد نظر اعمال می شوند.

برای مثال کدهای زیر را امتحان کنید(به قسمت <style> توجه کنید):

<!DOCTYPE HTML>
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ویترین وردپرس | استایل داخلی در سی اس اس </title>
<style>
h3 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h3> روش استفاده از سی اس اس داخلی </h3>
<p> متن دلخواه پاراگراف، برای روش استفاده از سی اس اس داخلی </p>
<!-- http://vitrinwp.com/ -->
</body>
</html>

نتیجه کدهای بالا به صورت زیر خواهد شد:

روش استفاده از سی اس اس داخلی

متن دلخواه پاراگراف، برای روش استفاده از سی اس اس داخلی

۳- روش سوم، شیوه نامه درون خطی:

در این روش با کمک صفت style درون هر برچسب و مقداردهی مستقیم استایل برای آن برچسب است.

مانند نمونه در تگ <p> زیر:

<p style="color:blue;">
متن دلخواه پاراگراف، برای روش استفاده از سی اس اس درون خطی
</p>

نتیجه کد بالا به صورت زیر خواهد شد:

متن دلخواه پاراگراف، برای روش استفاده از سی اس اس درون خطی

روش استفاده از CSS – آموزش سی اس اس