Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

معرفی Pseudoهای CSS

611 views

Published on

Pseudoها در CSS برای توسعه دهندگان Front-end یک مفهوم آشنا و بسیار کاربردی هستند. المان‌ها و کلاس‌های Pseudo به روش‌های متنوعی قابل استفاده می‌باشند که هر کدام از آنها به نوعی، سبب استایل‌دهی صحیح و بهینه‌سازی کدهای CSS می‌شوند. شروع آنها از نسخه دوم CSS بود و در CSS3 پیشرفته‌تر شدند. نکته بسیار مهم درک زمان درست استفاده از این امکان CSS است، این که کجا و برای کدام نیاز در توسعه Front-end باید از این کلاس‌ها استفاده کنیم. هدف ما بررسی دقیق‌تر المان‌های Pseudo و نحوه استفاده صحیح آنها در قسمت‌های مختلف کدهای CSS است.

Published in: Education
  • فونت اسلاید هاتون رو درس کنید.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

معرفی Pseudoهای CSS

  1. 1. ‫صدری‬ ‫مسعود‬ ‫معرفی‬Pseudo‫های‬CSS
  2. 2. “In learning you will teach, and in teaching you will learn.” Phil Collins
  3. 3. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ‫گیری‬ ‫نتیجه‬
  4. 4. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ‫گیری‬ ‫نتیجه‬
  5. 5. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫لغت‬ ‫معنی‬“pseudo”‫در‬Dictionary.com adjective 1. Not actually but having the appearance of; pretended; false or spurious; sham. 2. Almost, approaching, or trying to be.
  6. 6. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫مفهوم‬“pseudo”‫گذاری‬ ‫نشانه‬ ‫زبان‬ ‫در‬CSS ‫های‬‫کالس‬Pseudo‫شوند‬‫می‬ ‫استفاده‬ ‫خاص‬ ‫المنتی‬ ‫برای‬ ‫ویژه‬ ‫حالت‬ ‫یک‬ ‫تعریف‬ ‫منظور‬ ‫به‬. :link, :visited, :hover, :active, :first-child, :nth-child
  7. 7. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫های‬‫کالس‬Pseudo‫همیشه‬‫با‬):(‫یا‬)::(‫گیرد‬‫می‬ ‫قرار‬ ‫کالس‬ ‫نام‬ ‫آن‬ ‫از‬ ‫بعد‬ ‫و‬ ‫شوند‬‫می‬ ‫شروع‬. :nth-child
  8. 8. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫های‬‫المنت‬Pseudo‫معمول‬ ‫های‬‫المنت‬ ‫مانند‬ ‫که‬ ‫هستند‬ ‫مجازی‬ ‫های‬‫آیتم‬ ،HTML‫کنند‬‫می‬ ‫رفتار‬. ‫ندارند‬ ‫وجود‬ ‫ما‬ ‫سند‬ ‫درختی‬ ‫ساختار‬ ‫در‬ ‫آنها‬. ،‫کنیم‬‫نمی‬ ‫تایپ‬ ‫را‬ ‫آنها‬ ‫ما‬ ‫که‬ ‫معنی‬ ‫این‬ ‫به‬‫بلکه‬‫توسط‬CSS‫شوند‬‫می‬ ‫ساخته‬. ‫مفهوم‬“pseudo”‫گذاری‬ ‫نشانه‬ ‫زبان‬ ‫در‬CSS :after, :before, :first-letter
  9. 9. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ‫گیری‬ ‫نتیجه‬
  10. 10. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫شوند‬‫می‬ ‫انجام‬ ‫کاربر‬ ‫درخواست‬ ‫ثبت‬ ‫از‬ ‫بعد‬. ‫های‬‫کالس‬Dynamic :link, :visited, :hover, :active, :focus
  11. 11. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ a:link { color: #ccc; } a:visited { color: #ccc; } a:hover { color: #ccc; }
  12. 12. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ a:active { color: #ccc; } a:focus { color: #ccc; }
  13. 13. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫سند‬ ‫به‬ ‫را‬ ‫جدیدی‬ ‫اطالعات‬HTML‫کنند‬‫می‬ ‫اضافه‬. ‫های‬‫کالس‬Structural :first-child, :first-of-type, :last-child, :last-of-type, :nth-child
  14. 14. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ :FIRST-CHILD li:first-child { color: red; } <ul> <li>This text will be red.</li> <li>Lorem ipsum dolor sit amet.</li> <li>Lorem ipsum dolor sit amet.</li> </ul> CSS HTML
  15. 15. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ :FIRST-OF-TYPE ul:first-of-type { color: red; } <ul> <li>This text will be red.</li> <li>Lorem ipsum dolor sit amet. <span> This text will be red. </span> </li> <li>Lorem ipsum dolor sit amet.</li> </ul> CSS HTML
  16. 16. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ :LAST-OF-TYPE ul:last-of-type { color: red; } <ul> <li>Lorem ipsum dolor sit amet. <span>Lorem ipsum dolor sit</span> <span>This text will be red</span> </li> <li>Lorem ipsum dolor sit amet.</li> <li>This text will be red.</li> </ul> CSS HTML
  17. 17. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫کالس‬nth-child‫سند‬ ‫در‬ ‫المنت‬ ‫چند‬ ‫یا‬ ‫یک‬ ‫به‬ ‫دهی‬ ‫استایل‬ ‫برای‬HTML‫شود‬‫می‬ ‫استفاده‬. ‫کالس‬ ‫پرکاربردترین‬ ،‫کالس‬ ‫این‬Pseudo‫است‬. ‫کالس‬:NTH-CHILD
  18. 18. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫تمام‬Pseudo‫های‬‫کالس‬nth‫گیرند‬‫می‬ ‫نظر‬ ‫در‬ ‫آرگومان‬ ‫عنوان‬ ‫به‬ ‫را‬ ‫مقادیری‬ ،. ‫هستند‬ ‫سازی‬ ‫پیاده‬ ‫قابل‬ ‫صورت‬ ‫دو‬ ‫به‬ ‫مقادیر‬ ‫این‬: •‫فرمول‬:an+b •‫کلمات‬‫کلیدی‬:odd‫یا‬even ‫کالس‬:NTH-CHILD
  19. 19. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ a:‫عددی‬ ‫مقدار‬ ‫یک‬(‫صحیح‬)‫است‬. n:‫است‬ ‫حرفی‬ ‫مقدار‬ ‫یک‬.‫ریاضی‬ ‫های‬‫فرمول‬ ‫در‬ ‫متغیرها‬ ‫مانند‬. +:‫تواند‬‫می‬ ‫که‬ ‫شود‬‫می‬ ‫گرفته‬ ‫نظر‬ ‫در‬ ‫عملگر‬ ‫عنوان‬ ‫به‬-‫باشید‬ ‫نیز‬. b:‫عددی‬ ‫دیگر‬ ‫مقدار‬ ‫یک‬(‫صحیح‬)‫باشد‬ ‫شده‬ ‫استفاده‬ ‫عملگرها‬ ‫از‬ ‫که‬ ‫است‬ ‫نیاز‬ ‫زمانی‬ ‫فقط‬ ‫ولی‬ ‫است‬. ‫فرمول‬an+b:
  20. 20. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ :nth-child(even) :nth-child(odd) :nth-child(2n+b) ‫فرمول‬‫کلیدی‬ ‫کلمات‬
  21. 21. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ <ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li> </ol> ol:nth-child (2) { color: red; } HTML CSS “Beta” will be red. :NTH-CHILD
  22. 22. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ <ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li> </ol> ol:nth-child (2n) { color: red; } HTML CSS “Beta”, “Delta”, “Zeta”, “Theta”, “kappa” will be red. :NTH-CHILD
  23. 23. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ <ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li> </ol> ol:nth-child (even) { color: red; } HTML CSS “Beta”, “Delta”, “Zeta”, “Theta”, “Kappa” will be red. :NTH-CHILD
  24. 24. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ <ol> <li>Alpha</li> <li>Beta</li> <li>Gamma</li> <li>Delta</li> <li>Epsilon</li> <li>Zeta</li> <li>Eta</li> <li>Theta</li> <li>Iota</li> <li>Kappa</li> </ol> ol:nth-child (2n+6) { color: red; } HTML CSS “Zeta”, “Theta”, “kappa” will be red. :NTH-CHILD
  25. 25. ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫مقادیر‬ ‫محاسبه‬ ‫برای‬ ،‫آنالین‬ ‫سرویس‬ ‫یک‬ ‫معرفی‬nth-child nth-calculator.com
  26. 26. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ‫گیری‬ ‫نتیجه‬
  27. 27. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ :before, :after, ::selection, ::placeholder ‫های‬‫المنت‬ ،‫شد‬ ‫گفته‬ ‫ابتدا‬ ‫در‬ ‫که‬ ‫طور‬ ‫همان‬Pseudo‫معمول‬ ‫های‬‫المنت‬ ‫مانند‬ ‫که‬ ‫هستند‬ ‫مجازی‬ ‫های‬‫آیتم‬ ،HTML‫کنند‬‫می‬ ‫رفتار‬. ‫ندارند‬ ‫وجود‬ ‫ما‬ ‫سند‬ ‫درختی‬ ‫ساختار‬ ‫در‬ ‫آنها‬.
  28. 28. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ <h1>Ricardo</h1> h1:before { content: “Hello ”; } HTML CSS Hello Ricardo :BEFORE
  29. 29. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ <h1>Ricardo</h1> h1:after { content: “, Web Designer.”; } HTML CSS Ricardo, Web Designer. :AFTER
  30. 30. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ::selection { color: #FFF; background: #CCC; } ::-moz-selection { color: #FFF; background: #CCC } ::SELECTION ‫المنت‬::selection‫سند‬ ‫در‬ ‫شده‬ ‫انتخاب‬ ‫قسمت‬ ‫به‬ ‫دهی‬ ‫استایل‬ ‫منظور‬ ‫به‬HTML‫شود‬‫می‬ ‫استفاده‬.
  31. 31. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ::PLACEHOLDER ‫المنت‬::placeholder‫های‬‫فرم‬ ‫در‬ ‫پیشفرض‬ ‫متن‬ ‫برای‬HTML‫شود‬‫می‬ ‫گرفته‬ ‫نظر‬ ‫در‬. ‫صورت‬ ‫به‬ ‫المنت‬ ‫این‬::input-placeholder‫شود‬‫می‬ ‫نوشته‬ ‫هم‬.
  32. 32. ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ::PLACEHOLDER input::-moz-placeholder { color:#666; } input::-webkit-input-placeholder { color:#666; } <input type="email" placeholder="name@domain.com"> CSS HTML
  33. 33. ‫اولیه‬ ‫مفاهیم‬ ‫و‬ ‫تعاریف‬ ‫ها‬‫کالس‬ ‫ساختار‬ ‫بررسی‬ ‫ها‬‫المنت‬ ‫ساختار‬ ‫بررسی‬ ‫گیری‬ ‫نتیجه‬
  34. 34. ‫گیری‬ ‫نتیجه‬ ‫های‬‫کالس‬ ‫و‬ ‫ها‬‫المنت‬Pseudo‫هستند‬ ‫کاربردی‬ ‫بسیار‬ ،‫سادگی‬ ‫عین‬ ‫در‬. ‫زبان‬ ‫امکان‬ ‫این‬ ‫از‬ ‫استفاده‬CSS‫سند‬ ‫در‬ ‫ها‬‫کالس‬ ‫شدن‬ ‫کمتر‬ ‫دلیل‬ ‫به‬ ،HTML‫شوند‬‫می‬ ‫کدها‬ ‫سازی‬ ‫بهینه‬ ‫باعث‬ ،. ‫بود‬ ‫خواهد‬ ‫بارگذاری‬ ‫سرعت‬ ‫افزایش‬ ‫و‬ ‫تر‬‫ساده‬ ‫توسعه‬ ‫سبب‬ ‫کدها‬ ‫بودن‬ ‫بهینه‬ ‫و‬.
  35. 35. ‫شما‬ ‫همراهی‬ ‫از‬ ‫ممنون‬

×