با عرض سلام و خسته نباشید! تو سری تاپیکای مکتب خونه میخواییم! یه سری زبانها رو به صورت درست حسابی و با سازماندهی براتون بذارم!:geek: سعی میشه هر کدوم از پستای این تاپیک :bucktooth: کوتاه! رنگی رنگی! روون! و غیر کپی پیست باشه!:wonder: منبع رو کنسرسیوم دبلیوتری انتخاب کردم! و سایت هایی درکنارش! لطفن اگر سوالی پیش اومد بپرسین فقط! و از زدن پستهای دیه تو اینجا خودداری کنید! تا نظم این تاپیک به هم نخوره! با تشکر! عافتابگردون!
و اما CSS ! زبانی برای style دادن به صفحات نازیباعه HTML ! این زبان یه زبان آبشاری عه! یعنی این که! اگر شما در خط اول بگین فلان خط قرمز باشه! و خط دوم بگین همون خط نارنجی باشه!! در عاخر اون خط نارنجی میشه!!:giggle: یعنی از درون به بیرون اولویت کم میشه!:android: و این دس ما رو خیلی جاها باز میذاره!:bucktooth::bucktooth: و خیلی جاها هم میبنده!:arghh::arghh: ولی نکته ی خیلی مهمیه!! هر دستور CSS از قالب زیر پیروی میکنه! خب!!! این از این!!! برگه عابشاری هاعه CSS رو باید بعد از اسناد HTML بنویسیم! نه موازی باهاش! و نه حتی قبلش(!) برای استفادش سه راه داریم!! CSS درون خطی CSS درونی CSS بیرونی! نوع بیرونی از همه مهم تر و بهتر و بهینه تر عو این حرفاس! نوع بیرونی: در حالتی که مفسری ندارین همون نوت پد هستش با همون آداب نام گذاری! ولی یه تفاوتی هستش و اونم اینه که جای html. مینویسیم css. ! و بعد از ذخیره هم قیافه ی فایل مثل یه text document معمولی هستش و توی بخش type این فایل در صفحه باس نوشته باشه! Cascading Style Sheet !! برای اضافه کردن این استایل شیت به HTML از یه تگ لینک استفاده میکنیم!!! کدش چیزی مثل : <link rel="stylesheet" type="text/css" href="mystyle.css"> خب اون بخش rel مشخص میکنه که چی میخواییم لینک کنیم! که اینجا استایل شیت هستش! و در بخش تایپ هم برای همه CSSها مینویسیم! و اما href بخش خیلی مهم! در اینجا با آدرس نویسی عه داس طوری!! مسیر استایل شیت رو مینویسیم! اگر استایل شیت و سند CSS در یک فولدر باشه به طور بالا آدرس دهی میکنیم که اکثرن نیستش!! CSS درونی: اینجور CSSها بازم به بخش head برمیگرده! اینطور که یه چیزی مثل: متن مخفی: مثال CSS Internal https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_internal و اونجا دستورات CSSمونو مینویسیم! CSS درون خطی: اینجور CSS ها میان کدهای HTML به طور زیر بیان میشن! با attribute به نام style! متن مخفی: مثال CSS Inline https://www.w3schools.com/css/tryit.asp?filename=trycss_howto_inline
در قسمت دوم CSS میخواییم صدا کردن عناصر HTML رو یاد بگیریم! فراخوانی تکی: اگر عنصر مربوطه یه تگ معمولی باشه مثل همون الگوی بالا صدا میشه! مثال: متن مخفی: مثال فراخوانی معمولی https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element اگر عنصر مربوطه یک id باشه قبل اسمش یک # میگذاریم! مثال: متن مخفی: مثال فراخوانی id https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id اگر عنصر مربوطه یک کلاس باشد یک نقطه قبل از اسمش می آوریم: مثال: متن مخفی: مثال فراخوانی Class https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class اگر عنصر مربوطه یک عنصر در یک کلاس باشد (پاراگرافی در کلاس خاصی) به طور زیر باید فراخوانی شود::wonder: مثال: متن مخفی: فراخوانی عناصر خاصی از یک کلاس https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class تذکر خیلی مهم: اگر اسم یک کلاس از کلاس های شما در سند HTML مثلا "center" باشد و نام دیگری "center large" باید توجه کنید که Style ای که به کلاس "center" میدهید به کلاس "canter large" هم داده میشود! مثال: متن مخفی: مثال اسم کلاس https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class2 یادعاوری: اسم کلاس نباید با عدد شروع شود! فراخوانی دسته جمعی عناصر: اگر میخواهید چندتا عنصر یه استایل خاص رو بگیرن! میتونین به طور اسماشون رو کناز هم بنویسید و با یه کاما اونا رو از هم جدا کنین!:cool: مثال: متن مخفی: مثال فراخوانی گروهی https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping :rolleyes:به جای! [HTML]h1 {[/LEFT[/COLOR]] text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }[/HTML]
خب مبحث بعدی نوشتن کامنت در CSS هستش! که میان /*..............write your comment here............*/ نوشته میشود! درست مثل HTML خیلی هم ساده عو کوتاه!
امروز مبحث خیلی مهمیو قرار هستش شروع کنیم!!! رنـــــــــــــــــــ color in cssــــــــــــــگ در CSS! رنگ در CSS چند را ه برای تولید دارد! دقت بشه که اول قراره تولید رنگ رو یاد بگیریم بعدش استفاده از اونا! ! دو راه هگزادسیمال و RGB بسیار محبوب خوب مشهور و پراستفاده هستن!! راه های دیگه هم هست! که در ادامه میگمش!! راه دیگه ای هم هستش که اسم بنویسیم! یعنی بگیم فلان چیز رو سبز کن! یا این حرفا! و دیگه کد نویسی نکنیم!!:barefoot: خب تا اینجاش خیلی خوب هم هست!:coffee: اما نوشتن نام رنگ گاهاً چیز خوبی نیست!:bucktooth: گاهی برای ما غلظت و تُنالیته عه رنگ مهمه! و در فرهنگ اونور عابیا قهوه ای یا brown همونی نیس که ما میخواییم! یه چی تومایه ی جیگری عه داغونه! یا green سبز های چمنی، صدری و غیره رو پوشش نمیده!:banghead::banghead::banghead: خب فک کنم از لزومات یاد گرفتن کدنویسی گفتم!!:wonder::wonder::wonder: یه اتمام حجت بکنم!:arghh::arghh::arghh::arghh: رنگها خیلی چیزای ساده و مهمی هستن! و کمی حوصله میخادش! که بدون color picker W3C خودتون رنگ بسازین! و این فقط میطلبه که بدونین با اضافه کردن هر عنصر چه بخشی از رنگ تغییر میکنه که بهتون جای تمرینمش نشون میدم! اولی RGB!! به صورت زیر الگوی کدش هستش! (rgb(red,green, blueخب!! شما میتوانید از 0 تا 256 جای اون اسم رنگ ها بذارید! (کاما فراموش نشود) و اینکه رنگ عابی رنگ رو رو به کبودی!:cautious: میبره! قرمز یه حالتی روشن میکنه!:cautious: و سبز هم تیره میکنه رنگ رو!:cautious: با تمرین خودتون به یه دید خوب میرسید!:giggle: برای تمرین به سرفصل : متن مخفی: RGB Value https://www.w3schools.com/css/css_colors.asp اونجا انقدر با مقدار رنگ ها بازی و تمرین کنید تا یاد بگیرین!!! نکات مربوطه: اگر همه ی ارزش ها صفر باشند (مقادیر در پرانتز) حاصل رنگ سیاه، اگر 256 باشند حاصل رنگ سفید میشود! اگر قرمز و سبز 256 باشه عو عابی 0 حاصل زرد میشه! اگر قرمز و عابی 256 باشه و سبز صفر حاصل بنفش! اگر سبز و عابی 256 باشه و قرمز 0 حاصل آبی فیروزه ای یا همون cyan میشه!!! بقیه ی مقادیر رنگ هایی به این رنگ تولید میکنند! گفتم تا هنگام عدد دهی پیش زمینه ی فکری داشته باشین! دومی هگزادسیمال!!HEX این روش الگوی زیر رو داره: rrggbb#میبینید!! که یه هشتگ داریم!!و سه عدد دو رقمی که از چپ به راست! این عددای دو رقمی مربوط به قرمز، سبز و عابی هستن! (:cool::cool::cool:شباهتش به روش قبلی بسیار باس نشون داده باشه:cool::cool::cool:) و اما این اعداد از 00 تا FF هستن!! (اعداد در مبنای 16:ninja::ninja::ninja:) نکات بالا برای این روش صادقه تنها به جای 256 اینجا میگیم اگر FF باشه!!:geek::geek::geek::geek: و نکته ی خاص این روش!! اینه که اگر ارقام تکرار باشن به صورت aabbcc# میشه نوشت abc# و همون اثر رو داره!!:wonder::wonder: سومی روش HSL!!:coffee: کمی هم متفاوته!!! البته محدودیت هایی هم داره!مثلا دو روش قبلی در فتوشاپ هستن و کد رنگهای دو روش قبل در CSS و adobe Photoshop یکسانه! و شما میتونید مستقیماً استفاده کنید! یا حتی میتونید به راحتی! دو روش قبل رو به هم تبدیل کنید!!! یعنی هگزادسیمال رو به RGB و بلعکس! اما تبدیل این دو تا به hsl سخته! و تبدیل hsl به اینا هم کار عاسونی نیستش!! روش hsl حتی با تمامی محدودیت هاش طیف رنگیش هم گسترده تر از دو روش قبلی نیستش! و در ضمن اینکه hsl نمیتونه با hsb در فتوشاپ ارتباط خوبی برقرار کنه! و مقادیرش در یک رنگ مشابه با hsb یکسان نیست!!! ولی ولی ولی!! شما به عنوان یه دیزاینر باید این متد هم بلد باشین! چرا که تو توسعه ی وبی که یکی دیگه ساخته شاید نیاز بشه! چون دید در hsl دایرع ای هستش!! :rolleyes::rolleyes: در پست بعدی توضیح میدم! تا با این دو روش قاطی نشه! و خب این پست هم خیلی طولانی شده!! و همینطور متغیر کاربردی عه عالــــــalphaــــــفا عو !!:giggle::giggle:
برای کدنویسی رنگ ها راه سومی هست به نام hsl .. برای این کار ابتدا باید اون دید دایره ای عو پیدا کنیم.. شکل: این شکل که قرمز در °0 هستش.... سبز در °120 و... حالا شبیه چیه اون شکل؟! شبیه یه رنگین کمان ک سر و تهشو بهم وصل کنیم.. میشه این دایره....
HSL همونطور که از اسمش پیداست دارای سه مولفه در hue و saturation و Luminosity است یعنی اینطوریه الگوش: hsl (hue , saturation , luminosity) is patternفقط پارامتر اول با درصد بیان نمیشود! بخش اول یا hue درجه رنگ رو از دایره ی بالا مشخص میکنید!!!:rolleyes::rolleyes::rolleyes: بخش دوم saturation هستش!! این یکی شدت رنگ رو مشخص میکنه!! چقدر پرنگ یا کمرنگ باشه!!! اگر دو پارامتر دیه رو ثابت نگه داریم! و این یکی عو تغییر بدیم! مثل زیر میشه حاصل!:sneaky: دید که صد درصد خود رنگ هست و هرچه کمتر بشه! به سمت خاکستری حرکت میکنیم! دومیش luminosity هست اینم درصدی باید نوشته بشه!!! تاثیر تغییراتش هنگام ثابت موندن دو پارامتر دیه رو میبینیم! در زمینه ی کارکردش! از سایتی نقل قول مستقیم میارم! [Luminosity یا درخشندگی مشخص می کند که رنگ چقدر از سیاهی و سفیدی فاصله دارد. درخشندگی 50% به این معنی است که میزان تیرگی و روشنی رنگ متعادل است و اساسا بدون تغییر باقی می ماند . کم کردن میزان luminosity رنگ را تیره می کند: تمام رنگ های HSL با میزان luminosity صفر کاملا سیاه هستند. زیاد کردن luminosity رنگ را روشن می کند : در luminosity 100 % ، تمام رنگ های HSL سفید هستند.] حالا میبینیم! که پیدا کردن رنگ با این روش عاسون تره! ولی محدودیتای خاص خودشو داره!:bucktooth::bucktooth::bucktooth:
متغیر کار بردی آلفا در کم رنگ کردن رنگ! یعنی شما بخوایید یه طوری یه عنصر رو رنگ کنید که پشتش رو نشون بده و مقداری شفاف باشه!! این متغیر خاص روش هایی هستش که پرانتز دارن!!! به اینطور که بعد از گذاشتن یه کاما!! بعد از مشخص کردن پارامتر سوم! یک عدد بین صفر تا یک مینویسین!! 0 خیلی کم رنگ میکنه رنگ رو یعنی انگار شیشه هستش!! 1 هم خیلی پر رنگه انگاری کدر هستش!!:cautious::cautious::cautious: و اعداد بینشون هم هرچقدر به صفر نزدیک باشن شفاف و هرچقدر به یک نزدیک باشند کدر هستند! مثالش::speechless: متن مخفی: مثال ALPHA https://www.w3schools.com/css/tryit.asp?filename=trycss_color_hsla2
و اما بک گراند و پس زمینه! در CSS چگونه تعیین و استفاده میشه!! بک گراند میتونه رنگ باشه!! مث خیلی از سایتا و اینجا که بک گراندش سفیده!! و با تکه کد background-color: color name مشخص میشود! مثال: متن مخفی: بک گراند رنگ https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_body رنگ بک گراند هم کد نویسیشو یاد دادیم قبلا! میشه برای هر عنصر HTML یه بک گراند جدا داشته باشیم! مثلا: متن مخفی: Multi Back Ground https://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_elements میشه عکس هم بذارید بک گراند!:cool: خب عکس یه کم داستان داره!:bucktooth: در حالت عادی عکس بذارید بک گراند با تکیه کد: Background-image :url( address) is patternمثال: متن مخفی: بک گراند خیلی عادی https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image بدیهی هستش که بک گراند نباید طوری باشه که متن رو نشه تشخصی داد مثل : متن مخفی: بک گراند بد https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_bad تکرار بک گراند! خب همنطوری که میدونیم! ممکنه عکس منتخب برای بک گراند یه چیز خیلی کوچیک باشه و اصلا اندازه ی صفه ی سایت نباشه!:rolleyes: در حالت پیش فرض بروز یا مرورگر ما عکس رو هم در راستای محور xها (طول) و هم محور عرض ها (Y) تکرار میکند! و کدهاشون هم background-repeat: reapet-x or reapet-y هستن!! ما میتونیم! بگیم تنها عکس در یه راستا تکرار بشه! و این بسته به عکس هست! و عنصری که داریم براش بک گراند میذاریم!! مثال حالت پیش فرض رو نگاه کنید عکس در هر دو راستا تکرار شده است! متن مخفی: تکرار در 2 راستا https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient1 مثال تکرار در راستای محور xها: متن مخفی: تکرار در راستای xها https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient2 مثال تکرار در راستای yها: متن مخفی: تکرار در راستای yها https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_gradient2 میشه بگیم اصلا تکرار نکنه! bakground-repeat:none یعنی اینطوری: متن مخفی: بی تکرار https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_norepeat میشه گفت بک گراند کجا بشینه!!! بالای صفه پایین یا .....:cautious: مکان های صفحه عبارتند از: بالا: top پایین: bottom راست: right چپ: left بالا راست: top right بالا چپ: top left پایین راست: bottom right پایین چپ: bottom left مرکز: center برای اینکه بگید در کدوم یک از این محل ها عکس بک گراندتون قرار بگیره! میتونید یکی از مقادیر بالا عو جلوی background-position بنویسید!:speechless: متن مخفی: back ground position https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_position دقت کردید تا به حال تو وبلاگا مخصوصن با اسکرول کردن صفحه بک گراندشون ثابته! یکی از راهکار ها فیکس کردن بک گرانده! :bucktooth: با کد عه: background-attachment: fixed مثال: متن مخفی: بک گراند ثابت https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image_attachment دقت کنید که ما همه ی موارد رو توی یه کد مستقل نوشتیم!!! میشه به صورت خولاصه نوشت!! یعنی به طور زیر: متن مخفی: خلاصه https://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand تمرین داریم: متن مخفی: تمرین 1 https://www.w3schools.com/css/exercise.asp?filename=exercise_background1 متن مخفی: تمرین 2 https://www.w3schools.com/css/exercise.asp?filename=exercise_background2 متن مخفی: تمرین 3 https://www.w3schools.com/css/exercise.asp?filename=exercise_background3 متن مخفی: تمرین 4 https://www.w3schools.com/css/exercise.asp?filename=exercise_background4 متن مخفی: تمرین 5 https://www.w3schools.com/css/exercise.asp?filename=exercise_background5
