loading...
 

شاپ کیپر

شاپ کیپر

  1. شاپ کیپر
  2. دیگر زبان ها
سلام خدمت تمامی کاربران , امیدوارم حالتون خوب باشه و سربلند ....

مدتی بود زیاد نبودم درگیر مسافرت و ....

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


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


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



طبق اموزش


سورس زیر رو توی سرور های ubuntu حالا ورژن 14 تا 15 الی 16 نصب کنید ....

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


https://github.com/kiavateam/kiavasec.git



لینک رو با طبق دستورات میتونید گیت کلون کنید

کد: # Lets install the bot. cd $HOME git clone https://github.com/kiavateam/kiavasec.git cd kiavasec chmod +x kiava.sh ./kiava.sh install ./kiava.sh # Enter a phone number & confirmation code.
To install everything in one command, use:


کد: cd $HOME && git clone https://github.com/kiavateam/kiavasec.git && cd kiavasec && chmod +x kiava.sh && ./kiava.sh install && ./kiava.sh

تشکر لازم دیدید بزنید امیدوارم شاد باشید بازم شرمنده اگر با کاربری توی قوانین انجمن جدی هستم
درباره دیگر زبان ها ,
زینب بازدید : 1 سه شنبه 21 آبان 1398 زمان : ۱۲:۳۰ نظرات (0)
این سوال رو تقریبا در تمام انجمن های معروف فارسی پرسیدم و بی جواب مانده انجمن استک اور فالو هم گشتم یک جواب بود که انقدر پیچیده و تخصصی بود که راستش سر در نیاوردم درست مثل اینکه یک راز بزرگ باشد امیدوارم در این انجمن به جواب مستقیم برسم و نتیجه بگیرم من قصد دارم از دوستی یک اسکریپت بخرم و اون اطمینان داده که این اختصاصی هست و مو لای درزش نمیرود فقط برای من نوشته شده سوالم این هست:

1:چطور ببینم این اسکریپت فقط در سایت من استفاده شده یعنی ترجمه و اسکریپت تجاری و همگانی نیست؟


2:اگر فریم ورک یا مثلا از Composite C1 استفاده کرده برنامه ای هست که نام تجاری اون اسکریپت رو به من بدهد؟


3:چطور میشود بدست اورد لیست سایتهایی که از یک اسکریپت استفاده میکنند (یعنی دورک گوگل بزنیم و خروجی پرسش ما لیست سایتهای اون اسکریپت باشد یا مثلا با اجرای کد روی سرورم لیست سایتهایی رو که از یک قالب یا اسکریپت استفاده کردند در تمام نت بببینیم


بینهایت ممنون خواهم بود از کسی که این سوالات رو جواب بدهد و من رو اگاه کند
درباره دیگر زبان ها ,
زینب بازدید : 6 دوشنبه 22 مهر 1398 زمان : ۰۰:۳۵ نظرات (0)
هشدارها در بوت استرپ

در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد.
هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر کدام از هشدارها یک باکس رنگی متفاوت را ایجاد می کنند که با مضمون پیام همخوانی دارد. در ادامه با انواع هشدارها در بوت استرپ آشنا خواهید شد.

انواع هشدارها در بوت استرپ

برای ایجاد هشدارها در بوت استرپ از کلاس alert در تگ div استفاده می شود. این هشدارها می توانند مشخص کننده ی یک عملیات موفقیت آمیز، یک عمل خنثی، اطلاعات هشداردهنده و یا عملیات خطرناک باشند که با نوشتن کلاس های زیر در ادامه ی کلاس alert می توانید نوع هشدار را برای کاربر مشخص کنید.
alert-success: این هشدار نشان دهنده ی یک عمل مثبت یا موفقیت آمیز است.
alert-info: این هشدار یک سری اطلاعات مفید را در اختیار کاربران قرار می دهد.
alert-warning: این جعبه ی هشدار، یک هشدار به کاربر می دهد.
alert-danger: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است.
در کد زیر می توانید نحوه ی استفاده از این کلاس ها را مشاهده کنید.
<div class="container"> <div class="alert alert-success"> This alert box could indicate a successful or positive action. </div> <div class="alert alert-info"> This alert box could indicate a neutral informative change or action </div> <div class="alert alert-warning"> This alert box could indicate a warning that might need attention. </div> <div class="alert alert-danger"> This alert box could indicate a dangerous or potentially negative action. </div> </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
<div class="alert alert-success">
This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
This alert box could indicate a neutral informative change or action
</div>
<div class="alert alert-warning">
This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
This alert box could indicate a dangerous or potentially negative action.
</div>
</div>


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

بستن هشدارها در بوت استرپ

برای بستن هشدارها در بوت استرپ کافی است یک لینک یا دکمه به هشدار اضافه کنید. سپس کلاس close و عبارت “data-dismiss=”alert را به دکمه یا لینکی که ایجاد کرده اید، اضافه نمایید.
کد زیر برای بستن هشدارها در بوت استرپ نوشته شده است.
<div class="container"> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> success alert </div> <div class="alert alert-danger alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> danger alert </div> </div>
1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
success alert
</div>
<div class="alert alert-danger alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
danger alert
</div>
</div>


در کد بالا خصوصیت “aria-label = “close بهتر است، به دکمه ی بستن اضافه شود. زیرا موجب دسترسی کسانی می شود که از صفحه خوان ها استفاده می کنند. دستور times& که در کد بالا استفاده شده، برای ایجاد علامت بستن (X) است.
لازم به ذکر است که می توان هنگام بستن هشدار به آن انیمیشن افزود. استفاده از کلاس fade in افکت محو شدن را هنگام بستن هشدار به آن اضافه می کند.
خروجی کد بالا به صورت زیر است. همانطور که مشاهده می کنید علامت بستن به هشدار اضافه شده است.

کلاس alert-link

اگر قصد دارید در پیغام هشدار، لینک قرار دهید از کلاس alert-link استفاده کنید. استفاده از این کلاس در لینک باعث می شود تا لینکی که در باکس هشدار قرار می دهید با باکس هشدار تطابق رنگی داشته باشد.
با دقت به کد زیر می توانید با نحوه ی استفاده از این کلاس آشنا شوید.
<div class="container"> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> this is a success alert.<a href="#" class="alert-link">read this massage</a> </div> <div class="alert alert-info"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> this is a info alert.<a href="#" class="alert-link">read this massage</a> </div> </div>
1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
this is a success alert.<a href="#" class="alert-link">read this massage</a>
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
this is a info alert.<a href="#" class="alert-link">read this massage</a>
</div>
</div>


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


خب دوستان، آموزش هشدارها در بوت استرپ به پایان رسید. اکنون شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا شدید. اگر به یادگیری بوت استرپ علاقمند هستید می توانید آموزش های استایل دهی به متن در بوت استرپ ، جدول در بوت استرپو تصاویر در بوت استرپ را هم مطالعه بفرمایید.
درباره دیگر زبان ها ,
زینب بازدید : 4 شنبه 20 مهر 1398 زمان : ۱۶:۳۵ نظرات (0)
هشدارها در بوت استرپ

در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد.
هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر کدام از هشدارها یک باکس رنگی متفاوت را ایجاد می کنند که با مضمون پیام همخوانی دارد. در ادامه با انواع هشدارها در بوت استرپ آشنا خواهید شد.

انواع هشدارها در بوت استرپ

برای ایجاد هشدارها در بوت استرپ از کلاس alert در تگ div استفاده می شود. این هشدارها می توانند مشخص کننده ی یک عملیات موفقیت آمیز، یک عمل خنثی، اطلاعات هشداردهنده و یا عملیات خطرناک باشند که با نوشتن کلاس های زیر در ادامه ی کلاس alert می توانید نوع هشدار را برای کاربر مشخص کنید.
alert-success: این هشدار نشان دهنده ی یک عمل مثبت یا موفقیت آمیز است.
alert-info: این هشدار یک سری اطلاعات مفید را در اختیار کاربران قرار می دهد.
alert-warning: این جعبه ی هشدار، یک هشدار به کاربر می دهد.
alert-danger: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است.
در کد زیر می توانید نحوه ی استفاده از این کلاس ها را مشاهده کنید.
<div class="container"> <div class="alert alert-success"> This alert box could indicate a successful or positive action. </div> <div class="alert alert-info"> This alert box could indicate a neutral informative change or action </div> <div class="alert alert-warning"> This alert box could indicate a warning that might need attention. </div> <div class="alert alert-danger"> This alert box could indicate a dangerous or potentially negative action. </div> </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
<div class="alert alert-success">
This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
This alert box could indicate a neutral informative change or action
</div>
<div class="alert alert-warning">
This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
This alert box could indicate a dangerous or potentially negative action.
</div>
</div>


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

بستن هشدارها در بوت استرپ

برای بستن هشدارها در بوت استرپ کافی است یک لینک یا دکمه به هشدار اضافه کنید. سپس کلاس close و عبارت “data-dismiss=”alert را به دکمه یا لینکی که ایجاد کرده اید، اضافه نمایید.
کد زیر برای بستن هشدارها در بوت استرپ نوشته شده است.
<div class="container"> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> success alert </div> <div class="alert alert-danger alert-dismissable fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> danger alert </div> </div>
1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
success alert
</div>
<div class="alert alert-danger alert-dismissable fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
danger alert
</div>
</div>


در کد بالا خصوصیت “aria-label = “close بهتر است، به دکمه ی بستن اضافه شود. زیرا موجب دسترسی کسانی می شود که از صفحه خوان ها استفاده می کنند. دستور times& که در کد بالا استفاده شده، برای ایجاد علامت بستن (X) است.
لازم به ذکر است که می توان هنگام بستن هشدار به آن انیمیشن افزود. استفاده از کلاس fade in افکت محو شدن را هنگام بستن هشدار به آن اضافه می کند.
خروجی کد بالا به صورت زیر است. همانطور که مشاهده می کنید علامت بستن به هشدار اضافه شده است.

کلاس alert-link

اگر قصد دارید در پیغام هشدار، لینک قرار دهید از کلاس alert-link استفاده کنید. استفاده از این کلاس در لینک باعث می شود تا لینکی که در باکس هشدار قرار می دهید با باکس هشدار تطابق رنگی داشته باشد.
با دقت به کد زیر می توانید با نحوه ی استفاده از این کلاس آشنا شوید.
<div class="container"> <div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> this is a success alert.<a href="#" class="alert-link">read this massage</a> </div> <div class="alert alert-info"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> this is a info alert.<a href="#" class="alert-link">read this massage</a> </div> </div>
1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
this is a success alert.<a href="#" class="alert-link">read this massage</a>
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
this is a info alert.<a href="#" class="alert-link">read this massage</a>
</div>
</div>


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


خب دوستان، آموزش هشدارها در بوت استرپ به پایان رسید. اکنون شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا شدید. اگر به یادگیری بوت استرپ علاقمند هستید می توانید آموزش های استایل دهی به متن در بوت استرپ ، جدول در بوت استرپو تصاویر در بوت استرپ را هم مطالعه بفرمایید.
درباره دیگر زبان ها ,
زینب بازدید : 2 شنبه 20 مهر 1398 زمان : ۱۱:۰۵ نظرات (0)

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

یادگیری کد نویسی هم‌اکنون از هر زمان دیگری آسان‌تر است. برنامه‌نویسی می‌تواند:

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

در این وب‌سایت می توایند هر چیزی را از HTML تا Python بیاموزید. به دوره‌های آموزشی رایگان بسیاری از طریق screencasts دسترسی دارید. Codecademy هم‌چنین به کاربران خود اجازه می‌دهد وب‌سایت‌های تعاملی ایجاد کنند و یا با استفاده از رابط‌های برنامه‌های کاربردی نظیر یوتیوب و باکس اپلیکیشن های خود را طراحی و تولید کنند. انجمن‌هایی نیز برای دریافت کمک و حمایت از کاربران دیگر در این وب‌سایت وجود دارد. اگر فردی منضبط و با برنامه هستید، Codecademy بهترین منبع برای تسلط بر کد نویسی ست.
Udemy

مربی و دوره آموزشی درست را انتخاب کنید و به معدن طلای خود چنگ بزنید. دوره‌های آموزشی توسعه وب، سوئیفت، ساخت وب‌سایت و سفارشی‌سازی وردپرس از جمله دوره‌های محبوب و پرطرفدار در این وب‌سایت آموزشی هستند و جالب اینکه همه‌ی این دوره‌ها امکان تست و ارزیابی اولیه را در اختیار مخاطب قرار داده‌اند.
MOOCs

همه کاربران اینترنتی MOOCs را به عنوان « دوره آنلاین باز و عظیم » می‌شناسند. هر فردی در فضای مجازی می‌تواند به این دوره‌های آموزشی بی‌نظیر دسترسی داشته باشد. دانشگاه‌های بی‌نظیری مانند Stanford، Wellesley، UPenn، Udemy، Coursera و Udacity در این وب‌سایت، دوره‌هایی درباره برنامه‌نویسی کامپیوتر، علوم اطلاعات، توسعه اپلیکیشن و زبان‌های برنامه‌نویسی پرکاربرد و معروف به دوست داران این مطالب ارائه می‌دهند.
Rails Guides

وب‌سایت Rails Guides دوره‌های آموزشی رایگان و جامعی درباره نحوه استفاده از Ruby on Rails، برنامه‌ای که Shopify، Groupon و AirBnb از آن برای ساخت وب‌سایت خود استفاده کرده‌اند، به کاربران علاقه‌مند ارائه می‌دهد. قدم‌های مطرح شده در راهنمای شروع را دنبال کنید، چند ساعت وقت بگذارید و سخت تلاش کنید. این وب‌سایت به شما چگونگی نصب Rails و راه‌اندازی یک اپلیکیشن Rails را به طور کامل آموزش می‌دهد.
MIT Open Courseware

در این وب‌سایت می توایند موضوعات مورد علاقه‌ی خود را با استفاده از محتوایی بیاموزید که توسط یکی از برترین مؤسسات آموزشی دنیا به کاربران فضای مجازی ارائه می‌شود. بیشتر دوره‌های آموزشی ارائه شده در این وب‌سایت در واقع کلاس‌های برنامه‌نویسی کامپیوترهای قدیمی است اما به هر حال برای یادگیری اصول و کسب تجربه وب‌سایت مفیدی ست.
Mozilla Developer Network

وب‌سایت Mozilla Developer Network دوره‌های آموزشی با کیفیت را برای یادگیری و پیشرفت سریع به کاربران علاقه‌مند ارائه می‌دهد. در این منبع مفید می‌توانید اصول اولیه‌ی توسعه وب مانند HTML، CSS، JavaScript را بیاموزید و خیلی چیزهای دیگر. وقتی که بر اصول اولیه مسلط شوید برای شروع فراگیری زبان‌های برنامه‌نویسی پیشرفته‌تری نظیر PHP، Ruby، یا Python آماده خواهید بود.
Codewars

اگر می‌خواهید برنامه‌نویسی را از طریق عمل و تجربه بیاموزید و حس کنید که با دیگران در حال تعامل و همکاری هستید نگاهی به Codewars بی اندازید. این وب‌سایت با ایجاد یک فضای تعاملی و مشترک به کاربران خود اجازه می‌دهد که مهارت‌های کد نویسی خود را تقویت و بر زبان‌های برنامه‌نویسی نظیر JavaScript، CoffeeScript، Ruby، Python، Clojure، یا Haskellas مسلط شوند. بعد از اینکه بر اصول اولیه برنامه‌نویسی مسلط شدید، Codewars می‌تواند قدم بعدی خوبی باشد و یا منبعی برای تقویت زبان برنامه‌نویسی که هم‌اکنون در حال فراگیری آن هستید.
هنگامی که توانستید به تنهایی کد نویسی کنید، وجود یک مربی کاربلد بسیار ارزشمند است. در همایش‌های مربوط به کد نویسی شرکت کنید و سعی کنید با برنامه‌نویسان معروف در شهر و یا کشور خود ملاقات رو در رو داشته باشید و رموز موفقیت آن‌ها را کشف کنید. هرگز اجازه ندهید مشکلات مالی مانع رسیدن شما به خواسته‌هایتان شود. اگر ۲ یا ۳ میلیون تومان برای شرکت در کلاس‌های برنامه‌نویسی و طراحی وب و اپلیکیشن ندارید می‌توانید از این منابع آنلاین و رایگان نهایت بهره و استفاده را ببرید و با کمی سخت‌کوشی مهارت کد نویسی را به شغل دوم و یا حتی شغل اصلی خود تبدیل کنید.


امیدواریم از این آموزشی که فارس هاستینگ خدمتتان آماده کرده است ، لذت ببرید.





منبع : ۷ منبع آنلاین بسیار خوب برای یادگیری کد نویسی
درباره دیگر زبان ها ,
زینب بازدید : 9 دوشنبه 04 شهريور 1398 زمان : ۰۳:۳۵ نظرات (0)
صاحبان کسب وکار به دنبال هرچه زیباتر نمایش دادن صفحات وب سایت و طراحی سایت خود می کوشند. بدین جهت تلاش می نمایند تا از طرح ها و عکس های گرافیکی در طراحی وب سایت خود استفاده نمایند. اما همان طور که می دانید عکس ها عامل تاخیر در لود شدن صفحه سایت می باشند و تاخیر در لود شدن تاثیر منفی بر سئو سایت برجا خواهد گذاشت. Sheet sprite در واقع تکنیکی برای تنظیم و چیدمان عکس های یک صفحه از وب سایت در فرمت یک عکس تنها می باشد. با استفاده از این قابلیت می توانید موجب سبک شدن در لود صفحه سایت خود شوید. می توانید از نرم افزارهایی مانند PhotoShop Sprite Sheet Exporter extensionبدین منظور استفاده نمایید و از طریق مسیر زیر می توانید این پروسه را انجام دهید.


در منوی فایل مسیر script و پس از آن مسیر ‘load files into stack’را دنبال نمایید.
هر یک از عکس های خود را درون فولدر Browse نمایید.
تمامی عکس ها که می خواهید import نمایید را انتخاب نمایید.



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


‘Sprite Sheet Exporter’ script from Files->Scripts


در نتیجه عمل شما یک SPRITE از عکس های صفحه وب سایت در طراحی سایت خود خواهید داشت. حال می بایست در قسمت های مودر نظر ار عکس این تنظیم را قرار دهید که از SPRITE بخواند. بدین منظور می بایست URL فایل عکس SPRITE شده را در کدهای CSS آن درج نمایید و در کلاس مورد نظر این عمل را انجام دهید. برای مثال در زیر می خواهیم URL فایل عکس SPRITE شده را در بخشی از صفحه که از کلاس "megaphone" می خواند اعمال نماییم.


<div class="megaphone"></div>


و در کلاس CSS آن کد زیر را داشته باشیم


.megaphone


{


width:50px;


height:50px;


background:url(/demo/images/sprite.png) 0 0px;


}








بدین نحو می توانید تمامی بخش هایی از صفحه که می بایست از SPRITE بخواند را مشخص نماییم. CSS sprites تکنیک جدیدی نمی باشد و در طراحی سایت می تواند مزایای فراوانی را در بر داشته باشد.




منبع: SPRITE نمودن عکس ها در صفحه وب سایت
درباره دیگر زبان ها ,
زینب بازدید : 26 يكشنبه 05 اسفند 1397 زمان : ۱۴:۵۵ نظرات (0)
درود
همواره یکی از بزرگترین مشکلاتی که طراحان وب با آن سرو کار دارند اینست که سایت های طراحی شده بر اساس مرورگر فایرفاکس معمولا" در نسخه های اینترنت اکسپلورر بسیار بهم ریخته نمایش داده می شود که این مشکل با ارائه اینترنت اکسپلورر جدید نه تنها حل نشد بلکه چندین برابر هم شد!

اکنون قصد داریم راهکارهایی را برای حل این مشکل مورد بحث قرار دهیم. لذا دوستانی که طراحی وب انجام می دهند نیز ممنون میشم راهکارهای خود را در اینجا مطرح نمایند.

با توجه به اینکه نسخه پیشفرض اینترنت اکسپلورر روی ویندوز اکس پی نسخه 6 می باشد و خیلی از کسانی که ویندوز نصب می کنند و وارد اینترنت می شوند هنوز از ماجرای مشکل دار بود نسخه های اینترنت اکسپلورر بی خبرند و در نهایت وقتی سایتی را با IE باز می کنند و مشکلاتی در آن می بینند فکر می کنند که اون سایت مشکل داره و طراحی خوبی براش انجام نشده!!!

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

مشکل اینترنت اکسپلورر با تگ دایو DIV
در نسخه های قبلی html بیشتر اجزای موجود در صفحه با “<table>” ها ساخته می شد ، ولی به علت انعطاف پذیری کم و تولید حجم کد زیاد است اندارد صفحات وب بر پایه استفاده از “<div>” بنا شد ، و به همین علت اینترنت اکسپلورر اولین مشکلی که داشت مشکل با تگ های div بود و به همین علت بسیاری از برنامه نویسان همواره از table ها استفاده می کردند که کاری بسیار غیر است اندارد و غلط هست .

راه های هک کردن اینترنت اکسپلورر :
منظور از هک کردن نوشتن دستوری هست که فقط اینترنت اکسپلورر قادر به خواندن آن باشد .
خیلی وقت ها مشاهده میشه که وقتی از دستور padding و یا margine برای جا به جا کردن اجزای صفحه استفاده میشه در فایر فاکس درست حرکت انجام میشه و در اینترنت اکسپلورر نصف و یا کمتر از اندازه داده شده حرکت انجام میشه ، در اینجا باید برای اینترنت اکسپلورر مقدار بیشتری مشخص کنید تا نصف اون برابر با مقدار اصلی شود.

و این مقدار جدید را که میخواهیم فقط اینترنت اکسپلورر ببیند با قرار دادن علامت های ” * “و یا ” # ” در ابتدای آنها مشخص میکنیم.

مثال :

کد:
padding-left:۲۰px
padding-left:۴۰px*

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

ولی یکی از مشکلاتی که در اینجور مواقع پیش میاد این هست که چون دستور ستاره دار رو همه نسخه های اینترنت اکسپلورر می خوانند احتمال این به وجود میاید که اینترنت اکسپلورر ۷ دستور اول رو درست نمایش داده باشه و با این کار وقتی دستور ستاره دار رو میخونه به هم ریخته باشه ، و در واقع ما مشکل رو درنسخه ۶ حل کردیم ولی نسخه ۷ به هم ریخته .

حال زمانی که با این مشکل رو به رو شدید باید از تگ important استفاده کنید ، علت استفاده از این تگ این هست که به دستور ما ارجحیت میدهد و این تگ را مرور گر های جدید به خوبی متوجه میشوند و مرور گر های قدیمی (IE ۶) اون رو نمیبینند ، بدین ترتیب عمل میکنیم که دستوری را که میخواهیم اینترنت اکسپلورر ۶ ببیند معمولی و دستور دیگر رو که میخواهیم اینترنت اکسپلورر ۷ و یا فایر فاکس ببینند همراه با important می نویسیم .

مثال :

کد:
padding-left:۴۰px
padding-left:۲۰px !important

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


استفاده از فایل CSS جداگانه برای اینترنت اکسپلورر :

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

مثال :

کد:
<link rel=”sytlesheet” type=”text/css” href=”bugFixForIE۶x.css”>
<link rel=”sytlesheet” type=”text/css” href=”bugFixForIE۷x.css


دوستان منتظر نظرات و پیشنهادات فنی شما هستیم...
درباره دیگر زبان ها ,
زینب بازدید : 35 چهارشنبه 19 دي 1397 زمان : ۱۱:۴۵ نظرات (0)
لایه بندی فرم ها در بوت استرپ

بوت استرپ لایه بندی های زیر را برای استایل دهی به فرم ها فراهم میکند
فرم های عمودی (پیش فرض - Default)

فرم های درون خطی (inline forms)
فرم های افقی

فرم های عمودی یا فرم پایه در بوت استرپ :

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

یک نقش (role) با عنوان form به تگ form اصلی بدهید
تمام کنترل های درون تگ form را داخل یک div با کلاس form-group قرار دهید. با استفاده از این کلاس ایجاد فاصله بهینه بین کنترل های فرم بهینه میشود.
به تمام کنترل های متنی با تگ های input,textarea, select یک کلاس به نام form-control اضافه کنی


مثال

کد PHP: [LEFT]<div class="container">
<div class="row">
<div class="col-md-6">
<form role="form">
   <div class="form-group">
      <label for="name">نام</label>
      <input type="text" class="form-control" id="name" 
         placeholder="نام خود را وارد کنید">
   </div>
   <div class="form-group">
      <label for="inputfile">آپلود فایل </label>
      <input type="file" id="inputfile">
      <p class="help-block">متن کمکی برای آپلود.</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> چک باکس
      </label>
   </div>
   <button type="submit" class="btn btn-success">ثبت </button>
</form>
</div>
</div>
</div> 
[/LEFT] 
درباره دیگر زبان ها ,
زینب بازدید : 46 يكشنبه 03 تير 1397 زمان : ۰۰:۴۵ نظرات (0)
1 - Selector *

کد: * { margin: 0; padding: 0; } ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود : کد: #container * { border: 1px solid black; } در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو2 - X Selector#

کد: #container { width: 960px; margin: auto; } اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو3. X Selector.

کد: .error { color: red; } این یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو4. X Y Selector

کد: li a { text-decoration: none; } یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها
IE6+FirefoxChromeSafariOpera
مشاهده دمو5. X Selector

کد: a { color: red; } ul { margin-left: 0; } اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو6. X:visited و X:link

کد: a:link { color: red; } a:visted { color: purple; } از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو7. X + Y Selector

کد: ul + p { color: red; } برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو8. X > Y Selector

کد: div#container > ul { border: 1px solid black; } تفاوت بین حالت X Y و X > Y این است که دومی تنها فرزندان مستقیم را انتخاب میکند، برای مثال، با توجه به قطعه کد زیر : کد: <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div> یک سلکتور #container>ul تمام ul هایی را انتخاب میکند که فرزند مستقیم تگ div با ID برابر با container هستند، برای مثالul هایی فرزند تگ li هستند را انتخاب نمیکند، این روش هنگامی که میخواهید از سلکتورهای CSS در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو9. X ~ Y Selector

کد: ul ~ p { color: red; } این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو10. X[title] Selector

کد: a[title] { color: green; }
در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو11. X[href="foo"] Selector

کد: a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ } قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو12. X[href*="nettuts"] Selector

کد: a[href*="tuts"] { color: #1f6053; /* nettuts green */ } حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:
IE7+FirefoxChromeSafariOpera
مشاهده دمو13. X[href^="http"] Selector

کد: a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; } تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :
IE7+FirefoxChromeSafariOpera
مشاهده دمو14. X[href$=".jpg"] Selector

کد: a[href$=".jpg"] { color: red; } با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو15. X[data-*="foo"] Selector

کد: a[data-filetype="image"] { color: red; } به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال : کد: a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; } اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند. کد: <a href="path/to/image.jpg" data-filetype="image"> Image Link </a> به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم : کد: a[data-filetype="image"] { color: red; } پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو16. X[foo~="bar"] Selector

کد: X[foo~="bar"]a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم : کد: <a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم : کد: /* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red; } /* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black; } پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو17. X:checked Selector

کد: input[type=radio]:checked { border: 1px solid black; } این سلکتور هرچیزی که قبلا چک شده باشد را انتخاب میکند، برای مثال یک دکمه رادیویی، یک چک باکس و ... ، به همین سادگی.
پشتیبانی مرورگرها :
IE9+FirefoxChromeSafariOpera
نمایش دمو18. X:after Selector

این یکی از راه های خلاقانه و مفید برای سلکت های متفاوت است، به مثال زیر توجه کنید : کد: .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; } با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :
IE8+FirefoxChromeSafariOpera
19. X:hover

کد: div:hover { background: #e3e3e3; } اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود : کد: a:hover { border-bottom: 1px solid black; } پشتیبانی مرورگرها :
IE6+ (In IE6, :hover must be applied to an anchor element)FirefoxChromeSafariOpera
20. X:not Selector

div:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید : کد: *:not(p) { color: green; } پشتیبانی مرورگرها :
IE9+FirefoxChromeSafariOpera
مشاهده دمو21. X::pseudoElement Selector

کد: p::first-line { font-weight: bold; font-size: 1.2em; } میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم : کد: p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو22. X:nth-child(n) Selector

کد: li:nth-child(3) { color: red; } میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafari
مشاهده دمو23. X:nth-last-child(n) Selector

کد: li:nth-last-child(2) { color: red; } اگر یک لیست بزرگ داشتید و میخواستید فقط سه عنصر آخر آن را انتخاب کنید چه کار میکرددی ؟ آنگاه نیاز به استفاده از این سلکتور دارید.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
مشاهده دمو24. X:nth-of-type(n) Selector

کد: ul:nth-of-type(3) { border: 1px solid black; } همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafari
مشاهده دمو25. X:nth-last-of-type(n) Selector

کد: ul:nth-last-of-type(3) { border: 1px solid black; } میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
26. X:first-child Selector

کد: ul li:first-child { border-top: none; } با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو27. X:last-child Selector

کد: ul > li:last-child { color: green; } این سلکتور دقیقا برخلاف first-child میباشد.
پشتیبانی مرورگر ها :IE9+FirefoxChromeSafariOpera
مشاهده دمو28. X:only-child Selector

کد: div p:only-child { color: red; } کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :
IE9+FirefoxChromeSafariOpera
مشاهده دمو29. X:only-of-type Selector

کد: li:only-of-type { font-weight: bold; } با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
مشاهده دمو30. X:first-of-type Selector

با استفاده از این سلکتور میتوانید اولین خواهر و برادر یک نوع را انتخاب کنید، برای مثال، با توجه به قطعه کد زیر : کد: <div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div> راه حل 1 کد: ul:first-of-type > li:nth-child(2) { font-weight: bold; } راه حل 2 کد: p + ul li:last-child { font-weight: bold; } راه حل 3 کد: ul:first-of-type li:nth-last-child(1) { font-weight: bold; } پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
مشاهده دمونتیجه گیری

اگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.
* {
margin: 0;
padding: 0;
}
ابتدا یک سلکتور ساده را معرفی میکنیم، سلکتور ستاره تمام المنت های درون صفحه را انتخاب میکند، خیلی از طراحان وب از این سلکتور استفاده میکنند تا به تمام المنت های صفحه margin و padding صفر بدهند، سلکتور ستاره همچنین میتواند در سلکتورهای دیگر به کار برود :#container * {
border: 1px solid black;
}
در این کد هر المنتی که فرزند container باشد را انتخاب میکند.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو2 - X Selector#

#container {
width: 960px;
margin: auto;
}
اضافه کردن علامت hash یا # در اول هر سلکتور باعث میشود از طریق ID آن سلکتور را انتخاب کنیم، از این طریق سلکت های زیادی در صفحه انجام میدهیم، اما هنگامی که از IE استفاده میکنید حواس خود را نسبت به مشکلاتی که ممکن است ایجاد شود جمع کنید، همچنین در مقاله ای که قبلا در مجیدآنلاین منتشر شد ویژگی های CSS را بررسی کردیم که میتوانید در آنجا تفاوت بین ID و سایر سلکتورها را یاد بگیرید. باید به خاطر داشته باشید که 2 بار نمیتوانید از IDD استفاده کنید، سعی کنید ابتدا از اسم تگ و یا یکی از المنت های HTML5 برای سلکت کردن استفاده کنید و یا از کلاس های pseudo استفاده کنید.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو3. X Selector.

.error {
color: red;
}
این یک سلکتور Class است، فرق سلکتورهای ID و Class این است که هنگامی که توسط Class سلکت انجام میدهید میتوانید چندین و چندبار سلکت انجام دهید اما هنگام استفاده از ID نمیتوانید، هنگامی از Class استفاده کنید که میخواهید استایل خود را به گروهی از المنت ها بدهید.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو4. X Y Selector

li a {
text-decoration: none;
}
یکی دیگر از سلکتورهای پرطرفدار دیگر این سلکتور است، زمانی میخواهید سلکت های خود را دقیق تر کنید باید از این روش استفاده کنید، برای مثال، اگر میخواهید تمام تگ های a که دارای یک لیست نامرتب هستند را سلکت کنید میتوانید از کد بالا استفاده کنید.
نکته ی مهم : اگر سلکتور شما به صورت X Y Z A B .error در آمد دچار مشکل میشوید، همیشه زمانی که میخواهید این همه سلکتور پشت هم بگذارید حتما از خود بپرسید که آیا همچین کاری واقعا ضروری است یا نه ؟ اگر ضروری نیست این کار را انجام ندهید.
پشتیبانی مرورگرها
IE6+FirefoxChromeSafariOpera
مشاهده دمو5. X Selector

a { color: red; }
ul { margin-left: 0; }
اگر بخواهید همه ی تگ های یک نوع المنت را سلکت کنید چه کار میکنید ؟ اگر بخواهید همه ی تگ ها بر اساس نوع آنها و نه بر اساس id و class سلکت کنید چه کار میکنید ؟ باید از روش بالا استفاده کنید، اگر میخواهید تمام تگ های a را سلکت کنید از خط اول مثال بالا و اگر میخواهید تمام تگ های ul را سلکت کنید از خط دوم استفاده کنید.
پشتیبانی مرورگرها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو6. X:visited و X:link

a:link { color: red; }
a:visted { color: purple; }
از x:link برای زمانی که میخواهید تمام تگ های a که قابلیت کلیک شدن دارند را سلکت کنید استفاده کنید، همچنین از x:visited برای زمانی که میخواهید تمام تگ های a که دیده شده اند یا کلیک شده اند را سلکت کنید استفاده کنید.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو7. X + Y Selector

ul + p {
color: red;
}
برای زمانی که میخواهید المنت های هم جوار را سلکت کنید بسیار مناسب است، از این طریق میتوانید المنتی که دقیقا پس از قبلی وجود دارد را سلکت کنید، برای مثال در اینجا اولین تگ p که دقیقا پس از هر تگ ul قرار دارد قرمز رنگ میشود میشود.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو8. X > Y Selector

div#container > ul {
border: 1px solid black;
}
تفاوت بین حالت X Y و X > Y این است که دومی تنها فرزندان مستقیم را انتخاب میکند، برای مثال، با توجه به قطعه کد زیر :<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
یک سلکتور #container>ul تمام ul هایی را انتخاب میکند که فرزند مستقیم تگ div با ID برابر با container هستند، برای مثالul هایی فرزند تگ li هستند را انتخاب نمیکند، این روش هنگامی که میخواهید از سلکتورهای CSS در کدهای جاوااسکریپتی استفاده کنید بسیار مفید و پرکاربرد است.
پشتیبانی مرورگر ها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو9. X ~ Y Selector

ul ~ p {
color: red;
}
این سلکتور همانند سلکتور X+Y است، در سلکتور X+Y تنها اولین المنتی که پس از سلکتور پیشین میومد انتخاب میشد اما در اینجا، هرتگ p که در هرجای کد فرزند تگ ul است را انتخاب میکند.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو10. X[title] Selector

a[title] {
color: green;
}

در این مثال، تگ های a را انتخاب میکند که صفت title دارند.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو11. X[href="foo"] Selector

a[href="http://net.tutsplus.com"] {
color: #1f6053; /* nettuts green */
}
قطعه کد بالا تمام تگ های a را انتخاب میکند که به http://net.tutsplus.com لینک میشوند و رنگ سبز میگیرند و بقیه تگ های a بی تاثیر می مانند، همچنین برای اضافه کردن ویژگی های بیشتر میتواند از عبارات باقاعده استفاده کنید.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو12. X[href*="nettuts"] Selector

a[href*="tuts"] {
color: #1f6053; /* nettuts green */
}
حرف * به این معنی است که value ما یعنی کلمه ی tuts ممکن است در هر جایی ظاهر شود، بنابراین تمام حالت ها مانند nettuts.com یا tutsplus.com و ... انتخاب میشوند، حالا برای یک سایتی که عضو evanto نیست اما در رشته ی url خود کلمه ی tuts دارد چه اتفاقی می افتد ؟ در این صورت باید از ^ و $ استفاده کنیم.
پشتیبانی مرورگر ها:
IE7+FirefoxChromeSafariOpera
مشاهده دمو13. X[href^="http"] Selector

a[href^="http"] {
background: url(path/to/external/icon.png) no-repeat;
padding-left: 10px;
}
تا حالا دقت کرده اید که خیلی از سایت ها چگونه یک آیکون را دقیقا بعد از یک لینک نمایش میدهند ؟ این یک کار ساده است، این کار به راحتی توسط عبارات باقاعده قابل انجام بر روی یک رشته متنی است، اگر بخواهیم تمام تگ های a که با http شروع میشوند را انتخاب کنیم، از یک سلکتور مانند بالا استفاده میکنیم.
حالا اگر بخواهیم بجای اینکه تمام لینک ها را انتخاب کنیم، تنها لینک هایی را انتخاب کنیم که دارای یک تگ a هستند ؟ این کار را میتوانیم با جست و جوی رشته ی متنی url انجام دهیم.
پشتیبانی مرورگر :
IE7+FirefoxChromeSafariOpera
مشاهده دمو14. X[href$=".jpg"] Selector

a[href$=".jpg"] {
color: red;
}
با استفاده از $ در عبارات با قاعده میتوانید انتهای یک رشته متنی را بدست آورید، در این مثال میخواهیم تمام تگ هایی را انتخاب کنیم که به یک img لینک میشوند یا حداقل یک url که انتهای آن .jpg دارد، دقت کنید که قطعه کد بالا برای عکس های gif یا png کار نمیکند.
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو15. X[data-*="foo"] Selector

a[data-filetype="image"] {
color: red;
}
به شماره هشت برگردید، اگر بخواهیم تمام نوع های عکس مانند png و jpeg و jpg و gif را انتخاب کنیم چه کار میکنیم ؟ میتوانیم سلکتورهای چندگانه بنویسیم برای مثال :a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
اما این کار سخت و غیربهینه است، کار دیگر این است که صفت data-filetype اضافه کنیم به تمام تگ های a که به یک عکس متصل میشوند.<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
به این صورت به سادگی، میتوانیم کار خود را به پایان برسانیم :a[data-filetype="image"] {
color: red;
}
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو16. X[foo~="bar"] Selector

X[foo~="bar"]a[data-info~="external"] {
color: red;
}

a[data-info~="image"] {
border: 1px solid black;
}
این سلکتور یک سلکتور خیلی مفید و کاربردی است، تعداد کمی از انسان ها همچین حقه هایی را میدانند، سیمبل ~ میتواند به ما کمک کند یک صفتی را انتخاب کنیم که در آن فاصله ی از هم جدا داریم، بر اساس مثالی که در شماره 15 داشتیم، میتوانیم یک صفت data-info بسازیم و آن هر چیزی که نیاز داریم توسط فاصله کنارهم قرار دهیم، در این مثال تمام لینک ها و لینک هایی که به عکس متصل هستند را در نظر میگیریم :<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
حالا با استفاده از صفت ~ میتوانیم هر تگ لینکی که دارای آن value ها است را انتخاب کنیم :/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}
پشتیبانی مرورگرها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو17. X:checked Selector

input[type=radio]:checked {
border: 1px solid black;
}
این سلکتور هرچیزی که قبلا چک شده باشد را انتخاب میکند، برای مثال یک دکمه رادیویی، یک چک باکس و ... ، به همین سادگی.
پشتیبانی مرورگرها :
IE9+FirefoxChromeSafariOpera
نمایش دمو18. X:after Selector

این یکی از راه های خلاقانه و مفید برای سلکت های متفاوت است، به مثال زیر توجه کنید :.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}

.clearfix {
*display: inline-block;
_height: 1%;
}
با استفاده از این ترفند میتوانیم یک فضای خالی ایجاد کنیم و سپس آن را پاک کنیم، به این طریق میتوانیم زمانی که متد overflow:hidden را نداریم کار خود را پیش ببریم.
پشتیبانی مرورگر ها :
IE8+FirefoxChromeSafariOpera
19. X:hover

div:hover {
background: #e3e3e3;
}
اگر میخواهید هنگامی که ماوس کاربر روی یک المنت رفت اتفاقی بیوفتد میتوانید از این pseudo class استفاده کنید، از این قابلیت میتوانید برای نمایش حالت های مختلف استفاده کنید، برای مثال زمانی که ماوس روی یک تگ a رفت یک border-bottom برای آن نمایش داده شود :a:hover {
border-bottom: 1px solid black;
}
پشتیبانی مرورگرها :
IE6+ (In IE6, :hover must be applied to an anchor element)FirefoxChromeSafariOpera
20. X:not Selector

div:not(#container) {
color: blue;
}
این سلکتور بسیار مفید و کاربری است، در مثال بالا تمام div ها انتخاب میشوند بجز آن div ای که ID مساوی با container دارد، یا برای مثال اگر میخواهید تمام تگ های پاراگراف را انتخاب کنید بجز تگ p میتوانید از کد زیر استفاده کنید :*:not(p) {
color: green;
}
پشتیبانی مرورگرها :
IE9+FirefoxChromeSafariOpera
مشاهده دمو21. X::pseudoElement Selector

p::first-line {
font-weight: bold;
font-size: 1.2em;
}
میتوانیم از pseudo element ها با استفاده از :: استفاده کنیم و به یک قسمت از یک المنت ویژگی های خاص بدهیم، برای مثل خط اول، یا کلمه ی اول، توجه داشته باشید که این خاصیت ها باید به المنت های block داده شود.
با قطعه کد زیر اولین کلمه ی یک پاراگراف را میتوانیم بگیریم :p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
این ویژگی برای صفحاتی که حالت روزنامه ای مانند دارند و میخواهند به خط اول یا کلمه ی اول یک ویژگی خاص بدهند بسیار مفید است.
پشتیبانی مرورگر ها :
IE6+FirefoxChromeSafariOpera
مشاهده دمو22. X:nth-child(n) Selector

li:nth-child(3) {
color: red;
}
میتوانید به nth-child یک عدد بدهید و آن را برابر با فرزند آن عنصر قرار دهید، این عدد از صفر شروع نمیشود و برای مثال اگر میخواهید عنصر دوم را انتخاب کنید باید بنویسید li:nth-child(2) . همچنین میتوانیم به صورت متغیر مانند از این قابلیت استفاده کنیم برای مثال با استفاده از li:nth-child(4n) میتوانیم 4تا 4تا ویژگی ای را که میخواهیم اعمال کنیم.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafari
مشاهده دمو23. X:nth-last-child(n) Selector

li:nth-last-child(2) {
color: red;
}
اگر یک لیست بزرگ داشتید و میخواستید فقط سه عنصر آخر آن را انتخاب کنید چه کار میکرددی ؟ آنگاه نیاز به استفاده از این سلکتور دارید.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
مشاهده دمو24. X:nth-of-type(n) Selector

ul:nth-of-type(3) {
border: 1px solid black;
}
همانطور که نیاز دارید گاهی اوقات فرزند ها را بدست آورید، نیاز دارید که با توجه به نوع المنت ها آنها را بدست آورید. یک لیست با 5000 عضو را تجسم کنید، اگر میخواهید سومین ul را بگیرید و هیچ نوع ID برای انتخاب آن ندارید، میتوانید از nth-of-type استفاده کنید و سومین ul را بگیرید.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafari
مشاهده دمو25. X:nth-last-of-type(n) Selector

ul:nth-last-of-type(3) {
border: 1px solid black;
}
میتوانیم برای اینکه شمارش را از اتنها شروع کنیم از nth-last-of-type استفاده کنیم.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
26. X:first-child Selector

ul li:first-child {
border-top: none;
}
با استفاده از این pseudo class میتوانید اولین عنصر را انتخاب کنید و آن را به دست آورید، برای مثال فرض کنید یک لیست ویو دارید و هرکدام از آنها یک border-top و border-bottom دارند، با استفاده از این کلاس ها میتوانید این حاشیه را از اولین و آخرین عنصر بردارید.
پشتیبانی مرورگر ها :
IE7+FirefoxChromeSafariOpera
مشاهده دمو27. X:last-child Selector

ul > li:last-child {
color: green;
}
این سلکتور دقیقا برخلاف first-child میباشد.
پشتیبانی مرورگر ها :IE9+FirefoxChromeSafariOpera
مشاهده دمو28. X:only-child Selector

div p:only-child {
color: red;
}
کم پیش می آید که از این سلکتور استفاده کنید، اما با این حال همیشه برای استفاده وجود دارد، با استفاده از این سلکتور میتوانید تنها فرزند از یک پدر را سلکت کنید.
پشتیبانی مرورگر ها :
IE9+FirefoxChromeSafariOpera
مشاهده دمو29. X:only-of-type Selector

li:only-of-type {
font-weight: bold;
}
با استفاده از این سلکتور میتوانید المنت هایی را انتخاب کنید که خواهر و برادری با پدرشان ندارند.
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
مشاهده دمو30. X:first-of-type Selector

با استفاده از این سلکتور میتوانید اولین خواهر و برادر یک نوع را انتخاب کنید، برای مثال، با توجه به قطعه کد زیر :<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1 </li>
<li> List Item 2 </li>
</ul>

<ul>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ul>
</div>
راه حل 1ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}
راه حل 2p + ul li:last-child {
font-weight: bold;
}
راه حل 3ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}
پشتیبانی مرورگر ها :
IE9+Firefox 3.5+ChromeSafariOpera
مشاهده دمونتیجه گیری

اگر میخواهید از مرورگرهایی مانند IE6 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.
درباره دیگر زبان ها ,
زینب بازدید : 42 جمعه 18 خرداد 1397 زمان : ۲۲:۳۰ نظرات (0)
سلام
میخوام یک send post content بفرستم به یک صفحه از طریق کلیک بر روی یک صفحه ی html . یعنی هر کاربری که روی این صفحه html کلیک کرد این مشخصات رو بفرسته به اون صفحه و واردش بشه
چیزی که میخوام بفرستم این هست
card=2&qty=1&gateway=shetab_direct_Parsian&email=& mobile=&action=payit

آدرس مقصد هم mydomain.com هست

ممنون میشم راهنمایی بفرمایید




=================================================
چیزی که در live http header نشون داده میشه برای من هم این هست

Host: mydomain.com
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:12.0) Gecko/20100101 Firefox/12.0
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
X-Requested-With: XMLHttpRequest
Referer: http://mydomain.com/
Content-Length: 101
Cookie: PHPSESSID=c43d455d5c8eef447098691d0a5b484d
Pragma: no-cache
Cache-Control: no-cache
درباره دیگر زبان ها ,
زینب بازدید : 37 جمعه 07 ارديبهشت 1397 زمان : ۰۲:۳۵ نظرات (0)
1

تعداد صفحات : 1

موضوعات
لینک دوستان
پیوندهی روزانه
  • آرشیو لینک ها
  • صفحات جداگانه
    آمار سیت
  • کل مطالب : 503
  • کل نظرات : 0
  • افراد آنلین : 77
  • تعداد اعضا : 0
  • بازدید امروز : 18,699
  • باردید دیروز : 12,989
  • بازدید هفته : 18,699
  • بازدید ماه : 198,075
  • بازدید سال : 725,510
  • بازدید کلی : 948,835