loading...
 

شاپ کیپر

شاپ کیپر

  1. شاپ کیپر
  2. دیگر زبان ها
صاحبان کسب وکار به دنبال هرچه زیباتر نمایش دادن صفحات وب سایت و طراحی سایت خود می کوشند. بدین جهت تلاش می نمایند تا از طرح ها و عکس های گرافیکی در طراحی وب سایت خود استفاده نمایند. اما همان طور که می دانید عکس ها عامل تاخیر در لود شدن صفحه سایت می باشند و تاخیر در لود شدن تاثیر منفی بر سئو سایت برجا خواهد گذاشت. 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 نمودن عکس ها در صفحه وب سایت
درباره دیگر زبان ها ,
زینب بازدید : 6 يكشنبه 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


دوستان منتظر نظرات و پیشنهادات فنی شما هستیم...
درباره دیگر زبان ها ,
زینب بازدید : 11 چهارشنبه 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] 
درباره دیگر زبان ها ,
زینب بازدید : 21 يكشنبه 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 پشتیبانی کنید باید در استفاده از این سلکتورها دقت کنید، اما در غیر این صورت استفاده از این سلکتورها میتواند باعث تسریع در کدنویسی و عملیات شما شود.
درباره دیگر زبان ها ,
زینب بازدید : 21 جمعه 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
درباره دیگر زبان ها ,
زینب بازدید : 16 جمعه 07 ارديبهشت 1397 زمان : ۰۲:۳۵ نظرات (0)
1

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

موضوعات
لینک دوستان
پیوندهی روزانه
  • آرشیو لینک ها
  • صفحات جداگانه
    آمار سیت
  • کل مطالب : 4
  • کل نظرات : 0
  • افراد آنلین : 6
  • تعداد اعضا : 0
  • بازدید امروز : 544
  • باردید دیروز : 1,519
  • بازدید هفته : 3,885
  • بازدید ماه : 49,654
  • بازدید سال : 84,559
  • بازدید کلی : 307,884