مقدمه آموزش CSS

**VBIran** · 2011/10/04, 11:01 PM

درود.

در این تاپیک پیش از آغاز آموزش سی اس اس قصد داریم تا اندازه ای شما را با CSS آشنا کنیم .

قبل از شروع سی اس اس باید چه معلوماتی داشته باشید :

HTML

سی اس اس (CSS) چیست ؟

سی اس اس یک سری جلوه برای المنت های اچ تی ام ال است .

المنت چیست ؟

به قسمت های مختلف HTML المنت گفته می شود .

مثل :

<div>
<span>
<p>
<body>
...

برای مثال شما یک div تعریف میکنید و به این div یک سری خواص میدید . مثلاً تعریف میکنید که بصورت معمولی عکس نارنجی باشد و به هنگام رفتن روی div رنگ آن تغییر کند و ..

یکی از معروف ترین و پر کاربرد ترین المنت های HTML المنت div است که بخش ها را در یک HTML مشخص میکند و میتوان آن را به عنوان یک کادر نامرئی دانست که با دادن ویژگی به آن مرئی و قابل دید میشود که در فصل های مختلف سعی میکنیم بصورت کامل آموزش دهیم .

طراحان وب به چه علت به سی اس اس علاقه مند هستند ؟

طراحان وب پیش از سی اس اس باید برای هر قسمت از سایت از تگ های اچ تی ام ال مثل <font> و color و .. استفاده میکردند ولی وقتی سی اس اس آمد با استفاده از سی اس اس یک Class تعریف می کنند و برای تمام بخش های مورد نظرشان سی اس اس را اعمال میکنند .

کلس چیست آن را باید چگونه نوشت ؟ چگونه باید یک سی اس اس را در صفحه قرار داد .

کلس به هر یکی از ویژگی های سی اس اس گفته میشود .

اول باید به شما عرض کنم که سی اس اس را به دو صورت میتوان در سایت قرار داد :

1. بصورت اکسترنال ( یعنی خارج از سایت ) ، به این صورت که شما یک فایل در هاست درست میکنید و با استفاده از یک کد آن را در سایت فراخوانی میکنید .

کد:

<link rel="stylesheet" type="text/css" href="http://www.vbiran.ir/test.css"><link rel="stylesheet" type="text/css" href="http://www.vbiran.ir/test.css">

2. به صورت اینترنتال ( درون سایت ) ، به این صورت که شما به این صورت کد را قبل از تگ در صفحه میزنید :

<style type="text/css">
اینجا کلس ها قرار میگیرند
</style>

کد:

<style type="text/css"> 
اینجا کلس ها قرار میگیرند
</style>

برای نوشتن کلس باید بصورت زیر عمل کنید :

کد:

.class1 {
property:value;
}

قسمت بالا یک شکل کلی برای سی اس اس است . class1 نام ویژگی ما هست . پس ما میتوانیم class2 class3 و .. را هم بسازیم ( لازم نیست حتماً اول آن کلس باشد هر اسمی که دوست دارید میتوانید به آن بدهید ) .

قسمت property ویژگی ای است که ما قصد داریم بدهیم و value مقدار ویژگی که در قسمت بعدی بیشتر با آن آشنا میشوید . یک کلس سی اس اس با } آغاز و به { ختم میشود . ( ممکن است چون وی بی ایران RTL است این کد ها برای شما برعکس نمایش داده شود )

مثلاً شما میخواهید یک ویژگی جدید برای سایتتان بنویسید که در آن نوشته را سفید کنید ، به کادر سایه بدهید و یک بک گراند قرمز انتخاب کنید !

.vijegi {
text-color:red;
box-shadow:#b2b2b2 0 0 7px;
-moz-box-shadow:#b2b2b2 0 0 7px;
-webkit-box-shadow:#b2b2b2 0 0 7px;
background:red;
}

که ما در واقع قرار هست همین ویژگی ها را به شما آموزش دهیم مثلاً Property هایی مثل moz box shadow یا background و ..

چگونه یک سی اس اس را به یک تگ اچ تی ام ال نسبت دهیم ؟

برای نسبت دادن یک سی اس اس به یک تگ اچ تی ام ال کافی هست به المنت مورد نظر class را اضافه کنید مثلاً :

<div>

-->

<div class="vijegi">

متن ما یا عکس ما و ..

امیدوارم این مقدمه ، مقدمه مناسبی برای آموزش CSS باشد همچنین باید عرض کنم یادگیری این مقدمه برای سی اس اس بسیار مهم است و اگر تاکنون با HTML سر و کار نداشته اید سعی کنید هر چه سریعتر یک نرم افزار ویرایشگر مثل Sharepoint Designer دانلود کنید تا کار های خود را مستقیماً با آن چک کنید و زودتر با CSS و HTML آشنا شوید .

موفق باشید .

منبع : وی بی ایران

**VBIran** · 2011/10/04, 11:03 PM

این هم یک نمونه دیگر سی اس اس : <br><br><br> <style type="text/css"> #vb { font-family:Calibri; width:73px; height:74px; background:#56d6e5; color:#ffffff; position:relative; font-weight:bold; font-size:20px; animation:vb 5s infinite; -moz-animation:vb 5s infinite; -webkit-animation:vb 5s infinite; border-radius:20px; -webkit-border-radius:20px; float:right; } @keyframes vb { 0% {transform: rotate(-0deg);right:0px;padding:0px;} 10% {transform: rotate(-0deg);right:0px;padding:20px;} 25% {transform: rotate(20deg);right:0px;padding:40px;} 50% {transform: rotate(0deg);right:90%;} 55% {transform: rotate(0deg);right:90%;padding:50px;} 70% {transform: rotate(0deg);right:90%;background:#6ccbdc;padding: 0px;} 90% {transform: rotate(0deg);right:0px;} } @-webkit-keyframes vb { 0% {-webkit-transform: rotate(-0deg);right:0px;padding:0px;} 10% {transform: rotate(-0deg);right:0px;padding:20px;} 25% {-webkit-transform: rotate(20deg);right:0pxpadding:40px;;} 50% {-webkit-transform: rotate(0deg);right:90%;} 55% {-webkit-transform: rotate(0deg);right:90%;padding:50px;} 70% {-webkit-transform: rotate(0deg);right:90%;background:#6ccbdc;padding: 0px;} 90% {-webkit-transform: rotate(0deg);right:0px;} } @-moz-keyframes vb { 0% {-moz-transform: rotate(-0deg);right:0px;padding:0px;} 10% {transform: rotate(-0deg);right:0px;padding:20px;} 25% {-moz-transform: rotate(20deg);right:0px;padding:40px;} 50% {-moz-transform: rotate(0deg);right:90%;} 55% {-moz-transform: rotate(0deg);right:90%;padding:50px;} 70% {-moz-transform: rotate(0deg);right:90%;background:#6ccbdc;padding: 0px;} 90% {-moz-transform: rotate(0deg);right:0px;} } </style> <div id="vb"><img src="http://up.vbiran.ir/images/yib6incsq34hz34cmx7h.png"><br /><span>VBIran</span><br /><br /></div>

**Mr.FranK** · 2011/10/04, 11:17 PM

مرسی علی خوندم خیلی عالی توضیح دادی
همه چیز رو کامل گرفتم(البته زیاد هم پرت نبودم از اولش)

**masuod** · 2011/10/04, 11:21 PM

كد نويس وردپرس هم تو همين حوزه هست ديگه ؟
راستي من يه سوال پرسيدم يه نگاه بندازيد : http://www.vbiran.ir/thread17010.html#post128544

**Mr.FranK** · 2011/10/04, 11:22 PM

بله HTML,CSS,PHP

**Light** · 2011/10/04, 11:33 PM

نوشته اصلی توسط masuod

كد نويس وردپرس هم تو همين حوزه هست ديگه ؟
راستي من يه سوال پرسيدم يه نگاه بندازيد : http://www.vbiran.ir/thread17010.html#post128544

یه div تعریف کنید با یه کلس جدید ، یا از یکی از کلس های نوشته شده استفاده کنید.

**VBIran** · 2011/10/04, 11:47 PM

به هنگام آموزش یک سری تگ ها بخاطر روشن بودن HTML حذف شده بود که تصحیح شد..

**Zirmizi** · 2011/10/05, 02:03 AM

نوشته اصلی توسط VBIran

منبع : وی بی ایران

درود علی آقا من از آموزشی که دادی استفاده کردم خوب بود. ولی اینو چه جور انجام بدیم؟ منبع: وی بی ایران تو یه کادر زرد هست و *** میشه!! ممنون

**نکته: وردپرس هست

**~~AliBother~~** · 2011/10/05, 07:54 AM

یه نمونه: با حرکت موس به آرومی بکگراندش از آبی کمرنگ به *** تبدیل میشه.البته دورش افکت محو شدگی هم داره.رنگ متن هم با قرار گیری موس عوض میشه و...

css:

کد HTML:

.ali {
background: none repeat scroll 0% 0% rgb(209, 229, 240); 
border: 10px 10px 10px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 0pt;
margin: 0pt 20px;
-webkit-box-shadow: 0px 0px 5px 3px #CCCCCC !important;
-moz-box-shadow: 0px 0px 5px 3px #CCCCCC !important;
box-shadow: 0px 0px 5px 3px #CCCCCC !important; 
}
.ali {
    padding:4px 0;
    text-align:right;
}
 

.ali {
-webkit-transition: background-color 700ms ease-in;
-moz-transition: background-color 700ms ease-in;
transition: background-color 700ms ease-in;
}

.ali:hover {
color: #cc0033;
}
.ali:hover {
background-color: #33ff00;
}

**tooptarinha** · 2011/10/05, 10:41 AM

ممنون . ببخشيد من دوتا سوال داشتم . اول اينكه شما گفتيد كلاس به ويژگي هاي سي اس اس ميگن و طبيعتا اين ويژگي ها اسم هاي خاصي دارن اما چرا شما وقتي ميخوايد يه كلاس تعريف كنيد ب نام دلخواه تعيريف مكيند ؟ مگه نبيد به همون اسم property ها باشه ؟

سوال دومم اينه كه اول اسم هر كلاس و نوشتن يه كلاس يه نقطه ( .) گذاشتيد . آيا واجبه اين نقطه كه بزاريم ؟