• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

آموزش رایگان CSS- جلسه 15

مرداد 11, 1400
نویسنده حامد نجفی
HTML-CSS ، برنامه نویسی
373 بازدید
آموزش رایگان CSS- جلسه 15| لیست ها در CSS

در جلسه ی چهارم از سری جلسات آموزش HTML در مورد لیست ها و انواع آنها مفصل صحبت و مثال هایی را مطرح کردیم. در این جلسه قصد داریم بینیم این لیست ها در CSS به چه صورت استایل دهی می شوند و چه تفاوت هایی دارند. با ما همراه باشید.

برای مطالعه ی جلسه ی چهارم  HTML  و جلسه ی 14 آموزش CSS میتوانید از لینک قرار داده شده استفاده کنید.

 

لیست ها در CSS

گفتیم که لیست ها را به دو دسته ی لیست های مرتب و نا مرتب دسته بندی می کنیم. از تگ <ul> برای ایجاد لیست نامرتب و از تگ <ol> برای ایجاد لیست های مرتب استفاده می شود. در ادامه با هر کدام از این تگ ها آشنا خواهیم شد.

در ادامه قصد داریم با استفاده از CSS لیست ها را ویرایش کنیم. برای ویرایش لیست ها از ویژگی های CSS زیر می توان استفاده کرد؛

list-style-type : این ویژگی نوع شماره گذاری آیتم ها را تعیین می کند.
list-style-image : با این ویژگی میتوان عکس ها را جایگزین شماره ها در آیتم ها کرد.
list-style-position : موقعیت قرار گیری آیتم ها با این ویژگی تعیین می شود.

 

ویژگی List-Style-Type

آموزش رایگان CSS- جلسه 15| لیست ها در CSS
لیست ها در CSS

از این ویژگی برای ظاهر و نوع علامت های لیست ها استفاده می شود. دقت کنید که ویژگی List-Style-Type زمانی بر روی آیتم ها اعمال میشود که list-style-image برابر با مقدار none باشد.علامت آیتم ها میتواند هر چیزی باشد مانند یک شکل ساده, شماره, حروف و … .
رنگ آیتم ها با توجه به رنگی که برای متن لیست تعیین میشود تغییر می کند. اما چه مقادیری میتوان برای List-Style-Type در نظر گرفت؟

تمام مقایری که در جدول زیر آمده است؛

 

disc

disc مقدار اولیه و پیشفرض این ویژگی می باشد که علامت را به شکل یک دایره توپر در میاورد.

circle

علامت به شکل یک دایره توخالی رسم خواهد شد.
square

علامت لیست بصورت مربع خواهد بود.

decimal

آیتم های لیست با عدد نمایش داده می شوند. که این اعداد از 1 شروع می شوند.
decimal-leading-zero

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

lower-roman

آیتم ها با اعداد رومی کوچک (i, ii, iii, iv, v) نشانه گذاری می شوند.
upper-roman

آیتم ها با اعداد رومی بزرگ (I, II, III, IV, V) نمایش داده می شوند

lower-greek

آیتم های لیست با حروف یونانی کلاسیک نمایش داده می شوند.
lower-latin

آیتم ها با حروف کوچک اسکی (a, b, c,..) نمایش داده می شوند.

lower-alpha

برابر با lower-latin می باشد.
upper-latin

آیتم ها با حروف بزرگ اسکی (A, B, C,..) نمایش داده می شوند.

upper-alpha

برابر با upper-latin می باشد.
armenian

آیتم ها با اعداد زبان ارمنی نمایش داده می شود.

persian

آیتم ها با اعداد فارسی نمایش داده می شوند.
inherit

مقدار inherit باعث می شود تا ظاهر نشانه گر از لیست پدر به ارث گرفته شود.

 

علاوه بر مقادیر جدول بالا مقادیر بسیار دیگری برای آیتم های لیست وجود دارد.از مقادیر موجود در جدول بالا مقادیر circle , disc , square , none بیشتر برای لیست های نامرتب استفاده می شود.

ul {
list-style-type: circle;
}
ul li {
color: #2ad3e4;
font-size: 25px;
}

مثال؛

ol#list {
list-style-type: persian;
}
ol#list li {
color: #ec17b5;
font-size: 20px;
text-decoration: underline;
margin: 15px 5px;
}

چطور به جای آیتم ها تصویر قرار دهیم؟

آموزش رایگان CSS- جلسه 15| لیست ها در CSS
لیست ها در CSS

با استفاده از ویژگی list-style-image میتوانیم به جای اعداد یا سایر آیتم ها یک تصویر را قرار دهیم. به مثال زیر دقت کنید؛ از List-Style-Image می توان هم در لیست های مرتب و هم در لیست های نامرتب استفاده کرد.

<style>
ol {
list-style-image: url(‘images/bg-list-style-type.png‘);
}
</style>

ویژگی List-Style-Position

با استفاده از این ویژگی و دو مقدار outside و inside که میتوانند دریافت کند میتوان موقعیت آیتم ها را در صفحه ی نمایش تعیین کرد.
به طور پیش فرض لیست ها دارای یک مقدار padding پیش فرض از سمت چپ هستند که باعث می شود از سمت چپ فاصله داشته باشند وقتی موقعیت این لیست ها را inside قرار می دهیم با توجه به مقدار padding موقعیت آن تعیین می شود اما به طور پیش فرض مقدار outside برای این ویژگی در نظر گرفته شده است.

مثال؛

<style>
ul {
list-style-position: inside;
background-color: crimson;
color: #fff;
padding-left: 70px;
list-style-type: disclosure-closed;
}

Padding به طور پیش فرض با مقدار 40 پیکسل مقداردهی شده است در این مثال با تغییر مقدار padding و قرار دادن List-Style-Position با مقدار inside می توانید تغییرات را مشاهده کنید.

ul.list1 {
list-style-position: outside;
background-color: bisque;
}
ul.list2 {
list-style-position: inside;
background-color: coral;
}
</style>

تگ ul

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

 

دوره ی آموزش html و css

 

مثال؛ حالت پیش فرض تگ ul در CSS که توسط مرورگرها نمایش داده می شود؛

ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}

 

مثالی از ایجاد منوی افقی در CSS با استفاده از تگ ul؛

<body>
<div>
<ul class=”top-menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul></div>
</body>
<style>
ul.top-menu {
background: #636363;
list-style-type: none;
overflow: hidden;
padding: 17px;
border-radius: 25px;
}
ul.top-menu li {
float: right;
margin: 0 16px;
}
ul.top-menu li a {
color: #fff;
text-decoration: none;
font-family: fantasy;
transition: .5s;
}
ul.top-menu li a:hover {
color: red;
}
</style>

 

ایجاد منوی عمودی در CSS با استفاده از تگ ul؛

<body>
<div>
<ul class=”top-menu”>
<li><a class=”active” href=”#”>خانه</a></li>
<li><a href=”#”>آموزش HTML</a></li>
<li><a href=”#”>آموزش CSS</a></li>
<li><a href=”#”>درباره من</a></li>
</ul>
</div>
</body>
<style>
body {
direction: rtl;
}
ul.top-menu {
background: #e3f0f3;
list-style-type: none;
overflow: hidden;
padding: 0;
border-radius: 4px;
width: 200px;
}
ul.top-menu li a {
display: block;
padding: 10px 30px;
color: #18c3ac;
text-decoration: none;
transition: 0.5s;
}
ul.top-menu li a:hover, ul.top-menu li a.active {
color: #fff;
background: #18c3ac;
}
</style>

تمامی این استایل دهی ها را می توان برای تگ ol نیز به کار برد.

 

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊

 

4.5/5 - (2 امتیاز)
اشتراک گذاری:
برچسب: Cssآشنایی با cssآموزش رایگان CSSلیست ها در CSS
About حامد نجفی

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

More Posts by حامد نجفی
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

آموزش رایگان CSS- جلسه 16

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

آموزش رایگان CSS- جلسه 14

آموزش رایگان CSS - جلسه 13| لینک ها در CSS

آموزش رایگان CSS – جلسه 13

آموزش رایگان CSS- جلسه 12| فونت ها در css

آموزش رایگان CSS- جلسه 12

آموزش رایگان CSS - جلسه 11| متن ها در CSS

آموزش رایگان CSS – جلسه 11

آموزش رایگان CSS- جلسه 10| Height و Width در CSS

آموزش رایگان CSS- جلسه 10

قدیمی تر آموزش رایگان CSS- جلسه 14
جدیدتر شروع محتوا نویسی, آیا شما میتوانید یک محتوانویس شوید؟ (جلسه 0)

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

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • ONCIC در دانلود قالب رایگان رستوران Di Restaurant وردپرس
  • سهند در آموزش تغییر رنگ پس زمینه در وردپرس
  • mojtaba در پرینت و ذخیره اطلاعات محصول با افزونه WooCommerce PDF Invoices & Packing Slips
  • مجید بهرامی راد در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • پریا صادقی در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

تمامی حقوق مادی و معنوی این سایت متعلق به آکادمی افق وب میباشد.

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

یک × 2 =