رفتن به مطلب
بازگشایی انجمن! ×
GuardIran

تحلیل صفحه دیفیس گارد ایران


Zed

پست های پیشنهاد شده

سلام تو این تاپیک همنجوری که قول دادم قرار صفحه دیفیس گارد ایران رو تحلیل کنیم

اول از همه با css شروع می کنیم

css رو قبلا براتون گزاشتم

بریم سراغ کار خودمون

چیزی که داخل تحلیل یا تغییر یک صفحه دیفیس مهم هست این هست که اول ببینیم که طرف چی کار کرده و کد هایی که نوشته برای چی هست

یکی یکی با هم پیش میریم

This is the hidden content, please

اولین کدی که داخل css بهش بر می خورید ایشون هست

تحلیل :

             خط اول فرد که css رو نوشته اومده body رو باز کرده

             خط دوم فرد اومده و رنگ بک گراند رو مشخص کرده

             خط سوم فاصله ها رو 0 کرده

             خط چهارم فونت که برای که در نظر داشته رو اضافه کرده

             خط پنجم هم body رو که باز کرده بود رو بسته

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

This is the hidden content, please

تحلیل :

            خط اول فونت مورد نظرش رو مشخص کرده

             خط دوم آدرس جایی که فونت قرار داره رو بهش داده

This is the hidden content, please

این کد در مورد با تگ a نوشته شده 

تحلیل

             در خط اول خواسته که زیر متنی که لینک شده هیچ خطی وجود نداشته باشه              (در حالت پیش فرض یک خط پایین متنی که لینک شده وجود داره که با css  قابل تغییر و جا به جایی هست)

             در خط دوم رنگ متنی که لینک شده رو بی رنگ قرار داده              (ما هر موقع روی یک لینک کلیک می کنیم اگر یک بار برگردیم و بهش نگاه کنیم رنگ تغییر می کنه)

برای این کد یک مثال میزنم تا بهتر براتون جا بیوفته

مثلا ما این قطع کد رو می خوایم اجرا کنیم و خروجی که به ما میده رو با هم ببینیم

This is the hidden content, please

در خروجی این کد همچین چیزی رو به ما میده

This is the hidden content, please

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

This is the hidden content, please

برش میداریم

خب این لینکی که ماساختیم رنگ داره ما نمی خوایم این رنگی باشه پس عوضش می کنیم با این کد

This is the hidden content, please

حالا این دو کد رو به کدی که داشتیم اضافه می کنیم

This is the hidden content, please

با خروجی زیر رو به رو میشیم

This is the hidden content, please

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

هنوز هم لینک هست اما خاصیت های اضافش رو ازش گرفتیم

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

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

اگر سوالی بود بپرسید در خدمتم حتما جواب میدم

تا تاپیک های بعدی در پناه حق👋

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


  • 3 هفته بعد...

سلام دوستان بعد از مدت ها باز برگشتم با تحلیل css گارد ایران

بریم سراغ کارمون

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

This is the hidden content, please

اول از همه باید بگم که # که قبل از نوشته اومده داره میگه این یک id هست فرق id و class این هست که کلاس به چند تگ داده میشه اما ای دی فقط برای یک تگ هستش 

از این مورد که بگزریم میرسیم به padding خودمونی بگم که راحت متوجه بشید پدینگ ی فاصله ایجاد میکنه به همین راحتی بعضی جاها دیدم که عنصر درونی بیرونی و غیر رو میگن که درست هم میگن اما کاربر گیج میشه

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

از این مورد که رد بشیم میرسیم به text-align با استفاده از اینکه برنامه نویس لوگو رو سر جای خودش ثابت کرده و گفته حرکات اجرا بشه اما جای لوگو تغییری نکنه 

الان با مثال بهتون توضیح میدم

به ویدیو پایین دقت کنید

 

فک کنم خودتون تغییر رو متوجه شده باشید و نیاز به توضیح دیگر نباشه 

اما اگر جایی از آموزش رو متوجه نشدید می تونید به من پیام بدید تا بهتون توضیح بدم

بریم سراغ ادامه کد ها

This is the hidden content, please

در واقع ما با استفاده از font-weight یک حالت بولد یا مقدار بولد بودن یک تگ رو مشخص می کنیم

در خط بعدی با استفاده از font-size اندازه نوشته خودمون رو مشخص می کنیم

در خط سوم با استفاده از color رنگ متن رو مشخص می کنیم

خط چهارم با استفاده از text-shadow به متن خودمون سایه میدیم که خیلی در زیبایی تأثیر داره

خط پنجم در این خط با استفاده از auto برای مارجین مقداری که مارجین دریافت میکنه رو خودکار گزاشته

در خط آخر از کد هم مکان تگ رو مشخص کرده 

 

فکر می کنم برای امروز کافی باشه

سایر مطالب رو برای روز دیگر قرار بدیم بهتر هست

اینجوری شما هم اگر سوالی داشته باشید می تونید بپرسید

هدف ما این هست که شما بتونید این کد ها رو یادبگیرید

نه اینکه صرفا حفظ کنید

 

پس تا تاپیک های بعدی در پناه حق 👋

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • ایجاد مورد جدید...