نسخه صفحه html قابل چاپ. چاپ سبک های CSS که فراموش کردم

Abbr:after ( محتوا: "(" attr(title)")"؛ )

10. چاپ پس زمینه اجباری

هدر (-webkit-print-color-adjust: exact; print-color-adjust: exact;)

11. پرسش های رسانه ای

صفحه رسانه @ و (دقیقه عرض: 48em) ( /* فقط صفحه */ )
چرا اینطور است؟ نکته این است که قوانین CSS فقط در صورتی اعمال می شوند که مقدار عرض حداقل 48em باشد و اگر نوع رسانه صفحه نمایش باشد. اگر کلمه کلیدی صفحه نمایش را از این درخواست رسانه حذف کنیم، فقط با مقدار حداقل عرض محدود می شود.

@media (دقیقه عرض: 48em) ( /* همه انواع رسانه */ )

12. چاپ کارت

نقشه (عرض: 400 پیکسل؛ ارتفاع: 300 پیکسل؛ تصویر پس‌زمینه: آدرس اینترنتی ")؛ -webkit-print-color-adjust: دقیق؛ print-color-adjust: دقیق؛ )

13. کدهای QR

14. در مورد چاپ صفحات غیر بهینه

برچسب ها:

• CSS
• مهر
• توسعه وب

این خطاهایی به نام "محتوای تکراری" را از بین می برد. محتوای تکراری به این معنی است که محتوای مشابه در چندین مکان (URL) در اینترنت ظاهر می شود. در نتیجه موتورهای جستجو نمی دانند کدام URL را در نتایج جستجو نشان دهند. این می تواند به رتبه بندی صفحه وب سایت آسیب برساند. مشکل زمانی جدی تر می شود که مردم شروع به مراجعه کنند نسخه های مختلفمحتوا. در این مقاله در مورد دلایل تکراری بودن مطالب صحبت می کنیم و برای هر کدام راه حل هایی پیدا می کنیم.

تصور کنید که در یک تقاطع هستید و تابلوهای راه در دو جهت هستند. جهت های مختلفبه همان مقصد نهایی: کدام جاده را باید طی کنید؟ و اگر در "بدترین" جهت بروید، انتهای مسیر نیز ممکن است کمی تغییر کند. به عنوان یک خواننده، شما اهمیتی نمی‌دهید: محتوایی را که به دنبالش بودید دریافت کردید. ولی سیستم جستجوباید انتخاب کند که کدام یک در نتایج جستجو نشان داده شود، زیرا نباید یک محتوا را دو بار نشان دهد.

فرض کنید مقاله شما در مورد «کلمه کلیدی x» در http://www.example.com/keyword-x/ و دقیقاً همان محتوا در http://www.example.com/article-category/keyword-x/ نمایش داده می شود. . این اتفاق در خیلی ها می افتد سیستم های مدرنمدیریت محتوا (CMS). مقاله شما توسط چندین وبلاگ نویس انتخاب شده است، برخی از آنها به نشانی اینترنتی اول و دیگران به نشانی اینترنتی دوم پیوند داده شده اند. این محتوای تکراری برای اموال آنلاین شما مشکل ساز است زیرا پیوندها URL های مختلف را به طور همزمان تبلیغ می کنند. اگر همه آنها به یک URL مرتبط باشند، رتبه شما در 10 مورد برتر برای کلمه کلیدی x بسیار بالاتر خواهد بود.

1. دلایل محتوای تکراری

دلایل زیادی وجود دارد که باعث ایجاد محتوای تکراری می شود. بیشتر آنها فنی هستند: خیلی اوقات اتفاق نمی افتد که شخصی تصمیم می گیرد محتوای یکسانی را در دو مکان مختلف پست کند بدون اینکه به منبع اصلی اعتبار بدهد. با این حال، دلایل فنی متعدد است. این عمدتاً به این دلیل اتفاق می افتد که توسعه دهندگان مانند یک مرورگر یا کاربر فکر نمی کنند، چه رسد به وب موتورهای جستجو، آنها مانند یک توسعه دهنده فکر می کنند. در مورد مقاله فوق که در http://www.example.com/keyword-x/ و http://www.example.com/article-category/keyword-x/ ظاهر می شود، چطور؟ اگر از توسعه دهنده بپرسید، می گوید که وجود دارد.

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

1.1. درک نادرست از معنای URL

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

1.2. شناسه های جلسه بازدید کننده

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

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

1.3. پارامترهای URL مورد استفاده برای ردیابی و مرتب سازی

یکی دیگر از دلایل محتوای تکراری استفاده از پارامترهای URL است که محتوای صفحه را تغییر نمی دهد، مانند ردیابی لینک ها. ببینید، http://www.example.com/keyword-x/ و http://www.example.com/keyword-x/?source=rss در واقع URL یکسانی برای موتور جستجو نیستند. دومی می تواند به شما اجازه دهد تا ردیابی کنید که بازدیدکنندگان شما از کدام منابع آمده اند، اما همچنین می تواند رتبه بندی را برای شما دشوارتر کند. یک عارضه جانبی بسیار ناخواسته!

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

1.4. تجزیه و پخش محتوا

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

1.5. ترتیب پارامترها

یکی دیگر از دلایل رایج این است که CMS از URL های زیبا و تمیز استفاده نمی کند، بلکه از URL هایی مانند /id=1&cat=2 استفاده می کند که ID به مقاله و cat به دسته اشاره می کند. URL/؟ Cat = 2 و id = 1 نتایج یکسانی را در اکثر موتورهای سایت ایجاد می کنند، اما در واقع در موتورهای جستجو کاملاً متفاوت هستند.

1.6. صفحه بندی نظرات

در وردپرس مورد علاقه من و همچنین در برخی سیستم های دیگر، امکان صفحه بندی نظرات وجود دارد. این منجر به محتوای تکراری در URL مقاله و URL مقاله + /comment-page-1/، /comment-page-2/ و غیره می‌شود.

1.7. نسخه چاپی

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

1.8. با WWW و بدون WWW

یکی از موقعیت های قدیمی: دامنه با WWW و بدون WWW، محتوای تکراری، در صورتی که هر دو نسخه سایت شما موجود باشد. وضعیت کمتر رایج دیگری که وجود دارد این است: http و httpsمحتوای تکراری زمانی است که یک محتوا به هر دو آدرس ارسال می شود.

2. راه حل مفهومی: URL "متعارف".

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

این مشکلی است که در چنین مواردی نیاز به راه حل اجباری دارد، زیرا فقط یک آدرس نهایی (URL) می تواند وجود داشته باشد. این URL "صحیح" باید توسط موتور جستجو به عنوان URL متعارف تعیین شود.

یادداشت کنایه آمیز

Canonical اصطلاحی برگرفته از سنت های کاتولیک رومی است که در آن فهرستی از کتب مقدس ایجاد شده و به عنوان معتبر پذیرفته شده است. آنها را اناجیل متعارف عهد جدید لقب دادند. و طنز ماجرا اینجاست: کلیسای کاتولیک رومی حدود 300 سال طول کشید تا این فهرست متعارف را به دست آورد و در نهایت 4 نسخه از یک داستان را انتخاب کردند...

3. چگونه محتوای تکراری را پیدا کنیم؟

ممکن است ندانید که آیا محتوای تکراری در سایت خود دارید یا خیر. در اینجا چند راه برای پیدا کردن وجود دارد:

3.1. گوگل وبمستر تولز

Google Webmaster Tool ابزاری عالی برای شناسایی محتوای تکراری است. اگر به ابزار برای وب مسترهای گوگلبرای سایت خود، به بخش ظاهر جستجو، بهینه سازی HTML مراجعه کنید و موارد زیر را مشاهده خواهید کرد:

مشکل این است که اگر مقاله ای مشابه مقاله ای در مورد "کلید واژه X" دارید و در دو دسته ظاهر می شود، ممکن است عنوان ها متفاوت باشند. آنها می توانند، برای مثال، " کلمه کلیدی X - رده X - سایت نمونه" و "کلمه کلیدی X - دسته Y - سایت نمونه". گوگل این عناوین را به عنوان تکراری انتخاب نمی کند، اما می توانید آنها را با جستجو پیدا کنید.

3.2. عناوین یا قطعات را جستجو کنید

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

Site:example.com intitle:"Keyword X"

سپس گوگل تمام صفحات example.com را که حاوی آن کلمه کلیدی هستند را به شما نشان می دهد. هرچه در مورد این قسمت از عنوان دقیق تر باشید، حذف محتوای تکراری آسان تر خواهد بود. شما می توانید از همین روش برای شناسایی محتوای تکراری در اینترنت استفاده کنید. فرض کنید عنوان کامل مقاله شما "Keyword X - Why It's Cool" بود، شما جستجو کرده اید: عنوان: "Keyword X - Why It's Cool"

گوگل تمام سایت هایی که با این نام مطابقت دارند را به شما می دهد. گاهی اوقات ارزش آن را دارد که یک یا دو جمله کامل از مقاله خود را جستجو کنید، زیرا برخی تجزیه کننده ها ممکن است عنوان را تغییر دهند.

4. راه حل های عملی برای کپی کردن مطالب

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

چهار روش راه حل به ترتیب اولویت وجود دارد:

1. محتوای تکراری ایجاد نکنید.
2. محتوای تکراری را به URL متعارف هدایت کنید.
3. یک عنصر پیوند متعارف را به یک صفحه تکراری اضافه کنید.
4. اضافه کردن لینک های HTMLاز صفحه تکراری به صفحه متعارف.

4.1. چگونه از محتوای تکراری جلوگیری کنیم؟

برخی از خطاهای محتوای تکراری بالا، راه‌حل‌های بسیار ساده‌ای دارند:

• از شناسه جلسه در URL های خود استفاده می کنید؟ آنها اغلب می توانند به سادگی در تنظیمات سیستم شما خاموش شوند.
• آیا صفحات تکراری برای چاپ دارید؟ این کاملا غیر ضروری است: فقط باید از یک برگه سبک چاپ استفاده کنید.
• از صفحه بندی نظرات در وردپرس استفاده می کنید؟ این ویژگی فقط باید (در تنظیمات "بحث") در 99٪ سایت ها غیرفعال شود.
• پارامترهای URL به ترتیب مختلف؟ به برنامه نویس خود بگویید اسکریپتی ایجاد کند که به آن اجازه می دهد پارامترها به همان ترتیب استفاده شوند.
• در پیگیری لینک ها مشکل دارید؟ در بیشتر موارد، می‌توانید از ردیابی کمپین مبتنی بر هش به جای ردیابی کمپین مبتنی بر پارامتر استفاده کنید.
• دو نسخه از سایت با WWW و بدون WWW؟ یک گزینه را انتخاب کنید و به آن بچسبید و یکی را به دیگری هدایت کنید. شما همچنین می توانید اولویت دهید ابزارهای گوگلبرای وب مسترها، اما شما باید هر دو نسخه نام دامنه را درخواست کنید.

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

4.2. 301 تغییر مسیر محتوای تکراری

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

4.3. استفاده از پیوندهای rel="canonical".

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

href="http://example.com/wordpress/seo-

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

این فرآیند کمی کندتر از تغییر مسیر 301 است که توسط جان مولر گوگل ذکر شده است که می توانید انجام دهید، که بسیار ترجیح داده می شود.

4.4. بازگشت به محتوای اصلی

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

5. نتیجه گیری: مطالب تکراری قابل اصلاح است و باید اصلاح شود!

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

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

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

راه حل - برگه های سبک چاپ

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

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

امروز می توانید هر سند (X)HTML را بردارید و آن را برای آن آماده کنید
با استفاده از شیوه نامه بدون دست زدن به نشانه گذاری چاپ کنید. و اینجا در
مشکلات ایجاد و همگام سازی دو نسخه مربوط به گذشته است
سند - یکی برای صفحه، دیگری برای چاپ. و چه چیزی بیشتر است
بهترین بخش: انجام آن آسان تر نیست.

ما در اطراف اشکال با عناصر شناور کار می کنیم

مرورگرهای خانواده Gecko مانند Netscape 6.x یا Mozilla دارند
مشکل با چاپ عناصر شناور طولانی
اگر یک عنصر شناور فراتر از صفحه چاپ شده باشد، پس
قسمت باقی مانده به طور کامل ناپدید می شود و هرگز در قسمت بعدی ظاهر نمی شود
صفحه

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

راه حل، همانطور که ممکن است انتظار داشته باشید، تنظیم کردن ویژگی است
"شناور" در نزدیکی بلوک با متن قبل از چاپ. خلاصه برای همه
عناصر شناور، قانون سبک "شناور: هیچ" تنظیم شده است.
با این کار تمام عناصر شناور را به ظاهر عادی خود برمی گردانید و
سند همانطور که انتظار می رود چاپ می شود - یک صفحه در یک زمان
صفحه تا آخر

بنابراین این همان کاری بود که من به زلدمن پیشنهاد کردم برای ALA انجام دهد و چگونه
به محض انجام این کار، مشکل مهر و موم از بین رفت. برای مرورگرهای خانواده
Gecko این اشکال هنوز برطرف نشده است (در زمان نوشتن
مقاله)، اما هنوز هم می توان با استفاده از روش پیشنهادی در بالا به راحتی آن را دور زد.

بیا به جاده بزنیم

در زیر شیوه نامه "چاپ شده" است که A List Apart برای حل مشکل چاپ عناصر شناور استفاده کرده است:

#menu (نمایش: هیچ؛ ) #wrapper، #content (عرض: خودکار؛ حاشیه: 0؛ حاشیه: 0 5%؛ بالشتک: 0؛ شناور: هیچ !مهم؛ )

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

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

اگر به محتوای تگ نگاه کنید مقالات جدید در وب سایت ALA، ما (در ضخامت پر کردن) خطوط زیر را خواهیم یافت:

ما یک فایل شیوه نامه به نام print.css داریم که از آن استفاده می کنیم
دستگاه های چاپ"print" با مقدار مشخصه "media" مشخص شد.
فایل Stylesheet nucss2.css که با استفاده از آن وارد شده است
ساختارهای import @ برای مخفی کردن آن از Navigator 4.x استفاده خواهد شد
هنگامی که صفحه در هر دستگاه خروجی نمایش داده می شود (ویژگی
رسانه=”همه”). این می تواند یک نمایشگر، چاپگر، پروژکتور، سینت سایزر باشد
سخنرانی ها و غیره با جدا کردن، می‌توانیم در شیوه نامه بنویسیم
دستورالعمل چاپ برای رنگ پس زمینهصفحات و مشخص کردن فونت در
پیکسل ها

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

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

بنابراین بیایید صفحه سبک چاپ خود را کمی بهبود بخشیم و چند مشکل دیگر طرح بندی را حل کنیم.

سفید کردن پس زمینه

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

از آنجایی که چاپگرها به رنگ سفید چاپ نمی شوند، پس زمینه صفحه را می سازیم
سفید. شما همچنین باید همه چیز را حذف کنید تصاویر پس زمینه، که
هنگام نمایش صفحه روی صفحه استفاده می شود.

اگر از ویژگی پس‌زمینه برای کمک فراخوانی کنیم، می‌توانیم در یک لحظه حل کنیم
هر دو مشکل برای انعطاف پذیری بیشتر محلول، عنصر را تنظیم می کنیم
"بدن" پس زمینه سفیدو اجازه دهید عناصر "wrapper" و "content" داشته باشند
پس زمینه شفاف (و بنابراین از طریق آنها ظاهر می شود رنگ سفید
"بدن"):

بدنه ( پس‌زمینه: سفید؛ ) #menu (نمایش: هیچ‌کدام؛ ) #پوشش، #محتوا (عرض: خودکار؛ حاشیه: 0 5%؛ بالشتک: 0؛ حاشیه: 0؛ شناور: هیچ !مهم؛ رنگ: مشکی؛ پس‌زمینه : شفاف؛ )

تنظیم رنگ پیش زمینه(رنگ فونت) مطلقاً وجود نداشت
لازم است، اما بهتر است آن را فراموش نکنید. خب حالا دوتا داریم
عنصر "غیر شناور" (#wrapper, #content) با پس زمینه شفاف، و
صفحه دارای پس زمینه سفید است.

ممکن است نگران این باشید که Navigator 4.x چگونه ارزش را مدیریت می کند
"شفاف"، اما بالای بینی: NN4.x فقط به جداول توجه می کند
سبک هایی با ویژگی "media" روی "screen" تنظیم شده است. همچنین
در مورد دستورالعمل @import، شیوه نامه های قابل چاپ ما همیشه هستند
از چشمان کور Navigator 4 پنهان شده است. بنابراین، اینجا چیزی برای صحبت کردن وجود ندارد
نگران بودن.

اندازه فونت برای چاپ

صفحه سبک عمومی اندازه فونت را 11 پیکسل تعیین می کند. خیلی
انتخاب بد هنگام چاپ خود خانواده فونت ابتدا گرجستان است،
و سپس serif - عالی برای چاپ، به عنوان فونت های سریف
معمولا روی کاغذ بهتر به نظر می رسند. شما فقط باید اندازه را تغییر دهید
فونت مثل این:

بدنه (پس زمینه: سفید؛ اندازه قلم: 12pt؛ )

احتمالاً فریاد خواهید زد: «صبر کن!» - "نقاط بد هستند!"

خب، بله، این همان چیزی است که او گفت، و کاملاً درست می‌گفت - این برای صفحه غیرممکن است
اندازه فونت را بر حسب نقطه تنظیم کنید هنگام چاپ همان کاربرد نقاط
همان حسی را دارد که چندین دهه پیش داشت. در حالی که ما در حال آشپزی هستیم
صفحه سبک برای چاپ، سپس اندازه فونت "body" را روی 12 تنظیم کنید
نکات صحیح و طبیعی خواهد بود.

البته می توانید هر اندازه ای را که می خواهید تنظیم کنید
فونت 12 نقطه ای رایج ترین است. و از آنجایی که در جدول کلی
سبک ها، اندازه همه عناصر صفحه دیگر نسبت به آن داده شده است
اندازه در عنصر "بدن"، کار ما انجام شده است.

مارجینالیا

قوانین سبک موجود برای مرزهای چپ و راست تنظیم شده است
(حاشیه) حجم و اندازه عناصر محتوا 5 درصد است. این بدان معنی است که در هر دو
طرف های مقاله خواهد بود " جای خالی"، و هر "جای خالی" از این قبیل خواهد بود
10٪ از عرض منطقه چاپ باشد. این یک نتیجه از این واقعیت است که بلوک با
متن مقاله "محتوا" در داخل بلوک قاب "wrapper" قرار دارد و
هر یک از آنها دارای 5 درصد حاشیه در سمت چپ و سمت راست.

مقاله مرتبط: Yandex.School of Webmasters

شیوه نامه معمولی اصلی 15% padding سمت راست را مشخص می کند.
برای بلوک "محتوا". مرزها قبلاً 10 درصد به ما داده اند، بنابراین ما نیاز داریم
5 درصد دیگر اضافه کنید. انجام آن به اندازه کافی آسان است:

div#content (حاشیه چپ: 10%؛ )

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

متأسفانه برخی از مرورگرها با adequate مشکل دارند
دستکاری padding به طوری که عناصر را بتوان در صفحه جابجا کرد
با مرزها بهتره

پیوندها هنگام چاپ

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

a:link, a:visited (رنگ: #520؛ پس‌زمینه: شفاف؛ وزن قلم: پررنگ؛ متن-تزیین: زیر خط بکشید؛ )

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

در مرورگری که به طور کامل از مشخصات CSS2 پشتیبانی می کند، می توانیم
نشانی‌های اینترنتی لینک‌ها را بعد از آن‌ها نمایش دهید و از این طریق خدماتی را به آن‌ها ارائه دهید
هر کسی که پرینت و مرورگر در دست دارد. در زیر قانون آمده است،
که فقط برای بلوک "محتوا" و در نتیجه URL ها اعمال می شود
لینک های دیگر چاپ نمی شوند:

#content a:link:after, #content a:visited:after ( محتوا: " (" attr(href) ") "؛ اندازه فونت: 90%؛ )

این را در مرورگرهای مبتنی بر Gecko - Mozilla یا Netscape امتحان کنید
6.x. در پرینت بعد از هر لینک لینک مربوطه را داخل پرانتز می بینید.
URL به آن.

مرورگرهایی که این قانون سبک را درک نمی کنند، هیچ کدام را نخواهند داشت
اثرات ناخواسته - پیوندها همچنان قرمز تیره خواهند بود،
خط کشیده و پررنگ فقط این است که پیوندها بعد از متن نمایش داده نمی شوند
URL مربوط به آنها، همین.

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

این قانون جدید یک مشکل زیبایی شناختی دارد. چیزی که است،
که دستور می دهد مقدار مشخصه را کلمه به کلمه در سند وارد کنید
href.

با نگاه کردن به کد هر صفحه از وب سایت A List Apart، ما به سرعت
بیایید توجه داشته باشیم که بسیاری از به اصطلاح "پیوندهای نسبی" فرم وجود دارد
"/issues/144". آنها همانطور که ظاهر می شوند در سند درج می شوند.
بله، اما من دوست دارم این آدرس ها کامل باشند.

در چنین مواردی CSS3 می تواند به ما کمک کند. هر انتخابگر ویژگی،
با استفاده از عملگر ^=، عناصر را بر اساس ابتدای آنها انتخاب می کند
مقادیر ویژگی بنابراین ما می توانیم هر ویژگی href را انتخاب کنیم.
با یک کاراکتر اسلش شروع کنید و متنی را در آنجا وارد کنید که جایگزین شود
ارزش موجودصفت.

#content a:after ( محتوا: " (//www.alistapart.com" attr(href) ") ";)

این قانون تمام مقادیری مانند "/issues/144/" را به
"//www.alistapart.com/issues/144/". این قانون کمکی نخواهد کرد
مورد با URL های نسبی که با اسلش شروع نمی شوند، اما
خوشبختانه ALA از این نوع مرجع استفاده نمی کند.

توجه! مهم! همانطور که گفته شد، یک انتخاب کننده از فرم ^=
به انتخابگرها در مشخصات CSS3 اشاره دارد. اعتبار سنجی برای CSS از
کنسرسیوم W3 فقط می تواند برای انطباق با مشخصات آزمایش کند
CSS1 و CSS2. بدون درک انتخابگر خاص CSS3، اعتباردهنده این کار را انجام خواهد داد
حتی زمانی که انتخابگر مغایرتی نداشته باشد، خطا را گزارش کنید
توصیه های مشخصات

تزئین بالای صفحه

با نگاهی دوباره به شیوه نامه نهایی، من
متوجه شدم که هدر صفحه را واقعا دوست ندارم. احتمالش بیشتر بود
نه در خود هدر، بلکه در همان "تاکید" نام سایت. این
البته خط زیر به همان جایی ختم شد که تصویر به پایان رسید
سرتیتر. ناگهان به ذهنم خطور کرد که خوب است این را دراز کنم
در تمام عرض صفحه زیر خط بکشید.