• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

آموزش گام به گام CSS و HTML

Mahdi Askari

مدير فنی
به نام خدا
خب چند وقتی در فکرش بودم قدم به قدم سی اس اس و اچ تی ام رو آموزش بدم
اما همونطور که میدونید به دلیل تنبل بودن حسش نبود:خنده1:
تا اینکه چند تن از دوستان گفتن و باعث شد این آموزش رو شروع کنم:نیش:

بعد از این آموزش که سعی میکنم هر روز تاپیک رو بروز کنم میتونیم یک صفحه اچ تی ام ال رو بسازیم و یا بتونیم قالب ها رو با توجه به علاقه ویرایش کنیم:18:

آموزش به صورت دو طرفه هست
بعد از هر آموزشی که من میذارم یک تمرین به شما میدم برای اینکه خودتون رو محک بزنید
و وقتی آموزش رو انجام دادید و به من نشون دادید من از شما چیز یاد میگیرم
این محیط تعلیم و تعلم رو دوست دارم:17:

سعی میکنیم قدم به قدم بریم جلو و هدف نهاییمون طراحی یک قالب ساده هست
در هر بار آپدیت تاپیک مطالب جدا نمیشن و در ادامه مطالب قبلی نوشته میشن
و قدم به قدم قالب رو تکمیل میکنیم

سعی کنید در این تاپیک چیزی ننویسید تا مجبور به انتقال نشیم
نشون دادن به من برای رفع اشکال اختیاری هست که میتونه در پروفایل و یا خصوصی به من نشون بدید

پرسش و پاسخ رو هم در این تاپیک دنبال کنید:گل:
http://www.iranjoman.com/showthread.php?t=71466&p=387444#post387444


اما کار کردن:

1- برای کد نویسی من خودم از نت پد ویندوز استفاده میکنم و به شما هم همینو پیشنهاد میدم
2- نت پد رو باز کنید و یک سیو از بگیرید و اسمشو بذارید style.htm تا به صورت صفحه وب ذخیره بشه
برای هر بار تغییر در این هم میتونید همون فایل وب رو راست کلیک کنید و با نت پد بازش کنید برای تغییرات
بعد از هر بار تغییر هم یک سیو بزنید و صفحه وب رو ریلود کنید تغییرات ظاهر میشه
3- سعی کنید حتما علاوه بر آموزش که من میدم در کنارش یکم بیشتر هم خصوصیات درس داده شده رو بخونید تا بهتر درک بشه
4- حتما تمرین کنید
5- برای آپلود کردن و نشون دادن صفحه طراحی شده توسط شما، میتونید در پرشن گیگ آپلود کنید و بدید
ویا در بلاگفا یک صفحه مجزا درست کنید و اونجا بذارید


تاپیک ایجاد شد
قدم اول رو زدیم:گل:
ایشالا که در آخر یک طراح بشیم:گل:
 

Mahdi Askari

مدير فنی
اولین درس رو با آشنایی از CSS شروع میکنیم
یا همان Cascading Style Sheet (سبک نامه آبشاری) روشی است برای قالب بندی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریبا هر چیزی که در طراحی صفحه HTML استفاده می شود. با استفاده از CSS می توان از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کندشدن سرعت بارگذاری صفحه در اینترنت می شود، جلوگیری کرد.

برای مثال فرض کنید ما 30 صفحه HTML داریم و در هرکدام از 10 تگ پاراگراف استفاده کرده ایم، که در مجموع می شود 300 تگ پاراگراف، حال اگر بخواهیم برای همه این پاراگراف ها یک استایل را تعریف کرد باید از 300 تگ فونت دیگر نیز استفاده کرد، اما با استفاده از CSS می توان این 300 تگ فونت را در یک خط خلاصه کرد!! که هم باعث کم شدن حجم صفحات و نیز افزایش سرعت بارگذاری صفحات خواهد شد.

CSS با آمدن نسخه سومش یعنی CSS3 خیلی پیشرفت کرد تا حدی که به جای جاوا و جی کوئری نیز میشه به کار بردش

HTML زبانی برای ساختن صفحات استاتیک هست. که به وسیله اون میتوان صفحات وبی ساخت که در آن از عکس ها، فیلم ها، موزیک ها، پاراگراف ها، جداول و... استفاده کرد.

در این آموزش نحوه نوشتن اچ تی ام و سی اس اس رو با هم در کنار هم آموزش میدیم
شاید کمی سنگین باشه
ولی آموزش فشرده حال خودش رو داره:خنده1:
 

Mahdi Askari

مدير فنی
درس اول- توضیح کلی سی اس اس و نحوه بکار بردن آن --- درس css
درس اول- تگ های <head> و <body> --- درسhtml


CSS را به سه صورت میتوان در صفحه وب بکار برد:

1- روش اول : فراخوانی از خارج سایت.
در این روش تمامی کلاسهای CSS رو در یک فایل جدا تعریف میکنیم و با پسوند css. ذخیره میکنیم و در یک مکانی آپلود میکنیم و سپس با کد خط زیر این فایل سی اس اس رو فراخوانی میکنیم
HTML:
        <link rel="stylesheet" type="text/css" href="www. ..... .com/style.css" />
این کد خط باید در بین تگ <head> در صفحات اچ تی ام بکار بره
این تگ حاوی مشخصات اصلی صفحه همچون اسم صفحه
فایل های سی اس اس استفاده شده در صفحه و باقی مشخصات که در زیر کامل شرحش میدیم

2- روش دوم : قرار دادن دستورات CSS در داخل فایل HTML:
در این روش لازم نیست فایل سی اس اس رو در جایی آپلود کرد
بلکه میشه در خود صفحه اچ تی ام در بین تگ <head> یک تگ <style> باز کردو دستورات را مانند مثال زیر وارد کرد پس از اتمام باید تگ استایل را بست
در اچ تی ام هر تگی را باز میکنیم ابتدا اول تگ را ببندیم سپس در میان تگ شروع به کد نویسی کنیم
HTML:
<style>

<style/>

ابتدا تگ را باز و بسته میکنیم
سپس در میان دو تگ کلاس ها را تعریف میکنیم

HTML:
<style>
....
</style>

3- روش سوم: به کار بردن در تگ ها:
کد های سی اس اس رو میشه در تگ های استفاده شده به کار برد به روش زیر:
پس از اسم کلاس یک فاصله میزنیم کلمه استایل رو مینویسیم و بعدش خصوصیات رو میدیم
HTML:
    <body style="font: 12px Tahoma;">

نکته :در سی اس اس اولویت با کد های داخلی هست. یعنی اگر هم از روش 1 و هم از روش 3 استفاده کنید، کد های روش 3 استفاده میشود.
در سی اس اس میشه برای راحتتر پیدا کردن کد های یک قسمت(مثلا منو) میشه قبل و بعد از کد های این قسمت کامنت گذاشت
مثال:
HTML:
/* begin menu css */
menu css code
.
.
.
.
/* end menu css */
کامنت ها حتما با (*/) شروع و حتما باید با (/*) به پایان برسن

تگ های <head> و <body>

همانطور که در بالا گفته شد تگ هید مشخصات کلی صفحه رو مشخص میکنه

تگ بادی مشخصات ظاهری صفحه رو نشون میده
برای اینکه کار کدنویسی قالب رو شروع کنیم. باید حتما در نگ بادی نوشت در غیر اینصورت تغییرات یا نشان داده نمیشود یا به درستی نشان داده نمیشود
مثال از تگ هید و بادی:
HTML:
<head>
    <link rel="stylesheet" type="text/css" href="clientscript/vbulletin_css/style00110r/popupmenu-ie.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
....
<head/>
    <body>
<div style="position:fixed;left-50:0px;bottom:+10px;z-index:1000">
...
    </body>


آموزش بعدی: توضیحات کلاس های سی اس اس




پ.ن : برای درس اول میدونم مشکل بود
ولی درس دوم رو که بدم میفهمید چقدر آسون هست این مبحث:گل:
 
آخرین ویرایش:

Mahdi Askari

مدير فنی
درس دوم- طریقه نوشتن کلاس ها و نحوه فراخوانی آنها

اول از همه باید بگم که در نوشتن کد های سی اس اس ما سه مطلب را باید بدونیم
همانند عکس زیر کد ها هم دارای سه بخش هستند.
Untitled-1.jpg

اول از همه با توجه به کلاس یا آی دی بودن باید از # برای id و از . برای class ها استفاده کرد
سپس اسم کلاس یا آی دی را نوشتن
و } را باز کرده و شروع به نوشتن کد های CSS میکنیم و پس از اینکه کد ها به پایان رسید { را میبندیم

اما برای نوشتن کد ها
بهتر هست هر متغییر و مقدار اون رو در یک خط قرار دهیم تا راحتتر بهش دسترسی داشته باشیم
برای کد ها ابتدا متغییر مورد مورد نظر را تعریف میکنیم و سپس : میگذاریم و بعدش مقدار متغییر متناسب با نوع متغییر مورد استفاده قرار میگیره
پس از اینکه مقدار متغییر تعریف شد حتما باید در انتهای آن [COLOR=[URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=ff0000%5D"]#ff0000][/URL][/COLOR] قرار بگیرید. که به مرورگر میفهماند مقدار این متغییر تمام است و به متغییر بعدی برو.
در عکس بالا یک کلاس تعریف شده و دو متغییر و دو مقدار.


#### به دلیل مبتدی بودن سطح آموزش ، آموزش ها به هیچ عنوان کامل نیست به دلیل ساده تر کردن مطلب خیلی از ویژگی ها حذف میشود برای بهتر درک شدن در صورت تمایل در سطح نت جستجو کنید.####

اما ویژگی هایی برای کلاس ها تعریف شده که به آنها نیز میپردازیم

1- کلاس کاذب « link: » :
این کلاس اشاره به لینک هایی دارد که در کلاس موجود هست و شما از آنها دیدن نکردید.

2- کلاس کاذب « visited: » :
این کلاس اشاره به لینک هایی دارد که از آنها بازدید شده است

این دو کلاس فقط برای تگ ها <a> به کار میرود( توضیح بعد از اتمام کلاس ها)

3- کلاس کاذب « hover: » :
اگر بخواهیم وقتی ماوس روی یک کلاسی رفت یکسری ویژگی هایی اجرا شود از این کد استفاده میشود

4- کلاس کاذب « focus: » :
اشاره به عنصری دارد که focus روی آن است

5- کلاس کاذب « active: » :
اشاره به عنصری دارد که کاربر روی آن کلیک کرده است


همون طور که گفتیم ما بلد شدیم که چجوری یک کلاس در سی اس اس تعریف کنیم
به عنوان مثال یک کلاسی تعریف کردیم با طول و عرض 500px و در داخل آن نوشتیم : من ایران انجمن را دوست میدارم.
یک سوال اینجا پیش میاد. بله متندرس اینترنتی در (url) در این کلاس گذاشته شود هم از همون مشخصات که مثلا فونتش چی باشه و رنگش چی باشه پیروی میکنه؟
در جواب باید بگیم خیر
برای اینکه به لینک ها مشخصاتی بدیم باید اسم اون کلاس رو در سی اس اس بنویسیم و یک فاصله بزنیم و حرف a را بگذاریم و همانند بالا برای اون مشخصاتی از قبیل نوع فونت اندازه و رنگ براش تعریف کنیم.
مثال:
HTML:
.palang a{
.
.
.
}

خب در اینجا ما یک کلاس داریم با نام پلنگ که برای لینک های درون این کلاس ویژگی تعریف کردیم

اما کلاس های کاذب 1 و 2 روی این مدل از کلاس ها که مربوط به لینک ها میشن اثر داره.

اما بقیه کلاس های کاذب روی هر کلاسی از جمله لینک دار و غیر لینک کار میکنه

مثال:

HTML:
.palang a:hover{
.
.
.
}
.palang a:link{
.
.
,
}
.palang:hover{
.
.
.
}



اما حالا ما کلاس ها و یا آی دی ها رو در سی اس اس نوشتیم نحوه فراخوانی آنها چجوری هست؟
خب باید گفت نحوه فراخوانی به دو صورت هست
1- قرار گرفتن در داخل تگ های HTML :
بهتر هست تگ های HTML رو خودتون بخونید تا حجم این تاپیک کمتر بشه اما با کمی زیرکی میتونید همین تگ ها رو با CSS هم میتونید بنویسید.
خب اما به عنوان مثال ما تگ P که برای پاراگراف هست رو استفاده میکنیم
اما از همین تگ میخوایم در جای دیگه استفاده کنیم منتها با ویژگی های دیگه
برای این کار تگ رو مینویسیم و با کلاسی که از قبل ویژگی ها رو براش تعریف کردیم فراخوانی میکنیم
مثلا:
HTML:
<p> آموزش گام به گام css و HTML </p>

خب حالا به این صورت فراخوانی میکنیم

HTML:
<p class="palang"> copy right for this Tutorials </p>
<p class="tiger"> iranjoman.com </p>


2- استفاده به عنوان کلاس مرجع:
فرض کنید بخوایم در یک جای به خصوص چند تگ رو با ویژگی های کلاس یکسان فراخوانی کنیم
مثلا:
HTML:
<p class="palang"> copy right for this Tutorials </p>
<p class="palang"> iranjoman.com </p>
<p class="palang"> iranian family </p>
<p class="palang"> iranjoman.com </p>

ببینید در همه اونها کلاس palang فراخوانی شده
این کار هم وقت زیادی از طراح میگیره و هم صفحه رو سنگین میکنه و لود رو پایین میاره
برای این کار میشه کلاس رو مرجع تعریف کرد و تگ ها رو زیر مجموعه
برای این کار باید از این کد استفاده کرد

HTML:
<div class="your class name">
...
...
...
</div>

که برای مثال بالا میشه این:
HTML:
<div class="palang">

<p> copy right for this Tutorials </p>
<p> iranjoman.com </p>
<p> iranian family </p>
<p> iranjoman.com </p>
</div>

نکته 1 : نحوه استفاده از " که خیلی سوال میشه
ببینید در سی اس اس نباید فاصله بین کلمات یا کد ها باشه ولی پیش میاد در کد نویسی برای فونت تعریف میشه bkoodakbold 13px بین دو صفت که نوع فونت و اندازه هست فاصله میوفته برای اینکه مرورگر دچار خطا نشه این خط رو بین " قرار میدن تا مرورگر دچاز خطا نشه
نکته 2 : در نوشتن اسم کلاس ها از حروف انگلیسی a-z و اعداد 0-9 میشه استفاده کرد.( کاراکتر های خاص ممنوع)/// اسم کلاس حتما با یک حرف شروع شود ///
نکته 3 : برای فراخوانی آی دی به جای کلاس آی دی رو فراخوانی کنید
HTML:
<div id="palang">
نکته 4 : اگر دو کلاس سی اس اس با ویژگی های یکسان دارید میشه به جای دوبار تعریف خصوصیات یکبار تعریف کنید برای هردو. به این صورت که اسم کلاس ها رو با , از هم جدا کنید
مثال:
HTML:
.palang , tiger{
.
.
.
}


آموزش بعدی : بررسی چند متغییر



تمرین: کلاسی تعریف کنید و کد های زیر را به جای ویژگی های کلاس بنویسید . سپس کلاس را فراخوانی کنید و در داخل کلاس بنویسید: من ایران انجمن را دوست دارم.




HTML:
    background: url("http://www.iranjoman.com/images/vbiranbubble/bg1.png") repeat-y scroll 0% 0% transparent;
    border-radius: 3px 3px 3px 3px;
    padding: 5px;
    border: 1px solid rgb(227, 227, 227);
    width:281px;
    height:100px; 
   "font:"bold 13px B Yekan
در مقدار متغییر فونت اون " باید بعد از یکان قرار بگیره اما قبل از فونت قرار میگیره
در هنگام کپی این نکته رو رعایت کنید.

برای نوشتن کد های سی اس اس از روش دوم نوشتن کد های سی اس اس که دیروز گفته شد استفاده کنید



در درس بعدی ویژگی های مانند بکگراند و ... را بحث میکنیم
موفق باشید.
ببخشید اگر کمی طولانی شد.
کپی برداری با ذکر نام ایران انجمن مجاز است.
 
آخرین ویرایش:

Mahdi Askari

مدير فنی
درس دوم- صفت ها و چند تگ عمومی در HTML

خب دیروز چون یکمی سرم شلوغ شد نشد که بنویسم این آموزش رو
امروز قرار چند صفت و چند تگ عمومی رو با هم بحث کنیم
اول از همه باید بدونم که تگ ها با > باز میشند و نام تگ و مقدار اون تگ در اچ تی ام ال رو وارد میکنیم و سپس < را میبندیم و موردی رو که میخوایم داخل تگ بذاریم و تگ رو میبندیمش
این مورد رو در آخر براتون توضیحش میدم

اما هر تگ از دو قسمت تشکیل شده یکی نام صفت و یکی صفات اون تگ
صفات رو اول بحث میکنیم
همونطور که از اسمش پیداست صفات خصوصیات کلی یک تگ رو بیان میکنه
(اینم یک درس بسیاز ساده برای اونهایی که میگن سخت بوده قبلی ها:خنده1:)

خب صفت اول : align
این صفت جهت گیری تگ را نشان میدهد و سه مقدار میگیرد right , left , center & justify

در هر تگ که از اینها استفاده بشه متناسب با جهتی که دادیم این تگ قرار میگیره
نحوه استفاده
HTML:
<p align="center"> your paragraph </p>

صفات آی دی و کلاس رو که قبلا بحث کردیم
در سی اس اس نوشته میشه و با تگ که ما میخوایم فراخوانی میشه

HTML:
<p class="palang"> your paragraph </p>

صفت dir :
این صفت جهت گیری متن رو نشون میده( در سی اس اس direction هست که بعدا مفصلا بحث میشه )
این صفت مقادیر rtl (راست به چپ) و ltr ( چپ به راست) رو میگیره
نوحه استفاده مانند کد align هست و به همون صورت نوشته میشه

صفت style:
در سی اس اس نویسی این صفت رو مفصلا بحث کردیم

صفت title:
این صفت برای مواقعی هست که شم میخواهید وقتی ماوس روی یک جایی رفت به صورت tooltip یک متنی رو به مشاهده کننده نشون بده
به عنوان مثال در آخرین ارسالات وقتی ماوس روی اسم ارسال کننده تاپیک میره به همین صورت اسم ارسال کننده نمایات میشه
نحوه استفادش هم مانند بالاست با این تفاوت که در مقابل مساوی باید متن مورد نظر در داخل " قرار بگیره.

مهمترین صفات همین ها بودند
حالا به چند تگ میپردازیم که اونها رو یاد بگیریم

خب تگ <b> :
این تگ قسمتی از نوشته با Bold میکند
HTML:
<p><b>iranjoman.com :<b> iranian family<p>
در این بخش iranjoman.com درشت میشود ( در سی اس اس نویسی کد font-style:bold هست)
باید در بین دو <b> قرار داد متنی که میخوایم درشت بشه

تگ<i>:
این تگ متن را کج مینویسد
HTML:
<p><i>iranjoman.com :<i> iranian family<p>
در این بخش iranjoman.com کج میشود ( در سی اس اس نویسی کد font-style:italic هست)
باید در بین دو <i> قرار داد متنی که میخوایم کج بشه

تگ <u>:
این تگ در زیر متن یک خط می اندازد
HTML:
<p><u>iranjoman.com :<u> iranian family<p>
در این بخش iranjoman.com در زیرش یک آندر لاین می افتد
باید در بین دو <u> قرار داد متنی که میخوایم زیرش خط بیفته

تگ های <hn>
این تگ ها دارای 6 زیر مجموعه هستند
از اچ 6 تا اچ 1
6 سایز مختلف از متن که 1 بزرگترین آنها و 6 کوچکترینشان هست.
12.png

برای <hn> تمام صفات زیر قابل گذاشتن هستند.
align -- class -- id -- style-- title -- dir -- lang

از تگ <p> برای ایجاد پاراگراف ها در صفحه استفاده می شود. معمولا همیشه پاراگراف ها از خط جدید شروع می شوند و یک فضای خالی قبل و بعد از خود ایجاد می کنند:
13.png

تگ </ br>:
برای ایجاد شکست در خط و رفتن به خط جدید از این تگ استفاده میکنیم.این عنصر جزء عناصر تهی بوده و به تگ پایانی احتیاج ندارد. شما از این عنصر می توانید به شکل <br> نیز استفاده کنید که مخصوص نسخه های قدیمی HTML بوده. اما در نسخه XHTML می بایست بعد از br> یک فاصله خالی، و سپس / و در انتها یک علامت < قرار گیرد.

تگ </ hr>:
از این تگ برای ایجاد خطوط افقی در صفحات استفاده میشود. این تگ جزء تگ های تهی بوده و باید به همین شکل استفاده شود و به تگ پایانی احتیاج ندارد البته می توان از این عنصر به صورت <hr> نیز استفاده کرد که مربوط به نسخه های قدیمی HTML می باشد:

14.png

Width: با این صفت می توان عرض عنصر </ hr> را کنترل کرد. به دو طریق می توان به این صفت مقدار دهی کرد.
یکی برحسب px و دیگری بر حسب درصد که نسبت به پهنای کل صفحه (یا عنصری که hr درآن قرار دارد) سنجیده میشود:
مانند: width:39px
width:50%

Color : این صفت رنگ خط را مشخص میکند. صفاتی از این دست در HTML که یک رنگ را به عنوان مقدار می پذیرند را می توان به سه روش مقدار دهی نمود.:
بر اساس نام رنگ ها:
color:blue
color:darkblue

بر اساس تابع rgb :
در این روش با استفاده که با استفاده از سه رنگ اصلی کد دهی میشه به دو صورت میشه نوشت:
HTML:
rgb(0,160,255) یا rgb(0%,63%,100%)

در اولین عبارت عدد 255 معادل %100 است. در مد رنگ RGB محدوده اعداد صحیح بین 0 تا 255 است.

استفاده از مبنای هیگزا دسیمال یا همون کد رنگ:
در این روش ابتدا# قرار میدهی و سپس کد هیگزا رو میذاریم
color:#000000


Size :این صفت ارتفاع یک خط را کنترل می کند و می تواند یک عدد بر حسب px را به عنوان مقدار می پذیرد.


تگ <center>: از این تگ برای وسط چین کردن هر نوع عنصری استفاده میشود. برای این کار کافی است تگ باز <center> را قبل و تگ بسته <center/> را بعد از عنصر مورد نظرتان قرار دهید.
HTML:
<center> <p>iranjoman.com : iranian family</p> </center>


تگ <font>:
از این تگ برای تغییر رنگ، تغییر اندازه و تغییر فونت متون و سایر عناصر متنی موجود در HTML استفاده می شود. این تگ که جزء تگ های درون خطی محسوب می شود از صفت های زیر پشتیبانی میکند.

face :
از این صفت برای مشخص کردن فونت خاصی استفاده می شود. یعنی اگر بخواهیم متنی را فونت خاصی نمایش دهیم از تگ <font> همراه با این صفت استفاده می کنیم. این صفت لیستی از فونت ها که با "," (کاما) از هم جدا شده اند را به عنوان مقدار می پذیرد. اگر اولین فونت بر روی سیستم کاربر نصب نبود، فونت دوم، فونت دوم نصب نبود فونت سوم و ... بر روی متن اعمال می شود:


size: از این صفت برای تایین اندازه(سایز) متون استفاده می شود. اندازه ای بین 1الی 7


color : از این صفت برای تعیین رنگ یک متن استفاده میشود. این صفت مقداری از انواع رنگ ها می پذیرد و رنگ متن را مشخص می کند


15.png

همونطور که قبلا هم گفته بودم چون در b koodak یک فاصله هست این فونت رو در " قرار میدیم.




چون زیادی سنگین نشه بقیشو بعدا میگم




تمرین: پاراگرافی بنویسید با اندازه فونت 5 و نصف صفحه مانیتور طول و یک متن مختلط انگلیسی - فارسی بنویسید که درست نشونش بده وقتی ماوس روش میره یک متن دیگه ای نشون بده و کلا هر چی درس دادیم این جلسه بریزید داخلش:خنده1: خلاقیتتون هم مهمه:15:

 

Mahdi Askari

مدير فنی
خب در جلسه قبل سعی کردیم چند تگ کاربری در اچ تی ام ال رو برای شما بذاریم

در این جلسه یک توضیحی روی این مقدار دهی این تگ ها در سی اس اس کار میکنیم

همونطور که گفتیم برای نوشتن یک کلاس در سی اس اس آموزشی رو به شما دادیم
در اینجا میخوایم به شما بگیم که تگ های کلی و قالب رو چجوری مقدار دهی کنیم و چند تگ دیگر در اچ تی ام ال و چند خاصیت سی اس اس

همونطور که قبلا گفتیم متن زیر یک کلاس سی اس اس هست
HTML:
.iranjoman{
...
...
...
}

یک کلاس با نام ایران انجمن
خب اما ما میخوایم خواص کلی اچ تی ام ال رو مقدار دهی کنیم
برای این کار مانند روش قبل عمل میکنیم
اما . نمیگذاریم
مثال
HTML:
h2{
...
...
...
}

فراخوانی این تگ ها هم چون به صورت کلاس و آی دی تعریف نشدند به این صورت هست
HTML:
صحیح:
<h2>........</h2>

غلط:
<div class=h2> .... </div>

تمامی عناصری که به صورت خواص تعریف شده در اچ تی ام ال هستند به این صورت مقدار دهی میشند.


دو تگ دیگه از تگ های کاربردی HTML رو براتون توضیح میدیم

تگ a :
همونطور که قبلا هم اشاره شد هر چقدر ما در صفحات وب متنی با پروتکل و یا www و ... بذاریم لینک دار نمیشه
برای لینک دادن به یک متن یا شی یا عکس باید از تگ a استفاده کرد

این تگ به طور کلی دارای فرم زیر هست
HTML:
<a href="your link" >... </a>

در این مثال جلوی href لینک مورد نظر شما قرار میگیره و به جای اون ... متنی که شما میخواید بهش لینک بدید

HTML:
<a href="iranjoman.com" > ایران انجمن </a>

که در اینجا به شما نشان میدهد ایران انجمن وقتی روی اون کلیک کنید به آدرس انجمن میرید
دقت کنید که دادن آدرس مانند مثال فوق اگر بخواهیم به سایت دیگری بفرستیم اشتباه هست
کاملتر بگم اگر http:// نذارید در سایت مبدا اعمال میشه لینکتون
کاری که در اکثر وبسایت ها میشه
بیس و پایه آدرس دهی صفحه اول هست
و اگر دیده باشید در بعضی جاها آدرس دهی به این صورت هست
images/bg.png
وقتی شما بخواید روی این لینک کلیک کنید
به آدرس زیر میرید
http://iranjoman.com/images/bg.png
به این روش آدرس دهی نسبی میگن

و آدرس دهی مطلق:
به آدرس هایی که در آن ها تمام اجزای یک آدرس اینترنتی همچون نام پروتکل (طرح)، جداکننده ها، عبارت WWW ، نام سایت و دامنه ذکر می شود. به هنوان مثال آدرس زیر یک آدرس مطلق است:
http://www.iranjoman.com/index.php

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


خب اما خاصیت title که قبلا توضیح دادیم میشه برای این به کار برد

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


  • blank_ : لینک را در صفحه ای جدید باز میکند.
    [*]self_ : لینک را در همان صفحه باز میکند.
    [*]top_ : صفحه را در پنجره ای بدون فریم باز میکند ( غالبا متل self_ عمل میکند.)
    [*]parent_ : لینک را در frameset پدر تگ frame ( با این تگ در آینده آشنا خوهید شد) باز خواهد کرد.
    [*]نام یک فریم( پنجره ) لینک را در پنجره ای با نام مشخص باز میکند.



به عنوان مثال
target=_blank

یک مدل لینک هم هستن که اگه اسمشون رو بذاریم لینک ایمیلی بد نیست:خنده1:
با کلیک بر این لینک ها به صفحه ای میرید برای ارسال ایمیل و آدرس ایمیل در خود تگ قرار داده
بهتر بگم
یک قالب داریم
برای قسمت تماس با ما ایمیل میذاریم
اما باید امیل رو جوری بذاریم که وقتی بیننده کلیک میکنه به سایت یاهو و یا ... بره و به ما ایمیل بده
برای این کار در جلوی href یک mailto: میذاریم و آدرس ایمیل خودمون رو قرار میدیم
مثال
<a href="mailto:name@example.com"> E-mail us </a>
متن E-mail us رو شنون میده که با کلیک بر روی این جمله به سایت ایمیل هدایت میشه

یک مدل لینک دیگه هم هستند که برای انلود گذاشته میشن
این ها هم به ایم صورت هستند
HTML:
<a href="mysite.com/upload/test.zip"> Click to Download </a>

لینک های لنگری هستند که کار باهاشون یکم سختتر هست
و بعدا باید توضیح بدیمشون



اما کار با تضاویر و تگ </ img>

برای قرار دادن عکس ها در صفحه از این تگ استفاده می شود. که جزء تگ های تهی نیز هست و نیاز به تگ پایانی ندارد.
خب یک مثال از یک عکس

HTML:
<img src="iranjoman_logo.png" alt="iranjoman Logo" />

برای آدرس دهی عکس میشه از دو روشی که توضیح دادیم این کارو بکنیم و آدرس رو باید در مقابل src بذاریم
خاصیت alt هم وقتی ماوس بره روی عکس به نمایش در میاد


خب خاصیت align برای این تگ به این صورت تعریف میشه:


  • right : عکس را در سمت راست متون اطرافش قرار می دهد.
    [*]left : عکس را در سمت چپ متون اطرافش قرار می دهد.
    [*]top : قسمت بالای عکس با خطی که در آن قرار دارد تراز خواهد شد.
    [*]middle : میانه های(وسط) عکس با خطی که در آن قرار دارد تراز خوهد شد.
    [*]bottom : قسمت پایینی عکس با خطی که در آن قرار دارد تراز خوهد شد.




عکس ها را میشود لینک دار کرد




برای جلسه بعد هر چه در اینجا بحث شد رو درست کنید و البته در کنارش یک عکس رو هم لینک دار کنید


 

Mahdi Askari

مدير فنی
خب ببخشید چند روز نبودم
چند وقتیست به شدت سرم شلوغه و نمیتونم زیاد بیام بنویسم
از امروز اومدم که درس زیر رو با همدیگه پیش ببریم

متغییرها در سی اس اس و مقدار دهی آنها


مقدمه:
خب همونطور که تا امروز اومدیم نوشتیم که در کلاس های سی اس اس به صورت کلی به چه صورت نوشته میشن
طریقه کلی نوشته شدن آنها مفصلا بحث شد
به صورت مختصر به صورت زیر تعریف میشود:

HTML:
.iranjoman{
.
.
}

اما تا به امروز فقط در محل خصوصیات کلاس سی اس اس ... گذاشتیم
چون میخواستیم نحوه نوشته شدن و فراخوانی رو بگیم
حالا که با این مورد آشنا شدیم میخوایم به جای ... بیایم و متغییر و مقدار تعریف کنیم




در این جلسه سعی میکنیم متغییر بکگراند رو به صورت مفصل بحث کنیم

کار با بکگراند

خب همونطور که میدونید ممکنه برای قسمتی از صفحه یک کلاسی تعریف کنیم و بخوایم برای این قسمت بکگراند مجزا استفاده بشه
برای این منظور باید در کد های سی اس اس بکگراند تعریف شود

به صورت کلی بکگراند به دو صورت عکس و یا رنگ در نظر گرفته میشود

استفاده از رنگ در بکگراند

خب برای استفاده کردن رنگ در بکگراند از کد زیر استفاده میکنیم

HTML:
background-color:
و در مقابل « : » همانطور که قبلا بحث کردیم به 5 صورت میتوان نوشت
1- به صورت مبنای هگزا دسیمال ( کد رنگ) که پس گذاشتن # کد رنگ را تعریف میکنیم
مانند: #000000

2- استفاده از کوتاه نویسی هگزا دسیمال
در این روش زوج مقادیر تکراری از کد رنگ حذف میشود
مانند:
HTML:
 fff معادل ffffff ، و 000  معادل 000000   و ccddaa معادل cda می باشد

3- استفاده از نام رنگ: این مورد راحت هست و فقط نام رنگ مانند blue , red و... در نوشته میشود.

4- استفاده از توابع rgb : تابع rgb به ترتیب سه رنگ قرمز (red) ، سبز (green) ، آبی (blue) را به عنوان مقدار می پذیرد. این مقادیر یا اعداد، صحیح هستند. (از 0 تا 255) و یا به صورت درصد می باشند. (از 0 تا 100 درصد). این مورد هم قبلا بحث شده
مانند:
HTML:
rgb(120,200,40);

5- استفاده از توابع rgba : اینتابع که در css3 معرفی شد، همانند تابع rgb است با این تفاوت که پس از اختیار سه مقدار اول که برای تعیین رنگ به کار می روند، مقدار چهارمی نیز را باید اختیار کرد که مقدار شفافیت (opacity) رنگ را تعیین می کند. و مقداری بین 0 تا 1 می پذیرد. که مقدار 0 به معنای 0 درصد و 1 به معنای 100 درصد است.
این مورد رو حتما تمرین کنید چون خیلی جاها به آن نیاز داریم
مانند
HTML:
rgba(120,140,130,.25);

در آخر یک کلاس با رنگ ایجاد میکنیم
HTML:
.iranjoman {
 background-color: blue;
 }

استفاده از عکس در پس زمینه بکگراند

شکل و فرم کلی نوشتن این مورد به صورت زیر است
HTML:
Background-image: url('Image Address');

که به جای Image Address آدرس عکس آپلود شده رو قرار میدیم

خب اما به کار بردن عکس های بزرگ برای اینکه صفحه رو کامل پوشش بده بنا به دلیل اینکه کد بالا فقط عکس رو در بالا سمت چپ میذاره ممکنه صفحه رو سنگین کنه
به همین دلیل استفاده از عکس های کوچک توصیه میشه ولی به صورت تکرار در کنار هم قرار بگیرند

تکرار عکس ها در کنار هم

خب همونطور که میدونید اکثر وبسایت ها برای بکگراندهاشون از تصویر استفاده میکنن
این تصاویر رو کوچک در نظر میگیرن و با تکرار اونها در کنار هم کل صفحه رو پوشش میدن
کد تکرار تصاویر در کنار هم به شکل زیر هست
HTML:
Background-repeat:

این متغییر مقادیر زیر رو میتونه بگیره:


  • Repeat : تکرار عکس در دو جهت افقی و عمودی
  • Repeat-x : تکرار عکس در جهت افقی (horizental)
  • Repeat-y : تکرار عکس در جهت عمودی (vertical)
  • No-repeat : عدم تکرار عکس

به عنوان مثال تکرار یک عکس در راستای عمودی به این صورت است:
HTML:
Background-repeat: repeat-y;

مثال کلی از قرار دادن عکس در بکگراند:
HTML:
.iranjoman{

 Background-color: blue;

Background-image: url('images/bg.png');

Background-repeat: repeat-x;
}

متغییر background-attachment زیاد به کارمون نمیاد مختصر توضیح میدیم
پیش آمده به سایتهایی رفتید که هر چه اسکرول رو تکون دادید و به پایین صفحه رفتید بکگراند اسکرول نشده و ثابت مونده
با این خصوصیت میشه این کارو کرد

  • Fixed : با اسکرول شدن محتوا، عکس پس زمینه در جای خود ثابت بماند.
  • Scroll : با اسکرول شدن محتوا، عکس پس زمینه نیز اسکرول شود. (مقدار پیشفرض)

HTML:
 Background-attachment: fixed;

مکان قرار گرفت عکس در بکگراند

با استفاده از این خاصیت می توان موقعیت قرار گرفتن عکس در پس زمینه ی عنصر را مشخص کرد. و یکی از سه مقدار کلیدی ، درصدی و عددی را می پذیرد:

  • کلمات کلیدی:
مقادیر افقی: left , center , right
مقادیر عمودی : top , center , bottom
مثال :

HTML:
Background-position : left center;



  • مقادیر درصدی : که در اول باید موقعیت افقی و سپس موقعیت عمودی ذکر شود.
مثال:

HTML:
Background-position : 20% 65%;


دستور فوق مشخص می کند که تصویر پس زمینه باید 20% به سمت داخل در جهت افقی(به سمت راست) و 65% به سمت داخل در جهت عمودی (به سمت پایین) قرار بگیرد.

  • مقادیر عددی : این مقادیر نیز عددی بر حسب یکی از واحد های محاسباتی در زبان css هستند:
مثال :

HTML:
Background-position : 5px 10px;


دستور فوق مشخص می کند که تصویر پس زمینه باید از گوشه ی بالا و سمت چت 5 پیکسل به طرف راست ، و 10 پیکسل به طرف پایین قرار بگیرد.
ترکیب مقادیر عددی و درصدی و همچنین استفاده از مقادیر منفی برای این خصوصیت مجاز است، اما مقادیر عددی و درصدی نمی توانند با مقادیر کلیدی ترکیب شوند:
مثال :
HTML:
Background-position : 20% 30px;

در اینجا یک کلاس با همه این حرف هایی که زدیم براتون مینویسیم:
HTML:
.iranjoman{
Background-color: blue;

Background-image: url('images/bg.png');

Background-repeat: repeat-x;

Background-attachment: fixed;

Background-position : 20% 30px;

}

خب همونطور که بالا دیدید یک کلاس با این خصوصیات تعریف کردیم:
عکسی رو به عنوان بکگراند در نظر گرفتیم
اگر عکس کلاس ما به هر نحوی بود که فضاهای خالی داشت رنگ این فضاهای خالی blue باشه
تصویرمون با اون مشخات از گوشه صفحه شروع بشه و ثابت باشه و در راستای افقی تکرار بشه

اما دیدید که خیلی زیادی نوشتیم
و این عکس العمل و سرعت نوشتن رو از طراح میگیره
به همین دلیل میایم و کد رو به صورت مختصر مینویسیم

HTML:
Background: background-color | background-image | background-repeat | background-attachment | background-position;

میتوان در نوشتن یک قسمت رو نیاورد مثلا background-attachment رو لازم نداریم پس در کد بالا مقداری براش در نظر نمیگیریم
به جز این مورد سعی بشه 4 تای دیگه رو ذکر کنیم

در پایان همون کد های بالا رو بدون background-attachment مینویسیم
HTML:
.iranjoman{
Background:  url("images/bg.png") no-repeat #0c0 bottom right;
}
با فاصله (space) کد ها رو از هم جدا میکنیم




خب این جلسه تموم شد


تا میونید با خلاقیت خودتون درس این جلسه رو تمرین کنید و مشکلاتتون رو بپرسید.



این جلسه حضور غیاب نداریم میتونید برید بچه ها:giggle:
 

Mahdi Askari

مدير فنی
کار با فضا ها و فضاهای اطراف اشیا

سلام عرض میکنم خدمت همه اونهایی که آموزش رو دنبال میکنن
حلول ماه رمضان رو به شما تبریک میگم

قبل از آموزش از همگی عذرخواهی میکنم که نمیتونم روزانه مطلب بذارم
قرار بود روزانه این کار بشه اما یکمی سرم شلوغ شده. شرمنده:خجالت:

خب در این جلسه با پنج ویژگی دیگر آشنا خواهیم شد، که به فضا های اطراف عنصر مربوط می شوند و عبارتنداز : margin و padding و border و height و width .

خصوصیت margin

خب این خاصیت فضاهای بیرونی یک عنصر رو تغییر میده
یعنی اگر شما یک باکس دارید و درونش یک متنی دارید با این متغییر میتونید تغییر مکانش بدید و مثلا کل باکس رو 20 پیکسل بدید سمت راست و یا سمت چپ بالا یا پایین

این خاصیت یکی از سه مقدار عددی، درصدی یا auto را می پذیرد:
  • Margin-top : فاصله بالای عنصر را مشخص می کند.
  • Margin-right : فاصله سمت راست عنصر را مشخص می کند.
  • Margin-bottom : فاصله پایینی عنصر را مشخص می کند.
  • Margin-left : فاصله سمت چپ عنصر را مشخص می کند.


مقدار پیشفرض auto می باشد در ضمن استفاده از مقادیر منفی نیز مجاز است

مقدار منفی برای مواقعی استفاده میشه که شما میخواید عنصر وبتون رو در خلاق جهت قرار گیری منتقل کنید
مثال میزنیم بهتر متوجه بشید
شما هدر را تعریف کردید در زیر یک کلاسی دارید با نام منو
این منو به هدر میچسبه. اما شما میخواید هدر و منو از هم فاصله داشته باشند
برای این کار دو جور میشه نوشت و هر دو با margin
به کلاس ها کاری نداریم و فقط کد های مربوط به تغییر مکان رو مینویسم
HTML:
#header{
...
margin-bottom:10px;
}

یا

.menu{
...
margin-top:10px;
}

در این مثال ما نوشتیم که هدر زیرش تا 10 پیکسل خالی باشه
و یا منو بالاش 10 پیکسل خالی باشه

اما حالا ما میخوایم مثلا یک کلاسی رو 20 پیکسل از مکانی که قرار داره بالا ببریم
متاسفانه خیلی دیده میشه بعضا تصور میکنن اگه این کارو بخوایم بکنیم باید margin-bottom تعریف بشه که کلاس رو برامون بیاره بالا به اندازه دلخواه
اما این تصور غلط هست و اینی که ما تعریف کردیم میگه کلاس پایینی از عنصر فعلی به اندازه ای که تعریف کردیم فاصله بگیره
برای اینکه بخوایم کلاس رو بالا ببریم باید از همون margin-top که مربوط به فضای بالای عنصر هست استفاده کرد
اما به خاطر اینکه عددی که ما میدیم فاصله میده عنصر رو از عنصر بالایی عدد رو منفی میزنیم 20px-
HTML:
.palang{
...
margin-top:-20px;
}
کلاس پلنگ 20 پیکسل به بالا میره

همین شرایطی که ذکر شد برای هر چهار مقدار margin-bottom --- margin-top --- margin-left --- margin-right قابل اجرا هست

اما اینکه بخوایم برای یک عنصر چهار بار بنویسیم اینها رو هم وقت میبره و هم سرعت رو میگیره
میایم از روش کوتاه نویسی استفاده میکنیم
کوتاه نویسی دو روش داره یکی مقدار دهی چهار طرف و یکی مقدار دهی دو طرفه

مقدار دهی 4 طرفه رو میشه دو جور نوشت
قبلا هم داشتیم این بحثو
اگه همه فضاها مساوی باشن یعنی بالا راست پایین چپ همه مثلا 5 باشن
به این صورت مینویسیم
HTML:
margin:5px;
به صورت پیش فرض برای همه 4 طرف 5 پیکسل در نظر میگیره

اما اگه نه میخواید مقدار های متفاوت بدید باید هر 4 تا رو بنویسید
HTML:
margin: 5px 10px 12px 3px;

مقدار دهی دوطرفه به این صورت هست که شما به جای 4 تا مقدار دو مقدار میذارید
مقدار اول رو برای بالا و پایین و مقدار دوم رو برای چپ و راست در نظر میگیره
HTML:
margin:5px 10px;
بالا و پایین 5 پیکسل و چپ و راست 10 پیکسل

تمرین: با توجه به مقدار هی 4 طرفه و دوطرفه این کد فضایی رو در نظر دارد؟
HTML:
margin:5px 7px 10px;



خصوصیت Border

Border یا حاشیه، در واقع بین margin و padding قرار گرفته و یک خط به دور عنصر مورد نظر می کشد و خود به سه قسمت تقسیم می شود.


  • Border-width : پهنای خط دور عنصر را مشخص می کند
  • Border-color : رنگ خط دور عنصر را مشخص می کند.
  • Border-style : طرح خط دور عنصر را مشخص می کند.
حال به تعریف دقیق این سه قسمت وآشنا شدن با همه ی اجزای آن ها می پردازیم :
Border Width

از خاصیت border-width برای مشخص کردن پهنا یا عرض کادر یک عنصر استفاده می شود که یکی از مقادیر زیر را میگیرد :



  • Thin : باریک، برابر با 1px
  • Medium : متوسط برابر با 3px
  • Thick : پهن، برابر با 5px
  • مقدار عددی دلخواه برحسب یکی از واحدهای محاسباتی که معمولا px است.

خب همانطور که میدانید مشخص کردن بردار برای عناصر برای 4 طرف منظور میشه
یعنی
HTML:
border-top
border-right
border-bottom
border-left

HTML:
border-width: 2px 5px 7px 9px;


خاصیت border-color

این خاصیت برای مشخص کردن رنگ border استفاده می شود. و یکی از مقادیر هگزادسیمال rbg , rgba ، کلمات کلیدی رنگ ها یا transparent(شفاف - بدون رنگ) را به عنوان مقدار می پذیرد
مقدار پیشفرص برای این خصوصیت برابر با مقدار تعیین شده در خصوصیت color از عنصر مورد نظر می باشد.

HTML:
border-color: black green red yellow;


خصوصیت border-style

این خاصیت برای یک border باید تخصیص یابد تا border به نمایش در آید، و طرح خط دور عنصر را مشخص می کند که یکی از مقادیر زیر را می گیرد :

کد:
None , dotted , dashed , solid , double , hidden , groove , ridge , inset , outset

مقدار پیش فرض برای بردار بدون حاشیه است
اکثرا از خط صاف (solid) و خط منقطع (dashed) استفاده میشه

HTML:
border-style: solid dashed dotted double;

خب همانند قبلی ها برای این متغییر هم میشه کوتاه نویسی رو ایجاد کرد
HTML:
Border: border-width border-style border-color;

ترتیب نوشتن به این صورت مهم هست و اگه غیر این بشه از کار میفته

HTML:
Border: 3px dashed red;

اما اگه بخوایم 4 طرف بدار ویژگی های مختلفی داشته باشن باید از روش کوتاه نویسی برای هر 4 تا استفاده کرد
مثلا
HTML:
P {


Border-top: 3px dashed red;
Border-right: 2px solid green;
Border-bottom: 5px dotted black;
Border-left 10px double yellow;

}

این مثال به این صورت میشه
Untitled5.png

برای بردار خاصیتی با عنوان border-radius تعریف میشه که گوشه های کادر شما رو گرد میکنه
این خصوصیت هم 4 مقدار میگیره برای بالا سمت چپ - بالا سمت راست- پایین سمت راست- پایین سمت چپ ( همیشه در جهت عقربه های ساعت میچرخه)
HTML:
border-radius:10px;

یا

border-radius: 5px 2px 6px 9px;


خصوصیت padding

خصوصیت padding مقدار فضای خالی بین محتوای یک عنصر و border آن عنصر را تعیین می کند. یکی از دو مقدار عددی یا درصدی را می پذیرد. (قواعد مقدار دهی آن همانند قواعد خصوصیت margin است ).
تفاوت های بین margin و padding


  1. Padding فضای خالی بین محتوا و border یک عنصر می باشد اما margin فضای خالی بین border و عناصر دیگر می باشد.
  2. کلمه کلیدی auto هیچ تاثیری روی خاصیت padding ندارد.
  3. خاصیت margin می تواند مقادیر منفی بگیرد اما خاصیت padding نمی تواند.
  4. در خاصیت padding تداخل و فروپاشی اتفاق نمی افتد، فقط در margin این اتفاق می افتد.
کوتاه نویسی خاصیت padding

همانطور که گفتیم قوعد مقداردهی به خصوصیت padding همانند خصوصیت marginاست است: و قاعده کلی کوتاه نویسی آن ها نیز شبیه به هم است:

HTML:
Padding: top right bottom left;


Padding: 3px 5px 2px 7px;


خصوصیت width

خاصیت width عرض محتوای یک عنصر را تعیین می کند. در نهایت عرض کلی یک عنصر برابر با عرض متحتوا (تعیین شده توسط width ) بعلاوه ی عرض padding و عرض border آن عنصر می باشد. این خصوصیت را می توان با یکی از سه مقدار عددی، درصدی یا auto مقداردهی کرد. و مقدار پیشفرض آن auto می باشد. مقادیر منفی نیز برای این خصوصیت مجاز نمی باشد.


خصوصیت height

در کنار خصوصیت width خاصیت height وجود دارد که ارتفاع محتوای یک عنصر را مشخص می کند. البته استفاده از خاصیت height برای عناصر چندان متداول نیست و بیشتر همان مقدار پیشفرض یعنی auto را برای آن در نظر گرفته می شود و صفحات وب معمولا با scrool عمودی طراحی می شوند. این خصیوصیت نیز مانند width یکی از سه مقدار عددی، درصدی و یا auto را به عنوان مقدار می پذیرد.

HTML:
.palang{
width:500px;
height:500px;

هنگامی که شما صفحه ای را اصولا برای نمایش در رزولوشن 800*600 یا 1024*768 طراحی می کنید، اگر کاربری سایت شما را با رزولوشن 1600*1200 مشاهده کند، صفحه را به شکلی نه چندان زیبا خواهد دید، یا هنگام استفاده از کلمه کلیدی auto یا مقادیر درصدی ممکن است مشاهده با رزولوشن های مختلف نتایج متفاوتی داشته باشد.

برای اینکه این مشکل رو رفع کنیم میایم و دو خاصیت رو تعریف میکنیم که به مرورگر میگه حداقل اندازه طول چقدر و حداکثر چقدر باشه


خصوصیت min

خاصیت min یکی از دو مقدار عددی یا درصدی را می پذیرد. و مقدار پیش فرض آن 0 است
خصیوصیت min-width و mn-height محدودیت کوچکترین اندازه را برای یک عنصر مشخص می کنند، و بیان میکنند که حد اقل اندازه ای که برای این عنصر در نظر گرفتیم چقدر هست
HTML:
Min-width: 1024px;
حد اقل طول 1024 باشد و اگر مرورگر کوچک شود صفحه اسکرول افقی پیدا میکنه


خصوصیت max

خصوصیت max محدودیت بالاتر و حداکثر اندازه را برای یک عنصر مشخص می کند و هنگامی تعریف می شوند که ابعاد یک عنصر ممکن است افزایش یابند . این خصوصیت یکی از سه مقدار عددی، درصدی یا auto را می پذیرد.
HTML:
Max-width: 1440px;
نهایتا این عنصر 1440 پیکسل طول داشته باشد



خصوصیت overflow

این خصوصیت هنگامی استفاده می شود که محتویات یک عنصر به دلیل محدودیت در ابعاد تعریف شده برای آن، امکان سرریز دارند، خاصیت overflow نحوه ی برخورد با این سرریز را مشخص می کند.
و یکی از 4 مقدار زیر را می پذیرد:

  • Visible : مقدار پیشفرض و باعث نمایش محتوای سرریز شده می شود.
  • Hidden : محتوای سرریز شده پنهان می شود.
  • Scroll : محتوای سرریز شده را پنهان می کند و قابلیت اسکرول شدن برای دیدن محتوای سرریز شده را فعال می کند
  • Auto : اگر کم بودن عرض عنصر باعث سر ریز شدن باشد، اسکرول افقی و اگر کم بودن ارتفاع عنصر باعث سرریز شدن باشد اسکرول عمودی را برای عنصر فعال می کند.




خب این درس هم تمام شد

تمرین حتما انجام بدید و یادتون نره

 

Mahdi Askari

مدير فنی
خب فرصت شد مجددا در خدمت شما باشم
در این جلسه ما میخوایم شناور سازی عناصر رو بحث کنیم

شناور سازی عناصر

خب به منظور شناور سازی و تنظیمات قرار گرفتن عناصر در این جلسه ، سه متغیر float , clear & Vertical Align رو بحث میکنیم

خاصیت Float

از این خاصیت برای شناور کردن عناصر و قرار دادن آن ها در کنار یکدیگر استفاده می شود و یکی از سه مقدار را می پذیرد :



  • None : مقدار پیشفرض (هیچ)
  • Left : عنصری که این خاصیت برای آن تخصیص یابد در سمت چپ صفحه و یا در سمت چپ عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.
  • Right : عنصری که این خاصیت برای آن تخصیص یابد در سمت راست صفحه و یا در سمت راست عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.

خاصیت float برای ایجاد و تنظیم بخش navigation ( منوی سایت ) مناسب است


مثال : (ایجاد بخش منوی بالای سایت با استفاده از float )

HTML:
<h1> ایران انجمن - خانواده ایرانی </h1>
 <ul class="navbar">

 <li> <a href="#"> home </a> </li>
 <li> <a href="#"> search </a> </li>
 <li> <a href="#"> About me </a> </li>

 </ul>


کدهای سی اس اس رو به صورت مینویسیم

کد:
H1 {
Float: left;
Margin-top: 0;
}
 
.navbar {

Float: right;
Margin: 0;
List-style: none;
}
 
.navbar li {

Float: left;

}
 
.navbar a {

Display: block;
Margin-left: 15px;
Padding: 15px;
Border: 1px solid #ccc
Color: #233
Text-decoration: none;
}
 
.navbar a:focus , .navbar a:hover {
Background: #aaa
Color: #fff
}

نتیجه این کد ها به صورت زیر میشه(استفاده از لیست ها بعدا توضیح داده میشه:گل:)

Untitled.png



خاصیت Clear

خاصیت clear وابسته به خاصیت float بوده و برای کنترل خاصیت float به کار می رود. و یکی از چهار مقدار زیر را می گیرد:



  • مقدار پیشفرض : none
  • Left : تاثیر خاصیت float:left را از بین می برد؛ یعنی باعث می شود که تاثیر left floated element (عنصری که خاصیت float left به آن دادیم) بر روی عناصر دیگر از بین برود.
  • Right : تاثیر خاصیت float: right را از بین می برد.
  • Both : تاثیر هر دو خاصیت float:left و float:right را بین می برد.

ببینید وقتی شما یک عنصری رو با فلوت میکنید بقیه عناصری که در کنار این عنصر قرار میگیرن فلوت میشن
برای این که این خاصیت از بین بره از خاصیت clear استفاده میشه

ببینید یک متنی رو ما اضافه میکنیم بدون اینکه خاصیت clear رو بذاریم:


کد:
H1 , H2 {
Float: left;
Margin-top: 0;
}
  
.navbar {

Float: right;
Margin: 0;
List-style: none;
}
 
.navbar li {

Float: left;

}
 
.navbar a {

Display: block;
Margin-left: 15px;
Padding: 15px;
Border: 1px solid #ccc
Color: #233
Text-decoration: none;
}
 
.navbar a:focus , .navbar a:hover {
Background: #aaa
Color: #fff
}


<h1> ایران انجمن - خانواده ایرانی </h1>
<ul class="navbar">

<li> <a href="#"> home </a> </li>
<li> <a href="#"> search </a> </li>
<li> <a href="#"> About </a> </li>

</ul>

<h2> خانواده ای برای همه ایرانیان </h2>
[/HTML]

Untitled1.png


اما اگه برای متن پایینی این خاصیت تعریف بشه
به اسن صورت میشه
به کد های سی اس اس بالا این کد اضافه بشه:

HTML:
H2 {
Clear: both;
}

Untitled2.png

دیدید که خاصیت فلوت رو خنثی کرد



خصوصیت Vertical Align

این خاصیت به منظور تراز عمودی عناصر inline مثل <a> , <img> , <span> و ... استفاده می شود...


خب اول باید فرق عناصر inline و عناصر block را بدانید تا تعریف این خاصیت قابل فهم شود.



  • عناصر block : عناصری هستند که قبل و بعد از آنهایک خط خالی وجود دارد؛ مانند <p> , <div> , <hn> و ... در HTML
  • عناصر inline (خطی) : عناصر خطی عناصری هستند که قبل و بعد از انها خط خالی وجود ندارد؛ مانند <a> ,<img> <span> و... در HTML

و همان طور که گفتیم خاصیت vertical align برای تراز عناصر inline استفاده می شود؛
این خاصیت یکی از سه مقدار عددی، درصدی و کلمات کلیدی را به عنوان مقدار می پذیرد.


کلمات کلیدی:

  • Baseline : این مقدار خطی است فرضی که هم تراز با قسمت پایینی حروف یک کلمه یا جمله می باشد. .
  • Middle : تراز با میانه ی خط
  • Sub : تراز بالای خط مثل اعداد توان در ریاضی.
  • Super : تراز با پایین خط و مثل اعداد اندیس در ریاضی .
  • Text-top : متن را با بالای بلندترین حروف اطراف تراز می کند.
  • Text-bottom : متن را با کوتاه ترین یا پایین ترین حروف تراز می کند، برای مثال g یا y زیر خط اصلی (baseline) قرار می گیرند و متن با پایین ترین قسمت این حروف تراز می شود.
  • Top : قسمت بالای عنصر را بلند ترین عنصر موجود در خط تراز می کند.
  • Bottom : قسمتپایین عنصر را با کوتاه ترین عنصر موجود در خط تراز می کند.

استفاده از مقادیر درصدی و عددی بستگی به خاصیت line-height تعریف شده برای عنصر مورد نظر دارد.
مثال : استفاده از vertical-align: 50% متن را در وسط خط تراز می کند.

HTML:
P {

Line-height: 10px;
Vertical-align: 5px;
}


در مثال فوق line-height برابر 10 پیکسل و از آنجاییکه vertical-align برابر 5 پیکسل و نصف مقدار line-height می باشد، متن در وسط خط تراز می شود.

خاصیت vertical-align به طور خاص برای تراز بندی تصاویر مفید است.

HTML:
<h1>


    <span class="top"> Top </span>
    <span class="middle"> Middle </span> iranjoman

    <span class="bottom"> bottom </span> iranjoman
    <span class="sub"> sub </span> iranjoman
    <span class="super"> super </span> iranjoman
    <span class="text-top"> text-top </span> iranjoman
    <span class="text-bottom"> text-bottom </span> iranjoman

</h1>

مقدار دهی CSS رو هم انجام میدیم

HTML:
H1 span { font-size: 10px;}


.top {vertical-align: top;}
.bottom {vertical-align: bottom;}
.middle {vertical-align: middle;}
.sub {vertical-align: sub;}
.super {vertical-align: super;}
.text-top {vertical-align: text-top;}
.text-bottom {vertical-align: text-bottom;}


اینجا میتونید ببینید این خاصیت که تراز عمودی اسمش هست چجوری درست میکنه این تراز رو

Untitled3.png


چون بعد از مدت ها آموزش گذاشتم یک درس ساده رو انتخاب کردم که زیاد طولانی نشه



تمرین یادتون نره

 
آخرین ویرایش:

Mahdi Askari

مدير فنی
خب موقعیت جور شد تا یک بار دیگه در خدمت شما باشم و یک آموزش دیگه رو براتون بذارم
در ادامه سری آموزش های قبلی امشب قراره مباحث زیر بحث بشه


کار با لیست ها و تعیین موقعیت عناصر

خب لیست ها در اچ تی ام ال به دو قسمت مرتب و نا مرتب تثسیم میشوند.
لیست های مرتب لیست هایی هستند که ترتیب دارند و ترتیبشون رو ما مشخص میکنیم
مثل این:
  1. گزینه1
  2. گزینه2

لیست نا مرتب ترتیب درش مهم نیست
مثل:
  • گزینه1
  • گزینه2

خاصیت list-style-type

با استفاده از این خاصیت می توان برای لیست های مرتب و نامرتب bullet تعریف کرد. و یکی از 14 مقدار زیر را می پذیرد.
(bullet= همون دایره یا اعداد کنار گزینه ها)

HTML:
disc , circle , square , decimal , decimal-leading-zero , lower-roman , upper-roman , lower-greek , lower-latin , upper-latin , armenian , georgian , none


مقدار پیشفرض برای لیست های نا مرتب (ul) : مقدار disc
مقدار پیشفرض برای لیست های مرتب (ol) : مقدار decimal

Bullet های مخصوص لیست های نامرتب (ul) عبارتنداز : square ، circle و disc و none
و بقیه bullet های مربوط به لیست های مرتب (ol) هستند

یک مثال:

کد:
.palang{
width:500px;
height:500px;
background:lightblack;
}
.palang li{
list-style-type: square;
}

.palang1{
width:500px;
height:500px;
background:lightblack;
}

.palang1 li{
list-style-type: lower-alpha;
}

HTML:
<ul class=palang>



<li>HTML 1</li>
<li>HTML 2</li>
<li> XHTML</li>

</ul>


<ol class="palang1">
<li>CSS 1</li>
<li>CSS 2</li>
<li>CSS 3</li>
</ol>

نتیجه:

Untitled.png


خاصیت list style image

این خاصیت یک عکس را برای استفاده به عنوان نشانه bullet در کنار عنصر لیست تعریف می کند. این عکس با نشانه ی تعریف شده در خاصیت list-style-type جایگزین می شود.

HTML:
palang li {list-style-image: url('images/green-bullet.png');}

مثال:
HTML:
.palang1 li{
list-style-image: url(http://iranestekhdam.ir/wp-content/themes/Diavlo/images/iranestekhdam.Tick.png)
}

نتیجه:

Untitled1.png

list-style-position



این خاصیت موقعیت و نحوه ی قرار گرفتن bullet در کنار آیتم های لیست را مشخص می کند. و یکی از دو مقدار زیر را می گیرد :


  • Inside : مشخص می کند که bullet لیست باید در داخل آیتم های لیست قرار گیرد.
  • Outside : مشخص که bullet لیست باید در خارج از آیتم های لیست قرار گیرد.


کد:
.palang{
width:100px;

}
.palang li{
list-style-type: square;
list-style-position: inside;
 background: [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=09f"]#09f[/URL]
}

.palang1{

width:100px;
}

.palang1 li{
list-style-image: url([URL]http://iranestekhdam.ir/wp-content/themes/Diavlo/images/iranestekhdam.Tick.png[/URL])
 list-style-position: outside;
 background: [URL="http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=ff9"]#ff9[/URL]
}

نتیجه:
Untitled2.png


کوتاه نویسی خاصیت list style

برای کوتاه نویسی خاصیت list-style از قاعده زیر استفاده می شود.
کد:
list-style: type position url('ImageAddress');




li { list-style: square inside url('bullet1.png'); }





خصوصیت position

این خاصیت به تنهایی کار خاصی را بر روی عنصر انجام نمی دهد. و همیشه به همراه خاصیت های left , right , left یا top می آید،( و بلعکس) اما قبل از مقدار دهی به این خاصیت ها در اول حتما باید به خصوصیت position یکی از چهار مقدار زیر را داد:



  • Static : مقدار پیشفرض، و همان حالت عادی قرار گرفتن عناصر طبق ترتیبی که در سند HTML است می باشد.
  • Relative : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به عنصر پدر می باشد.
  • Absolute : اجازه می دهد که یک سند در یک محل خاص از سند قرار گیرد، و وابسته به پنجره مرورگر می باشد.
  • Fixed : عناصر fixed همواره در محل خود باقی می مانند حتی اگر سند scroll شود.





مقدار Static

مقدار static همانطور که گفتیم تاثیری بر روی عنصر ندارد و همان حالت default عناصر می باشد،
بجز در عناصر لیست ها (ul ,ol ,li ) . مقدار پیشفرض برای عناصر لیست ها none است،
اما اگر برای عناصر لیستها از مقدار static استفاده کنیم حالت تو در توی آن ها از بین خواهد رفت.



مقدار Relative

این مقدار موقعیت یک عنصر نسبت به عنصر پدر را در صفحه تعیین می کند
و نقطه ارجاع (نقطه شروع حرکت عنصر) از مختصاتی که عنصر پدر دارد شروع خواهد شد.
یا به عبارتی دیگر عنصر از محلی که در آن قرار دارد شروع به مختصات گیری می کند


مقدار absolute

این مقدار موقعیت یک عنصر را نسبت به پنجره ی مرورگر تعیین می کند
یعنی نقطه شروع عنصر از یکی از گوشه های پنجره (با توجه به خصوصیتی که تعیین خواهیم کرد) خواهد بود.



مقدار fixed

این مقدار موقعیت عنصر را همانند مقدار absolute وابسته به صفحه مرورگر خواهد کرد،
یعنی نقطه شروع حرکت عنصر از یکی از گوشه های پنجره مرورگر خواهد بود
با این تفاوت که عنصری با مقدار fixed پس از موقعیت دهی به آن همواره در محل خود باقی می ماند، حتی اگر صفحه scroll شود.
(مانند نوار ثابت در استایل اولیه تابستان)


خب تا اینجا با لیست ها و موقعیت عناصر آشنا شدیم
برای موقعت و یا همون( position ( position:fixed (برای مثال بود) مثالی نزدم تا خودتون کار کنید
دوتگ تو در تو بذارید و موقعیت بندی هاشو عوض کنید


خب درس این جلسه هم تموم شد و امیدوارم به خوبی تمرین کنید.

 

Mahdi Askari

مدير فنی
خب مجددا در خدمت شما هستیم و در یازدهمین پست این آموزش میخوایم خواص زیر رو در سی اس اس بحث کنیم
نکته: اگه ما از تگ های HTML زیاد بحث نمیکنیم به این دلیل است که تمامی خصوصیت های تگ های HTML در سی اس اس میشه بارگذاری کرد
به همین دلیل فراگرفتن ای تگ ها تا جایی که در سی اس اس قرار داده میشن مورد نیاز نیست. در صورت تمایل خودتون جستجو کنید:گل:


خواص display --- z-index --- opacity --- visibility --- cursor



خاصیت اول display :
این خاصیت نحوه نمایش یک عنصر رو نشون میده یکی از 22 مقدار زیر رو میگیره :
HTML:
none , block , inline , inline-block , list-item , run-in , compact , table , table-row-group , table-header-group , table-footer-group ,
 table-row , table-column-group , table-column , table-cell ,table caption , ruby , ruby-base , ruby-text , ruby-base-group , rubu-text-group
خب نترسید:نیش:
از بین این 22 تا 5 تا زیاد استفاده میشه و به این ترتیب هستن:


  • none : عدم نمایش عنصر (مخفی کردن)
  • Block : نمایش عنصر (اگر مخفی بود) و این صورت که یک خط خالی قبل و بعد از خود ایجاد خواهد کرد.
  • Inline : اگر این مقدار را به یک عنصر block بدهیم، خط قبل و بعد از خود را از بین میبرد.
  • List-item : عنصر را به شکل لیست درمی آورد ( مانند استفاده از تگ <li> )
  • inline-block


خاصیت z-index :
خب حتما اتفاق افتاده براتون در طی کدنویسی میبینید که یک کلاسی رو شما میخواید بالاتر از یکی دیگه باشه و روی اون باشه
اما در کد نویسی میبینید خلافش میشه و شما هر چی نوشتید الکی میشه
برای اینکه این مشکل حل بشه این خاصیت معرفی شد و باعث شد با مقدار دهی این خاصیت اجزا رو شما مرتب کنید و روی هم بذاریدشون
کاملش رو بگم یک محور z در راستای عمود بر صفحه نمایش فرض کنید میخوایم روی این محور عناصر رو جلو عقب بچینیم
این کد به این شرط عمل میکنه که مقدار position برای عنصر تعریف کنیم

به این صورت کار میکنه:
کد:
z-index:1,2,3,,...,n

یک عددی از یک تا بینهایت میگیره و هر چه عدد بزرگتر باشه عنصر رو بالاتر میذاره
به طور معمول این خاصیت به این گونه عمل میکنه در یک صفحه اگر سه کلاس فراخوانی بشن
عنصری که از همه پایین تر نوشته شده در صفحه اون بالاتر قرار میگیره
مثال:
HTML:
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

کلاس آخری به دلیل اینکه پایینتر نوشته شده بالاتر قرار میگیره

مثال:

HTML:
.one{
width:200px;
height:200px;
background:red;
}
.two{
width:200px;
height:200px;
background:green;
}







<div class="one"></div>
<div class="two" style="margin:-100px 0 0 100"></div>
کلاس سبز رو با margin کمی جا بجا کردم تا روی هم بشینن تا بهتر نمایش داده بشه
همونطور که در عکس هم میبینید کلاس two که پایینتر نوشته شده بالاتر از قرمز هست

Untitled.png

خب حالا ما میخوایم قرمز بالاتر از سبز باشه
میایم و از این خاصیت استفاده میکنیم

HTML:
position:relative;
z-index:1;

این ها رو به قرمز اضافه میکنیم

HTML:
.one{
width:200px;
height:200px;
background:red;
position:relative;
z-index:1;
}

Untitled1.png




خاصیت opacity :
این خاصیت میزان شفافیت یک عنصر رو تعیین میکنه
و به این صورت مقدار دهی میشه:
HTML:
opacity:number;

به جای number یک عدد بین 0 تا 1 باید بذارید

برای مرورگر اکسپلورر از کد زیر استفاده میکنیم
HTML:
******:alpha(opacity=number);

این بار عددی بین 0 تا 100 رو تنظیم میکنیم
در مثال بالا برای عنصر قرمز شفافیت 0.5 رو در نظر میگیریم:
HTML:
.one{
width:200px;
height:200px;
background:red;
position:relative;
z-index:1;
opacity:0.5;
}

Untitled2.png

در opacity کل عنصر شفافیتش کم میشه. یعنی اگه شما بخواید فقط بکگراندش کم بشه و از این استفاده کنید تمام محتویاتش اگه عکس داره اگه نوشته داره همه شفافیتش کم میشه
اگه میخواید فقط بکگراند رو شفافیتش رو کم کنید و یا به اصطلاح شیشه ای کنید از روش قبلی استفاده کنید


خصوصیت visibility :

با استفاده از این خاصیت میشه عنصری رو در صفحه به نمایش و یا مخفی کرد
و دو مقدار
  • visible
  • hidden

رو میگیره
مقدار پیشفرض: visible
Visible : عنصر در صفحه نمایش داده خواهد شد.
Hidden : عنصر در صفحه مخفی شده و به جای ان یک فضای خالی نمایش داده شود.


خاصیت cursor :
با استفاده از این خاصیت میتوان شکل ماوس رو تغییر داد
یکی از مقادیر زیر رو میگیره:
HTML:
Cursor: url('') | auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize
 se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress


مقدار پیشفرض auto
با استفاده از مقادیر url می توان یک custom cursor را بر اساس یک img تعریف کرد. در عمل این روش تقریبا هرگز استفاده نمیشود و برای استفاده توصیه نمی شود و استفاده از cursorهای استاندارد بهتر می باشد.

auto که همین شکل ساده هست و pointer که شکلش همونیه که وقتی ماوس رو روی لیک لینک میبرید و اون دسته میاد پر کاربردترین هستند.



خب این جلسه هم تموم شد.



تمرین حتما انجام بدید



درس این جلسه ساده، کم حجم اما بسیار پرکاربرد هست به همین دلیل مطلب دیگه ای بهش اضافه نکردم

 
آخرین ویرایش:

Mahdi Askari

مدير فنی
خب دیگه کم کم ، کم کم ، یهو داره تموم میشه این درس ها:خنده1:

خب درس ها رو کوچولو کوچولو تر میدم تا بیشتر طول بکشه برسیم به آخر ترم:خنده2:


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



جلوه های ویژه -- transform

امشب میخوام درباره کد transform بحث کنیم
با این کد میشه بر روی یک عنصر جلوه ویژه قرار داد
در ادامه میگیم چجوری میشه و جلوه هاش به چه صورت هست
این خاصیت سه مقدار زیر را میگیرد.

HTML:
Transform: rotate(numberdeg)
Transform: skew(numberdeg)
Transform: scale(number)

مقدار پیشفرض : none


Rotate : این مقدار عنصر را میچرخاند

Skew : عنصر را کج می کند

Scale : برای بزرگنمایی عنصر استفاده میشه

مقدار scale فقط یک عدد میگیرد اما دو مقدار دیگه عدد رو به عنوان درجه میگیرد ( مثلا 50deg)



مقدار rotate

برای این مقدار یک عکس رو میخوایم به مقدار 45 درجه بچرخونیم:
HTML:
<img src="http://www.up.iranjoman.com/images/ijnj8dg4yp7c4pfcvag.jpg">

مقدار سی اس اس :
HTML:
img:hover {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Untitled-1.jpg


برای نمایش صحیح در مروگر های مختلف حتما پسوند مربوطه رو باید بذارید.
مقدار منفی پشتیبانی میشود.


مقدار skew

این مقدار باعث کج شدن یک عنصر مربوطه میشود.
HTML:
img:hover {
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
-o-transform: skew(45deg);
transform: skew(45deg);
}

Untitled-2.jpg



مقدار scale

همونطور که گفتیم این مقدار باعث بزرگنمایی یک عنصر میشه
ما میخوایم این عکس رو مقدارش رو به 0.5 بزرگ کنیم

HTML:
img:hover {
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
}

Untitled-3.jpg






خب درس این جلسه هم تموم شد



تمرین یادتون نره

 

Mahdi Askari

مدير فنی
خب این جلسه میخوایم در مورد مدت زمان اجرای افکت ها در سی اس اس صحبت کنیم


خصوصیت transition


خب افکت های زیادی در سطح نت وجود داره که خیلی هاشون با جی کوئری و جاوا اسکریپت نوشته شدن
اما با سی اس اس هم میشه افکت های زیبایی درست کرد
اکثرا بحث کردیم که چه افکت هایی میشه درست کردمثل تغییر رنگ و تغییر بکگراند و ....
اما همه این موارد به صورت لحظه ای اجرا میشه مثل هاور هایی که برای یک اشیا میذاشتیم
با رفتن ماوس به صورت آنی تغییرات اجرا میشد
اما بعضی جاها لازمه موارد به صورت تدریجی اجرا بشن
یعنی تغییرات رو با چشم ببینیم

برای این کار باید کدی باشه که بگه تغییرات روی کدوم متغییر و به چه مدت اجرا بشه
مثلا بگیم برای هاور شدن یک باکس فقط بکگراند و یا طول باکس رو از ویژگی های هاور تبعیت کنه و این ویژگی ها رو چه مدت زمانی اجراشون کنه

طرح کلی کد به صورت زیر است:
HTML:
transition: property duration;

property : خصوصیتی که افکت بر آن اعمال میشود.
duration : مدت زمان اجرای افکت.

برای نوشتن مدت زمان میتونید از s یعنی ثانیه (2s = دو ثانیه) و یا ms میلی ثانیه (200ms = دویست میلی ثانیه) استفاده کرد

<-- 1000ms = 1s --!>

در مثال پایین جوری تنظیم کردیم که فقط اندازه طول به مدت دوثانیه تغییر کند: -----> (شماره 1)

کد:
.box { 
height: 100px;
 color:darkgreen;
 width: 200px;
 background-color: #09f;
 text-align: center;
 font-family:b koodak;
 transition: width 2s;
 -moz-transition: width 2s;
 -webkit-transition: width 2s;
 -o-transition: width 2s;
 }
 .box:hover{
 width: 400px;
 height: 200px;
 background-color: #000;
 text-align: center;
 }

در این مثال فقط طول به مدت دوثانیه تغییر میکند و عرض به صورت لحظه ای تغییر میکد

خب اما اینم بدونید که میشه چند متغییر رو تنظیم کرد و این کا رو باید با «,» از هم جدا کرد متغییر ها رو
مثال: -----> (شماره 2)

کد:
.box1 {
 height: 100px; 
color:darkgreen;
 width: 200px; 
background-color: #09f;
 text-align: center; 
font-family:b koodak; 
transition: width 2s, height 2s;
 -moz-transition: width 2s, height 2s;
 -webkit-transition: width 2s, height 2s;
 -o-transition: width 2s, height 2s;
}
  .box1:hover{
  width: 400px;
 height: 200px;
 background-color: #000;
 text-align: center;
 }

حتما لازم نیست که مقدار تغییر زمان متغییر های طول و عرض با هم برابر باشه
مثل مثال سوم میتونه فرق کنه -----> (شماره 3)
کد:
.box2 {
 height: 100px; 
color:darkgreen;
 width: 200px; 
background-color: #09f; 
text-align: center;
 font-family:b koodak;
 transition: width 2s, height 1s;
 -moz-transition: width 2s, height 1s;
 -webkit-transition: width 2s, height 1s; 
-o-transition: width 2s, height 1s;
}
  .box2:hover{
 width: 400px;
 height: 200px;
 background-color: #000; 
text-align: center;
 }

اما اگر تعداد کد هامون زیاد بود
و خواستیم همشون با هم اجرا بشه از کد زیر استفاده میشه:
HTML:
transition: all ---s

به جای --- تعداد ثانیه قرار میگیره



به مثال زیر توجه کنید -----> (شماره 4)
کد:
.box3 {
 height: 100px;
 color:darkgreen;
 width: 200px;
 background-color: #09f; 
text-align: center; 
font-family:b koodak; 
transition: all 1.5s;
 -moz-transition: all 1.5s;
 -webkit-transition: all 1.5s;
 -o-transition: all 1.5s;
}
  .box3:hover{
  width: 400px;
 height: 200px;
 background-color: #000; 
text-align: center; }
در مثال بالا همه متغییر ها به مدت 1.5 ثانیه با هم تغییر میکنن.



خب تا اینجا مشخص شد چجوری افکت متحرک بذاریم
اما باید بدونیم این صفت که ما فقط دو ویژگی براش گفتیم پیشرفته تر هم خواهد شد
و این صفت 4 مقدار میگیرد
کد:
transition : property duration timing-function delay;

مقدار timing-function : افکت های از پیش تعیین شده توسط css3 برای تقسیم زمان، که یکی از مقادیر زیر را می پذیرد :

HTML:
ease , ease-in , ease-out , ease-in-out , linear


Ease : سرعت ابتدایی آن به تدریج زیاد میشود. در میانه راه سرعت بیشتری دارد و در انتها نیز سرعتش به آرامی کم میشود.( در ابتدا و انتها سرعت به آرامی تغییر میکند)
ease-in : سرعت ابتدایی به آرامی زیاد میشود و در انتها با سرعت زیاد به پایان میرسد.
ease-out : این حالت برعکس حالت قبل است . با سرعت زیادی شروع میشود و در پایان به کندی خاتمه پیدا میکند.
ease-in-out : این حالت ماندد ease میماند . یعنی به آرامی شروع میشود در میانه راه کمی سرعتش افزوده میشود و در پایان به آرامی به اتمام میرسد. با این تفاوت که کمی شتاب کمتری دارد.
linear: که به صورت خطی و پیوسته با یک سرعت یکسان افزایش میکند.





delay : مدت زمان تاخیر در اجرای افکت.
این مقدار رو هم باید باید با ثانیه مقدار دهی کنید
شکل کلی کد:
HTML:
transition: all 2s linear 1s;


در مثال بالا همه متغییر ها به مدت 2 ثانیه و با تاخیر 1 ثانیه اجرا خواهد شد
(تاخیر= پس مقدار ثانیه ای که ما تنظیم کردیم شروع میشود)


خب برای دیدن نمونه ها به این صفحه برید
http://iranrazmi.ir/transition/



خب درس این جلسه هم تموم شد


تمرین یادتون نره

 
آخرین ویرایش:

Mahdi Askari

مدير فنی
خب خب خب خداروشکر عمری بود بتونیم در خدمتتون باشیم و یک درس دیگه که به عبارتی درس آخر HTML و CSS هست رو در خدمت شما باشیم
خواهس تحت عنوان media هم وجود داره که بهتر هست خودتون اونها رو بخونید و تمرین کنید

اما آنچه در این جلسه قراره بحث کنیم ساخت انیمیشن هست


خصوصیت animation

در سی اس اس ما میتونیم یک انیمیشن جزئی بسازیم
میتونیم اجزا رو بچرخونیم، بزرگ و کوچیک کنیم، رنگشون رو تغییر بدیم و کلا همه کاری بکنیم
برای ایم کار ما نیاز داریم ابتدا یک keyframes برای این انیمیشن بنویسیم و سپس اونو با صفت animation فراخوانی کنیم و اون جز از صفحه اون انیمیشن رو اجرا کنه


@keyframes

برای ساخت انیمشین در css3 ما نیاز داریم که بفهمیم keyframes چیه و چطور عمل می کنه؟
در حقیقت در داخل keyframes ما مجموعه کدهایی را که برای ساخت انیمشین نیاز است می نویسیم و در آن حالت اولیه و حالتی که باید اون جز از صفحه به آن تبدیل شود را می نویسیم.

کد زیر را در نظر بگیرید: ---> (مثال 1)

HTML:
<div class="iranjoman"> iranjoman </div>


کد:
.iranjoman{

height: 100px;
  color:darkgreen;
  width: 200px;
  background-color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=09f]#09f[/URL] 
 text-align: center;
  font-family:b koodak;
}

حالا میخوایم برای این کلاس keyframes تعریف کنیم
در کد های سی اس اس میایم و این خصوصیت رو تعریف میکنیم

کد:
@keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-webkit-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-moz-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-o-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-ms-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

توجه: به جای اسم anime1 میتونید هر اسم دلخواه خودتون رو بذارید


بسیار خب، حال ما انیمیشن را ساختیم، anim1 نام انیمشین ما است، from شروع انیمیشن و to پایان انیمیشن را مشخص می کند، که جعبه از سیاه به قرمز تغییر رنگ دهد.
اما هنوز انیمیشن غیر فعال است و کاری انجام نمی دهد. برای ینکه انیمیشن را به جعبه اختصاص دهیم باید از خصوصیت animation استفاده کنیم و به آن حداقل دو مقدار دهیم :
مقدار اول : نام انیمشین که همان anim1 است
مقدار دوم : زمان اجرای انیمشین که بر حسب ثانیه (s) یا میلی ثانیه (ms) می تواند باشد.

پس با توجه به توضیح ما مقدار زیر را به کد کلاس ایران انجمن اضافه میکنیم. --->(مثال2)

کد:
animation: anim1 5s;
-webkit-animation: anim1 5s;
-moz-animation: anim1 5s;
-o-animation: anim1 5s;
-ms-animation: anim1 5s;





.iranjoman{

height: 100px;
  color:darkgreen;
  width: 200px; 
 background-color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=09f]#09f[/URL]
  text-align: center;
  font-family:b koodak;
animation: anim1 5s;animation: anim1 5s;
-webkit-animation: anim1 5s;
-moz-animation: anim1 5s;
-o-animation: anim1 5s;
-ms-animation: anim1 5s;


}


شیوه زمان بندی انیمشین

خب همونطور که دیدید از from برای حالت اولیه و فo برای حالت نهایی استفاده کردیم
و بر اساس تعداد ثانیه ای که مشخص کردیم این عملیات طول میکشه

اما نوع دوم زمانبندی استفاده از % است مقدار 0% برای شروع و مقدار 100% برای خاتمه است.
در این نوغ شما میتونید زمانبندی کنید در چه طول فاصله هایی چه ویژگی هایی روی بده:

کد:
@keyframes anim2 {
0% {background: red;}
25% {background: green;}
50% {background: black;}
75% {background: yellow;}
100% {background: brown;}
}

این خصوصیت فقط برای بکگراند نیست و شما میتونید تمام تغییراتی که یاد گرفتید رو پیاده کنید داخلش
به مثال زیر توجه کنید: --->(مثال3)

کد:
@keyframes anim3 {
0% {background: red;
color:green;
font-size:15px;
}
25% {background: green;
color:brown;
font-size:18px;
}
50% {background: black;
color:red;
font-size:13px;
}
75% {background: yellow;
color:black;
font-size:14px;
}
100% {background: brown;
color:red;
font-size:12px;
}
}






کد:
.iranjoman{

height: 100px;
 color:darkgreen;
 width: 200px;
 background-color: [URL=http://www.iranjoman.com/usertag.php?do=list&action=hash&hash=09f]#09f[/URL]
 text-align: center;
 font-family:b koodak;
animation: anim3 5s;animation: anim3 5s;
-webkit-animation: anim3 5s;
-moz-animation: anim3 5s;
-o-animation: anim3 5s;
-ms-animation: anim3 5s;


}




سایر مقادیر انیمشین


خاصیت انیمیشن به غیر از دو مقداری که نام پارامتر و مدت زمان انیمیشن بود مقادیر دیگری را نیز در بر میگیرد.
قاعده :
HTML:
animation: name function duration count delay


name : نام انیمیشن

function : افکت زمانی که یکی از مقادیر زیر را میگیرد


  • ease
  • ease-in
  • ease-out
  • ease-in-out

duration : مدت زمان اجرای انیمشین

count : که فقط مقدار infinite و به معنای تکرار بی نهایت است.

delay : مدت زمان تاخیر قبل از شروع انیمیشن است که مقداری بر حسب زمان را میگیرد.


کد:
animation: anim3 linear 4s infinite 2s;



برای دیدن نتیجه مثال ها به آدرس زیر برید:گل:

http://iranrazmi.ir/animation/





درس تمام شد. موفق باشید




تمرین یادتون نره

 
بالا