وبلاگ محمد مجتبی سیف اللهی

زندگی اینجاست ...

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

طبقه بندی موضوعی
بایگانی

چطور یک طراح وب بهتر بشید!

شنبه, ۳۰ بهمن ۱۳۹۵، ۰۵:۲۵ ب.ظ

برای اینکه یک طراح وب خوب بشید قبل از همه چیز باید در مورد css اطلاعتتون رو بالا ببرید. به نظر من همیشه یک طراح خوب دنبال شناخت بیشتر css. برای اونایی که به تازگی شروع به یادگیری طراحی وب کردن css شاید خیلی پیچیده به نظر برسه اما با کمی وقت گذاشتن و بازی کردن با المان ها متوجه می شید که css نه تنها وحشتناک نیست بلکه خیلیم زیبا و کارآمده. 

css رو بهتر بشناسید:

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

با css میتونید المان هارو مخفی کنید و برای این کار شما به دو روش دسترسی دارید. یکی اینکه از دستور display:none استفاده کنید و دیگری این که از visibility:hidden استفاده کنید. به نظر من بهتره خودتون یه امتحانی بکنید و تفاوتش رو در نظرات به ما بگید. یعنی یک بار از display و یک بار از visibility برای مخفی کردن المان استفاده کنید تا ببینید چی میشه.

به کمک css شما میتونید نوع المان ها رو از نظر بلاک یا اینلاین بودن تغییر بدید. مثلا میتونید یک المان بلاک رو با display:inline به صورت اینلاین در بیارید و یا بالعکس. اما برای همین خواص شما میتونید مقدار inline-block رو هم انتخاب کنید که ترکیبی از خواص هر دو المان اینلاین و بلاک به این صورت که مثل المان های اینلاین تنها عرض محتوای خودش رو اشغال میکنه و مثل المان ها بلاک شما میتونید از خواص box استفاده کنید که بعدا بیشتر براتون توضیح میدم. دقت کنید که برای المان های اینلاین شما نمیتونید خواص width و height را داشته باشید. 


css box model چیست و به چه دردی میخوره:

اگه به ابزار اینسپکت کروم آشنایی داشته باشید میدونید که css از یک مدل جعبه ای خاص برای جاینشانی المان های خودش استفاده می کنه. در این مورد می تونید اطلاعات زیادی در سطح به دست بیارید اما نکته ای که من باید بگم اینه که در css عرض و ارتفاعی که برای المان تعیین می کنید تنها محتوای المان رو تحت تاثیر قرار میده و برای به دست آرودن ارتفاع و عرض اصلی باید با جمع ضخامت paddnig، border و margin مشخص بشه. border همیشه بین padding و margin قرار میگیره و ضخامت بردر به ضخامت margin اضافه میشه. یکی از نکاتی که شاید کمتر در موردش شنید اینه که شما میتونید border های متفاوت در بالا و پایین و راست و چپ یک المان تعبیه کنید. از این کار به عنوان یک تکنیک برای استایل کردن هم میتونید استفاده کنید. کافیه امتحان کنید.

موافقین ۰ مخالفین ۰ ۹۵/۱۱/۳۰
محمد مجتبی سیف اللهی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی