جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش کار با عناصر Block و Inline در CSS

آموزش کار با عناصر Block و Inline در CSS

26 شهریور 1400
ارسال شده توسط همیار من
دوره های رایگان
351 بازدید
css

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

آنچه در این جلسه میخوانید :

کار با عناصر Block و Inline در CSS

فهرست عناوین

  • کار با عناصر Block و Inline در CSS
  • برخی از مقادیر ویژگی Display
  • مثال از حالت های مختلف ویژگی Display
  • تغییر حالت نمایش یک عنصر در CSS

هر عنصر در HTML دارای ۲ حالت کلی نمایش می باشد :

  • نمایش بصورت بلاکی یا Block یا تمام عرضی
  • نمایش بصورت اینلاین یا Inline یا درون خطی

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

خب در CSS یک ویژگی داریم به اسم Display که با استفاده از این ویژگی ما میتونیم نحوه نمایش یک عنصر را بصورت بلاکی یا اینلاینی مشخص نماییم.

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

برخی از مقادیر ویژگی Display

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

  • inline : نمایش بصورت درون خطی
  • block : نمایش بصورت بلاکی
  • inline-block : همان اینلاین می باشد ولی با قابلیت ایجاد اندازه عرض و ارتفاع
  • none : بکل یک عنصر را حذف میکند یا اینجوری بگیم یک عنصر را نمایش نمیدهد

مثال از حالت های مختلف ویژگی Display

مثال شماره ۱ : حالت بلاکی یا تمام عرضی ( تگ P بصورت پیش فرض حالت نمایشش بلاکی می باشد )

1
2
3
4
5
6
7
8
<style>
 
p{
background-color:blue;
color:#fff;
}
 
</style>

مثال شماره ۲ : حالت اینلاین یا درون خطی ( تگ Span بصورت پیش فرض حالت نمایشش اینلاینی می باشد )

1
2
3
4
5
6
7
8
<style>
 
span{
background-color:red;
color:#fff;
}
 
</style>

مثال شماره ۳ : حالت Inline-block (در این مثال نحوه استفاده از این مقدار را مشاهده خواهید نمود)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
 
ul{
margin:0;
padding:0;
}
 
ul li{
background-color:green;
color:#fff;
display:inline-block;
}
 
</style>

مثال شماره ۴ : عدم نمایش یک عنصر با استفاده از مقدار None

1
2
3
4
5
6
7
<style>
 
p{
display:none;
}
 
</style>

تغییر حالت نمایش یک عنصر در CSS

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

مثلا میتونیم عنصر P ( تگ پاراگراف ) که بصورت پیش فرض حالت نمایشش بصورت بلاکی است را به اینلاینی تغییر بدهیم و یا هرعنصر دیگری را..

لیست کامل تگ های بلاکی در HTML را از اینجا مشاهده نمایید.

لیست کامل تگ های اینلاینی در HTML را از اینجا مشاهده نمایید.

مثال شماره ۱ : تغییر حالت نمایش تگ P به اینلاینی

1
2
3
4
5
6
7
8
9
<style>
 
p{
background-color:blue;
color:#fff;
display:inline;
}
 
</style>

 

مثال شماره ۲ : تغییر حالت نمایش تگ a به بلاکی (تگ a بصورت پیش فرض حالت نمایشش اینلاینی است)

1
2
3
4
5
6
7
8
9
<style>
 
a{
background-color:blue;
color:#fff;
display:block;
}
 
</style>

مقاله های پیشنهادی:

  • قالب بندی متون در HTML
  • آموزش کار با جداول در CSS
  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش چهارم
  • آموزش رایگان HTML مقدماتی تا پیشرفته
  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش دوم

اشتراک گذاری:
برچسب ها: BlockCSSInlineآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش CSS مقدماتیآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش کار با عناصر Block و Inline در CSSعنصر Blockعنصر inline
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

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

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

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

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

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

DOM چیست و چه کاربردی دارد؟

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

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

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت