قوانین CSS برای سفارشی کردن ظاهر یک لیست در صفحه html. ویژگی سبک لیست (نوع، تصویر، موقعیت). قانون به سبک لیست CSS سفارشی

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

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

سبک لیست - طراحی لیست در کد Html

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

آنچه که اکنون با شما در نظر خواهیم گرفت می تواند به عنوان مورد استفاده قرار گیرد عناصر HTML LI، و برای عناصر Ul و Ol (به ترتیب لیست‌های گلوله‌دار و شماره‌دار). تفاوت اعمال لیست سبک برای این تگ ها چیست؟

در واقع، می‌توانید در وب‌سایت اعتبارسنجی (در لینک ارائه شده در مورد آن بخوانید) در بخش مشخصات شیت‌های سبک آبشاری متوجه شوید که آیا یک ملک به ارث رسیده است یا خیر. در ستون "ارثی" روبروی قوانین ارثی "بله" خواهد بود:

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

1. هیچکدام - به هیچ وجه علامت گذاری وجود نخواهد داشت (list-style-type:none؛ برای این مورد اعمال می شود و بنابراین نشانگر ندارد)
2. دیسک - یک دایره پر شده (نوع لیست-سبک: دیسک فقط در این خط اعمال شد؛)
3. دایره - یک دایره به عنوان نشانگر
4. مربع - مربع به عنوان نشانگر
5. اعشاری - اعداد عربی (لیست-سبک-نوع: اعشاری؛)
6. آلفا کوچک - در حروف کوچک
7. آلفا بالا - حروف لاتین با حروف بزرگ
8. رومی پایین - اعداد رومی با حروف کوچک
9. رومی بالا - اعداد رومی با حروف بزرگ

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

در واقع، Ul و Ol تنها در رفتار پیش‌فرض (علامت‌های Ul، و اعداد Ol) با هم تفاوت دارند. اما اگر بخواهید، می توانید به راحتی یک نوع لیست را با لیست سبک به دیگری تبدیل کنید. فونت مورد استفاده برای برچسب زدن اعداد یا حروف دقیقاً همان فونتی است که برای محتوای تگ های LI تعریف کرده اید. برای مثال با تغییر رنگ فونت لیست، و را تغییر می دهیم رنگ نشانگر:

1. تغییر رنگ متن (لیست-سبک-نوع: رومی پایین؛ رنگ: قرمز) و تغییر رنگ نشانگر

بیایید به ویژگی CSS زیر برویم - فهرست-سبک-موقعیت. با استفاده از آن می توانید موقعیت (قرارگیری) منطقه را با نشانگر تنظیم کنید. فقط دو مقدار ممکن دارد:

آن ها در واقع، در موقعیت list-style نشان می‌دهیم که می‌خواهیم ناحیه را با نشانگرها در کجا قرار دهیم - خارج از عنصر LI (خارج) یا داخل آن (داخل). به طور پیش فرض، ناحیه دارای نشانگر از محدوده خارج می شود، یعنی. مقدار خارج استفاده می شود.

بیایید این را با یک مثال ببینیم. در اولین عنصر لیست، من به طور خاص list-style-position:inside را می نویسم و ​​خواهیم دید که از آن چه می آید:

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

لیست-سبک-تصویر و قانون پیش ساخته CSS

در ردیف بعدی List-style-image است - به شما امکان می دهد تصویری را مشخص کنید که به عنوان نشانگر استفاده شود. این قانون به طور پیش‌فرض روی None تنظیم شده است (یعنی هیچ تصویری به عنوان نشانگر استفاده نمی‌شود)، اما می‌توانید عملکرد Url () را بنویسید و مسیر تصویر را در آن مشخص کنید، که بعداً به عنوان یک نشانگر در این لیست عمل می‌کند:

ممکن است به این شکل باشد:

List-style-image: url(https://website/images/list_star.png);

1. اینجا همه چیز پیش فرض است.
2. این چیزی است که استفاده از یک تصویر به عنوان نشانگر ممکن است به نظر برسد. واضح است که می توانید تصویر مناسب تری را برای این منظور انتخاب کنید.
3. مثلا مثل اینجا.

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

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

در عملکرد تصویر سبک لیست، می توانید هر دو تصویر را مشخص کنید. اگر تصویر بارگذاری نشود، از نشانگر یا شماره‌گذاری پیش‌فرض یا هر چیزی که در نوع list-style برای این عنصر فهرست نوشته شده استفاده می‌شود.

برای نوشتن هر سه قانون CSS که در بالا توضیح داده شد در یک قانون واحد، می‌توان از List-style استفاده کرد که برای لیست‌های استایل‌سازی از پیش ساخته شده است. ترتیبی که مقادیر مشخص شده اند مهم نیست. مقادیری که در List-style مشخص نمی‌کنید به صراحت توسط مرورگر با مقادیر پیش‌فرض تفسیر می‌شوند.

از کجا می توانم مقادیر پیش فرض را ببینم؟ بله، همه چیز در یک مکان است - در مشخصات CSS اعتبارسنجی W3C در ستون "مقدار اولیه" در مقابل ویژگی های مورد علاقه شما:

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

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

List-style:inside upper-roman url(https://site/images/list_star.png);

شما می توانید مقادیر را به هر ترتیب و هر عددی (از یک شروع کنید) استفاده کنید. به هر حال، با کمک لیست ها، منوها اغلب در وب سایت ها تشکیل می شوند و از ویژگی List-style برای برای حذف نشانگرها از لیست منوها، که در آنجا کاملاً غیر ضروری هستند:

list-style-type:none;

فهرست-سبک: هیچکدام;

موفق باشی! به زودی شما را در سایت صفحات وبلاگ می بینیم

ممکن است علاقه مند باشید

نمایش (بلاک، هیچ، درون خطی) در CSS - تنظیم نوع نمایش عناصر Html در یک صفحه وب نحوه تغییر رنگ پس‌زمینه ردیف‌های جداول، لیست‌ها و سایر عناصر Html در سایت با استفاده از کلاس شبه nth-child
شناور و پاک کردن در CSS - ابزارهای طرح بندی بلوک
تعیین موقعیت با شاخص Z و قانون مکان‌نما CSS برای تغییر مکان‌نمای ماوس
موقعیت (مطلق، نسبی و ثابت) - راه هایی برای قرار دادن عناصر Html در CSS (قوانین چپ، راست، بالا و پایین)
CSS برای چیست، نحوه اتصال صفحات سبک آبشاری به یک سند Html و اصول نحو این زبان
ویژگی های CSSتزیین متن، تراز عمودی، تراز متن، تورفتگی متن برای دکوراسیون متن Html
قوانین فونت (وزن، خانواده، اندازه، سبک) و ارتفاع خط برای استایل دادن به فونت ها در CSS
پس زمینه در CSS (رنگ، ​​موقعیت، تصویر، تکرار، پیوست) - همه برای تنظیم رنگ پس زمینه یا تصویر پس زمینه عناصر Html
CSS - چیست، شیوه نامه های آبشاری چگونه به آن متصل می شوند کد htmlبا سبک و لینک
اولویت ها در Css و افزایش آنها به دلیل مهم، ترکیب و گروه بندی انتخابگرها، سبک های کاربر و نویسنده

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

اطلاعات کوتاه

نحو

list-style-image: هیچ | آدرس اینترنتی(<адрес>)

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

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

گزینه های خروجی متن

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

ویژگی text-align style تراز افقی متن را مشخص می کند:

text-align: چپ | راست | مرکز | توجیه | ارث بری

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

مثال ها:

P (Text-align: justify)
H1 (تراز متن: مرکز)

ویژگی text-indent style تورفتگی "خط قرمز" را تعیین می کند:

تورفتگی متن:<отступ "красной строки">

مقادیر تورفتگی مطلق و نسبی (نسبت به عرض پاراگراف) در اینجا مجاز است. به طور پیش فرض، تورفتگی "خط قرمز" صفر است. توجه داشته باشید که ویژگی text-indent style از مقدار ارثی پشتیبانی نمی کند.

مثال:

P (تورفتگی نوشتاری: 5 میلی متر)

حالا پاراگراف ها یک «خط قرمز» خواهند داشت.

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

ویژگی style-style-type style نوع گلوله ها یا شماره گذاری موارد لیست را مشخص می کند:

لیست-سبک-نوع: دیسک|دایره|مربع|اعشاری|اعشاری-پیشرو-صفر|

رومی پایین|رومی بالا|یونانی پایین|آلفا پایین|لاتین پایین|

آلفای بالا|لاتین بالا|ارمنی|گرجی|هیچکدام | ارث می برند

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

نشانگر دیسک به شکل یک دایره سیاه (رفتار معمول برای لیست های گلوله ای).

دایره - یک نشانگر به شکل یک دایره نور.

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

اعشاری - شماره گذاری با اعداد عربی (رفتار معمول برای لیست های شماره گذاری شده).

اعشاری-پیشرو-صفر - اعداد عربی از 01 تا 99 با صفر اول.

رومی پایین - شماره گذاری در اعداد رومی کوچک.

رومی بالا - شماره گذاری در اعداد رومی بزرگ.

یونانی پایین - شماره گذاری با حروف یونانی پایین.

آلفای پایین و لاتین پایین - شماره گذاری با حروف کوچک لاتین.

آلفای بالا و لاتین بالا - شماره گذاری با حروف بزرگ لاتین.

ارمنی - شماره گذاری با اعداد سنتی ارمنی.

گرجی - شماره گذاری با اعداد سنتی گرجی.

هیچ - بدون نشانگر یا شماره گذاری (رفتار معمول برای غیر لیست ها).

در یک یادداشت

ما فقط مقادیر ویژگی‌های نوع فهرست ارائه‌شده توسط CSS 3 را پوشش داده‌ایم. با این حال، CSS 2 چند مقدار دیگر را ارائه کرد که هنوز توسط مرورگرهای وب پشتیبانی می‌شوند. می توانید آنها را در https://developer.mozilla.org/en/CSS/list-style-type پیدا کنید.

ویژگی style-style-type style را می توان روی هر دو تنظیم کرد لیست هاو برای آیتم های فهرست فردی. در حالت دوم، لیستی ایجاد می شود که در آن موارد دارای گلوله ها یا شماره گذاری های مختلف هستند. گاهی اوقات این می تواند مفید باشد.

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

UL (لیست-سبک-نوع: مربع)

و در لیست 9.1، نشانگر مشابهی را برای یکی از موارد موجود در لیست گلوله‌دار تنظیم می‌کنیم.

ویژگی style-style-image style به شما این امکان را می دهد که هر تصویر گرافیکی را به عنوان نشانگر آیتم لیست تنظیم کنید (یک نشانگر گرافیکی ایجاد کنید). در این مورد، مقدار ویژگی style-style-type style، در صورت وجود، نادیده گرفته می شود:

list-style-image: هیچکدام|<интернет-адрес файла изображения>| ارث بردن

آدرس اینترنتی فایل نشانگر گرافیکی با همان فرمت آدرس اینترنتی فایل تصویر پس زمینه مشخص شده است (به فصل 8 مراجعه کنید):

UL (لیست-سبک-تصویر: url(/markers/dot.gif))

مقدار none نشانگر گرافیکی را حذف می کند و یک نشانگر ساده و غیر گرافیکی را برمی گرداند. این رفتار عادی است.

ویژگی style-style-image style را می توان برای خود لیست ها و همچنین برای آیتم های لیست جداگانه تنظیم کرد.

ویژگی style-style-position به شما امکان می دهد مکان یک گلوله یا شماره را در یک آیتم لیست مشخص کنید:

list-style-position: داخل|خارج|ارث بردن

دو مقدار در دسترس وجود دارد:

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

خارج - نشانگر یا شماره گذاری خارج از نقطه است فهرست(این یک رفتار طبیعی است).

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

مثال:

OL (موقعیت-سبک لیست: داخل)

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

اطلاعات کوتاه

با ویژگی LIST-STYLE

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

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

لیست-سبک-نوع

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

ارزش های:

دیسک- نشانگر نقطه
دایره- نشانگر دایره
مربع- نشانگر مربع
اعشاری- اعداد عربی: 1، 2، 3 ....
اعشاری-پیشرو-صفر- اعداد عربی با شروع از صفر: 01، 02، 03 ... 09.
لول رومن- اعداد رومی با حروف کوچک.
روم بالایی- اعداد رومی با حروف بزرگ.
لاتین پایین- حروف کوچک لاتین: a، b، c ....
لاتین بالا- حروف بزرگ لاتین: A, B, C….
ارمنی- شماره گذاری ارمنی.
گرجی- شماره گذاری گرجی.
هیچ یک- لغو
به ارث می برند

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

فهرست-سبک-موقعیت

ویژگی محل نشانگر عنصر را مشخص می کند. یا نشانگر در داخل عنصر یا خارج از آن است.

ارزش های:

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

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

فهرست-سبک-تصویر

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

ارزش های:

URL- راه به فایل گرافیکی.
هیچ یک- تصویر نشانگر را لغو می کند، به عنوان مثال، برای عنصر والد.
به ارث می برند- ارث بردن از عنصر والد.

Ul (list-style-image: url(papka/find.png); list-style-position:inside;)

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