توضیح:
- کلاس ها و آی دی تعریف شده در کد بالا، فرضی و با عناوین انتخابی است.
- در استفاده از مقداردهی درصدی نیاز به وجود یک بلاک والد یا دربرگیرنده داریم، به این معنی که تنها عناصر زیر مجموعه (بلاک درونی) می توانند مقادیر درصدی داشته باشد که در واقع درصد از میزان ارتفاع بلاک اصلی حساب می شود، به طور مثال اگر بلاک اصلی 200 پیکسل ارتفاع داشته باشد، بلاکی که درون آن قرار گرفته با ارتفاع 25 درصد، معادل 50 پیکسل (25 درصد از 200 پیکسل) در حالت معمولی ارتفاع خواهد داشت.
در css برای مقدار دهی چند شیوه وجود دارد:
- تعیین مقادیر به پیکسل (picture element)، به فرض 6px، 2px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 1pt، 3pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

خاصیت width در css

در کنار خاصیت height که ارتفاع عناصر را مشخص می کند، خاصیت width برای تنظیم عرض عناصر در صفحات وب تعریف شده است، بدین ترتیب با کمک css قابلیت تعیین ارتفاع و عرض برای تگ های html به راحتی فراهم می شود، این خاصیت نیز مانند height از مقادیر پیکسلی، درصدی و... تبعیت می کند که در مثال زیر با چند نمونه از آن آشنا می شویم.

توضیح:
- قواعد تعریف خاصیت width دقیقا مشابه با خاصیت height است.
- دقت کنید که در یک کلاس یا آی دی، می توان به فرض برای width آن از یک نوع مقدار دهی و برای height از نوعی دیگر استفاده کرد، به فرض برای عرض از مقدار دهی پیکسلی و برای ارتفاع از مقدار دهی درصدی استفاده کرد و از این لحاظ محدودیتی وجود ندارد.
خاصیت min-height و max-height

در کنار دو خاصیت اصلی height و width، از چند خاصیت زیر مجموعه نیز در این رابطه می توانیم استفاده کنیم، از جمله min-height و max-height، اما اول باید بدانیم که این دو ویژگی چه کاربردی دارند؟
به طور خلاصه min-height حداقل ارتفاع یک عنصر را مشخص می کند، به فرض در حالت پیش فرض مرورگرها هر بلاک را به اندازه محتوایی که در آن وجود دارد، ارتفاع می دهند، اما با تنظیم مقادیر min-height مرورگر حداقل مقادیر ارتفاع را (چه محتوا به اندازه کافی باشد و چه نباشد) برای آن بلاک در نظر می گیرد، اما max-height حداکثر ارتفاع یک عنصر را مشخص می کند، یعنی به فرض اگر میزان محتوا از ارتفاع یک بلاک بیشتر باشد، مرورگر ارتفاع را همچنان ثابت نگه می دارد و ممکن است محتوا در خارج از بلاک نشان داده شود یا اینکه آن بلاک اسکرول گردد، البته این ویژگی معمولا در کنار خاصیت overflow استفاده می شود، overflow رفتار مرورگر در حالتی که محتوا از میزان ارتفاع یک بلاک بیشتر است را تعیین می کند که خود چند مقدار می پذیرد:
- auto، اگر محتوا بیشتر باشد، بلاک اسکرول می شود.
- hidden، محتوای اضافه مخفی می شود.
- scroll، نوار اسکرول ظاهر می شود.
- visible، بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود.
مثال:


یا

کارکرد خاصیت max-width و min-width در قریب به اتفاق موارد مشابه min-height و max-height است که در بالا اشاره شد، با این تفاوت که در اینجا خاصیت بر روی عرض عناصر html تاثیر می گذارد و از این گذشته مقادیر overflow برای width کاربردی ندارد.

مثال:

یا

کار با border و outline در css

در طراحی و فرم بندی ظاهر صفحات وب، از خصوصیات زیادی در css استفاده می شود که هر کدام می توانند قابلیتی ویژه را برایمان ایجاد نمایند تا به کمک آن قابلیت، به هدف مورد انتظار خود دست یابیم، یکی از این ویژگی ها، قابلیت ایجاد انواع خطوط به شکل ها و طرح های مختلف در وب با استفاده از ویژگی های border و outline در css است که بی گمان کم تر طراحی پیدا می شود که از آنها در قالب ها، طرح ها یا صفحات خود استفاده نکرده باشد، لذا در این قسمت از آموزش مقدماتی css، به این موضوع حتی الامکان به صورت کامل خواهیم پرداخت.

ایجاد خط با ویژگی border در css

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


در کلاس ساده بالا، به راحتی یک خط به صورت solid یا جامد (خطوط معمولی) با کد رنگی 999# و اندازه 1 پیکسل ایجاد کرده ایم، به این صورت کلاس بالا به طور پیش فرض این خط را در هر چهار طرف (بالا، پائین، چپ و راست) لایه یا عنصر در صفحات وب ترسیم خواهد کرد، برای ترسیم خطوط در css، نوع یا همان style آنها باید الزاما تعیین شود (به فرض solid، dotted و...) اما تنظیم سایر موراد اختیاری است، برای ترسیم خطوط متفاوت نیز، می توان از مقادیر زیر برای style در border استفاده کرد:

- dashed: برای ترسیم خطوط با فاصله (علامت dash یا -).
- dotted: برای ترسیم خطوط با فاصله (علامت نقطه یا dot).
- double: برای ترسیم خطوط به صورت دوتایی یا دوبل.
- groove: برای ترسیم خطوط به شکل شیاری و برجسته.
- hidden: برای ترسیم خطوط پنهان در صفحه.
- inset: برای ترسیم خطوط سه بعدی با برجستگی داخلی.
- outset: برای ترسیم خطوط سه بعدی با برجستگی بیرونی.
- none: هیچ خطی ترسیم نمی شود.
- ridge: برای ترسیم خطوط شیاری و برجسته.
- solid: برای ترسیم خطوط معمولی.
برای مقادیر اندازه عرض خطوط نیز می توان از مقادیر پیکسل، درصد و... استفاده کرد، علاوه بر این از سه مقدار زیر هم می توان برای این مقصود استفاده نمود:
- medium: ایجاد خطوط با اندازه استاندارد و پیش فرض مرورگر.
- thin: ایجاد خطوط نازک و ظریف.
- thick: ایجاد خطوط ضخیم و برجسته.
برای مقادیر رنگ نیز می توانید از کدهای هگز (مانند 0000FF#) یا rgb (مانند (255,100,125)rgb) و همچنین عنوان های رنگی (مانند red ،blue، green و...) استفاده کنید.

به مثال زیر توجه کنید.



و همچنین مثالی دیگر:


شیوه های نگارش (syntax) خاصیت border در css

شیوه تعریف و نگارش (syntax) خاصیت border در css به حالتی که در بالا از آن استفاده کرده ایم محدود نمی شود، در واقع حالت فوق نوع کاربرد مختصر نویسی این خاصیت است، اگر بخواهید از border به شکل سفارشی تری استفاده نمائیم، به فرض برای هر ضلع یک لایه در صفحه، یک نوع خاص از خط و با اندازه و رنگ متفاوت داشته باشیم، می توانیم از سایر پارامترهای این خاصیت به شکل زیر استفاده نمائیم.
- تعریف خطوط برای یک ضلع خاص:
بدین منظور از border-right، border-left، border-top و border-bottom استفاده می کنیم، به عنوان مثال:

کلاس فرضی بالا، برای لایه ای که از این کلاس برای آن استفاده می شود، سه خط به صورت solid در سمت بالا، چپ و راست ترسیم خواهد کرد و در پائین لایه، از ویژگی border-bottom پیروی کرده و خط را به صورت double ایجاد می کند.

مثالی دیگر:



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

علاوه بر این، سه پارامتر color، style و width را می توان به صورت جداگانه نیز برای خطوط در css تعریف کرد، البته این روش همیشه هم ضروری نیست و با شیوه مختصر نویسی نیز می توان به راحتی خطوط مختلف را ترسیم کرد، اما در مواقعی ممکن است استفاده از این سبک کاربرد داشته باشد؛ بدین منظور از سه خاصیت ذکر شده به صورت زیر استفاده می شود:

- border-width (یا به شیوه ترکیبی به صورت به فرض border-bottom-width): برای تعیین عرض خطوط.

- border-color (یا به شیوه ترکیبی به صورت به فرض border-top-color): برای تعیین رنگ خطوط.

- border-style (یا به شیوه ترکیبی به صورت به فرض border-left-style): برای تعیین نوع خطوط.

به مثال زیر توجه کنید.


همچنین مثالی دیگر:


و همچنین مثال زیر:


همانطور که پیش تر گفتیم، استفاده از ویژگی style برای خاصیت border جهت ترسیم آن ضروری و سایر موارد از قبیل رنگ و اندازه اختیاری است، یعنی یک خط در صفحات وب با css بدون وجود یکی از مقادیر style برای border قابل ترسیم شدن نیست.

اگرچه ترسیم خطوط با border در css در بیشتر موارد نیازهایمان را در طراحی صفحات وب مرتفع می کند، اما قدرت css از این هم فراتر رفته و ورای خطوط border امکان ایجاد خطوط دیگری را نیز می دهد که به آنها outline می گویند، همان طور که از نام آن پیدا است، outline برای ایجاد خطوط (فراتر از border) به کار گرفته می شود، استفاده از این قابلیت معمولا به جهت برجسته نمودن یا تنظیم موقعیت یک بلاک کاربرد دارد، البته این ویژگی در مقایسه با border از بیشتر خاصیت های آن استفاده می کند (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، لذا اگر نحوه کار border را به درستی فرا بگیرید، تنظیم خطوط  outline چندان مبهم نخواهد بود؛ تنها تفاوت بین border و outline در این است که اندازه border جزء عنصری که از آن استفاده می کند محسوب می شود (و به اندازه آن عنصر اضافه می شود)، اما اندازه outline مستقل بوده و جزء عنصر وابسته نیست.

به مثال زیر توجه کنید.


از آنجایی که تنظیمات outline کاملا مشابه با border است (به جزء موارد مربوط به جهت های مختلف left، right، top و bottom)، در اینجا صرفا به ذکر چند مثال بسنده می کنیم .


مثالی دیگر:


و همچنین مثال زیر:


برای آشنایی بیشتر با نحوه کار border و outline می توانید از مثال های زیر  استفاده نمائید.

کار با ویژگی margin و padding در css

در ادامه مباحث آموزش مقدماتی css این بار می خواهیم به مبحث کار با ویژگی های padding و margin بپردازیم، با ذکر این مقدمه که استفاده از ویژگی های مذکور در فرم دهی، اسکلت بندی چارچوب کار و طراحی صفحات و قالب های وب، امری فراگیر و تقریبا اجتناب ناپذیر است، به طور مثال برای تنظیم موقعیت بلاک ها، فاصله لایه ها از هم ، نمایش سفارشی محتوای درون لایه ها، جداول و خیلی چیزهای دیگر، از padding و margin و تنظیمات زیر مجموعه آنها استفاده می شود که در ادامه آموزش، به تفصیل راجب آن خواهیم گفت.
ویژگی margin در css

همانطور که از عنوان این عبارت مشخص است، ویژگی margin برای تنظیم فاصله ی حاشیه ها استفاده می شود، به فرض اگر بخواهیم بلاک div اصلی صفحه، از کناره ها و در واقع از تگ body به میزان چند پیکسل فاصله داشته باشد، کافی است برای آن بلاک، مقادیر حاشیه را در قسمت بالا (top)، به میزان مشخصی در یک کلاس (class) یا آی دی (id) تعریف کنیم، به طور مثال:

به این صورت، بلاک div با کلاس فرضی main-block از تگ body و در واقع از حاشیه بالای صفحه نمایش، به میزان 4 پیکسل فاصله می گیرد.
مقادیر مربوط به اندازه حاشیه را می توان به چند صورت زیر تعیین کرد، اما مناسب ترین و متداول ترین شیوه در حالت معمول، تعیین مقادیر به پیکسل (px) است.
- تعیین مقادیر به پیکسل (picture element)، به فرض 4px، 0px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 2pt، 6pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.
نحوه تعریف ویژگی margin

ویژگی margin را می توان به دو صورت عادی و مختصر تعریف کرد، در شیوه عادی برای کل جهت های بالا، پائین، چپ و راست به صورت یکجا یا جداگانه، margin تعریف می شود، به طور مثال:


مثال بالا به این معنی است که مرورگر مقادیر پیش فرض حاشیه را برای جهت های بالا، پائین، چپ و راست در نظر می گیرد.

و یا:

و یا:


و همچنین:


اما در حالت مختصر نویسی، به جای نوشتن مقادیر و جهت های بالا، پائین، چپ و راست، با نوشتن مقادیر آنها در یک خط، به همان هدف اما با کدنویسی کمتر می رسیم، به فرض:


اعداد در کلاس فوق، به ترتیب نشانگر جهت بالا (top) راست (right) پائین (bottom) و چپ (left) هستند، در واقع مثال برابر است با کد css زیر:

و همین طور مختصر نویسی به صورت زیر:

برابر است با این کلاس css:


و همچنین:


برابر است با:

آنچه در مورد ویژگی margin گفتیم، تا حدود زیادی در مورد padding نیز قابل اعمال است، به طور مثال برای تعریف مقادیر جهت های بالا، پائین، چپ و راست به صورت زیر، padding را مقدار می دهیم:

و در شیوه مختصر نویسی:

همانطور که پیش تر گفتیم، اعداد در کلاس فوق، به ترتیب نشانگر جهت بالا (top) راست (right) پائین (bottom) و چپ (left) هستند.

جهت بررسی و آشنایی بیشتر با ویژگی های padding و margin می توانید از کد زیر استفاده کنید.

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

نحوه تنظیم لیست با تگ ul li در css

همان طور که در مطالب قبلی از بخش آموزش مقدماتی css گفتیم، استایل های css قابلیت های بسیار خوبی در نحوه کنترل تگ ها و عناصر html در صفحات وب در اختیارمان قرار می دهند، تا حدی که امروزه دیگر کسی به طراحی وب بدون استفاده از آنها فکر نمی کند، در ادامه آموزش ها، این بار می خواهیم نحوه کنترل شکل ظاهری تگ های ul و li که مربوط به لیست در صفحات html می شوند را بررسی کنیم، یادآور می شویم که تگ ul و li برای ایجاد منوهای استاندارد و باب طبع موتورهای جستجو در سایت یا وبلاگ و همچنین ایجاد نقشه های سایت (بدون استفاده از xml) کاربرد فراوان دارند.

ساختار تگ ul و li در html

قبل از اینکه به نحوه تنظیم تگ های ul و li با استایل css بپردازیم، بد نیست نگاهی اجمالی داشته باشیم به نحوه استفاده از دو تگ ul و li در صفحات html؛ از این دو تگ برای ایجاد یک لیست با زیر مجموعه به صورت درختی استفاده می شود، مثال زیر نحوه صحیح چیدمان تگ ul و li را به صورت تو در تو نشان می دهد.

توضیح:

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

- به نحوه چینش تو در توی تگ های ul و li در مثال بالا به دقت نگاه کنید، کوچکترین اشتباه در نحوه چینش صحیح تگ های ul و li ممکن است باعث نامعتبر شدن کد شما از لحاظ سرویس های اعتبار سنجی مانند w3c.org شود.

تگ ul به عنوان لیست اصلی، معمولا در حالت پیش فرض به صورت نقطه دار (نقطه ای در سمت راست یا چپ نمایش داده می شود) نشان داده می شود که این موضوع می تواند زیبایی کار را در طراحی وب تحت تاثیر قرار دهد، اما خوشبختانه مانند بسیاری از تگ های html، تگ ul نیز به خوبی ویژگی های css را می پذیرد، در مثال زیر برخی از این ویژگی ها را بر روی آن اعمال کرده ایم.

توضیح:
- خاصیت list-style نوع نمایش عناصر لیست را نشان می دهد، مقادیر زیادی را می توان برای list-style در نظر گرفت که فهرست وار در زیر برخی از مهم ترین و پرکاربردترین آنها را مشاهده می کنید.
inside: برای ایجاد نقطه هایی رو به داخل لیست (در برخی مرورگرها پشتیبانی می شود).
outside: ایجاد نقطه رو به بیرون لیست (در رخی مرورگرها پشتیبانی می شود).
circle: ایجاد نقطه های توخالی و گرد برای آیتم های لیست.
decimal: ایجاد آیتم های لیست به صورت شمارشی و زیر مجموعه، بدون صفر (1، 2، 3 و...).
decimal-leading-zero: ایجاد آیتم های لیست به صورت شمارشی و زیرمجموعه ای به صورت اعداد به همرا صفر (01، 02، 03 و...).
square: ایجاد مربع های کوچک برای آیتم های لیست.
none: نمایش آیتم های لیست بدون هیچ گونه علامتی.
نکته: به جای list-style از list-style-type نیز استفاده می شود.
- خاصیت list-style-image برای تعریف یک تصویر به جای علامت های نقطه، مربع و... در آیتم های لیست کاربرد دارد که مقادیر ان با آدرس url تصویر، تکمیل می شود.
- خاصیت list-style-position نیز موقعیت آیتم ها را مشخص می کند، این خاصیت می تواند دو مقدار outside و inside داشته باشد.

تنظیم تگ li با css

مانند تگ ul، تنظیمات بالا بر روی تگ li نیز قابل اعمال است، توجه کنید که به دلیل اینکه تگ li خود زیر مجموعه ul محسوب می شود، اگر استایلی برای آن تنظیم نشود، برخی از ویژگی های آن از تنظیمات ul پیروی می کند، اما با تنظیم استایل برای li، تنظیمات مشابه بخش ul معمولا نادیده گرفته می شوند؛ در مثال زیر ما کد بالا را کامل کرده ایم و پیش نمایشی از آن را نیز به صورت آنلاین جهت تست و بررسی قرار داده ایم.

ملاحظه می کنید که وقتی برای تگ li ویژگی هایی تعریف می کنیم، تگ ul نیز از آن پیروی می کند، چرا که آیتم های لیست نهایتا به صورت li نشان داده می شوند و ul برای تنظیم تو در توی آیتم ها کاربرد دارد، در اینجا ما از دو کلاس li-1 و li-2 برای آیتم های سطح یک و سطح دو استفاده کرده ایم که پی بردن به نحوه تنظیم آنها نیاز به اندکی دقت و توجه به ترتیب چینش آنها دارد.

نحوه تنظیم لینک (link) در استایل css

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

تعریف یک لینک در html

همانطور که قبلا گفتیم، css به خودی خود کاربردی ندارد و در کنار تگ های html است که قدرت آن مشخص می شود، لذا وقتی صحبت از تنظیم لینک در css است، باید ابتدا ببینیم که اصلا لینک در html چگونه تعریف می شود؛ یک لینک (hyperlink) در html با تگ href و a تعریف می شود و با افزودن کلاس (class) یا آی دی (id) به آن، یا قرار دادن لینک، درون یک بلاک دیگر که از (class) و آی دی (id) در css پیروی می کند، با خواص ظاهری تنظیم می شود که در زیر نمونه ای از کاربرد آن را ملاحظه می کنید.



تعریف خواص لینک در css

در css خواص لینک را درون کلاس ها یا آی دی ها تعریف می کنند، یک لینک در وب به طور معمول درچند حالت مختلف می تواند عملکرد مختلف داشته باشد، مثلا در حالت عادی که ماوس را روی آن نبرده اید، ممکن است رنگ آن به فرض آبی باشد، اما پس از اینکه ماوس را برای کلیک کردن روی آن می برید به رنگ دیگری درآید، یا پس از دیدن صفحه مربوط به آن لینک، رنگ آن به صورت ثابتی تغییر کند، همچنین در لحظه ای که بر روی یک لینک کلیک می کنید، ظاهری متفاوت داشته باشد، به هر صورت تمام این ویژگی ها در css با عناصر مربوط به لینک های به اصطلاح اینتراکتیو قابل ایجاد شدن هستند، این عناصر عبارتند از: a یا a:link برای حالت عادی، a:visited برای حالتی که صفحه مربوط به آن لینک دیده شده است، a:hover برای حالتی که ماوس را روی لینک می برید و a:active برای لحظه ای که روی آن لینک کلیک می کنید، به کاربرد این ویژگی ها در مثال زیر دقت کنید.



توضیح:
- دقت کنید که عناصر مربوط به لینک باید به ترتیب ذکر شده در مثال بالا پشت سر هم و به ترتیب تعریف شوند، در غیر اینصورت ویژگی های مورد نظر عمل نخواهند کرد.
- به جزء حالت a:link، استفاده از سایر ویژگی ها اختیاری است و بستگی به هدف و سلیقه شما دارد.

استفاده از text-decoration در تنظیم css لینک

اکثر مرورگرها در حالت پیش فرض، زیر لینک (hyperlink) های وب خطی افقی را ترسیم می کنند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد، خوشبختانه در css عنصری به نام text-decoration وجود دارد که به کمک آن و با افزودن مقادیر none، می توان لینک هایی با ظاهری بهتر ایجاد کرد، مقادیری که به text-decoration مربوط می شوند عبارتند از: blink برای لینک های چشمک زن، line-through برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است، none برای حالت عادی، overline برای حالتی که خطی در قسمت بالای لینک ظاهر می شود و underline برای حالتی که خطی در زیر لینک وجود دارد، به مثال زیر توجه کنید.



توضیح:
- اگر از استایل بالا در صفحه خود استفاده کنید، با نگه داشتن ماوس روی لینک، علاوه بر اینکه رنگ آن تغییر می کند، پس از اندک زمانی شروع به چشمک زدن می نماید.
- همانطور که ملاحظه می کنید، برخی خواص لینک ها در قسمت اول یعنی a:link تعریف می شوند و در عناصر بعدی نیازی به تعریف مجدد آنها نیست (و از همان تنظیمات پیروی می کنند)، مانند font-family یا font-size در مثال بالا.

استفاده از color و background-color در تنظیم css لینک

مثل کلاس ها و آی دی ها در css، تگ های خاصی مانند a و href نیز می توانند با ویژگی های مربوط به رنگ و پس زمینه تنظیم شوند و این نمودی از انعطاف پذیری بالای css است، به دلیل اینکه در این رابطه پیش تر و در آموزش های گذشته به طور مفصل صحبت کرده ایم، در اینجا به ذکر یک مثال بسنده می کنیم.


استفاده از (class) یا آی دی (id) در تنظیم لینک در css

گاهی مواقع در طراحی و برنامه نویسی صفحات وب، نیاز به این داریم که لینک های یک بخش و بلاک را از سایر بخش ها متمایز کنیم، مثلا قسمت لینکدونی یا قسمت لینک دوستان را به رنگی متفاوت نشان دهیم، در این مواقع تعریف لینک ها در حالت عادی و با تگ کلی a و href کاربرد ندارد، چون این تگ ها فقط حالتی کلی و پیش فرض برای لینک هایی که هیچ کلاس یا آی دی برایشان تعریف نشده است را نشان می دهند، لذا برای هر کلاس یا آی دی در css باید عناصر مربوط به a:link و زیر مجموعه آن را اضافه کنیم، در زیر با مثالی می توانید به نحوه انجام این کار پی ببرید.
ابتدا استایلی برای کلاس تعریف می کنیم:

پیش از این در بخش آموزش مقدماتی css، از کاربرد این زبان، نحوه تعریف و استفاده از کلاس (class) و آی دی (id) صحبت کردیم، همچنین با نحوه کار رنگ ها و تصاویر پس زمینه (Backgrounds) و ویژگی های آنها بیشتر آشنا شدیم و مثال هایی را در این خصوص به صورت صفحاتی کمی و بیش ساده با الگوهای دلخواه، مرور کردیم، اکنون در ادامه بحث آموزش های مقدماتی css می خواهیم با یکی دیگر از کاربردهای این زبان آشنا شویم و آن کار با فونت و متن و بررسی تنظیمات آنها است.

کار با فونت (Font) در css:

همانطور که قبلا گفتیم، css به عنوان ابزاری کمکی در شکل دهی ظاهر محتوای صفحاوت وب (html) کابرد دارد، به عبارتی از آن برای ایجاد استایل های مورد نظر برای عناصر صفحات وب که می تواند به فرض فونت مطالب باشد، استفاده می شود.
تنظیم حروف چپ به راست یا راست به چپ با direction:

در css برای نمایش حروف راست به چپ (مثل زبان فارسی)، از عنصر direction استفاده می کنند.

direction می تواند مقادیر rtl برای حروف فارسی یا ltr برای حروف انگلیسی داشته باشد.
تعریف فونت در :css

در css فونت را در حالت کلی به شیوه های زیر تعریف می کنند.

تعریف مستقیم فونت:

تعریف خانواده فونت:

خانواده یک فونت می توانید برای مثال یکی از مقادیر زیر باشد:
- Verdana, Geneva, sans-serif
- Georgia, "Times New Roman", Times, serif
- Arial, Helvetica, sans-serif (مناسب برای حروف فارسی)
- Tahoma, Geneva, sans-serif (پرکاربردترین فونت برای حروف فارسی در وب)
فونت های بالا به ترتیب اولویت توسط مرورگر بررسی می شوند، اگر در سیستم کاربر فونت اول بود، دیگر از فونت های بعدی استفاده نمی شود، ولی اگر فونت اول وجود نداشت، نوبت به استفاده از فونت های بعدی می رسد، ذکر یک نکته ضروری است: استفاده از فونتهایی که در سیستم کاربران به طور پیش فرض وجود ندارد (مثل برخی از فونت های فارسی)، ممکن است موجب شود که کاربران صفحه شما، به همان شکلی که شما آن را می بینید، نتوانند مطالب را ببینند (به این دلیل که آن فونت خاص در سیستم آنها نصب نیست، لذا با نوع دیگری جایگزین می شود).

اندازه فونت یا font-size:

اندازه فونت ها در css با مقادیر px، em یا به صورت عبارات مشخص می شوند.

علاوه بر مقادیر پیکسلی می توان از em و یا عبارت تعریف شده در css استفاده کرد (البته توصیه می کنیم فقط از px استفاده کنید، چرا که استانداردتر است و در تمام مرورگرها به یک شکل پردازش می شود)؛ عباراتی که برای اندازه فونت به کار می روند عبارتند از:
- large (بزرگ)
- larger (بزرگتر از بزرگ)
- medium (معمولی)
- small (کوچک)
- smaller (کوچکتر از کوچک)
- x-large و xx-large (به ازای هر x یک مقدار بزرگتر از large)
- x-small و xx-small (به ازای هر x یک مقدار کوچکتر از small)
مقادیر پیکسلی به طور استاندارد از 9، 10، 12 شروع و به 36 ختم می شوند، مقادیر em از حاصل تقسیم مقادیر پیکسلی بر عدد 16 (16 اندازه پیش فرض فونت در مرورگر است) به دست می آید، مثلا 30px مساوی است با 1.875em، در مثال زیر از em استفاده شده است.

کشیدگی (stretch) فونت:

stretch یا کشیدگی فونت بیشتر در مورد حروف لاتین کاربرد دارد، با این حال مقادیر زیر را می توان برای stretch در نظر گرفت.
- condensed (فشرده)
- expanded (بسیط)
- extra-condensed (خیلی فشرده)
- extra-expanded (خیلی بسیط)
- narrower (باریک)
- normal (عادی)
- semi-condensed (تقریبا فشرده یا نیمه فشرده)
- ultra-condensed (خیلی خیلی فشرده)
- ultra-expanded (خیلی خیلی بسیط)
- wider (عریض)

استایل فونت یا font-style:

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

مقادیر استایل فونت:
- oblique (مایل)
- italic (کج)
- normal (عادی)

ضخامت فونت یا font-weight:

در css برای برجسته کردن یک فونت، می توان این کار را با خاصیت font-weight انجام داد، font-weight و font-style در css تقریبا عملکردی شبیه تگ های b، strong، em و i در html دارند.

برای ضخامت فونت می توانیم از مقادیر زیر استفاده کنیم.

- مقادیر عددی به صورت ضریبی از 100 تا 900 (100، 200، 300 تا 900).
- bold (ضخیم)
- bolder (خیلی ضخیم)
- lighter (نازک و سبک)
نکته: چند خاصیت دیگر نیز در css3 برای فونت وجود دارد که یا توسط برخی مرورگرها پشتیانی نمی شود یا اینکه کاربرد چندانی ندارد، از جمله font-size-adjust و font-variant.
برای آشنایی بیشتر با خاصیت های مربوط به فونت، در مثال زیر ما یک کلاس فرضی تعریف کرده ایم و متن موجود در آن را با عناصر فونت تنظیم نموده ایم.

تنظیمات متن (text) در css:

تعریف نوع فونت و ویژگی های آن، گام اول برای نمایش محتوا در css است، در قدم بعدی نیاز به تنظیم چینش مطالب و نحوه نمایش آنها است، این ویژ گی ها با text و زیرمجموعه های آن ایجاد می شوند.
تنظیم تراز و چینش متن با text-align:

برای اینکه متن خود را به صورت راست چین یا چپ چین و... تنظیم کنید، باید از text-align و یکی از مقادیر زیر استفاده نمائید.
- center (تنظیم گوشه های متن در وسط)
- justify (تمام چین کردن متن، پوشش از سمت چپ و راست)
- left (چپ چین کردن متن)
- right (راست چین کردن متن)
مثال:

تزئین متن با text-decoration:

در css متن (و مخصوصا لینک) را با text-decoration تنظیم می کنند، مثلا اگر از این گزینه استفاده نکنید، بیشتر مرورگرها، لینک ها را به صورت متن زیرخط دار نشان می دهند.
مقادیری که در text-decoration استفاده می شود:
- blink (متن چشمکزن)
- line-through (متنی که خطی از داخلش گذشته یا بر روی آن خط کشیده شده)
- none (بدون موارد اضافه و حالت عادی)
- overline (متن با خطی روی آن)
- underline (متن زیر خط دار)
مثال:


میزان فشردگی متن یا text-indent:

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


ایجاد سایه متن یا text-shadow:

text-shadow قابلیتی است که در css3 افزوده شده است، از این عنصر برای ایجاد سایه متن استفاده می شود؛ روش ایجاد آن به طور کلی به صورت زیر است:


اعداد در عبارت بالا به ترتیب نشانه فاصله افقی (horizontal shadow)، فاصله عمودی (vertical shadow)، فاصله ماتی (blur) و رنگ سایه است.
نکته: این امکان در مرورگر اینترنت اکسپلورر پشتیبانی نمی شود.

نمایش کوچک بزرگی حروف با text-transform:

text-transform قابلتی است در css که بیشتر برای حروف انگلیسی کاربرد دارد، چرا که می توان با آن حروف را بزرگ یا کوچک نشان داد، مقادیر text-transform عبارتند از:
- capitalize (حروف اول بزرگ نشان داده می شود)
- lowercase (تمام حروف کوچک نشان داده می شوند)
- uppercase (تمام حروف بزرگ نشان داده می شوند)
مثال:


در خاتمه این بحث، توجه شما را به مثالی آنلاین جلب می کنیم که در آن، متنی فرضی را با عناصر تنظیم کننده، شکل داده ایم.

کار با Backgrounds و ویژگی های آن در CSS

بعد از آشنایی نسبی با css، تعریف کلاس (class) و آی دی (ID)، نوبت به فراگیری تنظیمات مربوط به Backgrounds در CSS است، خوشبختانه CSS قابلیت های تقریبا کاملی در این خصوص دارد و هرآنچه که در طراحی وب فکرش را بکنیم با کد های آن دست یافتنی است، در ادامه خواهیم گفت که چگونه می توانید پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود را با ویژگی های color، image، repeat، attachment و position به زیبایی شکل دهید و از آنها به طور سفارشی استفاده کنید.

شیوه نگارش کلی این عنصر و زیرمجموعه های آن به شکل زیر است:

توضیح:
- در کد بالا صفحه ای فرضی را با عناصر background شکل داده ایم.
- در قسمت مربوط به عکس پس زمینه می توان از background به صورت پیش فرض یا background-image به صورت حرفه ای تر، استفاده کرد.
- برای نوشتن یک نکته یا یادداشت در حین کدنویسی css از علامت /*یادداشت*/ استفاده می کنیم.
- در قسمت مربوط به url باید آدرس دایرکتوری (یا آدرس کامل تصویری که آپلود می کنید) را به همراه نام کامل فایل (با پسوند) قرار دهید.
- در کد بالا ما تصویری با ابعاد 5 پیکسل در 5 پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
- رنگ پس زمینه صفحه را با background-color و یک مقدار هگز که به صورت 069# مشخص است، تنظیم کرده ایم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کنید.
- background-repeat نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
حال به بررسی جزئی تر هر یک از عناصر فوق می پردازیم.

عنصر background:

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

رای حالت های شفاف می توان از مقادیر transparent استفاده کرد.

عنصر background-image:

آدرس یک تصویر را به صورت url در خود دارد، این قابلیت، تصویر پس زمینه ما را با توجه به زیرمجموعه ای که در آن تعریف شده است، مشخص می کند، به فرض ممکن است در یک بلاک div از آن استفاده کنیم و لذا این عنصر تصویر پس زمینه آن بلاک را شکل می دهد:

برای نادیده گرفتن این قابلیت مقدار آن را none قرار می دهند.

عنصر background-attachment:

background-attachment به مرورگر می گوید که آیا تصویر پس زمینه با اسکرول صفحه، اسکرول شود یا خیر، اگر مقادیر آن را fixed قرار دهید، در صفحاتی که ارتفاع آنها از صفحه نمایش کاربر بیشتر است، نوار اسکرول کناری نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه برود، تصویر پس زمینه در جای خود بدون تغییر و ثابت خواهد بود (این تکنیکی است که در برخی از قالب های وبلاگ ها نیز مشاهده می شود):

مقادیر دیگر این عنصر scroll است که حالت پیش فرض می باشد.

عنصر background-position:

background-position موقعیت تصویر پس زمینه ما را در محلی که استفاده شده، مشخص می کند، به فرض اگر بخواهیم تصویر خود را از سمت راست شروع به نمایش کنیم، باید از مقدار background-position:right استفاده کنیم؛ مثالی دیگر:

مقادیر این عنصر به صورت bottom، top، left، right و center است که قابلیت استفاده از دو خاصیت را به طور همزمان در خود دارد (به طور مثال background-position:top right).

عنصر background-repeat:

این عنصر برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این عنصر و خاصیت های آن استفاده می کنیم:

مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.

این بخش را با یک مثال کمی پیشرفته تر به پایان می بریم:

آشنایی با کلاس (class) و آی دی (id) در css

یکی از ویژگی ها و قابلیتهای اصلی css استفاده از کلاس و آی دی در تعریف استایل (style) مشخص برای عناصر موجود در صفحات وب (html) است، کلاس و آی دی الگوهایی کلی را تعریف می کنند که از آن الگوها در شکل دهی ظاهری و ایجاد قابلیتهای تگ های html استفاده می شود؛ در ادامه خواهیم گفت که هر کدام از موارد گفته شده (class و id) برای هدف خاصی استفاده می شوند و خواهیم دید که چگونه می توانیم آنها را تعریف و استفاده نمائیم.

تعریف کلاس و آی دی در css

آی دی و کلاس با علائم خاصی در کدهای css شناخته می شوند، برای آی دی از علامت # و برای کلاس از علامت نقطه استفاده می کنیم:


توضیح:
- از آی دی برای عناصر یکتا استفاده می شود (یعنی هر آی دی مخصوص تنها یک تگ است) و استفاده از چند آی دی هم نام در یک صفحه مجاز نیست.
- از کلاس ها می توان به هر اندازه تکرار در صفحه استفاده کرد (هدف از ایجاد کلاس ها نیز همین است تا از یک الگو برای عناصر متعدد بتوان استفاده نمود).
تعریف ویژگی، بدون کلاس و آی دی در css

علاوه بر کلاس و آی دی، برخی از موارد در css به صورت کلی قابل تعریف شدن هستند، مثلا body استایل خود را به تگ body و زیر مجموعه آن اختصاص می دهد یا p به تمام عناصر پاراگرافی استایل خود را اختصاص می دهد:


در مثال بالا علاوه بر استفاده از آی دی main و کلاس text به صورت کلی استایلی را برای تگ های div و p اختصاص داده ایم، با این کار تمام عناصر پاراگراف و بلاک های div آن ویژگی را خواهند داشت.

مقدمه ای بر CSS، جادوگر طراحی وب

css مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی زبانی کمکی جهت شکل دهی ظاهر و فرم صفحات وب (HTML) است، تیتر مطلب گویا است که CSS را باید به راستی جادوگر طراحی وب نامید!، اگر تجربه کار با آن را داشته باشید حتما شما هم با نظر ما موافقید، فلسفه پیدایش CSS به آسان کردن کار طراحان صفحات وب جهت شکل دهی و فرم بندی ایده هایشان بر می گردد، پیش از این برای اینکه به فرض رنگ فونت یک متن را در صفحات مختلف تغییر دهیم، ناچار بودیم در هر صفحه فونتمان را پیدا کنیم و با هزاران رنج و مشقت و صرف وقت زیاد، تک تک آنها را ویرایش کنیم، اما با آمدن CSS، کار خیلی راحت شد! برای پی بردن به اهمیت این زبان (کمکی) و دیدن چند مثال، با ما همراه باشید.

فرمت بندی بدون استفاده از css

کد زیر بدون استفاده از CSS فرمت بندی شده است (برای تست کافی است کد را در یک ویرایشگر متنی یا HTML کپی و ذخیره کنید):


فرمت بندی با استفاده از css

و همان کد با استفاده از CSS:

قدرت این زبان به قابلیت ایجاد حالت های گوناگون و تعریف کلاس (CLASS) و آی دی (ID) است، به اینصورت که مثلا با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، استفاده می کنیم.

دو صفحه زیر هر دو از یک فایل CSS استفاده می کنند که در صفحه مورد نظر به اصطلاح ایمپورت شده اند (در این باره در مطالب بعدی بیشتر خواهیم گفت)،  و واضح است که این کار تا چه حد در ذخیره وقت و بالا بردن قدرت مانورمان موثر است (تا جایی که دیگر کسی به طراحی وب بدون CSS فکر نمی کند!).

توضیح:
- css یک زبان کمکی است، یعنی به خودی خود کاربرد خاصی ندارد، ولی به تگ های html شکل و قالب می دهد.
- برای دیدن و مقایسه کد صفحات، کلیک راست و view source را انتخاب کنید.
- کد های css یا به صورت درون صفحه ای است یا ایمپورت به صورت فایل خارجی (شیوه استاندارد).
- تگ style برای ایجاد کدهای css داخلی کاربرد دارد.
- برای ایمپورت یک فایل css خارجی، از کد link و خاصیت های آن، درون تگ head استفاده می کنیم.

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

ساخت جداول فرضی با دستور CREATE

برای درک بهتر نحوه عملکرد دستور JOIN پیش از هر چیز لازم است که چند جدول و ستون فرضی با مقادیری از پیش تعریف شده بسازیم که در زیر پرس و جوی آن را ملاحظه می کنید.
نکته: پیش از اجرای کدهای زیر باید از طریق برنامه phpMyAdmin دیتابیسی با نام فرضی test بسازید، دقت کنید که Collation دیتابیس بر روی utf8_persian_ci تنظیم شده باشد.

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

همان طور که ملاحظه می کنید بین دو جدول در ستون های skill و language ارتباطی متقابل وجود دارد (هر دو ستون عناوین مربوط به زبان های برنامه نویسی را در خود دارند)، بنابراین به فرض اگر بخواهیم مسابقه ای بین افراد هم مهارت برگزار کنیم و نیاز به محاسبه تعداد رقبای اسامی موجود در جدول اول باشد، به ناچار باید در پرس و جوی خود هم از اصلاعات جدول اول (اسامی و مهارت آنها) و هم از اطلاعات جدول دوم (مهارت و تعداد شرکت کننده) استفاده کنیم، هرچند این کار با نوشتن دو پرس و جو نیز امکانپذیر است، اما حرفه ای تر آن است که به کمک JOIN و مشتقات آن (INNER JOIN، LEFT JOIN، RIGHT JOIN، OUTER JOIN) یک پرس و جوی ترکیبی نوشته و به هدف خود برسیم، بدین ترتیب می توان نوشت:

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

حالت INNER JOIN

حالت اول از مشتقات دستور JOIN به صورت INNER JOIN می باشد، در این حالت می توان به مواردی مشترک از هر دو جدول دسترسی داشت، نتیجه پرس و جو شامل برخی موارد از جدول اول به همراه برخی موارد دیگر از جدول دوم (بر اساس شرط تعیین شده) خواهد بود، مثال:

خروجی این حالت به صورت زیر خواهد بود.

ملاحظه می کنید که با اجرای پرس و جوی بالا ردیف های زیر از جدول اول:

و ردیف های زیر از جدول دوم به عنوان خروجی برگردانده می شوند:

حالت LEFT JOIN

نوع دیگر از مشتقات دستور JOIN به صورت LEFT JOIN است که در این حالت تمام ردیف های جدول اول صرف نظر از شرط تعیین شده به همراه ردیف های جدول دوم (بر اساس شرط تعیین شده) به عنوان خروجی برگردانده می شوند، مثال:

خروجی پرس و جوی بالا به صورت زیر خواهد بود.

نکته: ردیف هایی که در جدول دوم بر اساس شرط تعریف شده انتخاب نشوند، با مقدار NULL برگردانده می شوند.

حالت RIGHT JOIN

مشابه حالت LEFT JOIN، حالت RIGHT JOIN است که در این صورت ردیف ها از جدول دوم صرف نظر از شرط تعیین شده انتخاب و ردیف های جدول اول بر اساس شرط انتخاب می شوند، مثال:

حالت OUTER JOIN

حالت آخر از مشتقات JOIN به صورت OUTER JOIN یا FULL JOIN است که در این صورت می توان دو پرس و جوی مبتنی بر JOIN را با عبارت کلیدی UNION (اجتماع) به هم مرتبط نمود، مثال:

نتیجه پرس و جوی بالا به صورت زیر خواهد بود.