دوره مجازی طراحی وب (جلسه 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 دیدگاه کاربران
Mahdi replyپاسخ

ممنون.باز هم مثل همیشه بدون نقص بود… ❓

Mahdi replyپاسخ

یه سوال:
اگه بخوایم سایه ای رو که برای باکس ها ایجاد میکنیم از داخل ایجاد بشه باید چیکار کنیم؟

لقمان آوند

توی ویدیو گفتیم که از مقدار inset در آخر ویژگی box-shadow استفاده کنید …

امید فیروزه replyپاسخ

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

لقمان آوند

سلام
خیر، مشکلی نداره.
منتهی حتما برای دانلود باید روی لینک موجود در مطلب کلیک کنید تا دانلود انجام بشه . (که اگر IDM داشته باشید باید خودکار توسط اون دانلود بشه)
به خاطر مسائل امنیتی، دانلود به طریق دیگه ممکن نیست.

امید فیروزه

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

لقمان آوند

سلام
از یه سیستم غیر موبایلی برای دانلود استفاده کنید …
البته با مرورگرهای دیگه ی موبایل هم تست کنید ببینید همینطوری هست ؟

Amir Th replyپاسخ

سلام استاد خسته نباشین میخواستم دو مطلبو ازتون بپرسم این که من میخوام با گوشی فایلایع ویدیو رو دانلود کنم دانلود نمیشع و دوم این که اگر میشه به من یه منبع خوب واسه طرح های اماده فتوشاپ معرفی کنین مثل سایتallday.ruالبته اگر جسارت نباشه بازم ممنون از اموزش های مفیدتون

لقمان آوند

سلام
به خاطر مسائل امنیتی این مورد فعلا امکانپذیر نیست و نمیشه از موبایل دانلود کرد .
متاسفانه چنین منبعی رو فعلا نمی شناسم …
ببخشید

nader70

http://all-free-download.com/
سری به این سایت بزن 😉

itone

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

لقمان آوند

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

امید فیروزه replyپاسخ

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

لقمان آوند

سلام اقا امید
این سری رو دنبال کنید : آموزش ایجاد گرادینت در css

امید فیروزه

مرسی

سمیرا replyپاسخ

سلام استاد. ضمن تبریک عید و سال جدید ❓
چند تا سوال کوچیک داشتم :
– چرا وقتی text indent را توی outer تنظیم میکنیم روی inner هم تاثیر میگذارد ؟ آیا به ارث برده میشه ؟
– tab-size رو کجا باید تنظیم کرد که توی کل سند html بشه استفاده کرد چون توی مثالی که زدین و تنظیم کردید باز همون 4 کاراکتر جابجا میشه . میشه کدشو بگید مثلا 8 کاراکتر فاصله بیاندازه .
– و یه نکته کوچولو : tab -size را شما اینجا px گذاشتید اما توی w3s عدد خالی گذاشته .

لقمان آوند

سلام
– بله به ارث برده میشه .
– دقت کنید tab-size فقط برای تگ pre می تونه اعمال بشه . در اینجا مثالاشو ببینید .
– عرفش همون عدد خالی هست ولی در تعریف این ویژگی طول با واحد های اندازه هم میشه گذاشت که البته مرورگرها از این یکی خوب پشتیبانی نمی کنند . حرف شما درستتره و بهتره از همون عدد خالی استفاده کنید .

مهدی خسروی replyپاسخ

سلام استاد
خسته نباشید
1- توی جلسه 12 شما خواستید یک فونت فارسی رو با یک ابزار انلاین تبدیل کنید و در صفحه وب با دستور @font-face به کار ببرید ولی گویا اون سایت در تبدیل کردن کاراکتر های فارسی مشکل داشت.
بعد سایت خودتون رو مثال زدید که توش از فونت های فارسی استفاده کردید
خواستم بپرسم خود شما چجوری فونت های فارسی رو تبدیل کردین و در سایت خودتون به کار بردین ؟
2- میخواستم تفاوت بین ‘ و ” رو بدونم.مثلا ‘BNaz’ با “BNaz” فرقش چیه که در بعضی جاها از ‘BNaz’ استفاده میشه و در بعضی جاهای دیگه از “BNaz” ؟
یک دنیا ممنون

لقمان آوند

الان دقیقا حضور ذهن ندارم . فونت دلخواهتون رو از اینجا دانلود کنید . توی گوگل عبارت web font kit generator رو سرچ کنید و از ابزارهای مختلف استفاده کنید و تست کنید ببینید کدومشون درست جواب میده .
فرق خاصی ندارند و مقادیر رو هم درون ” ” و هم درون ‘ ‘ می تونید بزارید .

hamidsb replyپاسخ

با سلام جناب آوند
سوالی در مورد box-sizing داشتم – به عنوان مثال میخوام اندازه ی لوگوی این قالبی که لینکش در زیر هست رو به ارتفاع 110px در 310px تغییر بدم که با این کار باعث تغییر مکان عناصر دیگه و بهم ریختگی اونها میشه از ویژگی باکس سایزینگ هم استفاده کردم اما مشکل حل نشد. ایا این ویژگی همونطور که فرمودید تنها برای اضافه کردن padding هستش یا نه می شه برای تغییر سایز المانهای بدون تاثیر گذاری روی عناصر دیگه هم استفاده نمود. اگر با باکس سایزینگ این مشکل حل نمی شه لطفا راهنمایی بفرماید(حتی اگر با لینک زبان اصلی هم باشه). ممنونم
بفرمایید این هم لینک(البته من برای تست از راست چین این قالب استفاده می کنم)
http://yootheme.com/demo/joomla/cloud

لقمان آوند

خیر باکس سایزینگ فقط برای در برگرفتن پدینگ به عنوان عرض عنصر استفاده میشه و مشکل تاثیر گزاری روی عناصر دیگه رو حل نمیکنه .
برای این مورد می تونید پوزیشن لوگو رو به صورت absolote بدید که تاثیری نذاره رو بقیه ..

hamidsb

ممنونم از پاسختون – پوزیشن لوگو رو به صورت absolote می زارم اما باعث میشه منو به هم بریزه

لقمان آوند

باید یه سری تغیرات انجام بدید به هر حال. وقتی ابسولوت کردید مثل اینه که از اونجا برش داشتید و ممکنه باعث بشه عناصر پایینی بیان بالا ! این موارد رو باید خودتون تصحیح کنید با کدهای css …

سید محمد رضا صدیقی replyپاسخ

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

لقمان آوند

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

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

بسیار ممنون

Farhad Ashtari replyپاسخ

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

بهرام آزادی replyپاسخ

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

لقمان آوند

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

sokoot67 replyپاسخ

درود

برای وسط چین کردن یک 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 replyپاسخ

ادامه سوال قبلی
چرا وقتی به همین 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% فاصله میدید. نه وسط تصویر رو …

محمد علیزاده replyپاسخ

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

لقمان آوند

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

itone

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

لقمان آوند

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

itone replyپاسخ

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

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

لقمان آوند

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

Aria Banazadeh replyپاسخ

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

لقمان آوند

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

ارسال نظرات

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