برچسب برنامه نویسی

چطور در CSS با ویژگی Background تصویر پس زمینه به عنصری بدهیم؟

چطور در CSS با ویژگی Background تصویر پس زمینه به عنصری بدهیم؟
Pseudo-elements ها در CSS کلمات کلیدی هستند که به انتخابگرها برای انتخاب قسمتی از محتوای عنصر اضافه می شوند. با برخی از این انتخابگرها می توان محتوای مجازی برای عناصر بوجود آورد و آنها را در CSS هدف قرار داد. در ادامه لیست تمام pseudo-elementها آمده است و می توانید برای بررسی دقیق هر کدام به صفحه مخصوص به آن مراجعه کنید.

Pseudo-elements ها در CSS چی هستند و چه کاربردی دارند؟

Pseudo-elements ها در CSS چی هستند و چه کاربردی دارند؟
Pseudo-elements ها در CSS کلمات کلیدی هستند که به انتخابگرها برای انتخاب قسمتی از محتوای عنصر اضافه می شوند. با برخی از این انتخابگرها می توان محتوای مجازی برای عناصر بوجود آورد و آنها را در CSS هدف قرار داد. در ادامه لیست تمام pseudo-elementها آمده است و می توانید برای بررسی دقیق هر کدام به صفحه مخصوص به آن مراجعه کنید.

آموزش جامع CSS – چطور دکمه بسازیم؟

آموزش جامع CSS - چطور دکمه بسازیم؟
در این آموزش CSS به این می پردازم که چطور یک دکمه یا Button را بوسیله دستورات سی اس اس و HTML بسازید. در ادامه به شما تعدادی استایل را یاد میدهم که بتوانید حالتی مدرن و امروزی به دکمه ی خود بدهید که از جمله آن گرد کردن حاشیه دکمه ها و تغییر رنگ بک گراند آن است. در بخش اول فیلم شما یاد میگیرید که چطور به سادگی می توانید یک لینک را تبدیل به یک دکمه کنید و در ادامه با استایل های مختلف دکمه های مختلفی بسازید.

آموزش جامع CSS – چطور یک منو بار عمودی در طراحی کنیم؟

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

آموزش جامع CSS: چطور یک منو بار افقی طراحی کنیم؟ – قسمت دوم

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

آموزش جامع CSS: چطور یک منو بار افقی طراحی کنیم؟ – قسمت اول

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

آموزش جامع CSS : چطور از لیست‌ها در سی اس اس استفاده کنیم؟

آموزش جامع CSS : چطور از لیست‌ها در سی اس اس استفاده کنیم؟
در این قسمت من به سراغ لیست‌ها در CSS می روم که به دو دسته مرتب و نامرتب تقسیم می شوند و در این فیلم آموزشی به لیست های نامرتب می پردازم. لیست‌ نامرتب یا همان Unordered List با استفاده از تگ ul ساخته می‌شود. همچنین گزینه‌های لیست یا همان List Item با استفاده از تگ li نوشته می‌شوند.

چطور از حاشیه ها در CSS استفاده کنیم؟

maxresdefault-1413665
توسط ویژگی border می توان عرض، نوع و رنگ حاشیه هر چهار سمت یک عنصر را تعریف کرد. ویژگی border سه مقدار می پذیرد و اگر هر کدام از مقادیر را تعیین نکنیم به مقدار اولیه اش ریست می شود که همه ی این موارد در فیلم بررسی می شود. همینطور که در مثال های بالا دیده می شود با استفاده از این ویژگی نمی توان فقط حاشیه یک سمت خاص عنصر را تعریف کرد.

آموزش جامع CSS: چطور یک شی را در صفحه مخفی یا ظاهر کنیم؟

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

آموزش جامع CSS: چطور حالت‌های نمایش یک شی در صفحه را کنترل کنیم؟

maxresdefault-1679018
از ویژگی display برای تعیین نوع ساختار یک عنصر استفاده می شود. هر عنصری در صفحات وب یک مستطیل محسوب می شود و نوع ساختار هر عنصر رفتار آن عنصر را در یک صفحه مشخص می کند. در CSS دو نوع چارچوب اصلی وجود دارند: inline و block. اگر عنصری دارای چارچوبی از نوع inline باشد زمانی که در ادامه یک خط قرار می گیرد, آن خط شکسته نمی شود و عنصر به خط بعدی نخواهد رفت و عناصر بعد از آن هم اگر از همین نوع باشند در ادامه آن عنصر در همان خط قرار خواهند گرفت. در مقابل عناصر خطی, عناصری که چارچوب block دارند در حالت پیشفرض در یک خط با عناصر دیگر قرار نمی گیرند و کل فضای افقی را می گیرند عناصر block در مقابل با عناصر inline می توانند هر نوع عنصری (block و inline) را درون خود داشته باشند.

آموزش جامع CSS: چطور از رنگ‌ها بدرستی استفاده کنیم؟

maxresdefault-3902671
از پراپرتی color برای تعریف رنگ ها در سی اس اس استفاده می شود. رنگ ها می توانند یک کلمه کلیدی باشند, یا دسته ای از اعداد و یا آنها را می توان از طریق فرمت های متفاوت که در ادامه آمده اند معرفی کرد. می توان از یک رنگ با استفاده از کلمه کلیدی تعریف شده برای آن در سی اس اس استفاده کرد.به عنوان نمونه کلمات کلیدی balck, white و غیره… در رنگهای RGB که کوتاه شده کلمات قرمز, سبز و آبی می باشد.

آموزش جامع CSS: چطور هر چیزی را در وسط صفحه قرار دهیم؟

maxresdefault-8668861
وسط قرار دادن عناصر در طراحی صفحات وب یکی از موارد رایج می باشد و کسانی که تازه شروع به یادگیری سی اس اس کرده اند خیلی با این مورد درگیر هستند. در این فیلم آموزشی قصد دارم شرایطی که شما می توانید یک عنصر را در وسط صفحه قرار دهید را به شما آموزش دهم. برای وسط قرار دادن عنصر در وسط صفحه روش های زیادی وجود دارد که من در این فیلم به ساده ترین و کلی ترین روش موجود یعنی با استفاده از تنظیم پراپرتی Margin این کار را انجام می دهم.

آموزش جامع CSS: چطور حالت نمایش لینک ها را تغییر دهیم؟

آموزش جامع CSS: چطور حالت نمایش لینک ها را تغییر دهیم؟
در قسمت ششم از دوره‌ی آموزشی جامع CSS - CSS3 من قصد دارم به شما در مورد اینکه چطورحالت نمایش لینک ها را تغییر دهید نکاتی رو آموزش دهم. لینک ها را ما در سراسر وب می بینیم و در نتیجه اگر بتوانیم مقداری در نمایش آن ها تغییراتی را ایجاد کنیم باعث جلب توجه می شود. من با استفاده از سی اس اس رنگ پیش فرض لینک ها را تغییر می‌دهم و اینکه حالت زیرخط یا آندرلاین آن را به حالت نقطه چین تبدیل میکنم و یا اینکه کلا آن را حذف میکنم و موارد دیگری که در این فیلم آموزشی به آن می پردازم.

آموزش جامع CSS: انتخابگرها (قسمت آخر)

آموزش جامع CSS: انتخابگرها (قسمت آخر) در این فیلم آموزشی از AsteriXarts میخوام به انتخابگرها یا selectorها در CSS بپردازم. این فیلم در ادامه ی قسمت سوم انتخابگرها/selectorها تهیه شده است. پس اگر قسمت سوم یا قسمت های قبل را…

آموزش جامع CSS: انتخابگرها (قسمت سوم)

آموزش جامع CSS: انتخابگرها (قسمت سوم) در این فیلم آموزشی از AsteriXarts میخوام به انتخابگرها یا selectorها در CSS بپردازم. این فیلم در ادامه ی قسمت دوم انتخابگرها/selectorها تهیه شده است. پس اگر قسمت اول یا قسمت های قبل را…