آموزش استفاده از سی اس اس در طراحی قالب وردپرس :
برای استفاده از CSS سه روش وجود دارد:
۱. CSS به شیوه درون خطی inline
۲. CSS به شیوه درون سند (داخلی) internal
۳. CSS به شیوه برون سند (خارجی) external
CSS درون خطی
از این نوع سی‌اس‌اس برای انجام شیوه دهی منحصربه‌فردی بر روی یک عنصر اچ‌تی‌ام ال استفاده می‌شود. توصیه می‌شود که از این نوع شیوه‌دهی تا حد امکان کمتر استفاده شود. چگونگی کاربرد آن به شکل نمونه زیر است:
برای استفاده از این نوع شیوه‌دهی کافی‌ست که از واژه style در عنصر مورد نظر خود استفاده کنید، همه‌ی خصوصیت‌ها و مقدارهایشان باید داخل دو علامت ” و ” قرار گیرند.
بین نام خصوصیت (color) و مقدار آن (blue) باید از علامت : بهره برد و در پایان هر دستور از علامت ; استفاده کرد.
CSS داخلی
از این نوع سی‌اس‌اس برای انجام شیوه دهی منحصربه‌فردی بر روی یک سند اچ‌تی‌ام ال استفاده می‌شود. یعنی شیوه‌دهی بر روی عناصر یک سند انجام می‌شود.
برای استفاده از این نوع شیوه‌دهی باید شیوه‌ها را با استفاده از واژه style در میان دو برچسب <head> و </head> قرار داد.
شیوه‌دهی های دو عنصر body و h1 بر روی عناصر اچ‌تی‌ام‌ال انجام می‌شود، اما برای center که انتخابگر کلاس است باید خصوصیت کلاس را به هر عنصر که می خواهیم شیوه دهی در آن انجام شود، وارد کنیم. مانند:
CSS خارجی
از این نوع سی‌اس‌اس برای انجام شیوه دهی بر روی تمام سندهای تارنما استفاده می‌شود. ما می توانیم با استفاده از تنها یک پرونده (فایل) هر شیوه‌ای را که می‌خواهیم بر روی تمام سندهای تارنما اجرا کنیم.
برای استفاده از شیوه‌دهی خارجی به ترتیب زیر عمل می‌کنیم:
۱. ابتدا باید یک پرونده با پسوند css. بسازیم و تمام شیوه‌های مورد نظر خود را در آن بنویسیم.
۲. پیوند پرونده css در سندهای اچ‌تی‌ام‌ال وارد کنیم. برای وارد کردن پیوند باید آن را داخل دو برچسب <head> و </head> سندها (برگه‌ها) قرار دهیم:
به این ترتیب تمام شیوه‌های نوشته شده در پرونده style.css در همه‌ی برگه‌هایی که این پیوند در آنها نوشته شده انجام می‌شوند.
ترتیب اجرای CSS
اگر شیوه‌های یکسانی در هر سه حالت شیوه‌دهی (درون خطی، داخلی و خارجی ) نوشته شوند، ترتیب انجام آنها به طریق زیر است:
۱. شیوه دهی خارجی
۲. شیوه‌دهی داخلی
۳. شیوه‌دهی درون خطی
به این ترتیب شیوه‌دهی درون خطی آخرین شیوه‌دهی است که انجام می‌شود و بر روی عناصر تاثیر می‌گذارد. پس ترتیب اثرگذاری آن برعکس ترتیب انجام آن است.
نکته: در صورتی که پیوند پرونده css که در بین دو برچسب <head> و </head> گذاشته شده است بعد از دستورهای style داخلی آورده شود، ترتیب اجرای سی‌اس‌اس در مورد آنها تغییر می‌کند. به شکلی که ابتدا شیوه‌های داخلی انجام می‌شود و سپس شیوه‌های پرونده خارجی:
در کل باید گفت که شیوه‌دهی خارجی یا همان استفاده از یک پرونده css ، معمول‌ترین راه انجام شیوه‌دهی CSS است.
برای استفاده از 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 است.
