آموزش قراردادن css در صفحه html به صورت خارجی و داخلی و درون خطی
یکی از آموزش های مقدماتی برای طراحی سایت اموزش css است. قبل از این که نحوه نوشتن کد های (سی اس اس ) یا css را بدانید باید نحوه استفاده از این کد ها در داخل صفحات را بیاموزید. در این مقاله روش قراردادن css در صفحه html را خواهید آموخت.
css درون خطی
اولین چیزی که باید شما بیاموزید، css درون خطی است. برای استفاده از css درون خطی مثال زیر را مشاهده کنید:
<h1 style="color:blue;">این عنوان مقاله است!</h1>
<p style="color:red;">این یک پاراگراف است.</p>در مثال بالا مشاهده می کنید که از دو تگ h1 و p استفاده شده است. برای هر کدام از یک استایل استفاده شده است. بنابراین همانند مثال بالا شما می توانید فقط یک style به تگ خود اضافه کنید و داخل دابل کوتیشن (” “) اقدام به نوشتن استایل کنید. همانطور که در بالا مشاهده م یکنید به متن عنوان h1 رنگ آبی نسبت داده شده است و برای پاراگراف رنگ قرمز در نظر گرفته شده است.
css داخلی
در css داخلی، داخل فایل html تگ استایل قرار می گیرد، اما درون تگ استفاده نمی شود. برای آشنایی بیشتر مثال زیر را مشاهده کنید:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>این عنوان مقاله است!</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>همانطور که در مثال بالا مشاهده می کنید، داخل تگ h1 و p هیچ استایلی نوشته نشده است. برای استایل دادن و نوشتن css برای این دو مورد از تگ استایل در head استفاده شده است. بنابراین برای ایجاد css داخلی، درون head تگ style را باز و بسته کرده و داخل ان استایل را می نویسیم.
برای نوشتن استایل می توان از class یا id استفاده کرد یا به صورت کلی تگ مورد نظر را استایل دهی کرد.
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>در استایل بالا برای body ، تگ h1 و p استایل نوشته شده است. حال شما می توانید از class و id نیز استفاده کنید. به این منظور مثال زیر را مشاهده کنید:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
.heading1{color: blue;}
#paragraph{color: red;}
</style>
</head>
<body>
<h1 class="heading1">این عنوان مقاله است!</h1>
<p id="paragraph">این یک پاراگراف است.</p>
</body>
</html>مثال بالا دقیقا، نتیجه ای برابر با مثال قبل برای شما خواهد داشت. فقط از class و id برای این منظور استفاده شده است. برای استایل دهی برای class شما باید از نقطه ابتدای کلاس استفاده کنید و برای استایل دهی id باید از # قبل از نام ای دی استفاده کنید. توجه داشته باشید id فقط باید یک مرتبه در فایل وجود داشته باشد و class می تواند چند مرتبه در فایل تکرار شود.
css خارجی
در css خارجی، کد های css را داخل فایل جداگانه قرار میدهیم. از دلایل ان می توان به تمیز تر شدن کد نویسی و همچنین کنترل بیشتر بر حجم فایل ها css نام برد.
مثال زیر یک مثال برای css خارجی است:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>این عنوان مقاله است!</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>حال کد های و مارک اپ های css را در فایلی به نام styles.css قرار می دهیم. به این صورت به راحتی هر زمان کد جدید css نیاز باشد می توانیم داخل فایل css ان را اعمال کنیم.
امیدواریم این اموزش مفید واقع شده باشد. می توانید همینک سوالات خود را بپرسید تا در اسرع وقت به شما پاسخ داده شود.
دیدگاه ها