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

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

در این جلسه هم مثل جلسه قبل به آموزش ادامه ویژگی های زبان CSS می پردازیم . در این جلسه ویژگی های مربوط با باکس-مدل و سایه ها برای متن ها و تگها، و خصوصیت های متن و فونت رو به شما معرفی می کنیم.

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

  • ویژگی border و کاربردهای آن
  • ویژگی border-bottom و کاربردهای آن
  • ویژگی border-bottom-color و کاربردهای آن
  • ویژگی border-bottom-left-radius و کاربردهای آن
  • ویژگی border-bottom-right-radius و کاربردهای آن
  • ویژگی border-bottom-style و کاربردهای آن
  • ویژگی border-bottom-width و کاربردهای آن
  • ویژگی border-color و کاربردهای آن
  • ویژگی border-image و کاربردهای آن
  • ویژگی border-left و کاربردهای آن
  • ویژگی border-left-color و کاربردهای آن
  • ویژگی border-left-style و کاربردهای آن
  • ویژگی border-left-width و کاربردهای آن
  • ویژگی border-radius و کاربردهای آن
  • ویژگی border-right و کاربردهای آن
  • ویژگی border-right-color و کاربردهای آن
  • ویژگی border-right-style و کاربردهای آن
  • ویژگی border-right-width و کاربردهای آن
  • ویژگی border-style و کاربردهای آن
  • ویژگی border-top و کاربردهای آن
  • ویژگی border-top-color و کاربردهای آن
  • ویژگی border-top-left-radius و کاربردهای آن
  • ویژگی border-top-right-radius و کاربردهای آن
  • ویژگی border-top-style و کاربردهای آن
  • ویژگی border-top-width و کاربردهای آن
  • ویژگی border-width و کاربردهای آن
  • ویژگی box-shadow و کاربردهای آن
  • ویژگی text-shadow و کاربردهای آن
  • ویژگی overflow و کاربردهای آن
  • ویژگی overflow-x و کاربردهای آن
  • ویژگی overflow-y و کاربردهای آن
  • ویژگی padding و کاربردهای آن
  • ویژگی padding-bottom و کاربردهای آن
  • ویژگی padding-left و کاربردهای آن
  • ویژگی padding-right و کاربردهای آن
  • ویژگی padding-top و کاربردهای آن
  • ویژگی margin و کاربردهای آن
  • ویژگی margin-bottom و کاربردهای آن
  • ویژگی margin-left و کاربردهای آن
  • ویژگی margin-right و کاربردهای آن
  • ویژگی margin-top و کاربردهای آن
  • ویژگی letter-spacing و کاربردهای آن
  • ویژگی line-height و کاربردهای آن
  • ویژگی tab-size و کاربردهای آن
  • ویژگی text-align و کاربردهای آن
  • ویژگی text-indent و کاربردهای آن
  • ویژگی text-justify و کاربردهای آن
  • ویژگی text-transform و کاربردهای آن
  • ویژگی white-space و کاربردهای آن
  • ویژگی word-break و کاربردهای آن
  • ویژگی word-spacing و کاربردهای آن
  • ویژگی word-wrap و کاربردهای آن
  • ویژگی text-decoration و کاربردهای آن
  • ویژگی text-decoration-color و کاربردهای آن
  • ویژگی text-decoration-line و کاربردهای آن
  • ویژگی text-decoration-style و کاربردهای آن
  • ویژگی @font-face و کاربردهای آن
  • ویژگی font و کاربردهای آن
  • ویژگی font-family و کاربردهای آن
  • ویژگی font-size و کاربردهای آن
  • ویژگی font-style و کاربردهای آن
  • ویژگی font-variant و کاربردهای آن
  • ویژگی font-weight و کاربردهای آن

 

:: توجه

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

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

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

جلسات دوره

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

Aria Banazadeh

با سلام من طبق چیزی که خوندم توی w3schools نیازی به اوردن margin:0 auto نیست و فقط اوردن margin:auto این کار را برای ما انجام می دهد و المنت را برای ما وسط چین میکند پس چرا شما از margin:0 auto استفاده کردید؟

لقمان آوند

0 اول که گذاشتیم برای تعین فاصله از بالا و پایین هست. چپ و راست مهمه که auto باشه. تو حالتی که auto خالی هست برای بالا و پایین هم فواصل پیش فرض رو در نظر می گیره

itone

سلام استاد اوند عزیز یه سوال در مورد line-height:;داشتم !!!
استاد مقدار این ویژگی میتونه منفی بگیره مثلا واسه این عکس
https://s2.picofile.com/file/8262309042/Screenshot_from_2016_08_03_16_51_52.png

وسوال دیگه اینکه
استاد الان تا این جلسه ما میتونیم قالب کد بزنیم 😛 😛 و طراحی کنیم ؟ 🙂 🙂
طاقتم تموم شده 😳 😐 😥 😥 😥 😥 😥 😥
و اینکه واسه اینکه تب بین نوشته ها اعمال بشه و فاصله ها باید از تگ pre استفاده کنیم ؟؟؟
توی تعریف تگ pre گفتین برای اینکه یه کد برنامه نویسی توی صفحه وب استایل و فاصله ها توی خروجی اهمال بشه میتونین ازش استفاده کنیم
ممنون بابت پاسخگویی خوبتون

لقمان آوند

سلام
هر عدد صحیحی می تونه بگیره منتهی عرف نیست مقدار منفی استفاده کنید
می تونید ولی بهتره دوره رو تا آخر ببینید. خیلی موارد رو توی پروژه ها می گیم که بدردتون می خوره در عمل
بله از pre استفاده کنید

محمد علیزاده

سلام
امیدوارم حالتون خوب باشه
یه سوال داشتم استاد اوند
چرا متن هایی که درون تگ div هست رو با تگ br ازهم جدا کردین مگه شما نگفتین نباید در المانهای بلاکی از تگ
br استفاده کرد..؟
سوال بعد اینکه چرا در تگ text-indent از واحد cmاستفاده کردید در حالی که در سایت w3s از واحد px استفاده کرده..؟
ایا واحد cm برای متن استفاده بشه اشکالی نداره…؟
پیشاپیش ممنون از پاسخ دهی شما استاد عزیز.

لقمان آوند

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

itone

استاد اوند اگه اشتباه نکرده باشم توی اویل گفته بودید که از این نوع واحد ها استفاده نکنیم توی طراحی هامون و باعث اسکرول خوردن میشه درسته ؟؟؟؟

لقمان آوند

واحد ها برای استفاده هستند. مهم اینه که درست استفاده کنید…

sokoot67

ادامه سوال قبلی
چرا وقتی به همین img
position: absolute;
top: 50%;
left: 50%;
در حالی که اولین پدرش که همین باکش قرمز هست position:relative هست
و عکس که فرزندش هست نسبت بهش تراز میشه
و چنین می شود عکس زیر
https://uupload.ir/files/0lei_1-14-2016_7-28-42_pm.png
ولی با 34% تقریبا وسط میشه
چرا با 50 درصد نمیشه؟

لطفا راهنمایی کنید خیلی برام مهمه
ممنون

لقمان آوند

خوب شما چپ و بالای تصویر رو 50% فاصله میدید. نه وسط تصویر رو …

sokoot67

درود

برای وسط چین کردن یک div طبق ترفند margin:0 auto به صورت افقی وسط چین می شد
یک div ایجاد کردم با طول و عرض مشخص و درونش یک عکس گذاشتم
حالا برای وسط چین کردن در محور عمود چکار باید کرد؟
مثلا طبق عکسی که در زیر لینکش رو گذاشتم
https://uupload.ir/files/tzlr_1-14-2016_7-23-15_pm.png
و با کد زیر عکس در div در محور افق وسط چین شد
display: block;
margin: 0 auto;
ولی چکار کنم در محور عمود هم بشه؟

لقمان آوند

سلام
این مقاله رو بخونید . این مورد درش توضیح داده شده.

بهرام آزادی

سلام
یه سوال داشتم
فرمودید که استایل دهی در html5 بکلی بر عهده css3 گذاشته شده و ما برای استایل دهی حق استفاده از attribute های html رو نداریم
این در حالی هست که ما در html 5 خاصیت dir رو داریم که همان کاری را انجام میدهد که کد css مشابه آن یعنی direction انجام میدهد و همان استایل دهیست و قاعدتا نباید در html5 تعریف میشد
نظر شما چیه؟

لقمان آوند

این خصوصیت رو از ویژگی های مربوط به زبان محتوا بدونید. مثل lang . بعضا می تونه به موتور های جستجو در تعین جهت نوشتاری محتوا کمک کنه .

Farhad Ashtari

استاد فکر می کنم این سایت برای تبدیل فونت به فرمت های مختلف مناسب باشه. من تست کردم با فونت های فارسی مشکلی نداشت:
https://everythingfonts.com

سید محمد رضا صدیقی

سلام خسته نباشید می خواستم بدونم چجوری می تونم کاری کنم که در ادیتور phpstorm مثل notepad++ کنار صفحه شماره خط ها بیاد و بشه راحت تر خط مورد نظر رو از طریق شماره پیدا کرد.

لقمان آوند

سلام
Settings | Editor | (General) | Appearance | Show line numbers

سید محمد رضا صدیقی

بسیار ممنون

لقمان آوند

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

itone

سلام من اومدم دوباره 😀 😀 😀 😀 😀 😀
استاد میدونم اینجا جاش نیست و هنوز به قسمت تبدیل فتوشاپ به html , css نرسیدم!!!۱ 😕 😕
ولی یه سوال :
موقعی که میخایم یه فایل فتوشاپو تبدیلش کنیم به html , css باید از کدوم ور 😛 یعنی کدام طرف 😎 المان ها رو بنویسیم از چپ یا راست ؟؟
یه مثال میزنم
مثلا توی م میخام صفحه ایندکس سون لرن رو دارم میخام تبدیل کنم به html ,css 😛
قالب یه هدر داره ک اول مینویسیمش بد میایم سراغ بدنه
بدنرو اول باید از aside شروع کنیم به نوشتن یا قسمت article رو بنویسیم و بعد بریم سراغ 😯
aside ?????
😕 😕 😕 😕 😕 فقط یه موقع فکر نکنین میخام قالب سون لرنو بلند کنم ؟ 😛 😀 😀 😀 😀 😯 😉 😉 😉 😆 😆 😆 😆 😆 😆
فقط یه مثال زدم 😳 🙁 ❗ 😀 😉 😆 😎

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

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

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

نیاز به لاگین

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