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

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

    شاید شما هم از جمله افرادی باشید که برای تغییرات فونت سایت خود از دستوری همانند دستور زیر استفاده می نمائید :
    1 font-weight: bold;
    2 font-style: italic;
    3 font-variant: small-caps;
    4 font-size: 1em;
    5 line-height: 1.5em;
    6 font-family: verdana,sans-serif ;

    اما این کد به نظر خیلی طولانی می آید ، آقای آوند در مورد ویژگی کاهش حجم css مقاله ای رو تنظیم کرده اند که می توانید از آن استفاده نمائید (اینجا) ، کد طولانی نه برای کد نویس چندان خوشایند می باشد نه برای مرورگرها که بخواهند این کد را بخوانند ، پس برای کوتاه کردن کد فوق می توانید از دستور زیر نیز استفاده نمائید :
    1 font: bold italic small-caps 1em/1.5em verdana,sans-serif

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

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

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

    حتما برای شما پیش آمده است که بخواهید برای یک متن خود از دو کلاس استفاده نمائید ، یعنی شما دو کلاس متفاوت تعریف کرده اید و میخواهید به طور همزمان از این دو در متن خود استفاده نمائید برای این کار کافیست از یک فاصله یا Space در بین نام های کلاس خود استفاده نمائید مانند :
    1 <p class="text side">...</p>

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

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

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

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

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

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

    2) رنگ پیش فرض همان رنگ صفحه شما می باشد ، اگر شما رنگ متن خود به رنگ قرمر درآورد ، رنگ border شما نیز به رنگ قرمر درخواهد آمد :
    1 h1{
    2 border: solid;
    3 color:red;
    4 }

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

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

    بنابراین اگر بخواهید شما از آن دسته مدیران سایتی باشید که به فکر صفحه Print مقالات خود نیز هستند ، کافیست در تگ header سایت خود دو فایل css را لینک دهید :
    1 <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
    2 <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

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

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

    شاید شما بخواهید ، یک متن را در بخش header سایت خود ، در تمامی صفحات خود به نمایش بگذارید ، چون که شما می خواهید در تمام صفحات این متن شما وجود داشته باشد ، شاید بهتر است که از یک تصویر استفاده نمائید که برای این کار مثلا از دستور زیر استفاده می نمائید :
    1 <h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

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

    دستور فوق به این معنا است که علاوه بر نمایش یک تصویر ، شعار سایت شما نیز به نمایش درخواهد آمد ، حال کد را می توانید تغییر دهید :
    1 h1
    2 {
    3 background: url(widget-image.gif) no-repeat;
    4 height: image height
    5 text-indent: -2000px
    6 }



    منبع :
    میهن وب گستر | هاستنیگ | پنل پیامک | طراحی سایت

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

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