• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

5 نکته جالب در CSS که شاید ندانید!

8150 ۱۸ شهریور ۹۱

شما به احتمال زیاد با CSS کار کرده اید و خط کد با آن نوشته اید ، شاید شما هم یکی از طرافداران کوتاه ترین کد باشید ، این کلمه بدین معنی می باشد که شما بهینه ترین روش را در کدنویسی خود اعمال نمائید ، شما می توانید Property های زیادی را در یک بلاک دستور css تعریف نمائید ، اما کد کوتاه برای شما بهتر نیست؟؟؟ برای یادگیری این روش با این مطلب همراه ما باشید.

1) قاعده CSS کوتاه مربوط به FONT :

شاید شما هم از  جمله افرادی باشید که برای تغییرات فونت سایت خود از دستوری همانند دستور زیر استفاده می نمائید :

اما این کد به نظر خیلی طولانی می آید ، آقای آوند در مورد ویژگی کاهش حجم css مقاله ای رو تنظیم کرده اند  که می توانید از آن استفاده نمائید (اینجا)  ، کد طولانی نه برای کد نویس چندان خوشایند می باشد نه برای مرورگرها که بخواهند این کد را بخوانند ، پس برای کوتاه کردن کد فوق می توانید از دستور زیر نیز استفاده نمائید :

این کد بهتر نیست؟ این بسیار بهتر و جمع و جور تر نسبت به کد اولی است ، همچنین یادآوری و فهمیدن آن نیز بسیار آسان تر از دستور اولی می باشد .

نکته :

مقدار دهی فونت مثلا verdina حتما باید در آخرین دستور نوشته شود همچنین font-size مطلب باید قبل از نام فونت باید ذکر شود ، همچنین اگر شما مقادیر font-weight, font-style, و font-variant را استفاده ننمائید ، مقدار پیش فرض آن به normal تغییر خواهد کرد.

2) فراخوانی دو کلاس با استفاده از یک صفت Class :

حتما برای شما پیش آمده است که بخواهید برای یک متن خود از دو کلاس استفاده نمائید ، یعنی شما دو کلاس متفاوت تعریف کرده اید و میخواهید به طور همزمان از این دو در متن خود استفاده نمائید برای این کار کافیست از یک فاصله یا Space در بین نام های کلاس خود استفاده نمائید مانند :

در این مثال ما همزمان دو کلاس text و side را در تگ paragraph خود اعمال نموده ایم.

3) مقادیر پیش فرض CSS Border :

زمانیکه شما یک استایل border تعریف می نمائید ، معمولا رنگ ، پهنا ، اندازه border و ... را تنظیم می کنید ، برای مثال :

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

اما Default چه مواری هستند :

1) پهنای پیش فرض از مقدار 3 پیکسل تا 4 پیکسل می باشد .

2) رنگ پیش فرض همان رنگ صفحه شما می باشد ، اگر شما رنگ متن خود به رنگ قرمر درآورد ، رنگ border شما نیز به رنگ قرمر درخواهد آمد :

4) سند CSS برای موارد چاپی :

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

بنابراین اگر بخواهید شما از آن دسته مدیران سایتی باشید که به فکر صفحه Print مقالات خود نیز هستند ، کافیست در تگ header سایت خود دو فایل css را لینک دهید :

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

5) تکنیک قرار دادن تصویر :

شاید شما بخواهید ، یک متن را در بخش header سایت خود ، در تمامی صفحات خود به نمایش بگذارید ، چون که شما می خواهید در تمام صفحات این متن شما وجود داشته باشد ، شاید بهتر است که از یک تصویر استفاده نمائید که برای این کار مثلا از دستور زیر استفاده می نمائید :

تا به اینجا همه چی عالی و بدون هرگونه مشکل خاصی دیده می شود ، در ضمن مقدار alt برای موتورهای جستجو اهمیت فراوانی دارد ، ولی همانطور که میدانید تگ h1 اهمیتی بیشتر نسبت به alt برای موتورهای جستجو دارد ، برای اینکار بهتر نیست که از متن خود در تگ h1 استفاده نمائید به همراه تصویر :

دستور فوق به این معنا است که علاوه بر نمایش یک تصویر ، شعار سایت شما نیز به نمایش درخواهد آمد ، حال کد را می توانید تغییر دهید :

نکته :

این مورد تنها یک پیشنهاد است ، به هر حال شما مدیر سایت هستید و اختیار تام دارید .

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

    salam doste aziz manam daneshjoye pc hastam mishe dar morede kod nevisi mano rahnamayi kuni montazeret hastam age mitoni mail bezan ke az koja shoro kunam chi behtare html ham baladam

    • ‏‏
      میلاد حیدری(۲۵ شهریور ۱۳۹۱)

      سلام
      از آشنایی با شما خوشبختم

      برای شروع کد نویسی در ابتدا باید با html و css آشنا شوید ، در قدم بعدی شما باید با layout بندی یک قالب آشنایی پیدا کنید برای اینکار باید کمی سلیقه و خلاقیت به خرج دهید که می توانید از این مقاله استفاده کنید ، در قسمت های بعدی شما می توانید با جاوا اسکرریپت و php آشنایی پیدا کنید ، راهنمایی بیشتر خواستید تماس بگیرید

  • ‏‏

    ممنون

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram