دوره مجازی طراحی وب (جلسه 12): ویژگی های CSS - قسمت دوم

- visibility ۴۱ mode_comment

در این جلسه هم مثل جلسه قبل به آموزش ادامه ویژگی های زبان 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 و کاربردهای آن

 

info توجه

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

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

comment دیدگاه کاربران
بهرام آزادی

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

لقمان آوند

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

sokoot67

درود

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

لقمان آوند

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

sokoot67

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

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

لقمان آوند

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

محمد علیزاده

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

لقمان آوند

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

itone

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

لقمان آوند

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

itone

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

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

لقمان آوند

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

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

لقمان آوند

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

نیاز به لاگین

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