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

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

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

ویژگی سبک لیست - طراحی یک لیست در یک صفحه html

که در زبان CSSسه ویژگی وجود دارد که با list-style شروع می‌شود که مسئول طراحی لیست‌های گلوله‌دار و شماره‌دار هستند. به علاوه یک قانون پیش ساخته به سبک لیست نیز وجود دارد که به شما امکان می دهد مقدار کد را کاهش دهید.

همه این ویژگی ها را می توان هم برای عناصر html li و هم برای عناصر ul و ol استفاده کرد. تنها تفاوت این است که اگر قوانین برای یک مقدار خاص از لیست li نوشته شده باشد، فقط برای آن اعمال می شود. و اگر قوانین css یکسانی برای ul یا ul کانتینرها نوشته شود، آنگاه برای تمام عناصر li موجود در این کانتینرها اعمال خواهد شد.

بیایید با ویژگی شروع کنیم لیست-سبک-نوع، که مجموعه می کند نوع نشانگرهایا شماره گذاریبرای موارد لیست:

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

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

• دیسک - یک نشانگر به شکل یک دایره سیاه (مقدار پیش فرض برای لیست های گلوله ای).
• دایره - نشانگر به شکل یک دایره پر نشده.
• مربع - نشانگر به شکل مربع. بسته به مرورگر می تواند روشن یا تاریک باشد.
• اعشاری - شماره گذاری با اعداد عربی (مقدار پیش فرض برای لیست های شماره گذاری شده).
• اعشاری-پیشرو-صفر - شماره گذاری در اعداد عربی از 01 تا 99 با صفر اول.
• رومی پایین - شماره گذاری به اعداد رومی کوچک.
• رومی بالایی - شماره گذاری در اعداد رومی بزرگ.
• یونانی پایین - شماره گذاری با حروف کوچک یونانی.
• آلفای پایین و لاتین پایین - شماره گذاری با حروف کوچک لاتین.
• آلفای بالا و لاتین بالا - شماره گذاری با حروف بزرگ لاتین.
• ارمنی - شماره گذاری با استفاده از اعداد سنتی ارمنی.
• گرجی - شماره گذاری با استفاده از اعداد سنتی گرجی.
• هیچ - علامت گذاری و شماره گذاری به هیچ وجه انجام نخواهد شد.

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

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

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

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

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

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

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

• اولین مورد فهرست؛


• مورد دوم فهرست؛


• سومین مورد در لیست

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

• اولین مورد فهرست؛
• مورد دوم فهرست؛
• سومین مورد در لیست

واضح است که هنگام انتخاب یک عکس به عنوان نشانگر، بهتر است یک تصویر کوچک انتخاب کنید.

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

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

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

لیست نمونه با مقادیر مختلف موقعیت لیست-سبک:

• در پاراگراف اول همه چیز به طور پیش فرض است.
• در پاراگراف دوم، list-style-position به داخل تنظیم شده است. در این مورد، توجه داشته باشید که خط دوم همسطح با نشانگر قرار می گیرد.
• در این نقطه list-style-position برابر با خارج است.

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

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

مقادیر موجود در قانون کامپایل لیست به سبک باید با فاصله از هم جدا شوند:

list-style: list-style-type list-style-image list-style-position;

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

لیست-سبک: آدرس دایره (http://site/images/marker.png) خارج;

بنابراین، ویژگی list-style به شما این امکان را می دهد که مقدار کد را به میزان قابل توجهی کاهش دهید، زیرا به جای سه قانون، فقط یک قانون را تنظیم کنید.

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

list-style: هیچکدام;

همین کار را می توان با استفاده از ویژگی list-style-type انجام داد:

list-style-type: هیچکدام;

اینجاست که داستان طراحی لیست های html با استفاده از شیوه نامه های آبشاری را به پایان می برم. برای اطلاع از دیگران ویژگی های CSS x می‌توانید مقاله‌ها را از بخش «» بخوانید و فراموش نکنید که در به‌روزرسانی‌های وبلاگ مشترک شوید. دوباره می بینمت!

لیست های CSS- مجموعه ای از ویژگی های مسئول طراحی لیست ها. استفاده از لیست های HTML هنگام ایجاد نوارهای ناوبری وب سایت بسیار رایج است. آیتم های لیست مجموعه ای از عناصر بلوک را نشان می دهند.

با استفاده از ویژگی های استاندارد CSS می توانید ظاهر نشانگر لیست را تغییر دهید, یک تصویر برای نشانگر اضافه کنید، و مکان نشانگر را تغییر دهید. ارتفاع بلوک نشانگر را می توان با ویژگی line-height تنظیم کرد.

طراحی لیست با استفاده از سبک های CSS

1. نوع نشانگر لیست list-style-type

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

نحو

Ul (نوع-سبک فهرست: هیچکدام؛) ul (نوع-سبک-لیست: مربع؛) ol (نوع-سبک فهرست: هیچکدام؛) ol (نوع-سبک لیست: نوع آلفای پایین؛)
برنج. 1. نمونه ای از طراحی لیست های گلوله ای و شماره گذاری شده

2. تصاویر برای آیتم های لیست لیست-سبک-تصویر

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

نحو

Ul (list-style-image: url("images/romb.png");) ul (list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%)؛)
برنج. 2. طراحی لیست گلوله ایبا استفاده از یک تصویر برنج. 3. با استفاده از شیب یک لیست گلوله طراحی کنید

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

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

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

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

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

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

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

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

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

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

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

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

1. رنگ متن را تغییر داد (لیست-سبک-نوع:lower-roman; رنگ:قرمز) و رنگ نشانگر را تغییر داد

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

در عمل ممکن است اینگونه به نظر برسد:

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

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

List-style-type:none;

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

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

با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید

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

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

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

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

به این ترتیب، تغییراتی که در فایل style.css ایجاد می‌کنید، بلافاصله در تمام صفحاتی که به آن فایل اشاره می‌کنند، منعکس می‌شوند.

یک ظاهر طراحی خصوصی

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

مثال:

ویژگی ID

اگر نیاز به اعمال یک سبک دارید عنصر فردیصفحات وب، سپس باید از ویژگی ID استفاده کنید.

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