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

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

    • - فهرست شماره گذاری شده (با استفاده از اعداد یا حروف) که هر عنصر آن دارای شماره سریال (حرف) است.
      1. - یک لیست گلوله‌دار (نه شماره‌دار) که در کنار هر عنصر یک نشانگر قرار می‌گیرد (به جای نویسه‌های عددی یا الفبایی که شماره سریال را نشان می‌دهند).
      • - یک لیست تعریف شامل جفت نام/مقدار، شامل اصطلاحات و تعاریف است.

      لیست های شماره گذاری شده

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

        (از فهرست انگلیسی مرتب شده - لیست شماره گذاری شده). کنار ظرف
          برای هر آیتم لیست یک عنصر قرار می گیرد
        1. (از فهرست انگلیسی - مورد فهرست). پیش فرض یک لیست شماره دار با اعداد عربی است.
          برچسب بزنید
            دارای نحو زیر است:

            1. عنصر 1
            2. عنصر 2
            3. عنصر 3

            آیتم های لیست شماره گذاری شده باید حاوی چندین آیتم لیست باشند، همانطور که در مثال زیر نشان داده شده است:

            مثال: فهرست شماره گذاری شده

            • خودت آن را امتحان کن "

            آموزش گام به گام

            1. کلید را دریافت کنید
            2. کلید را داخل قفل قرار دهید
            3. کلید را دو دور بچرخانید
            4. کلید را از قفل خارج کنید
            5. در را باز کن

            آموزش گام به گام

            1. کلید را دریافت کنید
            2. کلید را داخل قفل قرار دهید
            3. کلید را دو دور بچرخانید
            4. کلید را از قفل خارج کنید
            5. در را باز کن

            گاهی اوقات وقتی به کدهای HTML موجود نگاه می کنید، با استدلال مواجه می شوید نوعدر عنصر

              ، که برای نشان دادن نوع شماره گذاری (حروف، رومی و اعداد عربیو غیره.). نحو:

                در اینجا: تایپ کنید - نمادهای لیست:

                • الف - حروف بزرگ لاتین (A، B، C...)؛
                • الف - حروف لاتین کوچک (a، b، c...)؛
                • I - اعداد رومی بزرگ (I، II، III ...)؛
                • i - اعداد رومی کوچک (i، ii، iii...)؛
                • 1 - اعداد عربی (1، 2، 3 . . . .) (به طور پیش فرض استفاده می شود).

                اگر می خواهید لیست با عددی غیر از 1 شروع شود، باید این را با استفاده از ویژگی مشخص کنید شروع کنیدبرچسب زدن

                  .
                  مثال زیر یک لیست شماره گذاری شده با اعداد رومی بزرگ و مقدار شروع XLIX را نشان می دهد:

                  شماره گذاری را نیز می توان با استفاده از ویژگی شروع کرد ارزش، که به عنصر اضافه می شود

                1. به روش زیر:

                2. در این صورت شماره گذاری پی در پی لیست قطع می شود و از این نقطه شماره گذاری دوباره در این مورد از هفت آغاز می شود.

                  مثال استفاده از صفت ارزشبرچسب زدن

                3. ، که به شما امکان می دهد تعداد یک عنصر لیست داده شده را تغییر دهید:

                  در این مثال، «مورد فهرست اول» شماره 1، «مورد فهرست دوم» شماره 7 و «مورد فهرست سوم» شماره 8 خواهد بود.

                  قالب بندی لیست های شماره دار با CSS

                  برای تغییر شماره لیست باید از ویژگی استفاده کنید لیست-سبک-نوعشیوه نامه های CSS:

                    سبک های لیست شماره گذاری شده
                    مثالمعنیشرح
                    الف، ب، جآلفای پایین ترحروف کوچک
                    الف، ب، جآلفای بالاحروف بزرگ
                    i، ii، iiiرومی پاییناعداد رومی با حروف کوچک
                    I، II، IIIرمان بالاییاعداد رومی با حروف بزرگ

                    مثال: اعمال یک ویژگی CSS لیست-سبک-نوع

                    لیست های گلوله ای

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

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

                        • نکته اول
                        • نکته دوم
                        • نکته سوم

                        در مثال زیر، می بینید که به طور پیش فرض، یک نشانگر کوچک به شکل یک دایره پر شده قبل از هر آیتم لیست اضافه می شود:

                        داخل یک تگ

                      • قرار دادن فقط متن ضروری نیست، قرار دادن هر عنصری از محتوای جریانی (لینک ها، پاراگراف ها، تصاویر و غیره) قابل قبول است.

                        لیست های تو در تو

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

                        مثال: لیست های تودرتو

                        • خودت آن را امتحان کن "
                        • دوشنبه
                          1. ارسال ایمیل
                          2. بازدید از ویرایشگر
                            • انتخاب یک موضوع
                            • طراحی تزئینی
                            • گزارش نهایی
                          3. مشاهده عصرانه پیام ها
                        • سهشنبه
                          1. بازنگری برنامه
                          2. ارسال تصاویر
                        • چهار شنبه...

                        • دوشنبه
                          1. ارسال ایمیل
                          2. بازدید از ویرایشگر
                            • انتخاب یک موضوع
                            • طراحی تزئینی
                            • گزارش نهایی
                          3. مشاهده عصرانه پیام ها
                        • سهشنبه
                          1. بازنگری برنامه
                          2. ارسال تصاویر
                        • چهار شنبه...

                        قالب بندی لیست های گلوله ای

                        برای تغییر ظاهرویژگی فهرست نشانگر باید استفاده شود لیست-سبک-نوعشیوه نامه های CSS:

                          مثال زیر سبک های مختلف لیست های گلوله ای را نشان می دهد:

                          مثال: سبک های لیست گلوله

                          • خودت آن را امتحان کن "
                          • قهوه
                          • قهوه
                          • قهوه
                          • قهوه

                          دیسک:

                          • قهوه
                          • شیر

                          دایره:

                          • قهوه
                          • شیر

                          مربع:

                          • قهوه
                          • شیر

                          هیچ یک:

                          • قهوه
                          • شیر

                          نشانگرهای گرافیکی

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

                            مثال: نشانگرهای گرافیکی

                            • خودت آن را امتحان کن "

                            علائم زودیاک

                            • ثور
                            • جوزا

                            علائم زودیاک

                            • برج حمل
                            • ثور
                            • جوزا

                            فهرست تعاریف (توضیحات)

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

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

                            ساختار کلی فهرست توضیحات به شرح زیر است:

                            ترم اول
                            شرح ترم اول
                            ترم دوم
                            شرح ترم دوم

                            مثال زیر یکی از موارد را نشان می دهد استفاده های ممکنفهرست تعاریف:

                            مثال: لیست تعریف

                            • خودت آن را امتحان کن "

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

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

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

                            هنگامی که لازم است چیزی در یک وب سایت شماره گذاری شود، اغلب از یک لیست مرتب استفاده می شود (

                              ). منطقی است انتظار داشته باشیم که ممکن است تمایل به کار روی طراحی این اعداد وجود داشته باشد. با این حال، در CSS، تحقق این خواسته کاملاً مشکل است، اما، خوشبختانه، غیرممکن نیست. راجر جوهانسون در آموزش خود نشان می‌دهد که چگونه می‌توان این کار را با استفاده از شبه عنصر:before پیاده‌سازی کرد، که می‌تواند ویژگی محتوا را روی counter تنظیم کند.

                              شبه عنصر:before برای نمایش محتوای مورد نظر قبل از عنصری که به آن اضافه می شود استفاده می شود. در ارتباط با ویژگی محتوا کار می کند.

                              با این حال، شایان ذکر است که شمارنده‌های شماره‌دار را می‌توان در مواردی بیش از فهرست‌های سفارشی اعمال کرد. به عنوان مثال، فرض کنید می خواهید فهرستی از تعاریف را شماره گذاری کنید (

                              ) که شامل پرسش و پاسخ برای سؤالات متداول شما است.

                              نشانه گذاری چیزی شبیه به این خواهد بود:

                              اگر یک چاک چوبی می توانست چوب را بزند چقدر چوب می کند؟
                              1,000,000
                              سرعت هوای یک پرستو بدون بار چقدر است؟
                              منظورت چیه؟ پرستو آفریقایی یا اروپایی؟
                              چرا مرغ از خیابان رد شد؟
                              برای رسیدن به طرف دیگر

                              هر جدید

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

                              ویژگی content به شما امکان می دهد محتوای تولید شده را در متن یک صفحه وب وارد کنید که در اصل در متن وجود ندارد.
                              مقدار شمارنده مقدار شمارنده مشخص شده توسط ویژگی counter-reset را چاپ می کند.

                              ویژگی counter-reset یک شناسه برای شمارنده تنظیم می کند و مقدار اولیه را تنظیم می کند.
                              ویژگی counter-increment مرحله ای را که مقدار شمارنده افزایش می یابد را مشخص می کند.

                              فک ( ضد بازنشانی: my-badass-counter; ) .faq dt:before ( محتوا: counter(my-badass-counter); counter-increment: my-badass-counter; )

                              شبه عنصر :before را می توان به هر سبکی اختصاص داد. مثلا:

                              با تسلط بر این ویژگی، می توانید هر آنچه را که می خواهید شماره گذاری کنید. به عنوان مثال، روز دیگر، یکی از دستور العمل های مورد علاقه ام را پست کردم و هر مرحله/عکس را با اعداد رومی شماره گذاری کردم. این به عنوان یادآوری برای من بود: اعداد نباید اعشاری باشند.

                              تنوع عددی به عنوان مقادیر ویژگی لیست-سبک نمایش داده می شود.
                              برای مثال:

                              تنها چیزی که لازم است نشان دادن گزینه مورد نظر در مقدار شمارنده است.

                              محتوا: counter(my-counter, low-roman);

                              آینده CSS3

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

                              Li:: نشانگر (عرض: 30 پیکسل؛ تراز متن: راست؛ حاشیه-راست: 10 پیکسل؛ نمایشگر: بلوک درون خطی؛ ) ol (سبک لیست: نمادها("*""2020""2021"""A7"); ) ul (list-style-type: "در اینجا باید یک ستاره وجود داشته باشد)"; )

                              اگر تا به حال سعی کرده اید سبک های CSS شماره خطوط (اعداد) را در لیست های مرتب شده تغییر دهید

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

                                در اینجا ساده ترین مثال از یک لیست بدون استایل آورده شده است:

                                html

                                1. برای کاشتن درخت
                                2. خانه بساز
                                3. پسر بزرگ کن

                                بیایید به چندین روش برای حل مشکل فوق نگاه کنیم.

                                به طور سنتی یک راه ناشیانه.

                                روش سنتی برای حل این مشکل مخفی کردن شماره خطوطی است که به طور خودکار توسط مرورگر اختصاص داده می شود. در این مورد، از ویژگی list-style: none; استفاده می شود. .

                                css

                                li( سبک لیست: هیچکدام؛ .num( رنگ: سفید؛ پس‌زمینه: #2980B9؛ نمایشگر: بلوک درون خطی؛ تراز متن: مرکز؛ حاشیه: 5 پیکسل 10 پیکسل؛ ارتفاع خط: 40 پیکسل؛ عرض: 40 پیکسل؛ ارتفاع: 40 پیکسل؛ )

                                html

                                1. 1برای کاشتن درخت
                                2. 2خانه بساز
                                3. 3پسر بزرگ کن

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

                                بیایید ببینیم چگونه می‌توانیم بدون مسدود کردن طرح‌بندی و استفاده از شبه عنصر::before و محتوای خصوصیات CSS، counter-increment، counter-reset به همان نتیجه برسیم.

                                روشی زیبا و صحیح

                                ابتدا کد و دمو را ارائه می دهیم و سپس متوجه می شویم که چیست.

                                css

                                ol( counter-reset: myCounter; ) li (list-style: هیچکدام؛) li:prefore ( counter-increment: myCounter; content:counter(myCounter)؛ رنگ: سفید؛ پس زمینه: #2980B9؛ نمایشگر: inline-block. تراز متن: مرکز؛ حاشیه: 5 پیکسل 10 پیکسل؛ ارتفاع خط: 40 پیکسل؛ عرض: 40 پیکسل؛ ارتفاع: 40 پیکسل؛ )

                                html

                                1. برای کاشتن درخت
                                2. خانه بساز
                                3. پسر بزرگ کن

                                همانطور که می بینید، کد html تمیز و زیبا باقی می ماند. در این حالت، تمام استایل عناصر لیست به css منتقل می شود.

                                بیایید نقطه به نقطه نگاه کنیم:

                                • li::قبل از– یک شبه عنصر در داخل لیست ایجاد می کند که جای فرزند اول را می گیرد.
                                • counter-reset:myCounter;– شمارنده css myCounter را در داخل هر یک بازنشانی می کند
                                    .
                                  1. ضد افزایش: myCounter;– شمارنده css myCounter را برای هر شبه عنصر::before افزایش می دهد.
                                  2. content:counter(myCounter);– مقدار فعلی شمارنده myCounter را در داخل عنصر :: قبل از شبه چاپ می کند.

                                جزئیات بیشتر در مورد شمارنده های css را می توانید در اینجا بیابید


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

                                CSS از شمارنده ها برای خودکار کردن فرآیند شماره گذاری استفاده می کند.

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

                                شناسایی کنتور

                                ابتدا باید متر را شناسایی کنید.

                                با استفاده از ویژگی counter-reset، یک نام و یک مقدار اولیه به شمارنده اختصاص داده می شود. نام می تواند هر چیزی باشد، اما نمی تواند با یک عدد شروع شود.

                                قطعه کد:

                                این ورودی می گوید که برای برچسب شمارنده ای به نام شماره با مقدار اولیه 3 نصب شده است.

                                به طور پیش فرض، مقدار اولیه شمارنده 0 است.

                                افزایش شمارنده

                                برای این کار از خاصیت counter-increment استفاده می شود. همچنین برای تعیین افزایش شمارنده استفاده می شود - عددی که با آن مقدار شمارنده افزایش می یابد.

                                قطعه کد:

                                بدنه (تنظیم مجدد: شماره 3 ؛)
                                بدن p ( افزایش متقابل: شماره 3 ; }

                                این قطعه کد می گوید که پاراگراف های ( برچسب زدن

                                ) در متن سند با اعداد شمارشگر با افزایش 3 شماره گذاری می شود.

                                پاراگراف اول 6 شماره خواهد شد، زیرا مقدار اولیه شمارنده 3 و افزایش آن 3 است.

                                مقدار پیش فرض برای افزایش شمارنده 1 است.

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

                                نمایشگر پیشخوان

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

                                ویژگی content محتوا را قبل از ( قبل از) یا بعد از ( بعد از) از عنصر مشخص شده.

                                قطعه کد:

                                بدنه (تنظیم مجدد: شماره 3 ؛)
                                بدن p:after ( افزایش متقابل: شماره 3 ; محتوا : " برابر است با " شمارنده (عدد) "." ;)

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

                                ) همان چیزی است که شبه عنصر after می گوید.

                                در نهایت...

                                در زیر مثال شرح داده شده است.

                                قطعه کد:






                                2 بار 3


                                3 برابر 3


                                4 برابر 3


                                5 برابر 3


                                نتیجه:

                                لیست های تو در تو با شماره گذاری خودکار

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

                                شما هم از HTML و هم از مطالعه لیست ها در CSS باید بدانید که موارد لیست به طور خودکار شماره گذاری می شوند. اما این شماره گذاری ساده ترین است.

                                در مورد شماره گذاری خودکار زیرشاخه هایی مانند 1.1، 1.2، 2.1، 2.2 و غیره چطور؟

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

                                قطعه کد:





                                شماره گذاری خودکار در CSS


                                1. اولین مورد فهرست


                                  1. بند اول بند 1

                                  2. زیر بند دوم بند 1

                                2. مورد دوم فهرست


                                  1. بند اول بند 2

                                  2. بند دوم پاراگراف 2

                                3. سومین مورد در لیست


                                  1. بند اول بند 3

                                  2. زیر بند دوم بند 3

                                  3. بند سوم بند 3


                                  نتیجه:

                                  به این ترتیب شما فرآیند شماره گذاری لیست های تودرتو را خودکار می کنید!

                                  روز خوب!

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

                                  این مقاله سومین مقاله در این دوره کوتاه در زمینه مبانی HTML است. قبل از خواندن این درس، توصیه می کنم دو درس قبلی را مرور کنید:

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

                                  در هر قسمت از مقاله، ایجاد لیست های خاص با توضیحات مفصل برای درج یک لیست خاص همراه خواهد بود.

                                  1. لیست های گلوله شده در HTML

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

                                  و این چیزی است که در مرورگر به نظر می رسد:

                                  برنج. 1.1. نمای استاندارد لیست نامرتب گلوله‌ای HTML در مرورگر

                                  1.1 گلوله های استاندارد برای لیست های گلوله دار

                                  در تصویر بالا (شکل 1.1.) می توانید دایره های ابتدای هر آیتم منو را مشاهده کنید. این نشانگر است. به طور پیش فرض، به عنوان یک دایره پر در مرورگر ظاهر می شود. چندین نوع نشانگر در HTML وجود دارد: دایره پر، دایره خالی و مربع. آنها به هیچ گونه CSS یا تصویر شخص ثالث نیاز ندارند:

                                  1.2 نشانگر را به شکل یک دایره خالی فهرست کنید

                                  شما مقادیر ویژگی ها را می دانید، اما اکنون بیایید ببینیم که چگونه یک لیست گلوله ای HTML در کد ایجاد کنیم. از جدول بالا، مقدار دوم "circle" را برای ویژگی type انتخاب کردیم و آن را به لیست گلوله‌ای خود تنظیم کردیم:

                                  <html > <سر > <عنوان >نمونه ای از لیست گلوله ای با نشانگر دایره خالی</title> </head> <بدن > <p>ستاره ها:</p> <نوع ul = "دایره" > <li >سیریوس</li> <li >آرکتوروس</li> <li >پولوکس</li> <li >بتلژوز</li> <li >آفتاب</li> </ul> </body> </html>

                                  بیایید بلافاصله ببینیم که این کد در مرورگر چگونه به نظر می رسد:

                                  برنج. 1.2. نمایش یک نشانگر لیست به عنوان یک دایره در مرورگر

                                  1.3 نشانگر را به شکل مربع فهرست کنید

                                  بیایید به آخرین مثال با یک نشانگر مربع برای یک لیست HTML نیز نگاه کنیم:

                                  به نشانگر توجه کنید مربع شده است:

                                  برنج. 1.3. نمایش نشانگر لیست به صورت مربع در مرورگر

                                  یادداشت مهم:این روش دیگر برای ایجاد استایل برای لیست های گلوله ای استفاده نمی شود. یک جدایی واضح بین CSS (بخوانید CSS چیست) و HTML وجود دارد. HTML برای نشانه گذاری و CSS برای ایجاد ظاهری جذاب است.

                                  کدی که حاوی این ویژگی هنگام تعیین نوع سند فعلی به عنوان HTML5 است ("")، در حین اعتبار سنجی خطایی می دهد. اگر نشنیده اید اعتبار سنجی چیست، این مکان مناسب شماست.

                                  خطا به صورت زیر خواهد بود:

                                  برنج. 1.4. خطا در اعتبارسنجی هنگام استفاده از ویژگی "نوع" یک لیست

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

                                  2. لیست های شماره گذاری شده در HTML

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

                                  نمونه ای از لیست شماره گذاری شده:

                                  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <سر > <عنوان >نمونه ای از یک لیست شماره گذاری استاندارد</title> </head> <بدن > <p>از یک تا پنج:</p> <اول > <li >اولین</li> <li >دومین</li> <li >سوم</li> <li >چهارم</li> <li >پنجم</li> </ol> </body> </html>

                                  این چیزی است که یک لیست شماره گذاری شده به نظر می رسد: تنظیمات استاندارددر مرورگر:

                                  برنج. 2.1. لیست شماره گذاری شده در مرورگر با تنظیمات استاندارد

                                  مانند نسخه قبلی خود (فهرست گلوله)، سبک های خاص خود را برای نمایش اعداد دارد. شماره گذاری منظم تنها نوع گلوله برای لیست شماره گذاری شده در HTML نیست.

                                  2.1 گلوله های استاندارد برای لیست های شماره گذاری شده

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

                                  نام نشانگر مقدار ویژگی "نوع". مثال لیست
                                  نشانگرهایی به شکل اعداد عربی 1
                                  • بدمینتون
                                  • بیسبال
                                  نشانگرهایی به شکل حروف کوچک لاتین آ
                                  • Chomolungma
                                  • چوگوری
                                  • کانچن جونگا
                                  نشانگرهایی به شکل حروف بزرگ لاتین آ
                                  • سقوط قله
                                  • کوچه تنتروم
                                  • اینسانو
                                  نشانگرهای اعداد رومی با حروف کوچک من
                                  • دریای فیلیپین
                                  • دریای عرب
                                  • دریای مرجانی
                                  نشانگرهای اعداد رومی بزرگ من
                                  • قرمز
                                  • سبز
                                  • آبی

                                  2.2 شماره گذاری خود را در لیست HTML

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

                                  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html > <سر > <عنوان >شماره گذاری سفارشی برای لیست شماره گذاری شده</title> </head> <بدن > <p>شماره گذاری را از دوازده شروع می کنیم:</p> <ol type = "a" start = "12" > <li >دوازده</li> <li >سیزده</li> <li >چهارده</li> <li >پانزده</li> <li >شانزده</li> </ol> </body> </html>

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

                                  برنج. 2.2. شماره گذاری از یک عدد دلخواه در لیست شماره گذاری شده

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

                                  خوب، حالا بیایید به لیست های HTML تو در تو برویم.

                                  3. نحوه ایجاد یک لیست چند سطحی (تودرتو) در HTML

                                  لیست های چند سطحی در سایت برای ساخت منوها استفاده می شود. این منو اغلب به نظر می رسد یا یک منوی کشویی رو به پایین (درس در) یا یک منوی کشویی چپ یا راست است. چنین منوهایی به شما امکان می دهند سایر عناصر منو را به شکل فشرده ذخیره کنید.

                                  با استفاده از مدل های خودرو به عنوان مثال، یک لیست چند سطحی در HTML ایجاد می کنیم:

                                  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html > <سر > <عنوان >لیست گلوله های تو در تو HTML</title> </head> <بدن > <ul > <li >سیتروئن<ul > <li >برلینگو</li> <li > C1</li> <li > C2</li> <li > C3 پیکاسو</li> <li > C4 گراند پیکاسو</li> </ul> </li> <li > KIA</li> <li >تویوتا</li> <li >آئودی</li> <li >لکسوس</li> </ul> </body> </html>

                                  توجه کنید که لیست چند سطحی در مرورگر چگونه به نظر می رسد:

                                  برنج. 3.1. نمونه ای از یک لیست چند سطحی در HTML

                                  ما یک لیست چند سطحی با استفاده از bulleted (برچسب

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

                                    اما ما می توانیم متحد شویم لیست های چند سطحیشماره گذاری و به صورت زیر علامت گذاری شده است:

                                    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html > <سر > <عنوان >لیست های شماره گذاری شده، گلوله ای و چند سطحی در HTML</title> </head> <بدن > <ul > <li >گروه اول لاله ها<اول > <li >کلاس اول<ul > <li >لاله های اولیه ساده</li> </ul> </li> <li >درجه دوم<ul > <li >لاله های تری</li> </ul> </li> </ol> </li> </ul> </body> </html>

                                    در مثال بالا تودرتوی دوتایی (2 سطح) داریم. ابتدا لیستی از دو دسته گل لاله گنجانده شده است؛ ما آن را شماره گذاری کرده ایم. سپس یک لیست گلوله ای در داخل هر یک از موارد موجود در لیست شماره گذاری شده قرار می گیرد.

                                    بیایید ببینیم در مرورگر چگونه به نظر می رسد:

                                    برنج. 3.2. نمونه ای از یک لیست شماره گذاری چند سطحی به یک لیست گلوله ای در مرورگر

                                    4. مطالب مفید در لیست های HTML

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

                                    4.1 چگونه یک لیست HTML را به یک رشته تبدیل کنیم

                                    تبدیل یک لیست HTML به یک رشته ممکن است هنگام ایجاد یک منوی افقی ضروری باشد. انجام آن بسیار آسان است:

                                    4.2 نحوه ایجاد یک لیست HTML بدون آیکون

                                    ویژگی list-style-type در CSS مسئول این است (جزئیات بیشتر):

                                    4.3 چگونه یک لیست را در HTML در مرکز قرار دهیم

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

                                    4.4 نحوه ایجاد یک لیست در HTML با تصاویر

                                    فقط یک ویژگی CSS، list-style-image، کافی است. در داخل url، آدرس را قبل از نماد مشخص کنید. فقط می خواهم توجه داشته باشم که بهتر است بلافاصله یک تصویر کوچک انتخاب کنید، زیرا ارتفاع خط لیست به آن بستگی دارد:

                                    4.5 لیست گلوله شده گلوله خود را HTML کنید

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

                                    4.6 نحوه ایجاد یک لیست در HTML در چندین ستون

                                    برای ایجاد یک لیست در چندین ستون از ما استفاده خواهیم کرد ویژگی CSSتعداد ستون (ویژگی فقط در مرورگرهای زیر پشتیبانی می شود: IE 10+، Chrome 1.0+، Opera 11.1+، Safari 3.0+، Firefox 1.5+). همچنین باید ارتفاع لیست را تنظیم کنید تا تقسیم به چند ستون را ببینید:

                                    5. فهرست ترکیبی HTML

                                    برای ساختن یک جعبه ترکیبی در HTML بهتر استفقط از فونت های آیکون استفاده کنید. مثلا Flaticon یا Fontawesome.

                                    این اطلاعات در حال حاضر برای افراد پیشرفته است، بنابراین ابتدا به شما نیاز خواهید داشت.

                                    6. کار با لیست ها را تمرین کنید

                                    در ویدیوی زیر می توانید تمام کار با لیست های HTML را در عمل مشاهده کنید:

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

                                    اینجاست که لیست ها را تمام می کنیم و به درس بعدی در مورد تصاویر می رویم.

                                    اگر به چیزی بیش از اصول اولیه ساخت وب سایت نیاز دارید، اما می خواهید به حرفه توسعه دهنده Front-end تسلط داشته باشید، به دوره آموزشگاه آنلاین Netology - "" و Skillbox مدرسه آنلاین و دوره "" توجه کنید.

                                    دوره طولانی مدت است، اما دانش ساختار یافته ای دریافت خواهید کرد که با آن می توانید در صورت علاقه مندی به این رشته، فوراً شغلی پیدا کنید.