• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
راحت تر برای پوسته هاتون استایل بنویسید
#1
سلام،
مدتی هست که خیلی در زمینه طراحی و برنامه نویسی چه سمت کاربر و چه سمت سرور فعال شدم. چند روز پیش نیاز داشتم یک طراحی کنم که خدا رو شکر طراحی انجام شد به نحو احسن ولی تو استایلش یک مقدار مونده بودم. طراحی طوری بود که تصاویر می بایست کنار هم قرار بگیرن و یکی بالا و اون یکی پایین و خلاصه کلی دردسر. در عرض 10 دقیقه رفتم کل آموزش های css موجود در w3schools رو خوندم و همون شب در 2 دقیقه استایل رو هم کامل و بدون مشکل نوشتم. خدا شاهده که دقیقه ها عین حقیقته! حالا من چی میدونم که شما نمیدونید و تو طراحی به مشکل بر میخورید؟ میخوام الآن براتون اونارو بگم.

Float : سمت گیریه. پیشنهادم اینه که از این سلکتور اصلاً استفاده نکنید مگر اینکه نیاز بشه. هرجایی هم نیاز نمیشه ! پس از فکرش بیاید بیرون. کارش چیه دقیق؟ کارش اینه که اگر شیء ای در آیدی دیگری قرار داشت/نداشت، مثل direction عمل کنه و اون رو به سمت چپ و راست کامل میبره با این تفاوت که direction همه چی از جمله متن رو چپ به راست می کنه ولی float فقط میبره به چپ یا راست. پس فرقی بین می بره با می کنه Big Grin هست!! معمولاً اگر بخوایم دو تصویر کنار همدیگه و روبروی هم قرار بگیره از float استفاده می کنیم. که دو مقدار اصلی right – left دریافت می کنه. گرچه من راه بهتری دارم که مشکلی واسه بقیه قسمت ها ایجاد نمی کنه و شاید بعداً گفتمش. شایدم این مقاله رو تا آخرش بخونید خودتون بهش برسید. جای دیگه که ازش استفاده میشه ، در rtl بودن پوسته هست. زمانی که ltr باشه direction ، اونوقت همه چی استاندارده و دیگه نیازی نیست ما ایرانی ها که فارسی می نویسیم ازش استفاده کنیم مگر همونطور که گفتم برای روبرو هم قرار گرفتن تصاویر. ولی چون اغلب rtl قرار میدیم سمت گیری بدنه رو ، با وضعیت ها در جایی به مشکل می خوریم و خوب فیکس نمی شن با مرورگر. در اینجا باید اون direction رو با float بطور غیر مستقیم تغییر بدیم. دردسر زیاد داره این سلکتور. شاید بعداً بیشتر در موردش گفتم

Margin : مارگین به ترتیب از بالا ، راست ، پایین چپ هست. دو مقدار متفاوت میتونه بگیره. یکی auto و دیگری مقداری که بهش میدیم. تا همینجا کافیه واسه این. مابقیش رو باید قسمت های بعدی یاد بگیرید.
نکته: بهتره معنی همه سلکتور ها ومقدار هاشون رو بدونید و بعد کارشون رو هم حفظ کنید. من بهتون چند تا از مهم هاشو میگم.

Auto : مرورگر خودش تنظیم می کنه
نکته: margin: auto اگر بنویسید ، مرورگر از همه جهات (بالا راست پایین چپ) تنظیم می کنه. اگر خواستید فقط از راست تنظیم کنه نکنه بنویسید margin: 0px auto 0px 0px ها !! کاملاً غلطه. اس سلکتور دیگری به نام margin-right: auto استفاده کنید.
Position : موقعیت و وضعیت یک چیز رو تعیین کنه. که چندین مقدار از پیش تعیین شده داره (absolute – relative – fixed – static ) یکی دیگه هم هست به نام inherit که اصلاً به کارمون نمیاد اگر بتونیم درست از موقعیتهایی که در بالا ذکر کردم استفاده کنیم.
Absolute : موقعیت رو دل بخواهی می کنه و نه به مروگر وابست نه به اشیا اطرافش. در یک کلام ، از نظریه نسبیت حرکت پیروی نمی کنه! اما اگر متصل به آیدیی باشه بر اساس اون تغییر موقعیت پیدا می کنه.
Static : بطور پیشفرض همه موقعیت ها ایستا هستند و نیازی نیست که مشخص کنید ولی اگر نیاز شد ، باعث میشه اون شیء مورد نظر ما به حالت عادی در صفحه برگرده.
Relative : شیء مورد نظر رو به حالت نرمالش بر می گردونه. حالت نرمال چیه؟ حالت نرمال یعنی وضعیت استاندارد خودش. مثلاً اگر direction: rtl باشه ، از راست وضعیت استاندارد تگ h2 مشخص میشه و برعکس
Fixed : این یکی موقعیت شیء رو میسپاره به مرورگر و مرورگر خودش تنظیم می کنه. حتماً دیدید بعضی ها که طراحی بلد نیستن ، طوری استایل می نویسن واسه پوستشون که وقتی صفحه رو کوچیک و بزرگ می کنی همه چی بهم میریزه ! fixed اگر وضعیت شیء باشه دیگه کوچیک و بزرگ صفحه فرقی نمی کنه.
نکته: حتماً نیازی نیست همه جا از وضعیت ها استفاده کنید. وقتی شما طراحی درستی داشته باشید ، شاید بیشتر از دو بار مشخص کردن وضعیت بکارتون نیاد.
نکته: بهترین کار در طراحی که خودم هم ازش پیروی می کنه اینه که اگر بخوام تصویری رو بگذارم در صفحه ، اول براش یک آیدی درنظر می گیرم و در اون ایدی محوطه ای رو براش مشخص می کنم بعد در کلاس اون شیء ، موارد لازم رو می نویسم. در آخر این مقاله بیشتر این قسمت رو درک خواهید کرد.
نکته: فرم ها بطور پیشفرض دارای بک گراند سفید هستند. این طراحی رو زشت می کنه. اگر بخوایم تصویر های خاص دیگه ای برای دکمه سابمیت و فیلد ها انتخاب کنیم ، این یک دردسر برای اونایی میشه که بلد نیستن راهشو! سلکتوری داریم به نام background-color و همونطور که از اسمش بر میاد ، رنگ پس زمینه رو مشخص می کنه. ولی نکته قابل توجه اینجاست که مقدار از پیش تعریف شده ای هم میتونه دریافت کنه و اون transparent هست که باعث میشه بکگراند مثل فتوشاپ نداشته باشیم ! یعنی نه سفید نه مشکی و هیچ رنگ دیگه.
نکته: برای اینکه کد نویسی دقیق تر و زیباتر و پرکاربرد تری داشته باشید و کمتر از تصاویر استفاده کنید تا صفحات سنگین نشوند ، بهتره یکسری موارد رو بدونید. مثلاً در css حتی میشه مثل فتوشاپ opacity رو تعیین کرد. حالا opacity چیه؟ شیء رو کمرنگ می کنه بطوری که شیء زیریش پیدا میشه. اگر همین انجمن رو جستجو کنید در مورد opacity ها خیلی وقت پیش یک مقاله نوشتم. پیدا می کنید.
نکته: چند سلکتور معروف در css دارم به نام top – bottom – left و right . که اینا هرچقدر هم ازشون استفاده کنید جواب نمیدن! چرا؟ برای اینکه اینها زمانی کاربرد دارند که شما وضعیت شیء ای رو به عادت نرمال برگردونید یعنی relative.

دوست عزیزی از همین انجمن دیشب از من خواست چند نکته یا trip and tricks مفید در استایل و مارک آپ نویسی براش بگم. منم چون میدونستم هرکسی نکته موجود در ID و CLASS رو نمی دونه مگر طراح های حرفه ای ، گفتم براش توضیح بدم. چی گفتم بهش؟
اینی که میخوام بگم ، فرق بین کارایی ID و کارایی CLASS در html هست که مربوط به css هم میشه. دو کد زیر رو نگاه کنید
کد:
<div id="me">
<div class="you">
نکته: ID در css با # (شارپ) معرفی میشه و کلاس با نقطه (.)
توجه: در استایل نویسی هم یکسری قواعد نوشتاری هست و یکیش اینه که از آیدی زمانی استفاده کنید که فقط یکبار برای فقط و تنها فقط یک شیء تعریف میشه و کلاس رو زمانی تعریف کنید که بیش از یکبار بخواید برای یک شیء یا اشیای دیگر تعریف کنید.
دو خط بالا تفاوتشون در بکار بردنشون بود ولی در استایل هم یه تفاوت دیگه دارن ! قبلاً هم گفتم در بخش وضعیت ها !! اگر وضعیت یک شیء رو absolute قرار بدید در صورتی که به یک آیدی متصل باشه متناسب با اون آیدی تغییر وضعیت پیدا می کنه!
حالا به دو کد زیر نگاه کنید
کد:
<div class="me">
<div class="you">
در ظاهر مشکلی ندارن و پاسخگو خواهند بود ولی ذاتاً اشتباهن!

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

نکته: همیشه طول و عرض رو برای هر تصویر و هر محوطه درست مشخص کنید (weight- height)
نکته: حتماً بعضی از تگ ها رو می شناسید که بعد از خودتون یک پاراگراف خالی ایجاد می کنند. درسته؟ مثل div – p – headings - و غیره. برای اینکه اون پاراگراف خالی رو از بین ببریم و ادامه متن در جلوی همون متن قرار بگیره باید از سلکتور display استفاده کنیم. اینجور تگ ها به اصلاح block میگن یعنی فاصله ایجاد می کنن. برای اینکه از بین بریم مقدار برای اون سلکتور رو inline قرار بدید. یا اگر بخواید فاصله ایجاد بشه ، block استفاده کنید براش. اینطوری دیگه نیازی نیست برای هر خط هی <br /> استفاده کنیم یا همرو در یک <p></p> قرار بدیم!
غایب
  پاسخ
تشکر شده توسط : Bojbaj paull masoudmanson


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان