بایت لرن

آموزشهای برنامه نویسی ، امنیت و شبکه ،ترفند های کم یاب ، سورس کد ، طراحی وب ، اپلیکشن ، انجام پروژه های دانشجویی رایگان

ترفند ها و تکنیک ای css که هر طراحی باید بدونه

css

توی دنیای فناوری امروز تکنیک ها و ترفند های css زیادی وجود داره  که طراح ها میتونن با اون وب سایت ها رو طراحی کنن. این مقاله خیلی مناسب برای افراد مبتدی هست . توی این مقاله  نکات و تکنیک های خیلی مهم css رو بهتون توضیح میدیم .

پس در ادمه بایت لرن همراه باشید...

1- موقعیت ثابت

اگر میخواید همیشه بدونید که یک المان در کجایی وب سایت قرار داره باید موقعیت اون رو قطعی و ثابت کنیم ( absolute positioning ) ، با دستور زیر میتونیم موقعیت قطعی و ثابت رو اعمال کنیم .

                                Position: absolute;

                                Top: 20px;

                                Right: 20px;

2- متوقف کردن تمام استایل ها

ما خیلی کم از این ترفند استفاده میکنیم ، چون اگر این دستور برای هر چیزی استفاده بشه در طولانی مدت با مشکلاتی مواجه میشیم .

                                .section { color: red  !important;  }

3- وسط چین

وسط چین کردن گول زننده هست ، چون دقیقا به چیزی که می خوایم وسط چین بشه بستگی داره ، پایین بهتون میگیم چطوری بتونید متن یا هر المانی رو وسط چین کنید .

 برای وسط چین کردن متن از دستور text-align: center  استفاده میکنیم ، ولی برای وسط چین کردن المان های دیگه میتونیم با اضافه کردن حالت  block و استفاده از حاشیه خودکار  auto margins در وسط قرار بگیرد .

                                #div {

                                          Display: block;

                                          Margin: auto;

                                          Width: anything under 100%;

                                          }

همچنین لیست کد های Css را در بایت لرن بخوانید.

5- تنظیم عمودی برای یک خط متن

از این تکنیک css قطعا توی منو ها استفاده میشه ، این ترفند ارتفاع منو و ارتفاع خط متن رو یکسان میکنه .

                                .nav li {

                                          Line-height: 50px;

                                          Height: 50px;

                                          }

7- وضعیت لینک ها

وضعیت لینک ها موضوعی است که بسیاری از طراحان آن استایل ها را فراموش می کنند و باعث مشکلات قابلیت استفاده برای کاربران می شوند. کلاس کاذب :link تمام لینک هایی که هنوز بر روی آنها کلیک نشده است را کنترل می کند. کلاس کاذب :visited کنترل تمام لینک هایی که شما در حال حاضر بازدید کرده اید را به دست می گیرد. این دستور به بازدیدکنندگان وب سایت می گوید که تا به حال در کجای وب سایت بوده اند و از کجای آن هنوز بازدید نکرده اند.

                                a:link { color: blue; }

                                a:visited { color: purple; }

8- کنترل المان های یک بخش

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

                                .blog img {

                                                Max-width: 100%;

                                                Height: auto;

                                                 }

 

9- Direct Children

اگر این ترفند را از ابتدای آشنایی با CSS بدانید، بسیار خوب خواهد بود. این دستور زمان زیادی را برای شما ذخیره خواهد کرد! از > استفاده کنید تا مستقیماً موارد تحت تأثیر یک المان را انتخاب کنید. برای مثال:

                                #footer > a

 

این دستور CSS تمام عناصر لینک فعالی که سریعاً تحت Footer ID هستند را انتخاب می کند و چیزهایی دیگری که در فوتر قرار دارد را انتخاب نمی کند. از این دستور می توان برای ایجاد منوهای حرفه ای استفاده کرد.

 

همچنین معرفی فری مورک های css را در بایت لرن بخوانید.

10- اجرای کد CSS به چندین کلاس یا سلکتور

برای مثال می خواهید یک مرز یکسان دور تمام تصاویر، بخش بلاگ و سایدبار اضافه کنید. نیازی نیست همان کد دستور CSS را 3 بار بنویسید. فقط کافی است آن آیتم ها را لیست کرده و با ویرگول (,) جدا کنید. برای مثال:

                                .blog , img , .sidebar {

                                                Border: 1px solid #000;

                                                                }

 

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

مقالات بیشتر css  را در بایت لرن بخوانید.


نظرات (۰)

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

Valid HTML 4.01!