این امر در مورد نسخه های کاری فایل ها با استفاده از HTML، CSS و GSS صدق می کند

استفاده از هر ابزاری برای به حداقل رساندن کامپایل یا مبهم سازی کد مجاز است، مشروط بر اینکه کیفیت کلی کد حفظ شود.

نام پروتکل (http:, https:) را در پیوندهای تصاویر یا سایر منابع رسانه، فایل‌های سبک یا اسکریپت‌ها حذف کنید، البته اگر این فایل‌ها از طریق هر دو پروتکل در دسترس باشند.

توصیه نمیشود:
توصیه شده:
توصیه نمی شود: .example ( پس زمینه: url(http://www.google.com/images/example)؛ )
توصیه شده: .example ( پس زمینه: url(//www.google.com/images/example)؛ )

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

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

فاصله ها در انتهای خطوط اختیاری هستند و استفاده از diff را پیچیده می کنند.

مطمئن شوید که ویرایشگر شما از رمزگذاری UTF-8 بدون علامت سفارش بایت (BOM) استفاده می کند.

رمزگذاری را در قالب ها و اسناد HTML با استفاده از . رمزگذاری برای فایل های css را حذف کنید: UTF-8 به طور پیش فرض برای آنها تنظیم شده است.

(شما می توانید در مورد رمزگذاری ها و نحوه استفاده از آنها در این پیوند بیشتر بیاموزید: مجموعه کاراکترها و رمزگذاری در XHTML، HTML CSS.)

از نظرات برای توضیح کد خود استفاده کنید: چه کاری انجام می دهد، چه کاری انجام می دهد و چرا راه حلی که انتخاب می کنید استفاده می شود.

(این نکته اختیاری است زیرا انتظار نمی رود کد همیشه به خوبی مستند باشد. سودمندی نظر دادن به پیچیدگی پروژه بستگی دارد و ممکن است برای کدهای HTML و CSS متفاوت باشد.)

وظایف را با استفاده از کلمه کلیدی TODO علامت گذاری کنید. از دیگر قالب‌های رایج مانند @@ استفاده نکنید.

مخاطبین (نام کاربری یا لیست پستی) را در پرانتز قرار دهید: TODO (تماس) .

کار را بعد از دو نقطه توصیف کنید، به عنوان مثال: TODO: Task.

توصیه می شود: (# TODO(ایوان ایوانف): با هم ترازی # مقابله کنید
توصیه شده:

• خیارها
• گوجه فرنگیها

(توصیه می شود از HTML با نوع محتوای متنی/html استفاده کنید. از XHTML استفاده نکنید، زیرا برنامه/xhtml+xml پشتیبانی ضعیفی از مرورگر دارد و گزینه های بهینه سازی را محدود می کند.)

از کد HTML معتبر استفاده کنید مگر اینکه استفاده به شما اجازه ندهد به اندازه فایل مورد نیاز برای سطح عملکرد مطلوب برسید.

اعتبار سنج W3C HTML (انگلیسی) برای بررسی اعتبار کد.

اعتبار یک کیفیت مهم و قابل اندازه گیری کد است. نوشتن HTML معتبر یادگیری الزامات و محدودیت های فنی را ارتقا می دهد و استفاده صحیح از HTML را تضمین می کند.

توصیه نمی شود: فقط چک کنید
توصیه می شود: فقط یک چک را بررسی کنید.

از عناصر (گاهی اوقات به اشتباه "برچسب ها" نامیده می شود) برای اهداف مورد نظر خود استفاده کنید: عنوان برای سرفصل ها، p برای پاراگراف ها، a برای پیوندها و غیره.

این کار خواندن، ویرایش و نگهداری کد را آسان‌تر می‌کند.

سعی کنید محتوای جایگزین برای رسانه ها، مانند تصاویر، فیلم ها یا انیمیشن هایی که با استفاده از بوم تعریف شده اند، ارائه دهید. برای تصاویر، این یک متن جایگزین معنادار (alt) و برای ویدیو و صدا، در صورت امکان، رونوشت متن و زیرنویس است.

محتوای جایگزین ممکن است به افراد دارای معلولیت کمک کند. به عنوان مثال، اگر @alt برای آن تنظیم نشده باشد، درک آنچه در تصویر وجود دارد برای یک فرد کم بینا دشوار است. سایر افراد ممکن است در درک آنچه در یک ویدیو یا ضبط صدا گفته می شود مشکل داشته باشند.

(اگر alt تصویر اضافی است، یا فقط برای اهداف تزئینی در مکان‌هایی که نمی‌توان از CSS استفاده کرد، از یک متن جایگزین خالی alt="" استفاده کنید.)

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

اطمینان حاصل کنید که اسناد و الگوها فقط حاوی HTML هستند و HTML فقط برای تعریف ساختار سند خدمت می کند. تمام کدهای مسئول طراحی را به فایل های سبک و کدهای مسئول رفتار را به اسکریپت ها منتقل کنید.

سعی کنید تقاطع آنها را با گنجاندن حداقل تعداد فایل های سبک و اسکریپت در قالب های خود به حداقل برسانید.

جداسازی ساختار از ارائه و رفتار به آسان‌تر نگه‌داشتن کد کمک می‌کند. تغییر قالب ها و اسناد HTML همیشه بیشتر از تغییر فایل های سبک یا اسکریپت ها طول می کشد.

توصیه نمی شود: HTML مکنده HTML است

قبلاً در مورد این موضوع قبلاً خوانده بودم، اما اکنون همه چیز قطعاً روشن است: HTML کاملا آشغال است!!1من نمی توانم باور کنم که برای تغییر طراحی، باید هر بار همه چیز را دوباره از نو انجام داد.
توصیه شده: اولین طراحی مجدد من فقط با CSS طراحی جدید CSS من

قبلاً در این مورد خوانده بودم، اما در نهایت خودم این کار را انجام دادم: من از اصل جداسازی نگرانی ها استفاده می کنم و طرح را به HTML وارد نمی کنم

چقدر باحال!

تنها استثنای این قانون، کاراکترهای سرویس HTML هستند (مثلا< и & ) а так же вспомогательные и “невидимые” символы (например неразрывный пробел).

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

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

توصیه نمی شود: ما بایت ها را هدر می دهیم - ما پول را هدر می دهیم.
توصیه می شود: بایت ها پول هستند!

به طوری که

هنگام اتصال استایل ها (به جز زمانی که از چیزی غیر از CSS استفاده می کنید) و اسکریپت ها (به جز زمانی که از چیزی غیر از جاوا اسکریپت استفاده می کنید) از ویژگی type استفاده نکنید.

تعیین ویژگی type در این مورد ضروری نیست زیرا HTML5 به طور پیش فرض از text/css (انگلیسی) و text/javascript (انگلیسی) استفاده می کند. این حتی در مرورگرهای قدیمی کار خواهد کرد.

توصیه نمیشود:
توصیه شده:
توصیه نمیشود:
توصیه شده:

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

همچنین، تمام عناصر تو در تو در یک بلوک یا عنصر جدول را تورفتگی کنید.

(اگر با فضای خالی بین عناصر لیست مشکل دارید، می توانید تمام عناصر li را در یک خط قرار دهید. توصیه می شود که Lint به جای خطا در این مورد اخطار صادر کند.

• ماشا
• گلاشا
• چبوراش

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

از ابزارهایی مانند W3C CSS Validator برای اعتبارسنجی کد خود استفاده کنید.

اعتبار یک کیفیت مهم و قابل اندازه گیری کد است. نوشتن CSS معتبر به حذف کدهای اضافی کمک می کند و استفاده صحیح از شیوه نامه ها را تضمین می کند...

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

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

استفاده از نام های کاربردی یا الگو، نیاز به تغییرات غیر ضروری در سند یا الگوها را کاهش می دهد.

منسوخ شده: /* منسوخ شده: بی معنی */ #yee-1901 () /* منسوخ شده: شرح ظاهر */ .button-green() .clear()
توصیه می شود: /* توصیه می شود: دقیق و به نقطه */ #gallery () #login () .video () /* توصیه شده: نام الگو */ .aux () .alt ()

سعی کنید در عین اینکه تا حد امکان مختصر باشید، دقیقاً چه کاری باید انجام دهد.

این استفاده از کلاس‌ها و شناسه‌ها به درک راحت‌تر و کارآمدتر کد کمک می‌کند.

مگر اینکه کاملاً ضروری باشد (مثلاً با کلاس های کمکی)، از نام عناصر با نام کلاس ها یا شناسه ها استفاده نکنید.

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

استفاده از علامت گذاری مختصر ویژگی برای کارایی بیشتر و درک بهتر کد شما مفید است.

توصیه نمی شود: /* توصیه نمی شود */ border-top-style: هیچ; font-family: palatino, georgia, serif; اندازه فونت: 100%; ارتفاع خط: 1.6; بالشتک پایین: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
توصیه می شود: /* توصیه می شود */ border-top: 0; فونت: 100%/1.6 palatino, georgia, serif; بالشتک: 0 1em 2em;

واحدها را برای مقادیر صفر مشخص نکنید مگر اینکه دلیلی برای این کار وجود داشته باشد.

0 را در قسمت عدد صحیح در مقادیر بین -1 و 1 قرار ندهید.

از نقل قول (""، "") با url() استفاده نکنید.

نماد هگزادسیمال سه نویسه برای رنگ ها کوتاه تر است و فضای کمتری را اشغال می کند.

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

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

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

توصیه نمی شود: /* توصیه نمی شود: کلمات "دمو" و "تصویر" از هم جدا نیستند */ .demoimage () /* توصیه نمی شود: به جای خط فاصله از خط خط استفاده می شود */ .error_status ()
توصیه می شود: /* توصیه می شود */ #video-id().ads-sample()

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

اعلان ها را به ترتیب حروف الفبا تعریف کنید تا اطمینان حاصل کنید که کدی سازگار است که کار با آن آسان است.

هنگام مرتب سازی، پیشوندهای مرورگر را نادیده بگیرید. علاوه بر این، اگر چندین پیشوند مرورگر برای یک ویژگی استفاده شود، آنها نیز باید مرتب شوند (به عنوان مثال -moz باید قبل از --webkit باشد)

برای نشان دادن سلسله مراتب و درک بهتر کد، همیشه هر محتوای بلوکی، مانند قوانین درون قوانین یا اعلامیه ها را تورفتگی کنید.

پس از هر اعلان برای سازگاری کد و آسان‌تر کردن افزودن ویژگی‌های جدید، از یک نقطه ویرگول استفاده کنید.

همیشه از یک فاصله بعد از دو نقطه (اما نه قبل از) در اعلان ها برای ترتیب در کد استفاده کنید.

هر انتخابگر یا اعلان را در یک خط جدید شروع کنید.

همیشه بین قوانین فاصله بگذارید.

تا جایی که امکان دارد، گروه با هم قوانین را انجام دهید. گروه های دارای نظرات را مشخص کنید و آنها را با شکست خط جدا کنید.

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

ایده این راهنما ایجاد یک واژگان مشترک است که به توسعه دهندگان اجازه می دهد تا بر آنچه می خواهند بیان کنند تمرکز کنند، نه اینکه چگونه.

ما قوانین طراحی یکنواختی را ارائه می دهیم که به شما امکان می دهد کد را به همان سبک بنویسید، اما سبک کدی که قبلاً در پروژه استفاده شده است نیز مهم است.

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

با تشکر از همه کسانی که تا اینجا مطالعه کردند.

مقاله کاملا مرتبط نیست
در نسخه 10.2 و بالاتر، امکان تغییر نام صفحه با قوانین سایت به طور مستقیم در پنل مدیریت موتور، هنگام ویرایش مستقیم متن قوانین اضافه شد. با این حال، صفحه با قوانین سایت باقی می ماند. وجود دارد و در هر وب سایت DLE در http://my_site/rules.html قرار دارد
چگونه تمام آب را از این آدرس بیرون بیاوریم - ادامه مطلب را بخوانید

صفحه قوانین سایت یک صفحه استاتیک سیستمی است. توسط موتور پردازش می شود و به همان روشی که یک صفحه ثابت معمولی تولید می شود. حذف آن غیرممکن است - توسط توسعه دهنده موتور ارائه نشده است. حتی اگر خود قوانین سایت برای نمایش در هنگام ثبت نام غیرفعال شوند، صفحه حاوی قوانین سایت همیشه در http://my_site/rules.html موجود است. عنوان. جای تعجب نیست از این گذشته، در تمام سایت های DLE این موضوع یکسان است.

هنگامی که صفحه ای با قوانین سایت در نقشه سایت قرار می گیرد، توسط موتور جستجو به عنوان "ناخواسته" در نظر گرفته می شود و در فهرست جستجو گنجانده نمی شود، زیرا قوانین سایت تقریباً در همه جا یکسان است. بنابراین، صفحه دارای قوانین سایت در DLE، به طور پیش فرض، از فهرست بندی جستجو در فایل (بسته) منع شده است ( خط Disallow: /rules.html).

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

نه، خوب، آیا کسی هنگام ثبت نام در فیس بوک یا توییتر قوانین شدید یا خاصی را دیده است؟ یا شاید آنها در VKontakte و Odnoklassniki هستند؟ همین موضوع!

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

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

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

ما گامی جسورانه برمی داریم و به موتورهای جستجو امکان دسترسی به صفحه قوانین سایت را می دهیم. برای انجام این کار، در فایل خود خط Disallow: /rules.html را پیدا کرده و آن را حذف می کنیم. انجام شده است! اکنون، هر ربات جستجوگر می تواند به طور رسمی وارد "قوانین سایت" باز شود و البته بگوید "Fe-e!" و "Be-e!" برای جلوگیری از این اتفاق، صفحه "قوانین سایت" را دوباره کار می کنیم - متن منحصر به فرد خود را در مورد هر موضوع، عکس وارد می کنیم و نام (عنوان) صفحه را تغییر می دهیم.

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

برای تغییر نام صفحه قوانین سایت
در مدل های قدیمی موتور -
باید فایل های سیستمی آن را جستجو کنید.

تغییر نام مستقیم خود صفحه "Site Rules" در فایل adminpanel.lng که در پوشه language/Russian/adminpanel.lng قرار دارد انجام می شود. فایل adminpanel.lng یک فایل سیستمی از موتور DLE است. برای ویرایش آن به سرور خود بروید (در غیر این صورت راهی وجود ندارد).

فایل adminpanel.lng را باز کنید.
به دنبال یک رشته
"rules_edit" => "قوانین عمومی در سایت"
ما کلمات "قوانین عمومی در سایت" را به نام جدید خود تغییر می دهیم. ببندیم پس انداز کنیم. (شما فقط می توانید الفبای سیریلیک را که بین نقل قول ها قرار دارد تغییر دهید. در غیر این صورت، به طور کلی کار نمی کند.)

کش موتور و مرورگر را پاک کنید. پس از ویرایش و ذخیره فایل adminlogs.lng، باید کش موتور و کش مرورگر را پاک کنید تا موتور مجبور شود صفحه جدیدی با نام جدید ایجاد کند و مرورگر آن را دانلود کند. اگر این کار کمکی نکرد و نام قدیمی همچنان نمایش داده شد، باید به پنل مدیریت موتور بروید، صفحه "قوانین سایت" را با یک علامت جزئی ویرایش و دوباره ذخیره کنید. به عنوان مثال، یک نقطه در متن قرار دهید (سپس می توانید همه چیز را اصلاح کنید). چنین قلدری و بی رحمی قطعاً مغز موتور و سرور را پاک می کند و آنها را مجبور به تولید و نمایش نام جدید می کند.

فکر کردن با صدای بلند. به نظر می رسد celsoft عزیز در حال خواندن این وبلاگ است. کمی بعد، پس از این انتشار، در پنل مدیریت نسخه موتور CMS DLE 10.2 امکان تغییر نام صفحه با قوانین سایت به روش معمولی متمدن و بدون پرداختن خسته کننده به فایل های اسکریپت سیستم فراهم شد. با تشکر فراوان از توسعه دهندگان CMS DLE برای کار و توجه آنها به مشکلات مردم عادی.

چگونه کد CSS صحیح بنویسیم؟

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

در زیر 15 قانون طلایی برای نوشتن کدهای CSS کاربر پسند و حرفه ای را ببینید

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

در اینجا نمونه ای از CSS-Reset است که از http://meyerweb.com/eric/tools/css/reset/index.html گرفته شده است.

/* نسخه 1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, مخفف, آدرس, big, cite, code, del , dfn, em, فونت, img, ins, kbd, q, s, samp, small, strike, قوی, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul , li, مجموعه فیلدها, فرم, برچسب, افسانه, جدول, عنوان, tbody, tfoot, thead, tr, th, td ( حاشیه: 0؛ بالشتک: 0؛ حاشیه: 0؛ طرح کلی: 0؛ اندازه قلم: 100%; عمودی-تراز: پس زمینه; قبل، q:after ( محتوا: ""؛ محتوا: هیچ، ) /* به یاد داشته باشید که سبک های فوکوس را تعریف کنید! */:focus ( طرح کلی: 0; ) /* به یاد داشته باشید که درج ها را به نحوی برجسته کنید! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* جداول همچنان به "cellspacing="0"" در نشانه گذاری */ جدول نیاز دارند ( border-collapse: collapse; border-spacing : 0 ;

مثلا برای نوشتن طولانی

حاشیه بالا: 5 پیکسل. حاشیه سمت راست: 10 پیکسل؛ حاشیه پایین: 15 پیکسل. حاشیه سمت چپ: 20 پیکسل؛

می توانیم به طور خلاصه بنویسیم:

حاشیه: 5px 10px 15px 20px;

یعنی در جهت عقربه های ساعت از بالا شروع می شود.

عمدتاً حاشیه، حاشیه، بالشتک، فونت و پس‌زمینه مخفف شده است.

می توانید در این مورد بیشتر ببینید

اما رنگ ها را می توان به این صورت کاهش داد:

اگر کد رنگ از 3 رقم تکرار شونده تشکیل شده است، می توانید به سادگی این سه رقم را یادداشت کنید.
به عنوان مثال: #FFFFFF را می توان به صورت #FFF نوشت، یا #990055 را می توان به صورت #905 نوشت، اما #F091A4 را نمی توان به اختصار نوشت.

از نظرات هر جا که باید استفاده کنید - آنها واقعاً به سازماندهی کد کمک می کنند و آن را برای خود و کسانی که با آن کار می کنند قابل درک تر می کنند.

چیزی شبیه این به نظر می رسد:

/* نظر شما اینجا */

اظهار نظر:

الف) عنوان صفحه سبک - بنویسید نویسنده کد کیست و چه زمانی نوشته شده است

ب) بخش‌های سبک را علامت‌گذاری کنید - با این کار همه کدها به بخش‌ها سازماندهی می‌شوند.
مثلا:

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

ورودی /* مشکل IE6 */

د) نظرات کوچکی را برای کسانی که با آنها کار می کنید بنویسید - به عنوان مثال، زمانی که چیزی نیاز به بهبود دارد.

با فایل های CSS کوچک، ردیابی تمام رنگ های سایت کار سختی نیست.
اما اگر 5000 خط کد داشته باشیم چه؟ - شما نمی توانید اجازه دهید از رنگ های اشتباه استفاده شود.
برای این منظور، یک افسانه رنگ وجود دارد - یعنی لیستی از رنگ هایی که در فایل خود استفاده می کنیم. مثلا:

/* /* آبی روشن: #4595be /* آبی تیره: #367595 /* قرمز برای پیوندها: #9F1212 ************************** ******/

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

Position:absolute شی را نسبت به صفحه قرار می دهد - مهم نیست در کجای جریان HTML قرار دارد. مقدار پیش فرض 0 در سمت چپ و 0 در بالا است.

معمولاً از این گزینه استفاده نمی شود زیرا ناخوشایند است و گزینه های محدودی دارد. اما چیزی که برای شما مفید خواهد بود این است که اگر والد ("wrapper") عنصر ما را روی Position: realtive قرار دهید، سپس Position: absolute نسبت به گوشه سمت چپ بالای والد تراز می شود. بنابراین می توانید در صورت نیاز این ویژگی را اضافه کنید. به وضوح در تصویر:

گاهی اوقات مرورگرهایی مانند IE6 و IE7 ما را مجبور به استفاده از هک می کنند. خاکی یک خطای فوری برای تایید کننده است. بنابراین آن را در فایل های css مخصوص هر مرورگر قرار دهید.
می توانید ورودی های ویژه هک برای هر مرورگر و نحوه قرار دادن آنها در فایل های جداگانه را مشاهده کنید

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

ایده این است: به جای استفاده از padding در والد، ما از حاشیه در عناصر فرزند استفاده می کنیم. بنابراین، به جای

#محتوای اصلی ( padding-left: 10px)

#محتوای اصلی ( ) #محتوای اصلی #ستون چپ ( حاشیه سمت چپ: 10 پیکسل )

استفاده از padding اشکالی ندارد، اما تجربه نشان می دهد که حاشیه بهتر است

اگر می خواهید یک float را به یک عنصر اختصاص دهید، سرریز: hidden را برای والد آن بنویسید

Ul (سرریز: پنهان؛ ) ul li (شناور: سمت چپ؛)

بدون این ویژگی، ممکن است هنگام تنظیم حاشیه ها یا حاشیه ها، عنصر به طور غیرجذابی جریان یابد.

اگر می خواهید عنصر شناور نباشد، clear:both را در زیر عنصر floated مشخص کنید. این اغلب به جای سرریز استفاده می شود: پنهان;

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

صفحه نمایش: درون خطی /* مشکل IE6 */

برای عنصری که یک شناور روی آن اعمال شده است

تصاویر Sprite چیز بسیار مناسبی هستند. آنها یک نمای کلی از کل گرافیک صفحه ارائه می دهند و زمان بارگذاری را کاهش می دهند.

اگر انگلیسی بلد هستید، اینجاست

برای شفاف سازی ساختار سایت وقت بگذارید. همه چیز را در قفسه ها قرار دهید.
مثلا:

در اینجا "نام وب سایت" نام سایتی است که ما با آن کار می کنیم. این پوشه حاوی فایل‌های HTML برای سایت، به علاوه پوشه‌های دارایی‌ها و سبک‌ها است.
پوشه دارایی ها حاوی فایل هایی است که می توان از سایت دانلود کرد، به عنوان مثال، آرشیو یا فایل های PDF. پوشه styles به نوبه خود شامل پوشه های css، images، javascript است.

• css - شامل تمام فایل های css مانند reset.css، layout.css و main.css است.
• تصاویر - تمام تصاویر سایت. این پوشه را می توان به بخش هایی نیز تقسیم کرد.
• جاوا اسکریپت - همه فایل های جاوا اسکریپت.

این نمودار تقریبی است و به روش های مختلف قابل نمایش است. ایده این است که به شما کمک می‌کند سریع‌تر کار کنید و سایت را شفاف‌تر و مرتب‌تر می‌کند.

توصیه اختیاری - بهتر است نام کلاس ها و شناسه های سبک را به صورت درختی بنویسید تا همه چیز واضح و بصری باشد.

همه چیز بسیار ساده است - پیکسل ها کد را کمتر بارگیری می کنند، زیرا سند نیازی به محاسبه درصد مقادیر نسبی ندارد.

مشکل کمیت های نسبی، انتقال این نسبیت است.
برای روشن شدن موضوع با یک مثال توضیح می دهم:

body (اندازه قلم: 62.5٪) به معنای اندازه قلم: 1em، یعنی 10 پیکسل است.

اگر #محتوای وبلاگ به 14 پیکسل نیاز دارد، بنویسید:

#محتوای وبلاگ (اندازه قلم: 1.4em؛ )

حالا اگر تگ H3 داخل #blog-content به 20 پیکسل نیاز دارد، می‌توان آن را به این صورت تنظیم کرد:

#blog-content (اندازه قلم: 1.4em؛ ) #blog-content h3 (اندازه قلم: 2.0em)

همه چیز خوب خواهد بود، اما ما نسبیت داریم. و این 2.0em به 1.4em اعمال می شود
#blog-content’a، و در نتیجه، اندازه ای که به دست می آوریم 28 پیکسل است.

بنابراین از مقادیر ثابت استفاده کنید.

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

#header ul li:hover (پس‌زمینه رنگ: #900)

در IE6 کار نمی کند

این مشکل با جی کوئری برطرف شده است

در صورت امکان از انتخابگرها استفاده کنید

به عنوان مثال، به جای آن استفاده کنید

#main-content.main-header

#محتوای اصلی h1

مراقب گروه بندی انتخابگرها باشید

از این گذشته، اگر از آنها استفاده کنید، مقادیر نسبی می توانند در اینجا اشتباه بازی کنند

اگر در این مثال همه چیز خوب است،

Main-content div,.main-content p (رنگ: #000; )

در این یادداشت، مراقب مقادیر نسبی باشید.

Main-content div,.main-content p (ارتفاع خط: 1.3em؛ )

برای نوشتن کد موفق، از قرار دادن مداوم یک چیز در چیز دیگر و غیره خودداری کنید.
تگ های h1، ul و p را یاد بگیرید.
کلید موفقیت ساده است - تمرین، تمرین، تمرین

آموزش موفقیت آمیزی داشته باشی)

» »

اشتراک گذاری مراقبت است!

ویژگی Rules منسوخ شده است این ویژگی منسوخ شده است و نباید استفاده شود. پشتیبانی مرورگر از این ویژگی محدود است و استفاده از آن ممکن است نتایج غیرمنتظره ای ایجاد کند. در عوض، از CSS برای استایل دادن به جداول استفاده کنید.

RULES، یک ویژگی HTML 4.0، نشان می دهد که آیا باید مرزهای داخلی در جدول وجود داشته باشد. ما به هر یک از مقادیر RULES می پردازیم و نحوه استفاده از آنها را نشان می دهیم. RULES و FRAME روشی آزاردهنده برای تغییر پیش فرض های یکدیگر دارند. برای ساده‌تر کردن زندگی‌تان، یک قانون کلی وجود دارد: اگر از RULES استفاده می‌کنید، از FRAME و BORDER نیز استفاده کنید. جلوگیری از سردرگمی آسان‌تر است.

RULES=NONE به این معنی است که هیچ مرز داخلی وجود ندارد. RULES=NONE پیش‌فرض است اگر از BORDER استفاده نمی‌کنید یا آن را روی صفر قرار نمی‌دهید، اما در غیر این صورت باید به صراحت بیان شود که هیچ مرز داخلی ندارد. توجه داشته باشید که در حال حاضر Netscape قوانین را نمی‌شناسد.

RULES=ALL نشان می دهد که تمام مرزهای داخلی باید قابل مشاهده باشند. RULES=ALL معمولاً همراه با FRAME=VOID استفاده می شود تا مرزهای بیرونی وجود داشته باشد اما مرزهای داخلی وجود نداشته باشد.

وقتی روی یک جدول اعمال می شود، این مقدار این نتیجه را به ما می دهد:

COLS نشان می دهد که باید مرز بین ستون ها وجود داشته باشد اما بین ردیف ها وجود ندارد.

وقتی روی یک جدول اعمال می شود، این مقدار این نتیجه را به ما می دهد:

RULES=ROWS نشان می دهد که باید مرز بین سطرها وجود داشته باشد اما بین ستون ها نه.

وقتی روی یک جدول اعمال می شود، این مقدار این نتیجه را به ما می دهد:

RULES=GROUPS به شما امکان می دهد مرزهایی را بین گروه های سلول های جدول قرار دهید. دو روش برای گروه بندی سلول ها وجود دارد: ردیف و ستون. بیایید به هر یک از آنها بپردازیم توجه داشته باشید که در حال حاضر Netscape قوانین را تشخیص نمی دهد.

برای گروه بندی بر اساس ردیف از تگ های , , استفاده کنید. ردیف های سرصفحه جدول را نشان می دهد، بدنه اصلی جدول را نشان می دهد و ردیف های پایین را نشان می دهد. به عنوان مثال، این کد یک جدول با سه گروه ایجاد می کند. مرزها فقط بین گروه ها ظاهر می شوند:

در اینجا نحوه نمایش آن جدول آمده است:

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