آموزش پیشرفته Css مقدماتی تا پیشرفته

سلام و عرض ادب و احترام خدمت همه دوستان ویرگولی.
شما که اومدین این مقاله رو بخونید قطعا با Css آشنا هستین و به نظرم نیازی به معرفی و توضیحات اضافی نیست و مستقیم میرم سر اصل مطلب.

ممکنه واسه یادگیری Css دوره های مختلفی رو از سایت های مختلف گذرونده باشین؛ اما برخی نکات هستند که تو خیلی از دوره ها گفته نمیشن. تو این مقاله میخوام چند مورد از همون نکته ها رو بهتون یاد بدم تا بتونید تو پروژه هاتون ازشون استفاده کنین.

خب بریم سراغ مطالب مورد نظر…

آموزش پیشرفته css

خب خیلی وقتا براتون پیش اومده که یه باکسی دارین و یه توضیحاتی داخلش قرار دادین؛ مثل یک باکس محصول که براش توضیحات نوشتین، مثل یک دوره آموزشی که براش توضیحاتی در کپشن در نظر گرفتید و … اما توضیحات مورد نظر شما از اندازه باکس بیشتره و در نتیجه متن از باکس میزنه بیرون که میگیم overflow رخ داده.

با Css میتونید این مشکل رو به راحتی برطرف کنین.

خب بریم ببینیم چطوریه…

به کد زیر دقت کنین:

 

.text-ellipsis {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

 

شما کلاس text-ellipsis رو به هر المنت که بدین، اگه محتواش زیاد شد تهش … میذاره.

نکته: همون طور که گفتم این کلاس رو باید به والد بدین، نه به فرزند.

خب بریم سراغ ترفند بعدی…

 

2. 2. media رو چطور اینلاین تعریف کنم؟

خب خیلی وقتا میخواین سایتتون رو با Css خام ریسپانسیو کنین و برای هر نوع دیوایس (مثلا موبایل) یک فایل Css اختصاص دادین و میخواین اون فایل Css فقط توی سایز مورد نظر شما (مثلا موبایل) لود بشه. اینطور مواقع میتونین به شکل زیر عمل کنین:

<link rel=’stylesheet’ media=’screen and (min-width: 701px) and (max-width: 900px)’ href=’css/style.css’ />

 

همون طور که از کد هم مشخصه، فایل style.css شما فقط تو سایز مورد نظرتون که تو اتربیوت media تعریف کردین لود میشه.

خب بریم سراغ ترفند بعدی…

 

3. 3. خلاصه بنویس

خیلی وقتا شده که تو Css از چندین ویژگی background استفاده بکنین، مخصوصا وقتی میخواین یه عکس رو هم اندازه باکستون بکنین یا افکت پارالکس پیاده سازی کنین. اینطور مواقع ممکنه برای هر ویژگی از background یک خط کد بنویسین!
اما راه خلاصه تری وجود داره. شما میتونین یه ویژگی background بنویسین و تمام ویژگی های مورد نظرتون رو تو همین یه خط جا بدین.

آموزش جامع html

روش طولانی:

background-color: #fff;

background-image: url(‘./bg.png’);

background-position: center;

background-size: cover;

background-repeat: no-repeat;

background-origin: border-box;

background-clip: content-box;

background-attachment: fixed;

خب مسلما این همه کد خیلی طولانیه و قطعا روش بهتری وجود داره.

 

روش کوتاه:

background: #fff url(‘./bg.png’) center cover no-repeat border-box content-box fixed;

بله، به همین راحتی.
قطعا این روش حجم کمی از فایل شما رو میگیره و بهینه تره.
در مورد margin و padding و … هم که خودتون خلاصه هاش رو بلدین.

خب بریم سراغ ترفند بعدی…

4. 4. cursor رو کاستوم بکن

خب همتون میدونین که میتونین تو موقعیت های مختلف طرح های مختلفی به cursor کاربر اختصاص بدین و این مورد رو تو همه دوره ها بهتون یاد دادن. اما شما نمیدونستین که به جز تصویر های پیش فرض Css میتونین عکس دیگه ای که برای cursor اختصاص بدین.
به کد زیر دقت کنین:

#touch{

cursor: url(“touch.png”);

}

دقیقا همون طور که تو Css میتونین به بک گراند با url تصویر دلخواه اختصاص بدین، میتونین با همین روش به cursor هم تصویر دلخواه خودتون رو اختصاص بدین.

 

خب…
امیدوارم تا اینجا بهتون خوش گذشته باشه و لذت برده باشین.

بریم سراغ ترفند بعدی…

 

5. 5. حرف اول مقالتو بزرگ بنویس

خیلی وقتا شده مثلا میخواین کپشن یا مقاله ای بنویسین و بخواین برای زیبایی ظاهری، استایل خاص و متفاوتی به حرف اول مقالتون بدید. اینطور مواقعی نیاز نیست حرف اول رو داخل یه span جداگانه قرار بدین، به راحتی میتونین از first-letter استفاده کنین.

به کد زیر دقت کنین:

 

p:first-letter {
display: block;
margin: 5px 0 0 5px;
color: #ccc;
font-size: 3.5em;
font-family: IranSans;
}

با همین تکه کد، حرف اول از محتوای متنی تگ p استایل های مورد نظر شما رو خواهند گرفت.

بریم سراغ ترفند بعدی…

7. 7. از Css Reset استفاده کن

شاید بگید این دیگه چیه!

قطعا تا حالا واستون پیش اومده که یه سایت رو طراحی کردین ولی بعضی قسمت های سایت تو مرورگر های مختلف ظاهر یکسانی ندارن و خروجی یه مرورگر با یه مرورگر دیگه متفاوته.

مثلا تو فایرفاکس به یه شکل دیده میشه و تو گوگل کروم به یه شکل دیگه!
Css Reset این مشکلات رو براتون حل میکنه.
واسه استفاده که از Css Reset استفاده کنین، یه چند خط کد Css رو به پروژه خودتون اضافه میکنین و تمام. کد های مربوط به Css Reset رو میتونین از سایت این سایت (https://meyerweb.com/eric/tools/css/reset/) کپی کرده و تو پروژه خودتون قرار بدین.
ممکنه بگید که چند خط کد Css چیکار میکنه مگه؟
الان بهتون میگم.

Css Reset:

1. همه مارجین و پدینگ های دیفالت مرورگر رو از بین میبره
2. همه استایل های متن ها مثل رنگ، سایز و … رو از بین میبره
3. و …

خب اینم از Css Reset

بریم سراغ ترفند بعدی…

 

8. 8. از متغیر های Css استفاده کن

 

ممکنه بگید مگه تو Css هم متغیر داریم! بله داریم.

شما میتونین تو Css متغیر تعریف کنین و آن ها رو با مقدار مدنظرتون مقدار دهی کنین و هر جای برنامه که نیازتون شد ازشون استفاده کنین.

برای تعریف متغیر به شکل زیر عمل میکنین:

:root {

–gutter: 2rem;

}

 

الان تو همین کد یه متغیر به اسم gutter تعریف کردیم که مقدارش 2rem هست.

شاید براتون سوال باشه که دیگه root چیه این وسط؟

وقتی متغیری رو تو root تعریف میکنین، اون یه متغیر سراسری (Global Scope) به حساب میاد و تو کل سورس کدتون میتونین ازش استفاده کنین. شما میتونین متغیر هاتون رو در Scope های محلی () تعریف کنین که فقط داخل همون المنت مورد نظر شما قابل استفاده باشه. حالا در مورد این مبحث تو مقاله های بعدی براتون بیشتر توضیح میدم.
حالا چطوری میتونیم از این متغیر استفاده کنیم؟

به کد زیر دقت کنین:

.box{
padding: var(–gutter);
}

خب همون طور که میبینین برای استفاده از یک متغیر در Css از تابع var استفاده می کنیم و اینجا گفتیم که المنت با کلاس box برای پدینگش از متغیر gutter استفاده کنه. الان مقدار پدینگ این المنت برابره با 2rem.

 

خب بریم سراغ ترفند بعدی…

 

9. 9. سلکتور جغد

تو Css یه سلکتوری وجود داره که توجه زیادی بهش نمیشه و خیلیا نمیدوننش؛ اما جاهایی میتونه کاربرد داشته باشه.

این سلکتور به این دلیل جفد نامگذاری شده که ظاهرش شبیه چشمای جغده. سلکتور جغد به این شکل نوشته میشه:

* + * {

}

حالا این سلکتور چه کاربردی داره؟ اصلا چیا رو سلکت میکنه؟

این سلکتور تمام المنت هایی رو سلکت میکنه که قبل از آن ها المنت دیگه ای وجود داره!
حالا این کاربردش کجاست؟ ممکنه شما بخواید همه المنت هایی که بعد از اونا المنت دیگه ای وجود داره، بینشون یه فاصله بندازین که به همدیگه نچسبن (به عنوان مثال سکشن های مختلف سایت)، اینطور مواقع میتونید از این سلکتور استفاده کرده و به شکل زیر عمل کنین:

.myList  *+*  {

margin-top: 0.5em;

}

خب اینم از این.

آموزش پیشرفته و رایگان جاوا اسکریپت

سخن پایانی

تو این مقاله سعی کردم 9 تا از مهم ترین مطالب و نکته هایی در مورد Css که تقریبا تو هیچ دوره ای گفته نمیشن رو بهتون یاد بدم.
امیدوارم این مقاله براتون مفید واقع شده باشه و نهایت استفاده رو کرده باشین.
اگه سوال، پیشنهاد یا احیانا مشکلی تو مقاله وجود داشت، تو کامنت ها بیان کنین تا اصلاح بشه و شما هم سهمی در نشر علم داشته باشین.
تا یه مقاله مفید دیگه خدانگهدار.
محمد امین سعیدی راد