استفاده از css و js بصورت مستقيم

[ᔕinaᗪehghani]

به نام خـدا

سلام دوستان امیدوارم حالتون خوب باشه...   

---

معرفي:

شاید تا به حال مي خواستيد از يه فايل js يا css رو بصورت مستقيم توي كانس بكار ببريد و توي پيشنمايش هم نتيجه رو ببينيد و بخاطر يه فايل جاوااسكريپت مجبور به ساخت يه پلاگين نشيد و ...


خب اول از همه شايد بگيد css چيه؟!

کدهای css دستوراتی هستن که توسط اون‌ ها می تونیم تمامی خصوصیات ظاهری صفحه وب‌سایت رو تعیین کنیم. بنابراین شما توسط کدهای HTML ، اسکلت صفحه وب سایت خودتون رو پیاده سازی می‌کنین و با کدهای css مشخص می‌کنین هر عنصر چه خصوصیات ظاهری‌ ای باید داشته باشه. به اصطلاحی رنگش می‌ کنید و کلی چيز باحال دیگه بهش اضافه می‌ کنید!

بهتون پيشنهاد ميكنم اگر با css آشناييت نداريد حتما بريد و ياد بگيريدش تا در ادامه مشكل نداشته باشيد!

خب تا اينجا فهميديدم كه css چيه حالا شايد سوالي كه پيش بياد اينه كه چطوري از css توي كانس استفاده كنيم؟!

استفاده از css راههايي زيادي داره كه اصلي ترين راه ، استفاده از اونت :

کد:

Set CSS Style

هست كه بايد يه خصوصيت يا پراپرتي رو در پارامتر اول و مقدار اون پراپرتي رو در پارامتر دوم وارد كرد...:
قبل از اين اونت:


مقدار داده و پراپرتي:


و بعد از اين اونت:



اين راه مشكلاي زيادي رو داره از جمله اينكه وقت گير هست كه براي هر پراپرتي يه اونت رو نوشت و از ويرايشگر هاي كد مثل نوت پد و نوت پد + محروم ميشي و ...

يه راه ديگه اي هم وجود داره كه بعد از خروجي بياي و توي فايل هاي خروجي دست ببري كه اين راه هم كار زياد درستي نيست...

اما يه راه بهتر كه كار رو هم بسيار آسونتر ميكنه استفاده از يه پلاگينه كه فايل هاي css و فايل هايي كه توسط مرورگر ها قابل خوندن هستن رو توي رانتايم خروجي كانس قرار ميده...

البته اين پلاگين هم يه مشكل خيلي كوچيك داره؛ و اونم اينكه براي چند ميلي ثانيه از شروع بازي يا برنامه ، عناصري كه توي صفحه هستن همون شكل قبليه خودشون رو دارن ؛ كه براي حل اين مشكل هم ميشه يه چيزي رو روي همه ي عناصر قرار داد و با شروع لايوت مخفيش كرد...

---

استفاده:

براي اولين فايل ميتونيد ، فايل مورد نيازتون رو از پوشه فايل ها ايمپورت كنيد و بعد در اين قسمت (auto-import) اسم اون رو به همراه پسوندش بنويسيد:



خب تا اينجا فايل css با موفقيت ايمپورت شد!

حالا سوالي كه مطرح ميشه اينه كه توي فايل css و سمت كانس چجوري بايد عمل بكنيم كه اون css رو بگيره؟!

قبل از اينكه اينو بگم بهتره يخورده در مورد selector ها توي كانس اطلاعات كسب كنيد؛ اما در كل selector ها توي css ميتونن يه id يا class يا ... رو بگيرن و به اون رنگ و لعاب بدن يا به اصطلاح استايل براي اطلاعات بيشتر اينجا بزنيد


 
خب حالا اين id و class رو از كجا بايد ديد و تعيين كرد؟!

اگر ديده باشيد توي كانس يه قسمتي براي بعضي عناصر وجود داره به اسم ID يا tag id كه هر چي داخل اين قسمت نوشته بشه id اون شي به حساب مياد، مثل اينجا در شي باتن:



اما در مورد بعضي از اشيا كه نميشه كلاس يا آي ديشون رو ديد يا تغيير داد بايد چيكار كرد؟!

در مورد اين مورد شما ميتونيد با راست كليك و زدن روي inspector در مرورگرتون ، يا كليد تركيبي كنترل+شيفت+ i رو بزنيد ؛
اشيا و عناصر رو ريز به ريز ببينيد و با كمي دقت ميتونيد آي دي و كلاسي كه مشخص شده رو هم ببينيد، اگر هم در پيدا كردن id و يا class مشكلي داشتيد همينجا اعلام كنيد تا شايد پيدا بشن...:




خب حالا كه id يا class رو فهميديم بعدش بايد چيكار كنيم؟!

در مرحه ي بعد بايد با selector هاي css اون id يا class رو بگيريم؛ براي مثال:

اگر id يك شي test بود با اين css ميشه گوشه هاي اون شي رو گرد كرد:

کد:

#test {
    border-radius: 10px;
}

و اگر class برابر با test بود بايد به اين صورت عمل كرد:

کد:

.test {
    border-radius: 10px;
}

خب براي مثال اگر همين فايل css رو براي يه باتن با test ، id بنويسيم نتيجه ميشه يه باتن كه گوشه هايي گرد داره؛:

قبل از اين استايل:


و بعد از اون:




البته با css ميشه كار هاي زيادي رو انجام داد، مثلا براي دكمه ها سايه گذاشت يا قبلا براي تغيير فونت ها با روش جناب آقاي vng بايد توي فايل هاي خروجي كانس يه تغييراتي ايجاد مي كرديم...

ولي خب نميشد فونت بعضي از چيز ها مثل فونت پيشفرض sweet alert و ... رو تغيير داد (شايدم ميشده و من نميدونم!)، با توجه به اون تاپيك ، و استفاده از فونت فاميلي در css شما ميتونيد فونت هر چيزي كه داخل صفحه هست رو تغيير بديد... 

براي مثال اگر id برابر با test باشه اين خط كد ،‌ هر جا اين آيدي وجود داشته باشه فونتش رو به B Elham تغيير ميده (البته بعد از اضافه كردن فونت در پوشه ي فونت):

کد:

#test {
    font-family: 'B Elham';
    src: url('Fonts/B Elham.ttf'); 
    fomat('truetype'); 
}

خب اگر تمام كارها رو درست انجام داده باشيد فونت به بي الهام تغيير پيدا ميكنه...:

قبل از اين استايل:


و بعد از اون:




در آخر اين هم يه سورس براي درك بهتر مطالب:

CSS Import Source

و اين هم پيشنمايش:

CSS Import Preview

راستي يادم رفت پلاگين هاي استفاده شده در سورس رو براتون بذارم:

پلاگين ايمپورت فايل هاي css و ...:
File Import

پلاگين sweet-alert II:
Sweet Alert II

راستي اگر نكته نظري داريد و جايي رو نفهميديد يا من جايي رو اشتباه كردم، ممنون ميشم گوشزد كنيد...  ‌


با تــــــــشكر از همراهيتـــــــون موفــــــــق باشيد...

 

---