آموزش CSS ( قسمت چهارم ) روش های استایل دهی

با سلام خدمت کاربران گرامی یک لرن

در این پست آموزش CSS قسمت چهارم را برای شما آماده کرده ایم در این بخش از آموزش به بررسی روش های استایل دهی میپردازیم و اولویت روش های استایل دهی را برای شما توضیح می دهیم

در ادامه همراه ما باشید … 

آموزش CSS ( قسمت چهارم ) روش های استایل دهی

مسئله ای که امروز درباره آن صحبت میکنیم بحث قرار گیری استایل ها در صفحات وب است شما میدانید که استایل ها با روش های مختلف میتوانند در صفحات وب قرار گیرند و اجرا و اعمال شوند

روش ها کلی قرارگیری استایل ها :

1- استایل خارجی (external)

2- استایل داخلی (internal)

3- استایل درون خطی (inline)

warning در هر یک از روش های بالا استایل ها مشابه هستند و فقط مکان قرار گیری استایل ها متفاوت میشود

هم اکنون به توضیح این روش ها میپردازیم

1- استایل خارجی

یکی از روش های استایل دهی استایل دهی خارجی میباشد که در این روش شما استایل ها را در یک سند خارجی نوشته و سپس به سند اصلی خود پیوند میزنید برای شروع کار یک سند باز کنید و آن را با پسوند css ذخیره کنید پس از ذخیره وارد سند شوید و استایل های خود را داخل آن وارد کنید

warning در این سند خارجی از تگ باز و بسته ی style استفاده نکنید و مستقیما کدهای خود را داخل ان بنویسید

حال سند خود را ذخیره کنید و به سند اصلی خود باز گردید و با روش زیر سند استایل خارجی خود را به سند اصلی پیوست کنید

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

دقت کنید کد بالا را باید قبل از تگ </head> وارد کنید و تنها در قسمت href آدرس سند خارجی خود را وارد کنید تا استایل خارجی به سند اصلی شما پیوست شود .

یک نمونه از نحوه ی قرار گیری کدها در سند خارجی :

.myclass{
color:black;
font-size:20px;
}

2- استایل داخلی

در این روش از نوع استایل دهی شما باید استایل های خود را مانند مثال زیر داخل تگ باز و بسته ی style قرار دهید و قبل از تگ بسته ی head در سند اصلی خود وارد کنید

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<style>
استایل های شما
</style>
</head>

<body>
</body>
</html>

3- استایل درون خطی

در این روش شما استایل های خود را داخل هر تگ وارد میکنید برای اینکار باید شناسه style را در همان تگ ایجاد کنید و در روبروی آن استایل های خود را وارد کنید

مثلا قصد داریم به تگ p استایل دهیم برای اینکار در داخل همان تگ p شناسه style را وارد میکنیم و سپس استایل دهی میکینم مانند نمونه زیر

<p style="color:red;">متن</p>

warning در این روش نیاز به سلکتور نیست چون استایل شما فقط به تگی اعمال میشود که استایل را داخل آن مینویسید

بهترین روش کدام است ؟

بهترین روش در استایل دهی , استال دهی خارجی میباشد در این روش سرعت بارگزاری صفحه شما سریع تر میشود و همچنین حجم صفحه ی اصلی شما کمتر خواهد شد پس از استایل دهی خارجی استایل داخلی بهترین است اما باعث حجیم شدن صفحه ی شما میشود و روش سوم یعنی استایل دهی درون خطی به هیچ عنوان قابل قبول نیست و سعی کنید از این روش استفاده نکنید چون در مسائل سئو نیز دخالت دارد

اولویت روش های استایل دهی

به عنوان مثال شما برای یک تگ p هم استایل درون خطی نوشته اید هم استایل داخلی و هم استایل خارجی که هر سه استایل های متفاوتی دارند کدام استایل اعمال میشود

قطعا استایل درون خطی اعمال میشود روش درون خطی بالاترین اولویت را دارد و پس از آن روش داخلی و سپس روش خارجی

روش درون خطی که کاملا مشخص شد بالاترین اولویت را داراست

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
استایل های شما
</style>
</head>

<body>
</body>
</html>

در روش بالا استایل هایی که در بین دو تگ style نوشته اید اولیت بالا دارد اما اگر بخواهید اولویت بالا را به استایل خارجی بدهید میتوانید استایل خارجی را بعد از استایل داخلی قرار دهید مثل مثال زیر :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<style>
استایل های شما
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
</body>
</html>

حال در مثال بالا استایل خارجی اولویت بیشتری دارد

در اینجا آموزش CSS قسمت چهارم به پایان رسید شما میتوانید به عنوان مکمل این قسمت اموزش ویدیویی CSS قسمت چهارم را مشاهده کنید

به زودی قسمت پنج اموزش ارائه میشود …

فرادرس

برچسب ها : ، ، ، ، ، ،