Zed 439 گزارش دادن ارسال شده در بهمن 99 سلام تو این تاپیک همنجوری که قول دادم قرار صفحه دیفیس گارد ایران رو تحلیل کنیم اول از همه با css شروع می کنیم css رو قبلا براتون گزاشتم بریم سراغ کار خودمون چیزی که داخل تحلیل یا تغییر یک صفحه دیفیس مهم هست این هست که اول ببینیم که طرف چی کار کرده و کد هایی که نوشته برای چی هست یکی یکی با هم پیش میریم body { background-color: #14151b; margin: 0; font-family: Jura, sans-serif; } اولین کدی که داخل css بهش بر می خورید ایشون هست تحلیل : خط اول فرد که css رو نوشته اومده body رو باز کرده خط دوم فرد اومده و رنگ بک گراند رو مشخص کرده خط سوم فاصله ها رو 0 کرده خط چهارم فونت که برای که در نظر داشته رو اضافه کرده خط پنجم هم body رو که باز کرده بود رو بسته اگر موافق باشید من دیگه باز و بسته شدن رو نگم چون کاملا معلوم هست @font-face { font-family: Jura; src: url("../fonts/Jura.ttf"); } تحلیل : خط اول فونت مورد نظرش رو مشخص کرده خط دوم آدرس جایی که فونت قرار داره رو بهش داده a { text-decoration: none; color: inherit; } این کد در مورد با تگ a نوشته شده تحلیل : در خط اول خواسته که زیر متنی که لینک شده هیچ خطی وجود نداشته باشه (در حالت پیش فرض یک خط پایین متنی که لینک شده وجود داره که با css قابل تغییر و جا به جایی هست) در خط دوم رنگ متنی که لینک شده رو بی رنگ قرار داده (ما هر موقع روی یک لینک کلیک می کنیم اگر یک بار برگردیم و بهش نگاه کنیم رنگ تغییر می کنه) برای این کد یک مثال میزنم تا بهتر براتون جا بیوفته مثلا ما این قطع کد رو می خوایم اجرا کنیم و خروجی که به ما میده رو با هم ببینیم <html> <head> <title>Guardiran</title> </head> <body> <center> <br> <a style="font-size: 300px;" href="https://guardiran.org">Guardiran</a> <br> </center> </body> </html> در خروجی این کد همچین چیزی رو به ما میده خب این لینک ما الان یک خط زیرش هست که ما نمی خوایم باشه پس با استفاده از این کد text-decoration: none; برش میداریم خب این لینکی که ماساختیم رنگ داره ما نمی خوایم این رنگی باشه پس عوضش می کنیم با این کد color: inherit; حالا این دو کد رو به کدی که داشتیم اضافه می کنیم <html> <head> <title>Guardiran</title> <style> a { text-decoration: none; color: inherit; } </style> </head> <body> <center> <br> <a style="font-size: 300px;" href="https://guardiran.org">Guardiran</a> <br> </center> </body> </html> با خروجی زیر رو به رو میشیم هنوز هم لینک هست اما خاصیت های اضافش رو ازش گرفتیم اگر من بخوام کل تحلیل css داخل همین یک جلسه تموم کنم نه شما چیزی میفهمید نه کسی حال خوندن این همه متن داره در روز های آینده هر روز مقدار به مقدار پیش میریم تا کاملا صقحه دیفیس گارد ایران براتون جا بیوفته اگر سوالی بود بپرسید در خدمتم حتما جواب میدم تا تاپیک های بعدی در پناه حق👋 6 3 واکنش ها : jen_avare ، RT3N ، MrExploit و 6 نفر دیگر به اشتراک گذاری این ارسال لینک به ارسال به اشتراک گذاری در سایت های دیگر
Zed 439 گزارش دادن ارسال شده در بهمن 99 سلام دوستان بعد از مدت ها باز برگشتم با تحلیل css گارد ایران بریم سراغ کارمون تگ استایل تگ a پیش رفتیم و حالا نوبت سایر کد ها رسیده #guardiran-logo { padding-top: 13.475409836065573vh; text-align: center; } اول از همه باید بگم که # که قبل از نوشته اومده داره میگه این یک id هست فرق id و class این هست که کلاس به چند تگ داده میشه اما ای دی فقط برای یک تگ هستش از این مورد که بگزریم میرسیم به padding خودمونی بگم که راحت متوجه بشید پدینگ ی فاصله ایجاد میکنه به همین راحتی بعضی جاها دیدم که عنصر درونی بیرونی و غیر رو میگن که درست هم میگن اما کاربر گیج میشه بعد از پدینگ برنامه نویس یک جهت رو مشخص کرده و گفته می خواد فاصله از بالا ایجاد بشه بعد از اونم هم مقدار رو گفته از این مورد که رد بشیم میرسیم به text-align با استفاده از اینکه برنامه نویس لوگو رو سر جای خودش ثابت کرده و گفته حرکات اجرا بشه اما جای لوگو تغییری نکنه الان با مثال بهتون توضیح میدم به ویدیو پایین دقت کنید Rec 0021.mp4 فک کنم خودتون تغییر رو متوجه شده باشید و نیاز به توضیح دیگر نباشه اما اگر جایی از آموزش رو متوجه نشدید می تونید به من پیام بدید تا بهتون توضیح بدم بریم سراغ ادامه کد ها #header-text { font-weight: bold; font-size: 22px; color: white; text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.2); margin: 4.918032786885246vh auto auto auto; text-align: center; } در واقع ما با استفاده از font-weight یک حالت بولد یا مقدار بولد بودن یک تگ رو مشخص می کنیم در خط بعدی با استفاده از font-size اندازه نوشته خودمون رو مشخص می کنیم در خط سوم با استفاده از color رنگ متن رو مشخص می کنیم خط چهارم با استفاده از text-shadow به متن خودمون سایه میدیم که خیلی در زیبایی تأثیر داره خط پنجم در این خط با استفاده از auto برای مارجین مقداری که مارجین دریافت میکنه رو خودکار گزاشته در خط آخر از کد هم مکان تگ رو مشخص کرده فکر می کنم برای امروز کافی باشه سایر مطالب رو برای روز دیگر قرار بدیم بهتر هست اینجوری شما هم اگر سوالی داشته باشید می تونید بپرسید هدف ما این هست که شما بتونید این کد ها رو یادبگیرید نه اینکه صرفا حفظ کنید پس تا تاپیک های بعدی در پناه حق 👋 1 1 واکنش ها : C0d3!Nj3ct!0n و MrExploit به اشتراک گذاری این ارسال لینک به ارسال به اشتراک گذاری در سایت های دیگر
