لیست های CSS

پراپرتی های لیست CSS به شما اجازه می دهند:

  • لیستی متفاوت از item markerها را برای لیست های سفارش داده شده تعیین کنید
  • لیستی متفاوت از item markerها را برای لیست های سفارش داده نشده تعیین کنید
  • تصویری را بعنوان لیست item marker تعیین کنید

لیست

در HTML، دو نوع لیست وجود دارد:

  • لیست های سفارش داده شده – لیست آیتم ها با bullet نشانه گذاری می شوند
  • لیست های سفارش داده شده – لیست آیتم ها به اعداد یا حروف نشانه گذاری می شوند

با CSS، می توان لیست ها را بیشتر style کرد، و می توان تصاویر را بعنوان لیست item marker استفاده کرد.

لیست Item Markerهای مختلف

نوع لیست item marker، با پراپرتی list-style-type تعیین می شود:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

 بعضی از مقادیر property مخصوص لیست های سفارش داده نشده هستند، و بعضی شان مخصوص لیست های سفارش داده شده.

 Value های مخصوص لیست های سفارش داده نشده

Walue

شرح

None

بدون Marker

disc

پیش فرض ، Marker ، یک دایره پر شده است

Circle

Marker ، یک دایره است

Square

Marker ، یک مربع است

Value های مخصوص لیست های سفارش داده شده

Walue

شرح

Armenian

Marker ، عدد گذاری سنتی ارمنی است

decimal

Marker ، یک عدد است

Decimal-leading - zero

Marker ، عددی همراه با یک صفر است (01 ، 02 ، 03)

georgian

Marker ، عدد گذاری سنتی گرجستانی است (an ، ban ، gan)

Lower-alpha

Marker ، حروف کوچک لاتین است (a ، b ، c)

Lower-greek

Marker ، حروف کوچک یونانی است (alpha ، beta ، gamma)

Lower-latin

Marker ، حروف کوچک لاتین است (a ، b ، c)

Lower-roman

Marker ، عدد کوچک یونانی است (i ، ii ،  iii ، iv ، v)

Upper-alpha

Marker ، حروف بزرگ لاتین است (A ، B ، C)

Upper-latin

Marker ، حروف بزرگ لاتین است (A ، B ، C)

Upper-roman

Marker ، اعداد بزرگ یونانی است (I ، II ،  III ، IV ، V)

 

یک تصویر بعنوان List Item Marker

جهت تعیین یک تصویر بعنوان List Item Marker، از پراپرتی list-style-image استفاده کنید:

ul
{list-style-image: url('sqpurple.gif');
}

 

مثال بالا به یک اندازه در همه مرورگرها نمایش داده نمی شود. IE و Opera، مارکر تصویر را کمی بزرگتر از Firefox، Chrome، و Safari نمایش می دهند.

اگر می خواهید image-marker در همه مرورگرها به یک اندازه نمایش داده شوند، یک crossbrowser solution در زیر توضیح داده شده است.

Crossbrowser Solution

مثال زیر، image-marker را به یک اندازه در همه مرورگرها نمایش می دهد:

ul
{list-style-type: none;
padding: 0px;
margin: 0px;
}li
{background-image: url(sqpurple.gif);background-repeat: no-repeat;
background-position: 0px 5px; padding-left: 14px; 
}

 

این مثال توضیح می دهد که:

برای ul:
    • list-style-type را روی none تنظیم کنید تا list item marker را حذف کنید
    • هم padding و هم margin را روی 0px تنظیم کنید
برای li
    • URL تصویر را تعیین کنید، و آن را ققط یکبار نمایش دهید (no-repeat)
    • تصویر را جایی قرار دهید که می خواهید (چپ 0px و پایین 5px)
    • متن را در لیست با padding چپ قرار دهید

لیست – تسریع در نوشتن CSS

تعیین کردن همه پراپرتی در یک پراپرتی واحد نیز ممکن است. به این پراپرتی، shorthand property می گویند.

shorthand propertyیی که برای لیست ها استفاده می شود، پراپرتی list-style است:

 

ul
{list-style: square url("sqpurple.gif");
}

هنگام استفاده از این پراپرتی، ترتیب valueها به ترتیب زیر است:

  • list-style-type
  • list-style-position
  • list-style-image

اگر یکی از valueهای بالا وجود نداشته باشد، تا وقتی که valueهای دیگر در ترتیب خود باشند، مشکلی پیش نمی آید.

جدول های CSS

ظاهر یک جدول HTML را می توان با CSS به طور چشم گیری بهبود داد.

  قاب های جدول (Table Border)

جهت تعیین کردن قاب های جدول در CSS، از پراپرتی border استفاده کنید.

مثال زیر، قابی سیاه را برای جدول تعیین می کند، عنصر های th، و td:

table, th, td
{border: 1px solid black;
}

  توجه داشته باشید که جدول مثال بالا دارای قاب های دوبل است. دلیلش این است که هم جدول و هم عناصر th، و td دارای قاب های مجزا هستند.

جهت نمایش دادن قاب مجزا برای جدول، از پراپرتی border-collapse استفاده کنید.

Collapse Borderها

پراپرتی border-collapse تعیین می کند آیا قاب های جدول به یک قاب مجزا یا ادغام شوند یا جدا شوند:

table
{border-collapse:collapse;
}table,th, td
{border: 1px solid black;
}

ارتفاع و پهنای جدول

ارتفاع و پهنای جدول بوسیله پراپرتی های پهنا و ارتفاع تعریف می شوند.

مثال زیر پهنای جدول را روی 100%، و ارتفاع عنصر th را روی 50px تنظیم می کند:

table 
{width:100%;
}th
{height:50px;
}

 تراز کردن متن جدول

متن درون جدول با پراپرتی های text-align و vertical-align تراز می شود.

پراپرتی text-align، تراز افقی مانند چپ، راست، یا مرکز را تنظیم می کند:

td
{text-align:right;
}

 پراپرتی vertical-align، تراز عمودی مانند بالا، پایین، یا وسط را تنظیم می کند:

td
{height:50px;
vertical-align:bottom;
}

padding جدول

جهت کنترل فضای بین قاب و محتوای جدول، باید از پراپرتی padding روی عناصر td و th استفاده کرد:

td
{padding:15px;
}

رنگ جدول

مثال زیر، رنگ قاب ها، متن و رنگ پیش زمینه عناصر td و th را تنظیم می کند:

table, td, th
{border:1px solid green;
}th
{background-color:green;
color:white;
}