ویژگی های CSS - قسمت سوم

دسته بندی: آموزش
زمان مطالعه: ۲ دقیقه
۱۶ بهمن ۱۳۹۳

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

عموم مطالبی که در این جلسه مطرح می شوند عبارتند از :

  • ویژگی position و کاربردهای آن
  • ویژگی top و کاربردهای آن
  • ویژگی left و کاربردهای آن
  • ویژگی bottom و کاربردهای آن
  • ویژگی right و کاربردهای آن
  • ویژگی float و کاربردهای آن
  • ویژگی clear و کاربردهای آن
  • ویژگی clip و کاربردهای آن
  • ویژگی display و کاربردهای آن
  • ویژگی height و کاربردهای آن
  • ویژگی width و کاربردهای آن
  • ویژگی visibility و کاربردهای آن
  • ویژگی vertical-align و کاربردهای آن
  • ویژگی line-height و کاربردهای آن
  • ویژگی direction و کاربردهای آن
  • ویژگی text-align و کاربردهای آن
:: توجه

این مطلب یک جلسه از آموزش طراحی وب سایت می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی وب سایت

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

محمدرضا

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

محمدرضا

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

لقمان آوند

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

وحید صف آرا
  Document
 *
   {
    /* padding: 0px;
  margin: 0px;*/
   }
 div
 {
   /*padding: 0px;
   margin: 0px;*/
   position: absolute;
   left: 50%;
   bottom: 50%;
   background-color: teal;
   width: 100px;
   height: 100px;
   /*clear: both;*/
 }
 

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

کیوان علی محمدی

سلام برای وسط قرار دادن در صفحه استایل اون المنت خاص رو باید با margin بالا و پایین با عددی مشخص قرار بدین و margin چپ و راست رو مقدار auto قرار بدین.

web master ayandeh

سلام مهندس
خسته نباشید
من خواستم یه چیزی رو بگم که شما فکر کنم داخل فیلم حواستون نبودش (البته دارم جسارت میکنم )
در دقیقه حدودا 43 وقتی داشتین موقعیت float به سایدار و کانتنت میدادین اومدین درصد بکار بردین و باکس رو از نوع border-box قرار دادید ولی باز هم کنار هم قرار نگرفتن و فرمودید احتمالا بخاطر پدینگ و مارجین های دیفالت مرورگر هست
من دقت کردم در فیلم شما کد box-sizing: border-box; رو به دایو کانتنت دادید ولی به دایو سایدبارمون ندادید و بخاطر همین که دایو سایدبارمون نوع باکسش دیفالت مرورگر بود برای بوردر 2 پیکسل اضافه میکرد
به همین دلیل در یک راستا قرار نمیگرفتن و به خط بعد میرفتن

بازم جسارتمو ببخشید
موفق باشید

لقمان آوند

نه خواهش میکنم
بعضی وقتا موقع ضبط ممکنه تمرکز کافی رو نداشته باشیم و اینجور موارد پیش بیاد.
ممنون از ذکر این مورد

itone

سلام استاد اوند عزیز …
استاد تفاوت line-height
با vertical-align
چیه ؟؟؟
مثلا اگه بخایم یه عکسو تراز عمودیشو درست کنیم …. میتونیم از line -height استفاده کنیم و هم vertical-align فقط line-heightمقدار منفی نمیگیره ؟؟؟
کاربردشون و فهمیدم ولی نمیدونم کجا باید کدوماشونو استفاده کنم … 😳 🙁 🙁 🙁

وحید صالحی

line-height برای فاصله بین دوخط یا کلا خطوط متنی استفاده میشه و vertical-align برای تراز عمودی عناصر که نیاز به پراپرتی های مکمل در کنارش داره تا کار کنه مثل پراپرتی display

barati

سلام استاد
برای کامنت کردن یک تکه کد در php storm چه کاری انجام میدادید ؟

لقمان آوند

ctrl + /
ctr + shift + /

itone

تشکر میکنم از دوست خوبم barati‏ ک این سوالو پرسیدن …
و سلام خدمت دوست خوبم اقا لقمان
استاد اوند ما در اکثر زبان های برنامه نویسی کامنت سینگل لاینی داریم (خودت ک بیشتر از من بلدی ::)) )اینجا توی css همچین ساختاری رو نداریم ؟؟؟
/**/
single line //
single line #
بازم تشکر واسه پاسخ گویی خوبتون و زحماتی ک میکشین … 😆

وحید صالحی

خیر نداریم مگر اینکه از پیش پردازنده های css مثل less و یا sass برای کدنویسی css استفاده کنید

Seyedali Zia

سلام استاد من برای این که طول یک تصویر رو مطابق با پنجره مرورگر کنم از علامت درصد استفاده می کنم اما متاسفانه هیچ تغییری توی صفحه نمی بینم. کد رو به این شکل وارد می کنم :
<!–

–>
و در فایل سی اس اس :
#headerimage{
width: 100%;
}
با مشخصه های margin-right , margin-left هم موفق نشدم.
خواستم تصویر رو از طرف کدهای سی اس اس به عنوان پس زمینه لود کنم که توی این حالت هم حتی تصویر نمایش داده نمی شه.
کدهای من مشکل دار هستن یا ایراد از نرم افزاره؟!

وحید صالحی

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

امین

سلام
سوالی در مورد این جلسه ندارم عالی بود , فقط خواستم بگم در دقیقه 44 که اومدین از ویژگی box-sizing: border-box; استفاده کردین ولی باز هم با مجموع 100 درصد عرض width , سایدبار و کانتنت کنار هم نیومد دلیلش اینه که شما اومدین این ویژگی رو در .main .content و .main .footer قرار دادین که اگه این ویژگی باکس سایزینگ رو در .main .contentو .main .side (بجای فوتر) قرار بدین با مجموع 100 درصد عرض سایدبار و کانتنت کنار هم میان .

لقمان آوند

ممنون از نکته ای که گفتین.

مهدی خسروی

سلام استاد
خسته نباشید
میخواستم بدونم در position : relative مقدار
top : -50px
با
bottom : 50px
چه فرقی میکنه ؟
وقتی میتونیم فاصله از پایین رو برابر 50px قرار بدیم چرا باید فاصله بالا رو 50px- بگذاریم ؟

لقمان آوند

تقریبا فرقی نداره . چون مبدا top و left هست معمولا از این دو بیشتر استفاده میشه .

لقمان آوند

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

پایان زمان پشتیبانی

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

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

نیاز به لاگین

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