HTML برچسب گذاری شده است. لیست ها در HTML - لیست گلوله ای - لیست شماره گذاری شده - لیست تعاریف - لیست های تو در تو در HTML. مثال: نشانگرهای گرافیکی
یکی از انواع لیست پیاده سازی شده در HTML است لیست گلوله ای. در غیر این صورت، لیست هایی از این نوع را بدون شماره یا نامرتب می نامند. نام خانوادگی اغلب به عنوان ترجمه رسمی نام تگ مربوطه استفاده می شود
- ، با کمک آن لیست هایی از این نوع در اسناد HTML سازماندهی می شوند (UL - Unordered List, unordered list).
- (LI - آیتم فهرست، عنصر فهرست). برچسب بزنید
- نیازی به برچسب بسته شدن مربوطه ندارد، اگرچه وجود آن در اصل ممنوع نیست. مرورگرها معمولاً هر بار که یک سند را نمایش می دهند شروع به کار می کنند. عنصر جدیدلیست از یک خط جدید
اطلاعات ارائه شده برای ایجاد یک لیست گلوله ای اولیه کافی است. بیایید نمونه ای از یک سند HTML را با استفاده از یک لیست گلوله ای ارائه دهیم که نمایش آن توسط مرورگر در شکل نشان داده شده است. 2.1.
نمونه لیست گلوله شده علائم زودیاک:
- برج حمل
- ثور
- دوقلوها
- باکره
- ترازو
- عقرب
- قوس
- برج جدی
- دلو
- ماهی
برنج. 2.1.نمایش فهرست گلوله‌ای در مرورگر
توجه داشته باشید که علاوه بر عناصر لیست که با تگ مشخص شده اند
- ، سایر عناصر HTML ممکن است وجود داشته باشد. در مثال بالا، یکی از این عناصر متن ساده است که یک آیتم لیست نیست، بلکه به عنوان عنوان آن عمل می کند.
توجه داشته باشید
برخی از کتاب‌های درسی در زبان HTML نشان می‌دهند که باید از یک برچسب ظرف برای تنظیم عنوان فهرست استفاده شود
(LH - سرصفحه فهرست، سرصفحه فهرست). این تگ در حال حاضر توسط هیچ مرورگر رایجی شناسایی نمی شود و بخشی از مشخصات HTML نیست. بنابراین، استفاده از آن بی معنی می شود، اگرچه منجر به هیچ خطایی نخواهد شد. در تگ
- دو پارامتر را می توان مشخص کرد: COMPACT و TYPE.
- .
ورودی نمونه:
- .
توجه داشته باشید
مرورگرها مشخصات نوع گلوله را برای یک آیتم فهرست جداگانه تفسیر می کنند. مرورگر Netscape ظاهر نشانگر را برای این و همه موارد بعدی تغییر می دهد تا زمانی که با تعریف مجدد بعدی ظاهر نشانگر مواجه شود. مرورگر اینترنت Explorer ظاهر نشانگر را فقط برای این عنصر تغییر می دهد.
نشانگرهای لیست گرافیکی
می‌توانید از تصاویر گرافیکی به‌عنوان گلوله‌های فهرست استفاده کنید، که به طور گسترده برای ایجاد اسناد HTML جذاب و با طراحی خوب استفاده می‌شود. در واقع چنین فرصتی به طور مستقیم فراهم نمی شود زبان HTML، اما تا حدودی به صورت مصنوعی اجرا می شود. این بدان معنا نیست که انجام این کار توصیه یا مذموم نیست، بلکه تنها به این معنا نیست که هیچ ساختار زبان HTML خاصی در اینجا استفاده نخواهد شد.
برای درک این ایده، باید مکانیسم پیاده سازی لیست ها در صفحات HTML را درک کنید. به نظر می رسد که تگ لیست
- (در واقع، برچسب های لیست از انواع دیگر، که در زیر مورد بحث قرار گرفته است) یک کار واحد را انجام می دهد - به مرورگر می گوید که تمام اطلاعاتی که بعد از این برچسب قرار دارند باید به میزان مشخصی به سمت راست (تورفتگی) منتقل شوند. برچسب ها
- ، با اشاره به عناصر لیست فردی، خروجی ارائه می دهد نشانگرهای استانداردفهرست عناصر
اگر ما نیاز به ساخت لیستی با نشانگرهای گرافیکی داشته باشیم، می‌توانیم بدون تگ کار کنیم
- . درج تصویر گرافیکی مورد نظر قبل از هر عنصر از لیست کافی خواهد بود. تنها مشکلی که باید حل شود جداسازی عناصر لیست از یکدیگر است. برای این کار می توانید از تگ های پاراگراف استفاده کنید
یا به اجبار یک خط تغذیه کنید
. نمونه ای از پیاده سازی لیست با نشانگرهای گرافیکی که نمایش آن در شکل نشان داده شده است. 2.2 در زیر نشان داده شده است:که فقط یک بار مخابره می شود. اندازه فایل یک تصویر کوچک نیز بسیار کوچک است.
توجه داشته باشید
روش های ایجاد لیست با گلوله های گرافیکی به نوبه خود در فصل 8 مورد بحث قرار می گیرند.
کاربردهای اصلی لیست ها:
شماره گذاری شده - برای فهرست کردن عناصری که به ترتیب کاملاً تعریف شده دنبال می شوند.
Bulleted - برای فهرست کردن عناصر به ترتیب تصادفی.
چند سطحی - برای مشخص کردن اطلاعات عناصر خاص.
فهرست تعاریف - برای قالب بندی دیکشنری ها استفاده می شود.
صفحه html لیست شماره گذاری شده
از برچسب ها برای ایجاد لیست های شماره دار استفاده می شود
-
برچسب بزنید
-
به طور پیش فرض، آیتم های لیست به ترتیب 1، 2، 3 شماره گذاری می شوند... با استفاده از ویژگی TYPE، می توانید سبک شماره گذاری را تغییر دهید.
شماره گذاری مقدار TYPE A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..
اگر قبلا اضافه کنید لیست موجودمقادیر جدید، مرورگر به طور خودکار آن را دوباره محاسبه می کند.
با استفاده از ویژگی های START VALUE، می توانید ترتیب شماره گذاری لیست را تغییر دهید.
START - برای تعیین شماره شروع لیست، متفاوت از 1 استفاده می شود.
VALUE - تخصیص شماره دلخواه به هر عنصر از لیست را امکان پذیر می کند.
مثال:
صفحه html لیست گلوله شده
از برچسب ها برای ایجاد لیست های گلوله ای استفاده می شود
- شروع/پایان یک عنصر فهرست فردی را نشان می دهد.
به طور پیش فرض، موارد لیست با یک دایره سیاه مشخص می شوند. از ویژگی TYPE می توان برای تغییر سبک علامت گذاری استفاده کرد.
در یک لیست، می توانید از نشانه گذاری های مختلف برای عناصر لیست استفاده کنید.
مثال:
صفحه HTML فهرست چند سطحی
برای ایجاد لیست های چند سطحی، می توانید از لیست های گلوله ای یا شماره دار یا ترکیبی از هر دو استفاده کنید. یک لیست چند سطحی با قرار دادن یک لیست در بدنه لیست دیگر ایجاد می شود. وظیفه اصلی این است که گیج نشوید. برای انجام این کار، من به شما توصیه می کنم که تورفتگی های مختلفی برای لیست های فردی ایجاد کنید.
لیستی از تعاریف صفحه html
سه تگ برای ایجاد لیستی از تعاریف استفاده می شود:
- - شروع/پایان لیست
- - آغاز/پایان یک ترم خاص
- - ابتدا/پایان مقاله توضیحی اصطلاح.
برچسب ها
- و
- جایگزینی لازم نیست آن ها می توانید چندین اصطلاح را به یک تعریف «پیوند» کنید و بالعکس.
مثال:
کد HTML:
- ترم 1
- چکیده 1 تا ترم 1
- چکیده 2 تا ترم 1
نمایش مرورگر:
ترم 1 چکیده 1 تا ترم 1 چکیده 2 تا ترم 1از آنجایی که در این سایت سبک های خاصی برای برخی از عناصر اعمال می شود، نمایش آنها در جدول تا حدودی با آنچه که دریافت خواهید کرد متفاوت است.
لیست های HTMLبرای گروه بندی اطلاعات مرتبط استفاده می شود. سه نوع لیست وجود دارد:
لیست گلوله ای —
- - هر عنصر از لیست
- با نشانگر مشخص شده است،
لیست شماره گذاری شده —- - هر عنصر از لیست
- با یک عدد مشخص شده است
فهرست تعاریف- - از جفت ترم تشکیل شده است- —
- تعریف.
هر لیست محفظه ای است که عناصر لیست یا جفت های تعریف اصطلاح در آن قرار دارند. عناصر لیست مانند عناصر بلوک عمل می کنند که در زیر یکدیگر قرار گرفته اند و کل عرض بلوک کانتینر را اشغال می کنند. هر مورد لیست دارای یک بلوک اضافی است که در کنار آن قرار دارد که در طرح بندی شرکت نمی کند.
ایجاد لیست های HTML
1. لیست گلوله شده
لیست گلوله شدهیک لیست نامرتب است (از فهرست نامرتب انگلیسی). با استفاده از یک تگ جفت ایجاد شده است
. نشانگر یک عنصر لیست یک برچسب است، به عنوان مثال، یک دایره پر.مرورگرها به طور پیش فرض قالب بندی زیر را به بلوک لیست اضافه می کنند:
هر عنصر لیست با استفاده از یک تگ جفت ایجاد می شود
- (از مورد فهرست انگلیسی).
- در دسترس .
- مایکروسافت
- گوگل
- سیب
2. لیست شماره گذاری شده
لیست شماره گذاری شدهبا استفاده از یک تگ جفت ایجاد می شود. هر مورد لیست نیز با استفاده از عنصر ایجاد می شود
- با یک عدد مشخص شده است
- . مرورگر به طور خودکار عناصر را به ترتیب شماره گذاری می کند و اگر یک یا چند عنصر از چنین لیستی را حذف کنید، اعداد باقی مانده به طور خودکار مجدداً محاسبه می شوند.
بلوک لیست همچنین دارای سبک های پیش فرض مرورگر است:
- ویژگی مقدار در دسترس است، که به شما امکان می دهد شماره پیش فرض را برای آیتم فهرست انتخاب شده تغییر دهید. به عنوان مثال، اگر برای اولین مورد در لیست تنظیم کنید
- ، سپس شماره گذاری باقیمانده نسبت به مقدار جدید مجدداً محاسبه می شود.
برای برچسب زدن
- ویژگی های زیر در دسترس هستند:
- مایکروسافت
- گوگل
- سیب
- و
- در دسترس .
- کارگردان:
- پیتر توچیلین
- قالب:
- آندری گایدولیان
- الکسی گاوریلوف
- ویتالی گوگونسکی
- ماریا کوژونیکوا
برنج. 3. فهرست تعاریف4. لیست تو در تو
اغلب، قابلیت‌های فهرست‌های ساده کافی نیست؛ برای مثال، هنگام ایجاد فهرست مطالب، هیچ راهی برای انجام این کار وجود ندارد. اقلام تو در تو. نشانه گذاری برای لیست تودرتو به صورت زیر خواهد بود:
- بند 1.
- نقطه 2.
- بند 2.1.
- بند 2.2.
- بند 2.2.1.
- بند 2.2.2.
- بند 2.3.
- نکته 3.
برنج. 4. لیست تو در تو5. فهرست شماره گذاری چند سطحی
یک لیست چند سطحی برای نمایش آیتم های لیست در سطوح مختلف با تورفتگی های مختلف استفاده می شود. نشانه گذاری برای یک لیست شماره گذاری چند سطحی به صورت زیر خواهد بود:
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
- پاراگراف
این نشانه گذاری پیش فرض یک شماره گذاری جدید برای هر لیست تو در تو ایجاد می کند که با یک شروع می شود. برای ایجاد شماره گذاری تو در تو، باید از ویژگی های زیر استفاده کنید:
counter-reset یک یا چند شمارنده را بازنشانی می‌کند و مقداری که باید تنظیم شود را مشخص می‌کند.
counter-increment مقدار افزایش شمارنده را مشخص می کند. هر آیتم بعدی با چه افزایشی شماره گذاری می شود.
محتوا - محتوای تولید شده، در در این موردمسئول نمایش شماره قبل از هر آیتم لیست است.Ol ( /* شماره گذاری استاندارد را حذف کنید */ list-style: هیچ؛ /* شمارنده را شناسایی کنید و نام آن را li کنید. مقدار شمارنده مشخص نشده است - به طور پیش فرض 0 */ counter-reset: li; ) li :before ( /* عنصری را تعریف می کنیم که شماره گذاری می شود - li. شبه عنصر قبل نشان می دهد که محتوای درج شده با استفاده از ویژگی content قبل از آیتم های لیست قرار می گیرد. در اینجا مقدار افزایش شمارنده را نیز تعیین می کنیم (پیش فرض 1 است. */ counter-increment: li; / * ویژگی content تعداد آیتم لیست را نمایش می دهد. counters() به این معنی است که متن تولید شده مقادیر همه شمارنده ها را با آن نام نشان می دهد. یک نقطه در گیومه یک دوره جداکننده بین اعداد اضافه می کند و یک نقطه با فاصله قبل از محتوای هر آیتم لیست اضافه می شود */ content: counters(li,".") "."; )
برنج. 5. فهرست شماره گذاری چند سطحی
جدول 1. ویژگی های برچسب
صفت توضیحات، ارزش پذیرفته شده معکوس شد ویژگی reversed باعث می شود که لیست به ترتیب معکوس نمایش داده شود (مثلاً 9، 8، 7...). شروع کنید ویژگی start مقدار اولیه را مشخص می کند که شماره گذاری از آن آغاز می شود، به عنوان مثال، یک ساخت - اولین مورد به شماره سریال "10" اختصاص می یابد. شما همچنین می توانید نوع شماره گذاری را در همان زمان مشخص کنید، به عنوان مثال،
- .
نوع ویژگی type نوع نشانگر مورد استفاده در لیست (حروف یا اعداد) را مشخص می کند. مقادیر پذیرفته شده:
1 - مقدار پیش فرض، شماره دهی.
الف - شماره گذاری لیست به ترتیب حروف الفبا، حروف بزرگ(آ ب پ ت).
a - فهرست شماره گذاری به ترتیب حروف الفبا، حروف کوچک (a، b، c، d).
I - شماره گذاری در اعداد بزرگ رومی (I، II، III، IV).
i - شماره گذاری در اعداد کوچک رومی (i، ii، iii، iv).3. فهرست تعاریف
فهرست تعاریفبا استفاده از یک برچسب ایجاد می شوند
بلوک لیست تعریف دارای سبک های مرورگر پیش فرض زیر است:
برای برچسب ها
- ,
HTML از لیست های سه تایی پشتیبانی می کند انواع متفاوت، که هر کدام پارامترهای خاص خود را دارند:
لیست های شماره گذاری شده
در یک لیست شماره گذاری شده، مرورگر به طور خودکار اعداد عناصر را به ترتیب وارد می کند و با مقدار مشخصی (معمولاً 1) شروع می شود. این به شما امکان می دهد بدون ایجاد اختلال در شماره گذاری، موارد لیست را وارد و حذف کنید، زیرا اعداد باقیمانده به طور خودکار مجدداً محاسبه می شوند.
لیست های شماره گذاری شده با استفاده از یک عنصر بلوک ایجاد می شوند
برچسب بزنید- عنصر 1
- عنصر 2
- عنصر 3
آیتم های لیست شماره گذاری شده باید حاوی چندین آیتم لیست باشند، همانطور که در مثال زیر نشان داده شده است:
مثال: فهرست شماره گذاری شده
- خودت آن را امتحان کن "
- کلید را دریافت کنید
- کلید را داخل قفل قرار دهید
- کلید را دو دور بچرخانید
- کلید را از قفل خارج کنید
- در را باز کن
آموزش گام به گام
- کلید را دریافت کنید
- کلید را داخل قفل قرار دهید
- کلید را دو دور بچرخانید
- کلید را از قفل خارج کنید
- در را باز کن
گاهی اوقات وقتی به کدهای HTML موجود نگاه می کنید، با استدلال مواجه می شوید نوعدر عنصر
- الف - حروف بزرگ لاتین (A، B، C...)؛
- الف - حروف لاتین کوچک (a، b، c...)؛
- I - اعداد رومی بزرگ (I، II، III ...)؛
- i - اعداد رومی کوچک (i، ii، iii...)؛
- 1 - اعداد عربی (1، 2، 3 . . . .) (به طور پیش فرض استفاده می شود).
- به روش زیر:
-
در این صورت شماره گذاری پی در پی لیست قطع می شود و از این نقطه شماره گذاری دوباره در این مورد از هفت آغاز می شود.
مثال استفاده از صفت ارزشبرچسب زدن
در این مثال، «مورد فهرست اول» شماره 1، «مورد فهرست دوم» شماره 7 و «مورد فهرست سوم» شماره 8 خواهد بود.
قالب بندی لیست های شماره دار با CSS
برای تغییر شماره لیست باید از ویژگی استفاده کنید لیست-سبک-نوعشیوه نامه های CSS:
- . مرورگر هر مورد لیست را تورفتگی می کند و به طور خودکار گلوله ها را نمایش می دهد.
- نکته اول
- نکته دوم
- نکته سوم
- قرار دادن فقط متن ضروری نیست، قرار دادن هر عنصری از محتوای جریانی (لینک ها، پاراگراف ها، تصاویر و غیره) قابل قبول است.
- ایجاد یک لیست تودرتو یا یک لیست سطح دوم مجاز است. برای قرار دادن یک لیست، لیست جدید را در داخل عنصر توصیف کنید
- لیست از قبل موجود وقتی یک لیست گلوله‌ای را در لیست دیگری قرار می‌دهید، مرورگر به‌طور خودکار سبک گلوله‌ای را برای لیست سطح دوم تغییر می‌دهد. هر لیستی را می توان در لیستی دیگر قرار داد. مثال زیر ساختار یک لیست گلوله ای را نشان می دهد که در دومین مورد از یک لیست شماره گذاری شده است.
- خودت آن را امتحان کن "
- دوشنبه
- ارسال ایمیل
- بازدید از ویرایشگر
- انتخاب یک موضوع
- طراحی تزئینی
- گزارش نهایی
- مشاهده عصرانه پیام ها
- سهشنبه
- بازنگری برنامه
- ارسال تصاویر
- چهار شنبه...
- دوشنبه
- ارسال ایمیل
- بازدید از ویرایشگر
- انتخاب یک موضوع
- طراحی تزئینی
- گزارش نهایی
- مشاهده عصرانه پیام ها
- سهشنبه
- بازنگری برنامه
- ارسال تصاویر
- چهار شنبه...
- خودت آن را امتحان کن "
- قهوه
- قهوه
- قهوه
- قهوه
- قهوه
- شیر
- قهوه
- شیر
- قهوه
- شیر
- قهوه
- شیر
- خودت آن را امتحان کن "
- ثور
- جوزا
- برج حمل
- ثور
- جوزا
- (از اصطلاح انگلیسی تعریف - یک کلمه تعریف شده، اصطلاح) و
- (از تعریف انگلیسی توضیحات - شرح اصطلاح در حال تعریف).
- ترم اول
- شرح ترم اول
- ترم دوم
- شرح ترم دوم
- خودت آن را امتحان کن "
- شبکه جهانی وب
- - از انگلیسی شبکه جهانی وب (WWW) یک سیستم توزیع شده است که دسترسی به اسناد مرتبط واقع در رایانه های مختلف متصل به اینترنت را فراهم می کند.
- اینترنت
- - مجموعه ای از شبکه ها که از یک پروتکل مبادله واحد برای انتقال اطلاعات استفاده می کنند.
- سایت اینترنتی
- - مجموعه ای از صفحات وب منفرد که با پیوندها و طراحی یکنواخت به هم مرتبط هستند.
- اعداد عربی (1، 2، 3، ...);
- اعداد عربی با صفر اول برای اعداد کمتر از ده (01، 02، 03، ...،10);
- حروف بزرگ لاتین (A، B، C، ...)؛
- حروف کوچک لاتین (a، b، c، ...)؛
- اعداد رومی بزرگ (I، II، III، ...)؛
- اعداد رومی کوچک (i، ii، iii، ...)؛
- شماره گذاری ارمنی;
- شماره گذاری گرجی.
- . مقدار هر عدد صحیح مثبت است. مهم نیست که چه نوع شماره گذاری تنظیم شده است، حتی اگر از حروف لاتین به عنوان یک لیست استفاده شود. اگر هر دو ویژگی شروع و مقدار به طور همزمان به یک لیست اعمال شوند، آنگاه اولویت دوم است و شماره گذاری از روی عدد مشخص شده توسط مقدار نمایش داده می شود، همانطور که در مثال 1 نشان داده شده است.
مثال 1: تغییر شماره گذاری لیست
لیست ها - شما باید به خوبی از محل کار خود مراقبت کنید.
- نور اتاق را طوری تنظیم کنید که منبع نور در کنار یا پشت اپراتور قرار گیرد.
- برای جلوگیری از عوارض پزشکی، توصیه می شود صندلی با صندلی نرم انتخاب کنید.
اولین عنصر لیست در این مثال با عدد رومی IV شروع می شود، زیرا ویژگی start="4" مشخص شده است، سپس عدد V می آید و آخرین عنصر از نظم خارج می شود و به عدد X اختصاص می یابد (شکل 1).
برنج. 1. اعداد رومی در لیست
نوشتن اعداد
به طور پیش فرض، یک لیست شماره گذاری شده ظاهر خاصی دارد: ابتدا یک عدد وجود دارد، سپس یک نقطه، و بعد از آن متن با فاصله از هم جدا شده است. این شکل از نوشتن بصری و راحت است، اما برخی از توسعه دهندگان ترجیح می دهند روشی متفاوت برای طراحی شماره گذاری لیست ها ببینند. یعنی، به طوری که به جای یک نقطه، یک براکت بسته وجود دارد، همانطور که در شکل نشان داده شده است. 2 یا چیزی مشابه
برنج. 2. نمایش لیست شماره دار با براکت
سبک ها به شما امکان می دهند نوع شماره گذاری لیست را با استفاده از ویژگی های محتوا و افزایش متقابل تغییر دهید. ابتدا، انتخابگر اول باید روی counter-reset تنظیم شود: آیتم، این لازم است تا شماره گذاری در هر لیست جدید از نو شروع شود. در غیر این صورت شماره گذاری ادامه می یابد و به جای 1،2،3 عدد 5،6،7 را مشاهده خواهید کرد. مقدار آیتم یک شناسه منحصر به فرد برای شمارنده است؛ ما خودمان آن را انتخاب می کنیم. سپس، باید نشانگرهای اصلی را از طریق ویژگی style list-style-type با مقدار none پنهان کنید.
ویژگی content معمولاً در ارتباط با عناصر ::after و ::before کار می کند. بنابراین، li:: قبل از ساخت می گوید که باید قبل از هر عنصر لیست، مقداری محتوا اضافه شود (مثال 2).
مثال 2. ایجاد شماره گذاری خودتان
Li::prefore ( محتوا: counter(item) ") "; /* یک پرانتز به اعداد اضافه کنید */ counter-increment: item; /* نام شمارنده را تنظیم کنید */ )
ویژگی content با مقدار شمارنده(اقلام) عددی را نمایش می دهد. با افزودن پرانتز، همانطور که در این مثال نشان داده شده است، نوع شماره گذاری مورد نیاز را بدست می آوریم. افزایش متقابل برای افزایش تعداد لیست یک بار مورد نیاز است. توجه داشته باشید که از همان شناسه، با نام آیتم، در سرتاسر استفاده می شود. کد نهایی در مثال 3 نشان داده شده است.
مثال 3: تغییر نمای لیست
لیست ها - اولین
- دومین
- سوم
- چهارم
با استفاده از روش بالا می توانید هر نوع لیست شماره گذاری بسازید، مثلاً یک عدد را در پرانتز قرار دهید، در این حالت فقط یک خط در استایل ها تغییر می کند.
محتوا: "[" counter(item) "] ";
لیست با حروف روسی
یک لیست شماره دار با حروف لاتین وجود دارد، اما هیچ حروف روسی برای لیست وجود ندارد. آنها را می توان به طور مصنوعی با استفاده از تکنیک بالا اضافه کرد. از آنجایی که شماره‌گذاری از طریق استایل‌ها انجام می‌شود، خود لیست اصلی باقی می‌ماند، فقط کلاس انتخاب شده به آن اضافه می‌شود، بیایید آن را سیریلیک بنامیم (مثال 4).
مثال 4: کد برای ایجاد یک لیست
- یکی
- دو
- سه
افزودن حروف با استفاده از عنصر ::before و ویژگی content انجام می شود. از آنجایی که هر خط باید حرف خاص خود را داشته باشد، از کلاس شبه :nth-child(1) استفاده می کنیم که شماره حرف در پرانتز نوشته شده است. حرف اول طبیعتا A، دومی B، سومی C و غیره است. این مجموعه به صورت زیر به انتخابگر li اضافه می شود (مثال 5).
مثال 5: استفاده از شبه کلاس: nth-child
سیریلیک li:nth-child(1)::before ( content: "a)"; ) .cyrilic li:nth-child(2)::before ( محتوا: "ب)"; ) .cyrilic li:nth-child(3)::before ( content: "at)"; )
در این مثال، هر حرف با یک پرانتز همراه است، همه حروف کوچک هستند. شما می توانید نوع شماره گذاری لیست خود را تعریف کنید، به عنوان مثال می تواند شامل حروف بزرگ با یک نقطه، با یک یا دو براکت، یا فقط حروف باشد. برخلاف شماره گذاری استاندارد، ما در اینجا آزادیم که هر کاری می خواهیم انجام دهیم. یک لیست ده حرفی تقریباً برای همه موقعیت ها باید کافی باشد، اما اگر ناگهان معلوم شود که کافی نیست، هیچ چیز مانع از گسترش فهرست خود به منظور شامل حداقل تمام حروف الفبای روسی نمی شود.
در نهایت تراز و موقعیت حروف را تنظیم می کنیم، به صورت اختیاری اندازه قلم، رنگ و سایر پارامترها را مشخص می کنیم (مثال 6).
مثال 6. فهرست با حروف روسی
فهرست کنید - بورش
- کتلت پایک
- کولبیاکا
- قارچ در خامه ترش
- پنکیک با خاویار
- کواس
نتیجه این مثالدر شکل نشان داده شده است. 3.
سبک های لیست شماره گذاری شده
مثال معنی شرح الف، ب، ج آلفای پایین تر حروف کوچک الف، ب، ج آلفای بالا حروف بزرگ i، ii، iii رومی پایین اعداد رومی با حروف کوچک I، II، III رمان بالایی اعداد رومی با حروف بزرگ مثال: اعمال یک ویژگی CSS لیست-سبک-نوع
لیست های گلوله ای
فهرست‌های گلوله‌دار اساساً شبیه به لیست‌های شماره‌دار هستند، فقط شامل شماره‌گذاری متوالی آیتم‌ها نیستند. لیست های گلوله شده با استفاده از یک عنصر بلوک ایجاد می شوند
برچسب بزنیددر مثال زیر، می بینید که به طور پیش فرض، یک نشانگر کوچک به شکل یک دایره پر شده قبل از هر آیتم لیست اضافه می شود:
داخل یک تگ
لیست های تو در تو
هر لیستی را می توان در لیستی دیگر قرار داد. داخل یک عنصرمثال: لیست های تودرتو
قالب بندی لیست های گلوله ای
برای تغییر ظاهرویژگی فهرست نشانگر باید استفاده شود لیست-سبک-نوعشیوه نامه های CSS:
مثال زیر سبک های مختلف لیست های گلوله ای را نشان می دهد:
مثال: سبک های لیست گلوله
دیسک:
دایره:
مربع:
هیچ یک:
نشانگرهای گرافیکی
در HTML امکان ایجاد لیست با نشانگرهای گرافیکی وجود دارد. زمانی که نشانگرهای لیست دایره یا مربع استاندارد هستند یک چیز است و زمانی که خود توسعه دهنده نشانگر را مطابق با طراحی صفحه انتخاب می کند کاملاً چیز دیگری است. برای زیبا کردن آیتم های فهرست، اغلب از تصاویر کوچک استفاده می شود.
برای جایگزینی یک نشانگر معمولی با یک نشانگر گرافیکی، ویژگی را جایگزین کنید لیست-سبک-نوعدر هر ملک لیست-سبک-تصویرو آدرس تصویر را مشخص کنید:مثال: نشانگرهای گرافیکی
علائم زودیاک
علائم زودیاک
فهرست تعاریف (توضیحات)
لیست های تعریف برای ایجاد، به عنوان مثال، فرهنگ لغات شخصی شما بسیار مفید هستند. هر مورد لیست تعریف دارای دو بخش است: اصطلاح و تعریف آن.
شما کل لیست را در یک عنصر قرار می دهید
فهرست تعاریف اغلب در نشریات علمی، فنی و آموزشی استفاده می شود و از آنها برای تدوین واژه نامه ها، لغت نامه ها، کتاب های مرجع و غیره استفاده می شود.ساختار کلی فهرست توضیحات به شرح زیر است:
مثال زیر یکی از موارد را نشان می دهد استفاده های ممکنفهرست تعاریف:
مثال: لیست تعریف
وب جهانی - از انگلیسی. شبکه جهانی وب (WWW) یک سیستم توزیع شده است که دسترسی به اسناد مرتبط واقع در رایانه های مختلف متصل به اینترنت را فراهم می کند. اینترنت مجموعه ای از شبکه هاست که از یک پروتکل مبادله واحد برای انتقال اطلاعات استفاده می کنند. وب سایت مجموعه ای از صفحات وب منفرد است که با پیوندها و طراحی یکنواخت به هم مرتبط هستند.
به طور پیش‌فرض، متن عبارت در لبه سمت چپ پنجره مرورگر فشار داده می‌شود و توضیحات عبارت در زیر قرار گرفته و به سمت راست منتقل می‌شود.
لیست های شماره گذاری شده مجموعه ای از عناصر با شماره سریال آنها هستند. نوع و نوع شماره گذاری بستگی به پارامترهای عنصر دارد
- ، که برای ایجاد لیست استفاده می شود. مقادیر زیر می توانند به عنوان عناصر شماره گذاری عمل کنند:
از نقطه نظر عملی، اصول نمایش آیتم ها در لیست گلوله ای را می توان به روشی مشابه در لیست شماره گذاری شده اعمال کرد. اما با توجه به اینکه با یک شمارش سر و کار داریم، ویژگی هایی وجود دارد که بیشتر مورد بحث قرار خواهد گرفت.
شماره گذاری لیست
شروع لیست از هر شماره مجاز است. برای این منظور از ویژگی start عنصر استفاده می شود
- یا مقدار عنصر
در اینجا: تایپ کنید - نمادهای لیست:
اگر می خواهید لیست با عددی غیر از 1 شروع شود، باید این را با استفاده از ویژگی مشخص کنید شروع کنیدبرچسب زدن
مثال زیر یک لیست شماره گذاری شده با اعداد رومی بزرگ و مقدار شروع XLIX را نشان می دهد:شماره گذاری را نیز می توان با استفاده از ویژگی شروع کرد ارزش، که به عنصر اضافه می شود
برچسب بزنید
- ابتدا/پایان کل لیست مشخص شده است.
برچسب بزنید
- شروع/پایان یک عنصر فهرست فردی را نشان می دهد.
برچسب بزنید
-
-
- ، با اشاره به عناصر لیست فردی، خروجی ارائه می دهد نشانگرهای استانداردفهرست عناصر
پارامتر COMPACT بدون مقدار نوشته شده است و برای نشان دادن آن به مرورگر استفاده می شود این لیستباید به صورت فشرده ارائه شود. به عنوان مثال، فونت یا فاصله بین خطوط لیست و غیره ممکن است کاهش یابد.
توجه داشته باشید
در حال حاضر وجود پارامتر COMPACT در تگ
- به هیچ وجه بر نمایش لیست ها در مرورگرهای پیشرو تأثیر نمی گذارد. بنابراین برنامه این پارامتربی معنی است، به خصوص که استفاده از آن توسط مشخصات HTML 4.0 توصیه نمی شود.
پارامتر TYPE می تواند مقادیر زیر را بگیرد: دیسک، دایره و مربع. این پارامتر برای اجبار ظاهر گلوله های لیست استفاده می شود. نوع دقیق نشانگر به مرورگری که استفاده می کنید بستگی دارد. گزینه های نمایش معمولی به شرح زیر است:
TYPE = دیسک - نشانگرها به صورت دایره های پر نمایش داده می شوند. TYPE = دایره - نشانگرها به صورت دایره های باز نمایش داده می شوند. TYPE = مربع - نشانگرها به صورت مربع های پر نمایش داده می شوند. ورودی نمونه:
- .
مقدار پیش فرض TYPE = دیسک است. برای لیست های گلوله ای تو در تو، مقدار پیش فرض دیسک در سطح اول، دایره در سطح دوم، مربع در سطح سوم و بالاتر است. این دقیقاً همان کاری است که در آن انجام می شود آخرین نسخه هامرورگرهای نت اسکیپ و اینترنت اکسپلورر. لطفاً توجه داشته باشید که سایر مرورگرها ممکن است نشانگرها را متفاوت نشان دهند. به عنوان مثال، در مشخصات HTML 4.0 برای نوع نشانگر نمایش داده شده زمانی که مقدار TYPE = مربع، یک مربع پر نشده (طرح مربع) نشان داده شده است.
پارامتر TYPE با مقادیر یکسان را می توان برای تعیین نوع نشانگرها برای عناصر لیست استفاده کرد. برای انجام این کار، پارامتر TYPE با مقدار مربوطه مجاز است در تگ عنصر لیست مشخص شود.
- .
در لیست گلوله‌ای، از کاراکترهای خاصی به نام نشانگرهای فهرست برای برجسته کردن عناصر آن استفاده می‌شود (اغلب به آنها bullets می‌گویند که تلفظ رسمی اصطلاح انگلیسی bullet است). ظاهر نشانگرهای لیست توسط مرورگر تعیین می شود و هنگام ایجاد لیست های تو در تو، مرورگرها به طور خودکار ظاهر نشانگرها را در سطوح مختلف تودرتو متنوع می کنند.
برچسب ها و
برای ایجاد یک لیست گلوله ای، باید از یک تگ کانتینر استفاده کنید که تمام عناصر لیست در داخل آن قرار دارند. تگ‌های فهرست باز و بسته، قبل و بعد از فهرست، یک خط شکستگی ایجاد می‌کنند، بنابراین فهرست را از محتوای اصلی سند جدا می‌کند، بنابراین نیازی به استفاده از تگ‌های پاراگراف در اینجا نیست.
.
هر عنصر لیست باید با یک تگ شروع شود
