سلام مهمان گرامی ، خوش آمدید. آیا این نخستین بازدید شماست ؟ وارد شده یا عضو شوید

انجمن های تخصصی علوم رایانه و هنرهای دیجیتال



آموزش استفاده از سی اس اس در طراحی قالب
زمان کنونی: 26-06-2017، 02:56 PM
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: Ehsan
آخرین ارسال: Ehsan
پاسخ 1
بازدید 969
محبوب کنید:

امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش استفاده از سی اس اس در طراحی قالب
#1
آموزش استفاده از سی اس اس در طراحی قالب وردپرس :
برای استفاده از 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 است.
بدو بدوبدو بدو
پاسخ
 سپاس شده توسط Mohsen Omidvar


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش ساخت انیمیشن با استفاده از CSS Mohsen Omidvar 0 581 23-01-2016، 06:24 PM
آخرین ارسال: Mohsen Omidvar
Heart آموزش حذف اسکرول افقی در قالب با استفاده از سی اس اس Ehsan 0 1,249 09-12-2015، 12:56 AM
آخرین ارسال: Ehsan
  آموزش برنامه نویسی جاوا zahra110 0 868 01-09-2015، 11:44 AM
آخرین ارسال: zahra110
  آموزش برنامه نویسی جاوا zahra110 0 716 01-09-2015، 11:44 AM
آخرین ارسال: zahra110
  حذف اسکرول افقی و عمودی قالب با استفاده از سی اس اس Ehsan 0 1,192 09-05-2015، 10:54 PM
آخرین ارسال: Ehsan
  استفاده از استایل خارجی برای طراحی صفحات HTML Farzad 0 1,251 03-10-2014، 09:58 PM
آخرین ارسال: Farzad
  استفاده از کلاس و id در طراحی صفحات با CSS Farzad 0 1,309 03-10-2014، 09:50 PM
آخرین ارسال: Farzad

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان