انجمن های تخصصی علوم رایانه و هنرهای دیجیتال
آموزش استفاده از سی اس اس در طراحی قالب - نسخه‌ی قابل چاپ

+- انجمن های تخصصی علوم رایانه و هنرهای دیجیتال (https://www.forum.cgaria.com)
+-- انجمن: رایانه (https://www.forum.cgaria.com/forum-236.html)
+--- انجمن: برنامه نویسی | طراحی وب (https://www.forum.cgaria.com/forum-22.html)
+---- انجمن: طراحی صفحات وب (https://www.forum.cgaria.com/forum-27.html)
+----- انجمن: صفحات استاتیک (https://www.forum.cgaria.com/forum-69.html)
+----- موضوع: آموزش استفاده از سی اس اس در طراحی قالب (/thread-891.html)

آموزش استفاده از سی اس اس در طراحی قالب - Ehsan - 09-12-2015

آموزش استفاده از سی اس اس در طراحی قالب وردپرس :
برای استفاده از CSS سه روش وجود دارد:
۱. CSS به شیوه درون خطی inline
۲. CSS به شیوه درون سند (داخلی)   internal
۳. CSS به شیوه برون سند (خارجی)  external


CSS درون خطی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی منحصربه‌فردی بر روی یک عنصر اچ‌تی‌ام ال استفاده می‌شود. توصیه می‌شود که از این نوع شیوه‌دهی تا حد امکان کمتر استفاده شود. چگونگی کاربرد آن به شکل نمونه زیر است:

کد:
<h1 style= “ color : blue ;  margin-left : 30px ; ” > این یک عنوان است  </h1>

برای استفاده از این نوع شیوه‌دهی کافی‌ست که از واژه style در عنصر مورد نظر خود استفاده کنید، همه‌ی خصوصیت‌ها و مقدارهایشان باید داخل دو علامت ”  و ”  قرار گیرند.

بین نام خصوصیت (color) و مقدار آن (blue) باید از علامت : بهره برد و در پایان هر دستور از علامت ; استفاده کرد.


CSS داخلی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی منحصربه‌فردی بر روی یک سند اچ‌تی‌ام ال استفاده می‌شود. یعنی شیوه‌دهی بر روی عناصر یک سند انجام می‌شود.

برای استفاده از این نوع شیوه‌دهی باید شیوه‌ها را با استفاده از واژه  style  در میان دو برچسب <head> و </head> قرار داد.

کد:
<head>
<style>
body {
   background-color : linen ;
}h1 {
   color : maroon;
   margin-left : 40px ;
}
.center {
text-align : center ;
}
</style>
</head>

شیوه‌دهی های دو عنصر body  و h1  بر روی عناصر اچ‌تی‌ام‌ال انجام می‌شود، اما برای center که انتخابگر کلاس است باید خصوصیت کلاس را به هر عنصر که می خواهیم شیوه دهی در آن انجام شود، وارد کنیم. مانند:


کد:
<p class=”center”>

متن پاراگراف

</p>

CSS خارجی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی بر روی تمام سندهای تارنما استفاده می‌شود. ما می توانیم با استفاده از تنها یک پرونده (فایل) هر شیوه‌ای را که می‌خواهیم بر روی تمام سندهای تارنما اجرا کنیم.

برای استفاده از شیوه‌دهی خارجی به ترتیب زیر عمل می‌کنیم:

۱. ابتدا باید یک پرونده با پسوند css. بسازیم و تمام شیوه‌های مورد نظر خود را در آن بنویسیم.

کد:
body {
background-color: lightblue ;
}

h1 {
color: navy ;
margin-left: 20px ;
}


۲. پیوند پرونده css  در سندهای اچ‌تی‌ام‌ال وارد کنیم. برای وارد کردن پیوند باید آن را داخل دو برچسب <head>  و  </head> سندها (برگه‌ها) قرار دهیم:

کد:
<head>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >
</head>

به این ترتیب تمام شیوه‌های نوشته شده در پرونده  style.css  در همه‌ی برگه‌هایی که این پیوند در آنها نوشته شده انجام می‌شوند.


ترتیب اجرای CSS

اگر شیوه‌های یکسانی در هر سه حالت شیوه‌دهی (درون خطی، داخلی و خارجی ) نوشته شوند، ترتیب انجام آنها به طریق زیر است:

۱. شیوه دهی خارجی

۲. شیوه‌دهی داخلی

۳. شیوه‌دهی درون خطی


کد:
<head>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >

<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>

</head>

به این ترتیب شیوه‌دهی درون خطی آخرین شیوه‌دهی است که انجام می‌شود و بر روی عناصر تاثیر می‌گذارد. پس ترتیب اثرگذاری آن برعکس ترتیب انجام آن است.



نکته: در صورتی که پیوند پرونده css  که در بین دو برچسب <head> و </head> گذاشته شده است بعد از دستورهای style داخلی آورده شود، ترتیب اجرای سی‌اس‌اس در مورد آنها تغییر می‌کند. به شکلی که ابتدا شیوه‌های  داخلی انجام می‌شود و سپس شیوه‌های پرونده خارجی:

کد:
<head>
<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >

</head>



در کل باید گفت که شیوه‌دهی خارجی یا همان استفاده از یک پرونده css ، معمول‌ترین راه انجام شیوه‌دهی CSS است.