بعضی از استایل ها در css هستند که در عین مهم بودن ولی به اندازه استایل color یا همچین استایل هایی پرکاربرد نیستند ولی در عین حال مهم هستند و گاها اتفاق می افته که اونو فراموش کنیم.
1 - خاصیت display در css
بطور کلی با استفاده از این خاصیت در css می توانیم تعیین کنیم که یک المان نشان داده شود یا خیر و اینکه بصورت بلوک باشد یا نه (در مورد اینکه بلوک چیه صحبت می کنیم)، و اینکه المان ها مون توی یک خط باشن یا نه
display: none;
یعنی اینکه اون بلوک نمایش داده نشود.
display: inline;
یعنی عناصری که بهش این استایل رو دیدیم بصورت درون خطی نمایش داده شود.
مثال عملی از کاربرد: برای نمایش منوهای افقی.
display: block;
توضیح بلوک: اگر به کلمه بلوک کمی توجه کنید معنی آن در خودش است. دیدید در آپارتمان ها می گن بلوک چند هستید یه همچین معنی هم در css دارد.
2 - خاصیت text-decoration در css
وقتی به یک متنی لینک می دیم بصورت زیر خط دار نمایش داده می شود. برای حذف این باید این استایل رو به عنصر مون بدیم.
نمونه کد:
text-decoration: none;
3 - خاصیت cursor در css
خیلی وقت ها می خوایم وقتی موس می ره روی عنصر مد نظر مون شبیه انگشت اشاره بشه و ... ( مناسب برای رابط کاربری)
با استفاده از این خاصیت می توانیم این کار رو انجام بدیم.
مثال و نمونه کد:
cursor: pointer; cursor: copy; cursor: move;
4 - خاصیت position در css
خاصیت position دو اتربیوت کاربردی داره که خیلی با اون کار خواهید کرد به نام absolute و relative.
در واقع وقتی absolute را به یک عنصر بدهیم بهش می گیم که می خوایم تو رو در یک محدوده ای که برات تعیین می کنیم بالا و پایین کنیم.
وقتی هم relative را به یک عنصر دهیم می گیم اون محدوده ای که تعیین کردیم تو هستی :)
بعد وقتی از این استایل استفاده کردید با top, left میاییم و چپ و راستش می کنیم.
جمع بندی: absolute رو به فرزند و relative را به مادر می دهیم.
نمونه مثال از کاربرد position در منو هاست.
5 - خاصیت top, left در css
کاربرد این استایل css برای position هاست. وقتی به یک کلاس فرزند position:absolute دادیم. در ادامه میاییم و چپ و راستش می کنیم.
6 - خاصیت float در css
از نظر لغوی این کلمه به معنی شناوری است.
خیلی وقت ها میشه وقتی داریم کد html می زنیم عنصر مد نظر می ره سمت چپ و ما می خواهم راست باشه (وبالعکس) با استفاده از این خاصیت می تونیم به چپ و راست منتقل کنیم عنصر رو.
این خاصیت در راستچین کردن صفحات وب خیلی استفاده می شه.
7 - خاصیت transform در css
برای اینکه یک عنصری را بچرخانیم از این خاصیت استفاده می شود.
مثال و یک نمونه کد:
transform: rotate(45deg);
وقتی به یک عنصر این کلاس داده شود یعنی 45 درجه ساعتگرد بچرخد.
خاصیت transform اتربیوت های زیادی دارد ولی کاربردی اش همینه.
8 - خاصیت background در css
این خاصیت یکی از ساده ترین استایل هاست ولی می خواهیم کمی حرفه ای تر و پیچیده تر در موردش صحبت کنیم.
به طور کلی background از معنی اش مشخصه به معنی پس زمینه است.
دادن رنگ به پس زمینه:
background: #fff; background: rgba(0, 5, 17, .55); - - - - - - - - - - - - > اگر می خواهید رنگ رو بصورت وارد کنید
تکرار پس زمینه یک عنصر در جهت محور x ها (افقی) و y ها (عمودی):
background-repeat-x - - - - - - - - - - - - - - - - - - - - - - - - - > افقی background-repeat-y - - - - - - - - - - - - - - - - - - - - - - - - > عمودی
وقتی می خواهیم پس زمینه مون یک عکس باشه:
background: url(/images/banner.jpg)
background: transparent;
6 - خاصیت box-shadow در css
برای اضافه کردن سایه به عنصر. یک نمونه سایه خوب:
box-shadow: 0 0 3px #868686;
در آپدیت جدید می خواهیم در مورد این خاصیت ها هم توضیحاتی بدیم. (در هیمن نوشته)
overflow
z-index
list-style
outline
white-space
box-sizing
قطعا این نکته رو همه می دونن عاقلانه نیست همه همه همه استایل های css رو یاد بگیریم. بلکه باید در مرحله او علم نسبت به css داشته باشیم و بجای اینکه بریم همه استایل ها رو یادبگیریم باید استایل های کاربردی رو یادبگیریم. تازه در استایل های کاربردی می بایست اتربیوت های کاربردی رو یاد بگیریم.
