طراحی قالب وردپرس

جلسه هشتم: معرفی خاصیت های پرکاربرد CSS

معرفی خاصیت های پرکاربرد CSS

جلسه هشتم: معرفی خاصیت های پرکاربرد CSS

یک سلام پر انرژی به شما همراهان دوست داشتنی میهن وردپرس. طبق قرار همیشگی مان ، فنجان قهوه و موزیک پست راکتان که آماده است؟ خب اگر یادتان باشد در جلسات قبلی تگ های پرکاربرد html را با همدیگر یاد گرفتیم. تعدادشان هم زیاد نبود. از این جلسه به بعد می خواهیم خاصیت های شیرین و دوست داشتنی CSS را با همدیگر یاد بگیریم که تعدادشان کمی بیشتر است. آماده اید؟ پس بزن بریم!

راستی! قبل ازینه بخواهیم خاصیت های css را با هم یاد بگیریم ، موردی وجود دارد تحت عنوان CSS reset که بهتر است همین ابتدا با هم بزنیم توی گوشش!

CSS reset چیست؟

هر مرورگری که ما از آن استفاده میکنیم ، استایل های پیشفرض مختص به خود را دارد. یعنی اگر یک استایل برای همه مرورگرها در نظر نگیریم سایتمان در هر مرورگر به نحوی نمایش داده میشود. پس ما می آییم یک استایل پیشفرض که سایتمان را در تمام مرورگرها به یک صورت نمایش می دهد تعریف می کنیم. به این می گویند CSS reset خلاص!

از این سایت می توانید فایل CSS reset را دانلود کنید و به ابتدای فایل CSS ی که ایجاد کرده اید اضافه کنید.

نکته : توصیه میشود css ریست ها را در ابتدای کدهای css و قبل از تمامی کد ها قرار بدهید.

خاصیت tone :

با استفاده از این خاصیت می توانیم رنگ متن را تغییر بدهیم. مثلا رنگ متنمان را آبی یا قرمز یا سبز یا هر رنگی که دوست داریم انتخاب کنیم :

خاصیت credentials :

با استفاده ا این خاصیت می توانیم پس زمینه برای المان مورد نظرمان ایجاد کنیم. به تصویر زیر دقت کنید :

اگر بک گراند یک رنگ باشد :

کد بک گراند در css

اگر بک گراند یک تصویر باشد :

نکته : خاصیت بک گراند یک زیر مجموعه ویژگی هایی هم دارد. مثلا background-position ، background-attachment ، background-repeat و… که آن ها را به صورت کامل در دوره ۰ تا ۱۰۰ طراحی سایت آموزش داده ایم.

خاصیت domain :

با استفاده از domain میتوانیم برای المان مورد نظرمان فاصه ایجاد کنیم. فاصله ای از نوع خارجی! این طوری یاد بگیرید : domain که g دارد میشود فاصله خارجی!

خاصیت margin

نکته : برای راحت به خاطر سپردن جهت ها ، بهتر است بدانید domain در جهت ساعتگرد کار میکند. یعنی : مقدار اول بالا ، مقدار دوم راست ، مقدار سوم پایین و مقدار چهارم راست.

چند نکته کاربردی :

اگر به domain فقط یک مقدار بدهیم : فاصله به تمام جهات اعمال میشود.

اگر به domain دو عدد بدهیم : اولین مقدار بالا و پایین ، دومین مقدار چپ و راست.

اگر به domain سه مقدار بدهیم : اولین مقدار بالا ، دومین مقدار راست و چپ ، سومین مقدار پایین.

اگر به domain چهار مقدار بدهیم : مانند تصویر بالا میشود!

نکته مهم : خاصیت domain مقدار منفی و automobile هم می گیرد.

خاصیت stuffing :

با استفاده از stuffing میتوانیم برای المان مورد نظرمان فاصه ایجاد کنیم. فاصله ای از نوع داخلی! به عبارتی با stuffing می توانیم المان مورد نظرمان را گسترش بدهیم. این طوری یاد بگیرید : stuffing که d دارد میشود فاصله داخلی!

تمام نکته های بالا برای stuffing هم صدق میکند جز این مورد : stuffing مقدار منفی و automobile نمی گیرد چون کارش گسترش دادن است. پس منفی و automobile نمی شود!

خاصیت padding

نکته : برای راحت به خاطر سپردن جهت ها ، بهتر است بدانید stuffing در جهت ساعتگرد کار میکند. یعنی : مقدار اول بالا ، مقدار دوم راست ، مقدار سوم پایین و مقدار چهارم راست.

چند نکته کاربردی :

اگر به stuffing فقط یک مقدار بدهیم : فاصله به تمام جهات اعمال میشود.

اگر به stuffing دو عدد بدهیم : اولین مقدار بالا و پایین ، دومین مقدار چپ و راست.

اگر به stuffing سه مقدار بدهیم : اولین مقدار بالا ، دومین مقدار راست و چپ ، سومین مقدار پایین.

اگر به stuffing چهار مقدار بدهیم : مانند تصویر بالا میشود!

 

فکر میکنم برای این جلسه تا همین جا کافی باشد! خوب تمرین کنید. تا بعد…

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.

محمد مقدم

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