ورود

View Full Version : اصول دستورات css در طراحی سایت



nopardazco
جمعه 08 دی 1396, 14:24 عصر
✅ نوشتن دستورات CSS
برای نوشتن دستورات CSS در یک وب سایت (http://nopardazco.com) سه روش وجود دارد:
1- شیوه نامه خارجی: External Style Sheet
2- شیوه نامه داخلی: Internal Style Sheet
3- شیوه درون خطی: Inline Style




✅ شیوه نامه خارجی: External Style Sheet
در این روش تمامی دستورات CSS در یک فایل مجزا از دیگر فایل ها و صفحات وب سایت (https://nopardazco.com/pages/hotel) نوشته میشود و با فرمت .css در کنار دیگر فایل های وب سایت در فولدر پروژه ذخیره میشود. سپس در هر صفحه ای که می خواهیم این دستورات بر عناصر آن اعمال شوند، به بخش <head> رفته و توسط تگ <link> فایل css خود را به صفحه متصل میکنیم
⭕️ نکته: برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head


✅ شیوه نامه داخلی: Internal Style Sheet
این روش نوشتن دستورات باید زمانی استفاده شود که قصد دارید یک سری استایل ها را فقط بر روی یک صفحه خاص اعمال کنید و عناصر صفحه مورد نظر با عناصر سایر صفحات وب سایت ظاهر متفاوتی دارد. برای استفاده از این روش به صفحه مورد نظر رفته و دستورات مورد نظر را در بین تگ <style> می نویسیم
این سبک اولویت بالاتری از CSS خارجی ها دارد.
<head>
<style>
hr {color:silver;}
p {margin-left:20px;}
body {background-image:url("images/bg.gif");}
</style>
</head


✅ شیوه درون خطی: Inline Style
تغییر ظاهر به روش ظاهرسازی در خط تنها برای مواردی باید استفاده شود که بخواهید یک المان (تگ) HTML خاص را به صورت مستقل و بدون وابستگی به سایر تگ ها تغییر شکل و ظاهر دهید.
برای تغییر ظاهر به روش ظاهرسازی در خط از ویژگی style درون المان (تگ) استفاده می شود.
این روش از نوشتن css دارای بالاترین اولویت اجرا نسبت به دو روش دیگر است.
در مثال زیر تگ عنوان به تنهایی با استفاده از ویژگی style تغییر رنگ داده می شود:
<h1 style="color:blue">این یک عنوان با رنگ آبی است</h1>


⭕️نکته: برای اینکه طراحی سایت (http://nopardazco.com) بهینه تری داشته باشید پیشنهاد میشود که از این روش فقط در مواقع ضروری استفاده کنید.