امروز دوشنبه 04 شهریور 1398
css-learning.cloob24.com
    0
    صفت Border در زبان CSS این امکان را را برای ما فراهم میکند که خطوط حاشیه ای را برای عناصر HTML ایجاد کنیم. نه تنها میتوان این خطوط را ایجاد کرد بلکه حتی نوع استایل، پهنا و رنگ خطوط را نیز میتوان تعیین کرد. در این فصل با نحوه ی به کارگیری صفت Border آشنا میشویم.

    صفات Border در CSS

    صفات border در زبان CSS به شما اجازه خواهند داد که استایل، پهنا و رنگ یک border از یک عنصر را تعیین کنید.

    در عناصر مشخص شده در پایین، هرکدام از عناصر به روشی متفاوت از صفت border استفاده کرده اند:

    عنصری که هر چهار طرف آن دارای border است.

    عنصری که دارای یک border پایین به رنگ قرمز است.

    عنصری که دارای border دایره ای (گرد) در اطراف خود است.

    صفت border-style

    صفت border-style نوع border را برای نمایش مشخص میکند. مقادیر زیر برای این صفت استفاده میشود:

    dotted - یک border با استایل نقطه ای

    dashed - یک border با استایل خطوط فاصله

    solid - یک border با استایل خط مستقیم

    double - یک border با استایل دو خط مستقیم

    groove - یک border سه بعدی با استایل grooved. نوع اثر آن بستگی به مقدار صفت border-color دارد.

    ridge - یک border سه بعدی با استایل ridge. نوع اثر آن بستگی به مقدار صفت border-color دارد.

    inset - یک border سه بعدی با استایل inset. نوع اثر آن بستگی به مقدار صفت border-color دارد.

    outset - یک border سه بعدی با استایل outset. نوع اثر آن بستگی به مقدار صفت border-color دارد.

    none - بدون border

    hidden - یک border پنهان

    0
    از صفات background در زبان CSS برای تعریف افکت های پشت زمینه عناصر HTML استفاده میشود. در این فصل به انواع background ها در CSS خواهیم پرداخت.

    انواع background در CSS عبارت اند از:

    background-color

    background-image

    background-repeat

    background-attachment

    background-position

    صفت background-color

    صفت background-color رنگ پشت زمینه ی یک عنصر را مشخص میکند. رنگ background یک عنصر به صورت زیر تنظیم میشود:

    در CSS، یک رنگ اغلب به شکل های زیر مشخص میشود:

    یک نام معتبر برای یک رنگ - مانند "red"

    یک مقدار هگزادسیمال - مانند "ff0000#"

    یک مقدار RGB - مانند "(rgb(255,0,0"

    صفت background-image

    صفت background-image یک تصویر را به عنوان تصویر پشت زمینه ی یک عنصر مشخص میکند. به صورت پیشفرض، تصویر آنقدر تکرار خواهد شد تا فضای کل عنصر را پوشش دهد.

    نکته: در تابع ()url آدرس اینترنتی تصویر قرار می گیرد. در مثال بالا فقط از نام تصویر به عنوان پارامتر برای این تابع استفاده شده است که اشاره به نسبی بودن آدرس تصویر دارد.

    Background Image - تکرار به صورت افقی و عمودی

    به صورت پیشفرض صفت background-image یک تصویر را هم به صورت افقی و هم به صورت عمودی تکرار میکند. بعضی از تصاویر نیاز است تنها به صورت افقی و یا به صورت عمودی تکرار شوند.

    0
    از صفات Margin برای ایجاد فضای خالی اطراف عناصر HTML استفاده می شود.
    در این فصل با انواع صفات margin، نحوه ی مقدار دهی آنها، و انواع مقادیر برای آنها آشنا خواهیم شد.

    صفات Margin در CSS

    از صفت margin در زبان CSS برای تولید فضا در اطراف عناصر HTML استفاده می شود.

    صفات margin اندازه ی فضای خالی خارج از border را برای یک عنصر تعیین می کند.

    با استفاده از زبان CSS کنترل کاملی روی صفات margin خواهید داشت.

    شما میتوانید برای هر سمت از عنصر با استفاده از صفات margin ایی که در CSS فراهم شده است، مقدار فضای خالی را تنظیم کنید.

    Margin - تنظیم مقدار صفت margin برای هر سمت به طور جداگانه

    زبان CSS دارای صفاتی است که میتوان مقدار margin را برای هر سمت از یک عنصر HTML تنظیم کرد. این صفات عبارت اند از:

    margin-top

    margin-right

    margin-bottom

    margin-left

    همه ی صفات margin میتوانند دارای مقادیر زیر باشند:

    auto - در این حالت مرورگر مقدار margin را محاسبه میکند.

    اندازه - در این حالت مقدار صفات margin توسط اندازه هایی در واحد های پیکسل، سانتیمتر و. مشخص میشود. 

    % - در این حالت مقدار margin با استفاده از درصدی از پهنای عنصر مورد نظر مشخص میشود.

    inherit - مقداردهی صفات margin با مقدار inherit به معنای این است که مقدار margin از عنصر پدرش به ارث برده می شود.

    نکته: برای مقدار دهی صفات margin از مقادیر منفی هم می توان استفاده کرد. 

    Margin - صفت کوتاه شده

    برای کوتاه نویسی در کد میتوان تمام صفات margin را که در لیست زیر آورده شده است در یک صفت خلاصه نویسی کرد:

    margin-top

    margin-right

    margin-bottom

    margin-left

    0
    از صفات Padding برای ایجاد فضای خالی اطراف محتوای یک عنصر استفاده میشود. در این فصل با انواع صفات padding، نحوه ی مقدار دهی آنها، و انواع مقادیر برای آنها آشنا خواهیم شد.

    صفت padding در CSS

    صفت padding در CSS برای ایجاد فضا اطراف محتوای یک عنصر استفاده میشود.

    فضایی که توسط صفت padding ایجاد میشود بین محتوای یک عنصر و خط دور(border) آن عنصر قرار دارد.

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

    Padding - تنظیم مقدار صفت padding برای هر سمت به طور جداگانه

    زبان CSS دارای صفاتی است که میتوان مقدار padding را برای هر سمت از یک عنصر HTML تنظیم کرد. این صفات عبارت اند از:

    padding-top

    padding-right

    padding-bottom

    padding-left

    همه ی صفات padding میتوانند دارای مقادیر زیر باشند: 

    اندازه - در این حالت مقدار صفات padding توسط اندازه هایی در واحد های پیکسل، سانتیمتر و. مشخص می شود. 

    % - در این حالت مقدار padding با استفاده از درصدی از پهنای عنصر مورد نظر مشخص میشود.

    inherit - مقداردهی صفات padding با مقدار inherit به معنای این است که مقدار padding از عنصر پدرش به ارث برده می شود.

    0
    انعطاف بالایی دارد و کارهایی که ما بخواهیم با استایل صفحات انجام دهیم را با روش‌های مختلف و سلکتورهای متعدد می‌توان انجام داد.

    انتخاب موثر در سلکتورهای CSS

    با همه کدهای زیر می‌توان color یک li خاص که دارای id برابر با xyz است را عوض کرد:

    * {color:blue;}li{color:green;}li:first-line {color:yellow;}ul li {color:aqua;}ul ol+li{color:pink;}h1 + *[rel=up]{color:navy;}ul ol li.red{color:red;}li.red.level{color:orange;}#xyz {color:silver;}style="color:gray;"

    اما هم بحث کارآیی مهم است (که در ادامه خواهیم گفت) و هم بحث تقدم
    کدام‌یک از انتخابگرهای فوق موثر واقع خواهد شد؟
    پاسخ: به ترتیب از پایین به بالا. توضیحبیشتر در W3
    برای محاسبه تقدم و موثر بودن یک انتخاب‌گر، می‌توانید از این محاسبه‌گر آنلاین تقدم css طبق لینکبالا استفاده کنید.

    کارایی (Performance) در CSS

    با بزرگ شدن یک سایت و افزایش حجم css آن، بحث performance اهمیت می‌یابد چرا که:

    • برخی کدهای css (مانند visibility:hidden) موجب تغییر در DOM می‌شود و مرورگر مجبور است موقعیت عناصر را کلا دوباره محاسبه کند
    • برخی کدهای css (در نسخه 3 به بعد) حاوی انیمیشن یک المان است
    • برخی کدهای css نسبت به حرکات کاربر قرار است واکنش نشان دهد (مثل hover)
    • و.

    و در یک css بزرگ (مثلا 200,000 خط کد css) خود css موجب کندی سایت می‌شود.
    در این خصوص کتب متعددی نوشته شده (مثل کتاب Developing Large Web Applications و.)
    در ادامه چند نمونه از نکاتی که (هرچند موجب کاهش خوانایی کد css می‌شود) اما باعث افزایش پرفرمنس و سرعت css می‌شود، ذکر می‌شود:

    • حذف نام تگ در مورد غیر ضروری
      مثلا بجای ul#myID بهتر است از #myID استفاده شود.
    • حذف والدهای غیرضروری
      مثلا بجای html div table tr td بهتر است از td استفاده شود.
    • اجتناب از بکار بردن انتخابگر همه (ستاره)
      مثلا استفاده از * یا .myClass * به هیچ‌وجه توصیه نمی‌شود.
    • از chain کردن اجتناب کنید
      مثلا بجای .icon.small بهتر است یکی از کلاس‌ها را بکار ببرید یا اینکه از یک انتخابگر مجزا استفاده کنید مثل .icon-small
      خاطرنشان می‌شود که chain کردن علاوه بر پرفرمنس، اشکالات متعدد دیگری هم دارد. مثلا در برخی براوزرهای قدیمی (IE) کار نمی‌کند و همچنین در برخی براوزرهای مدرن نیز به صورت ناقص کار می‌کند.

    در خصوص پرفرمنس مطلب زیاد است و این مطلب در آینده تکمیل خواهد شد.

    0
    طراحی و در حقیقت «توسعه سطح کاربر» برای وب‌سایتی که قرار است محتوایش را کاربران غیرحرفه‌ای ویرایش کنند، مشکلاتی سوای مشکلات معمول توسعه یک وب‌سایت عادی دارد. این روزها بیشتر مشتریان می‌خواهند توانایی مدیریت محتوای خودشان را داشته باشند. بنابراین بیشتر طراحان متوجه خواهند شد که بیشتر طراحی‌هایشان، اگر نگوییم همه‌شان، در حد قالب‌هایی مثل CMS خواهند ماند.

    نکات مهم در طراحی وب‌سایت

    دشمن‌تان را بشناسید

    این که سیستم‌های مدیریت محتوا چقدر در ویرایش محتوا به کاربر آزادی بدهند، قانون ثابتی ندارد. به‌عنوان یک طراح ابتدا باید بفهمید در مقابل سیستم قالب‌گذاری CMS انتخابی‌تان چقدر کنترل دارید. این کنترل ممکن است در حد توانایی ویرایش قالب‌های موجود یا به پیچیدگی تغییر کلی CMS برای طراحی‌تان باشد. در برخی محصولات قدیمی‌تر CMS ممکن است ببینید کنترل کمی روی نشانه‌گذاری‌هایی که در صفحه وارد شده‌اند دارید. اگر کاربران CMS قادر باشند HTML خودشان را وارد کنند، می‌توانید بفهمید طراحی‌تان چقدر در مقابل این اتفاقات مقاوم است. شرایط ایده‌آل برای یک طراح زمانی است که کاربر، قابلیت محدودی برای وارد کردن نشانه‌گذاری‌هایش داشته باشد و CMS از بلاک‌های محتوای ساخت‌یافته برای هدایت آنها با افزودن محتوا در شیوه صحیح استفاده کند و سپس بدرستی توسط قالب‌ها نشانه‌گذاری شوند.

    سازگار نگه دارید

    هر چقدر سیستم مدیریت محتوای منعطف‌تری داشته باشید، باید سازگاری قالب‌های خود را بیشتر در نظر بگیرید. این‌که چند ویرایشگر محتوا تربیت کنید، بسیار ساده‌تر از این است که بخواهید سیستم سازگاری داشته باشید.

    اگر با هر نوعی از محتوای ساخت‌یافته در طراحی‌تان كار می‌کنید، هر بخش را به‌عنوان یک بلاک تکرارشونده قلمداد کنید. توسط CSS3 براحتی می‌توانیم هر آیتمی یا حتی آیتم آخر را هدف بگیریم. البته این قابلیت برای مرورگرهای قدیمی دردسترس نیست و ممکن است ویرایش کد پشتیبان CMS برای افزودن یک کلاس برای هر آیتم دیگر یا آخرین آیتم امکان‌پذیر نباشد.

    زمانی که با نواحی‌ای سر و کار دارید که الزاما بلوک‌های بزرگ محتوایی هستند و کاربر روی نشانه‌گذاری آنها کنترل کامل دارد، اصلا فرض نکنید که کاربر خودش تشخیص می‌دهد که باید کلاس‌های CSS را اضافه کند تا جلوه‌هایی که شما برای این سیستم در نظر گرفته‌اید را پیاده کند.

    نکات مهم در طراحی وب‌سایت

    اجتناب از به‌کارگیری عکس به‌جای متن

    ممکن است تصاویر را با کمک PHP و دیگر زبان‌ها در سمت سرور ایجاد کرد، اما سیستم مدیریت محتوای شما نمی‌تواند این قابلیت را به‌عنوان مساله‌ای استاندارد ارائه کند، چون همواره باید فکر فونت‌های غیراستانداردی که در طراحی‌تان قرار می‌گیرد نیز باشید.

    همین شرایط با استفاده از فونت‌ها ساده‌تر است و سرویس‌های زیادی همین الان هستند که می‌توانید از هر فونتی که تمایل دارید در وب‌سایت خود استفاده کنید و نیازی هم نباشد که روی کامپیوتر کاربر نصب شده‌ باشند.

    در نظر گرفتن سیستم مدیریت محتوا هنگام ایجاد منو

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

    نکات مهم در طراحی وب‌سایت

    با اطلاعات واقعی آزمایش کنید

    زمانی‌که طراحی در HTML و CSS توسعه پیدا کرد، فرضیات‌ خود را از نظر رفتاری که طراحی در برابر محتوا نشان می‌دهد، بیازمایید. اگر این کار پیش از این که قالب‌ها در CMS گنجانده شوند، انجام شود، بهتر خواهد بود.

     

    به ویراستاران محتوا در نگهداری طراحی کمک کنید.

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

    حذف عملکردهای اضافی از واژه‌پرداز

    واژه‌پرداز WYSIWYG در CMS شما به‌طور پیش‌فرض قابلیت اضافه کردن هر نوع شکل و ظاهری را به متن می‌دهد. با این حال در بسیاری از همین واژه‌پردازها می‌توان نوار ابزار را محدود کرده و تنها به دکمه‌ها و استایل‌هایی که می‌خواهید کاربر به آن دسترسی داشته باشد، اجازه دیده شدن بدهید.