آموزش مقدماتیHTMLوCSS(جلسه ۱۵: ایجاد لیست‌ها – بخش ۱)
1398/03/13 12:22 , میلاد صاحب نظر

آموزش مقدماتیHTMLوCSS(جلسه ۱۵: ایجاد لیست‌ها – بخش ۱)

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

رسید‌ها، لیست‌هایی از مواد و لیست‌هایی از دستورالعمل‌ها را فراهم می‌کنند. وقتی برای تقریباً همه چیز یک لیست داریم، درک اینکه چرا لیست‌ها در فضای آنلاین هم بسیار محبوب هستند ساده است.

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

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

علاوه بر سه نوع مختلف لیست موجود در HTML، چندین روش برای استایل دادن به این لیست‌ها با استفاده از CSS نیز وجود دارند. برای مثال، می‌توانیم انتخاب کنیم چه نوع marker برای لیست استفاده کنیم، آیا بهتر است که Marker مربعی، دایره، عددی، الفبایی یا شاید ناموجود باشد یا نه.

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

لیست‌های نامنظم

یک لیست نامنظم به زبان ساده، لیستی از آیتم‌های به هم مرتبط است که ترتیب آن‌ها اهمیتی ندارد. ایجاد یک لیست نامنظم در HTML با استفاده از عنصر سطح block لیست نامنظم (یعنی <ul>) انجام می‌شود. هر آیتم درون یک لیست نامنظم، به صورت انفرادی با استفاده از عنصر آیتم لیست (یعنی <li>) علامت‌گذاری می‌شود.

به صورت پیش‌فرض، اکثر مرورگرها یک margin عمودی و padding سمت چپ به عنصر <ul> اضافه کرده و پس از عنصر  <li> یک نقطه قرار می‌گیرد. نقطه پس از عنصر <li> همان marker آیتم در لیست است و با استفاده از CSS می‌توانیم آن را تغییر دهیم.

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

لیست‌های منظم

عنصر لیست منظم (یعنی <ol>) خیلی شبیه به عنصر لیست نامنظم است. آیتم‌های لیست انفرادی نیز به همان شکل ایجاد می‌شوند. تفاوت اصلی بین یک لیست منظم و یک لیست نامنظم این است که در یک لیست منظم، نظمی که در نمایش آیتم‌ها به کار می‌رود بسیار مهم است.

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

<ol>
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

لیست‌های منظم همچنین اتریبیوت‌های منحصر به فردی نیز دارند از جمله start و reversed.

اتریبیوت start

اتریبیوت start عددی را تعریف می‌کند که لیست منظم باید از آن عدد آغاز شود. به طور پیش‌فرض، لیست‌های منظم از ۱ آغاز می‌شوند. به هر حال، ممکن است مواردی هم باشند که در آن‌ها لیست از عدد ۳۰ یا یک عدد دیگر آغاز می‌شود. وقتی از اتریبیوت Start برای عنصر <ol> استفاده می‌کنیم، می‌توانیم دقیقاً مشخص کنیم که یک لیست منظم باید از چه عددی شروع به شمردن کند.

اتریبیوت start فقط مقادیر عددی یا integer می‌پذیرد، البته لیست‌های منظم می‌توانند از سیستم‌های عددی مختلف (مانند اعداد رومی) استفاده کنند.

<ol start="30">
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

اتریبیوت reversed

وقتی از اتریبیوت reversed برای عنصر <ol> استفاده می‌کنیم، این امکان برای ما فراهم می‌شود که بتوانیم یک لیست را به صورت برعکس نمایش دهیم. یک لیست منظم شامل ۵ آیتم که از شماره ۱ تا ۵ مرتب شده‌اند را می‌توانیم به صورت برعکس و از ۵ به ۱ نمایش دهیم.

اتریبیوت reversed یک اتریبیوت boolean است و بنابراین هیچ مقداری نمی‌پذیرد. مقدار آن یا true و یا false است. False مقدار پیش‌فرض آن است. مقدار وقتی true می‌شود که نام اتریبیوت یعنی reversed در عنصر <ol> ظاهر شود.

<ol reversed>
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

اتریبیوت Value

می‌توانیم از اتریبیوت value برای یک عنصر <li> تکی درون یک لیست منظم استفاده کنیم تا مقدار درون لیست را تغییر دهیم. عدد هر آیتم لیست که در زیر یک آیتم لیست دارای اتریبیوت value ظاهر می‌شود، با توجه به عدد قبلی‌اش مجدداً محاسبه می‌شود.

برای مثال، اگر آیتم دوم لیست دارای یک اتریبیوت Value با مقدار ۹ باشد، عدد آن marker آیتم لیست به گونه‌ای تنظیم می‌شود که گویی نهمین آیتم لیست است. همچنین تمام عنصرهای لیست پس از آن عنصر نیز از ۹ به بعد شماره‌گذاری می‌شوند.

<ol>
  <li>Head north on N Halsted St</li>
  <li value="9">Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

لیست‌های توصیفی

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

ایجاد یک لیست توصیفی در HTML با استفاده از عنصر سطح block لیست توصیفی (یعنی <dl>) انجام می‌شود. به جای استفاده از یک عنصر <li> برای علامت‌گذاری آیتم‌های لیست، لیست توصیفی به دو عنصر سطح block نیاز دارد: یک عنصر واژه قابل توصیف (یعنی <dt>) و یک عنصر توصیف (یعنی <dd>).

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

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

وقتی یک لیست توصیفی اضافه می‌کنیم، عنصر <dt> باید قبل از عنصر <dd> بیاید. واژه تعریفی و توضیحی که مستقیماً پس از آن می‌آید باید با هم مرتبط باشند. بنابراین، ترتیب این عنصرها مهم است.

به صورت پیش‌فرض، عنصر <dl> شامل حاشیه‌های عمودی است، درست مانند عنصرهای <ul> و <ol>. علاوه بر این، عنصر <dd> به صورت پیش‌فرض شامل یک margin سمت چپ است.

<dl>
  <dt>study</dt>
  <dd>The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books</dd>
  <dt>design</dt>
  <dd>A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>
  <dd>Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd>
  <dt>business</dt>
  <dt>work</dt>
  <dd>A person's regular occupation, profession, or trade</dd>
</dl>

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

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

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

یک حقه برای لیست‌های تودرتو این است که بدانیم هر لیست و آیتم لیست را باید از کجا شروع کنیم و در کجا پایان دهیم.

روی صحبت ما بیشتر با لیست‌های نامنظم و منظم است، چون در این لیست‌ها است که اکثر تودرتو شدن‌ها اتفاق می‌افتند، تنها عنصری که می‌تواند مستقیماً درون عنصرهای <ul> و <ol> قرار بگیرد، عنصر <li> است.

دوباره تکرار می‌کنم، تنها عنصری که می‌توانیم به عنوان فرزند مستقیم عنصرهای <ul> و <ol> به کار ببریم عنصر <li> است.

با این حساب، درون عنصر <li>، می‌توانید مجموعه عنصرهای استاندارد را اضافه کنیم، به خصوص می‌توانیم حتی از عنصرهای <ul> یا <ol> نیز استفاده کنیم.

برای تودرتو کردن لیست، به جای اینکه آیتم لیست را ببندیم، باید یک لیست جدید را شروع کنیم. وقتی لیست تودرتو کامل و بسته شد، آیتم لیست پدر (جایی که تودرتو آغاز شد) را می‌بندیم و به تکمیل کد لیست اورجینال و اصلی ادامه می‌دهیم.

<ol>
  <li>Walk the dog</li>
  <li>Fold laundry</li>
  <li>
    Go to the grocery and buy:
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </li>
  <li>Mow the lawn</li>
  <li>Make dinner</li>
</ol>

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

عنصرهای <ul> و <ol> می‌توانند فقط شامل عنصرهای <li> باشند. عنصر <li> می‌تواند شامل هر عنصر نرمال که نیاز دارید باشد. به هر حال، عنصر <li> باید یک فرزند مستقیم از یکی از عنصرهای <ul>‌ یا <ol>‌باشد.

همچنین بد نیست اشاره کنیم که درون لیست‌های دیگر هم قابلیت تودرتو وجود دارد، markerهای آیتم لیست این لیست‌ها با توجه به اینکه لیست تا چه عمقی تودرتو شده‌ است تغییر می‌کنند.

در مثال قبلی، لیست نامنظمی که درون لیست منظم تودرتو شده بود، به جای استفاده از نقطه به عنوان marker آیتم لیست، از دایره‌های تو خالی استفاده کرده بود. این تغییر به این دلیل اتفاق می‌افتد که لیست نامنظم یک مرحله درون لیست منظم تودرتو شده است.

خوشبختانه ما روی چگونگی ظاهر شدن و نمایش دادن این markerها کنترل داریم، که در قسمت بعدی به این موضوع خواهیم پرداخت.

استایل‌بندی آیتم لیست

لیست‌های نامنظم و منظم به صورت پیش‌فرض از markerهای آیتم لیست استفاده می‌کنند. برای لیست‌های نامنظم markerها معمولاً نقطه‌های تو پر هستند، در حالی که برای لیست‌های منظم معمولاً از اعداد استفاده می‌شود.

می‌توان با استفاده از CSS استایل و موقعیت این markerهای آیتم لیست را تنظیم کرد.

ویژگی List Style Type

ویژگی list-style-type برای مشخص کردن محتوای یک marker آیتم لیست استفاده می‌شود. بازه مقادیر موجود از مربع و اعداد دسیمال گرفته تا عدد‌گذاری آمریکایی متفاوت بوده و استایل را می‌توان با استفاده از CSS روی هر کدام از عنصرهای <ol>، <ul> یا <li> قرار داد.

هر مقدار از ویژگی list-style-type را می‌توان به لیست‌های نامنظم یا منظم اضافه کرد. با در نظر داشتن این نکته در ذهن، پس امکان استفاده از یک marker آیتم لیست عددی برای یک لیست نامنظم و یک marker غیر عددی برای یک لیست منظم وجود دارد.

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

ul {
  list-style-type: square;
}

مقادیر List Style Type

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

مقدار List Style Type

محتوا

None

بدون آیتم لیست

disc

یک دایره تو پر

Circle

یک دایره تو خالی

Square

یک مربع تو پر

Decimal

اعداد دسیمال

Decimal-leading-zero

اعداد دسیمال که در ابتدای آن‌ها یک صفر قرار دارد

Lower-roman

اعداد رومی با حروف کوچک

Upper-roman

اعداد رومی با حروف بزرگ

Lower-greek

یونانی کلاسیک با حروف کوچک

Lower-alpha / lower-latin

حروف ASCII کوچک

Upper-alpha / upper-latin

حروف ASCII بزرگ

Armenian

اعداد ارمنی سنتی

Georgian

اعداد گرجستانی سنتی

 

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

زمانی خواهد رسید که مقادیر پیش‌فرض ویژگی list-style-type دیگر کافی نیستند و لازم است marker آیتم لیستمان را سفارشی‌سازی کنیم. برای این منظور معمولاً یک تصویر پشت زمینه به هر عنصر <li> درون یک لیست قرار می‌دهیم.

این فرآیند شامل حذف تمام مقادیر پیش‌فرض ویژگی list-style-type و اضافه کردن یک تصویر پشت زمینه و padding به عنصر <li> است.

به طور دقیق، ویژگی list-style-type با مقدار none، می‌تواند markerهای آیتم لیست موجود را حذف کند. ویژگی background یک تصویر پشت زمینه و موقعیت آن را فراهم کرده و در صورت لزوم، مقدار را نیز تکرار می‌کند.

و ویژگی padding برای سمت چپ متن در تصویر پشت زمینه فضا فراهم می‌کند.

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

li {
  background: url("arrow.png") 0 50% no-repeat;
  list-style-type: none;
  padding-left: 12px;
}

ویژگی Life Style Position

به طور پیش‌فرض marker آیتم لیست در سمت چپ محتوا درون عنصر <li> قرار دارد. این موقعیت گیری استایل لیست به عنوان outside تعریف می‌شود، یعنی اینکه تمام محتوا مستقیماً در سمت راست و بیرون از marker آیتم لیست ظاهر می‌شود.

با استفاده از ویژگی list-style-position، می‌توانیم مقدار پیش‌فرض outside را به inside یا inherit تغییر دهیم.

مقدار outside در واقع marker آیتم لیست را در سمت چپ عنصر <li> قرار داده و به هیچ محتوایی اجازه نمی‌دهد تا در زیر marker آیتم لیست قرار بگیرند.

مقدار inside (که به ندرت استفاده می‌شود) marker آیتم لیست را هم راستا با اولین خط عنصر <li> قرار داده و به محتواهای دیگر اجازه می‌دهد تا در صورت نیاز در زیر آن قرار بگیرند.

HTML

<ul>
  <li>Cupcakes...</li>
  <li>Sprinkles...</li>
</ul>

CSS

ul {
  list-style-position: inside;
}

ویژگی List Style به صورت shorthand

ویژگی‌های list style که تا الآن مورد بحث قرار گرفتند (یعنی list-style-type و list0style-position) را می‌توان در یک مقدار shorthand به نام list-style ترکیب کرد. وقتی از ویژگی list-style استفاده می‌شود، می‌توانیم از یک یا تمام مقادیر list-style در یک زمان استفاده کنیم.

ترتیب این مقادیر shorthand باید به شکل list-style-type و پس از آن list-style-position باشد.

ul {
  list-style: circle inside;
}
ol {
  list-style: lower-roman;
}

خلاصه

در این جلسه به تعریف و معرفی لیست‌ها در HTML پرداختیم و با استفاده از CSS برای آن‌ها استایل ایجاد کردیم. فهمیدیم که سه نوع لیست در HTML وجود دارند که عبارت‌اند از نامنظم، منظم و توصیفی.

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

با MUG همراه باشید!

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
۵ قالب رایگان HTML برای ایجاد سریع و آسان‌ وبسایت‌ها!
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات