1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

(:--(مکتب خونه:CSS:)--!)

شروع موضوع توسط AftabGardoon ‏18/1/18 در انجمن CSS

  1. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    با عرض سلام و خسته نباشید!:hand:
    تو سری تاپیکای مکتب خونه میخواییم!
    یه سری زبانها رو به صورت درست حسابی و با سازماندهی براتون بذارم!:geek:
    سعی میشه هر کدوم از پستای این تاپیک :bucktooth:
    کوتاه!:))
    رنگی رنگی!:D
    روون!:roflmao:
    و غیر کپی پیست باشه!:wonder:
    منبع رو کنسرسیوم دبلیوتری انتخاب کردم! و سایت هایی درکنارش!:smuggrin:
    لطفن اگر سوالی پیش اومد بپرسین فقط!:happy:
    و از زدن پستهای دیه تو اینجا خودداری کنید!;;)
    تا نظم این تاپیک به هم نخوره!:">
    با تشکر! :x
    عافتابگردون!:d
     
    ღtaraღ، n@der، m naizar و 2 نفر دیگر از این ارسال تشکر کرده اند.
  2. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    و اما CSS !
    زبانی برای style دادن به صفحات نازیباعه HTML:> !
    این زبان یه زبان آبشاری عه! :d
    یعنی این که! اگر شما در خط اول بگین فلان خط قرمز باشه! و خط دوم بگین همون خط نارنجی باشه!!:bored::bored:
    در عاخر اون خط نارنجی میشه!!:giggle:

    یعنی از درون به بیرون اولویت کم میشه!:android:
    و این دس ما رو خیلی جاها باز میذاره!:bucktooth::bucktooth:
    و خیلی جاها هم میبنده:|!:arghh::arghh:

    ولی نکته ی خیلی مهمیه!!

    هر دستور CSS از قالب زیر پیروی میکنه!

    [​IMG]
    خب!!! این از این!!!

    برگه عابشاری هاعه CSS رو باید
    بعد از اسناد HTML بنویسیم! نه موازی باهاش! و نه حتی قبلش(!)

    برای استفادش سه راه داریم!!

    1. CSS درون خطی
    2. CSS درونی
    3. 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مونو مینویسیم!


    CSS درون خطی:

    اینجور CSS ها میان کدهای HTML به طور زیر بیان میشن! با attribute به نام style!

     
    ღtaraღ، m naizar، Sheida و 2 نفر دیگر از این ارسال تشکر کرده اند.
  3. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    در قسمت دوم CSS
    میخواییم صدا کردن عناصر HTML رو یاد بگیریم!:)):)):)):D:D:D


    فراخوانی تکی:
    اگر عنصر مربوطه یه تگ معمولی باشه مثل همون الگوی بالا صدا میشه!

    مثال:

    اگر
    عنصر مربوطه یک id باشه قبل اسمش یک # میگذاریم!
    مثال:

    اگر
    عنصر مربوطه یک کلاس باشد یک نقطه قبل از اسمش می آوریم:
    مثال:

    اگر عنصر مربوطه
    یک عنصر در یک کلاس باشد (پاراگرافی در کلاس خاصی) به طور زیر باید فراخوانی شود::wonder:
    مثال:

    تذکر خیلی مهم: اگر اسم یک کلاس از کلاس های شما در سند HTML مثلا "center" باشد و نام دیگری "center large" باید توجه کنید که Style ای که به کلاس "center" میدهید به کلاس "canter large" هم داده میشود!:bored::bored:
    مثال:

    یادعاوری: اسم کلاس نباید با عدد شروع شود:))!

    فراخوانی دسته جمعی عناصر:
    اگر میخواهید چندتا عنصر یه استایل خاص رو بگیرن! میتونین به طور اسماشون رو کناز هم بنویسید و با یه کاما اونا رو از هم جدا کنین!:cool:
    مثال: :redface:
    :rolleyes:به جای!:redface:

    [HTML]h1 {[/LEFT[/COLOR]]

    text-align: center;
    color: red;
    }

    h2 {
    text-align: center;
    color: red;
    }

    p {
    text-align: center;
    color: red;
    }[/HTML]
     
    ღtaraღ، m naizar، Sheida و 2 نفر دیگر از این ارسال تشکر کرده اند.
  4. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    خب مبحث بعدی نوشتن کامنت در CSS هستش!:happy:

    که میان /*..............
    write your comment here............*/

    نوشته میشود! درست مثل HTML
    :D:D:D

    خیلی هم ساده عو کوتاه!:roflmao::roflmao::roflmao:
     
    ღtaraღ، m naizar، Sheida و 2 نفر دیگر از این ارسال تشکر کرده اند.
  5. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    امروز مبحث خیلی مهمیو قرار هستش شروع کنیم!!!:d:d:d:d
    رنـــــــــــــــــــ
    color in cssــــــــــــــگ در CSS!/:)/:)
    رنگ در CSS چند را ه برای تولید دارد!:>:>:>

    دقت بشه که اول قراره تولید رنگ رو یاد بگیریم بعدش استفاده از اونا!:)) !:roflmao::roflmao:

    دو راه هگزادسیمال و RGB بسیار محبوب:love: خوب:love: مشهور:love: و پراستفاده:love: هستن!!:love::love::love::love::love:
    راه های دیگه هم هست! که در ادامه میگمش!!:happy:
    راه دیگه ای هم هستش که اسم بنویسیم! یعنی بگیم فلان چیز رو سبز کن! یا این حرفا! و دیگه کد نویسی نکنیم!!:barefoot:
    خب تا اینجاش خیلی خوب هم هست!:coffee:
    اما نوشتن نام رنگ گاهاً چیز خوبی نیست!:bucktooth:
    گاهی برای ما غلظت و تُنالیته عه رنگ مهمه:))!:D:D
    و در فرهنگ اونور عابیا قهوه ای یا brown همونی نیس که ما میخواییم:|! یه چی تومایه ی جیگری عه داغونه:|!:eek::eek::eek:
    یا green سبز های چمنی، صدری و غیره رو پوشش نمیده!:banghead::banghead::banghead:
    خب فک کنم از لزومات یاد گرفتن کدنویسی گفتم!!:wonder::wonder::wonder:

    :blush:یه اتمام حجت بکنم!:arghh::arghh::arghh::arghh:
    رنگها خیلی چیزای ساده و مهمی هستن! و کمی حوصله میخادش! که بدون color picker W3C خودتون رنگ بسازین!
    و این فقط میطلبه که بدونین با اضافه کردن هر عنصر چه بخشی از رنگ تغییر میکنه که بهتون جای تمرینمش نشون میدم:))!:roflmao::roflmao::roflmao:

    اولی RGB!!
    به صورت زیر الگوی کدش هستش!
    (rgb(red,green, blue
    خب!! شما میتوانید از 0 تا 256 جای اون اسم رنگ ها بذارید! (کاما فراموش نشود:)))
    و اینکه رنگ عابی رنگ رو رو به کبودی!:cautious: میبره! قرمز یه حالتی روشن میکنه!:cautious: و سبز هم تیره میکنه رنگ رو!:cautious:
    با تمرین خودتون به یه دید خوب میرسید!:giggle:
    برای تمرین به سرفصل ::redface:
    اونجا انقدر با مقدار رنگ ها بازی و تمرین کنید تا یاد بگیرین!!:))!:dream:

    نکات مربوطه:

    • اگر همه ی ارزش ها صفر باشند (مقادیر در پرانتز) حاصل رنگ سیاه، اگر 256 باشند حاصل رنگ سفید میشود!:smile:
    • اگر قرمز و سبز 256 باشه عو عابی 0 حاصل زرد میشه!:happy:
    • اگر قرمز و عابی 256 باشه و سبز صفر حاصل بنفش!:smile:
    • اگر سبز و عابی 256 باشه و قرمز 0 حاصل آبی فیروزه ای یا همون cyan میشه!!!:happy:
    • بقیه ی مقادیر رنگ هایی به این رنگ تولید میکنند! گفتم تا هنگام عدد دهی پیش زمینه ی فکری داشته باشین!:smile:

    دومی هگزادسیمال!!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:


    کمی هم متفاوته!!!:bored::bored::bored:
    البته محدودیت هایی هم داره!مثلا دو روش قبلی در فتوشاپ هستن و کد رنگهای دو روش قبل در CSS و adobe Photoshop یکسانه!:smuggrin:
    و شما میتونید مستقیماً استفاده کنید!:smuggrin:
    یا حتی میتونید به راحتی! دو روش قبل رو به هم تبدیل کنید!!! یعنی هگزادسیمال رو به RGB و بلعکس!:smuggrin:
    اما تبدیل این دو تا به hsl سخته! و تبدیل hsl به اینا هم کار عاسونی نیستش!!:hopeless:
    روش hsl حتی با تمامی محدودیت هاش طیف رنگیش هم گسترده تر از دو روش قبلی نیستش!:|:hopeless:
    و در ضمن اینکه hsl نمیتونه با hsb در فتوشاپ ارتباط خوبی برقرار کنه!:|:hopeless:
    و مقادیرش در یک رنگ مشابه با hsb یکسان نیست!!!:hopeless:

    ولی ولی ولی!:clap::clap::clap:! شما به عنوان یه دیزاینر باید این متد هم بلد باشین!:clap::clap:
    چرا که تو توسعه ی وبی که یکی دیگه ساخته شاید نیاز بشه!:happy:

    چون دید در hsl دایرع ای هستش!! :rolleyes::rolleyes:
    در پست بعدی توضیح میدم! تا با این دو روش قاطی نشه! و خب این پست هم خیلی طولانی شده!!:x3::x3:
    و همینطور متغیر کاربردی عه عالــــــalphaــــــفا عو !!:giggle::giggle:
     
    ღtaraღ، m naizar، Sheida و یک نفر دیگر از این ارسال تشکر کرده اند.
  6. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    برای کدنویسی رنگ ها راه سومی هست به نام hsl ..
    برای این کار ابتدا باید اون دید دایره ای عو‌ پیدا کنیم..
    شکل:

    [​IMG]
    این شکل که قرمز در °0 هستش.... سبز در °120 و...
    حالا شبیه چیه اون شکل؟!
    شبیه یه رنگین کمان ک سر و‌ تهشو بهم وصل کنیم.. میشه این دایره....
     
    ღtaraღ و m naizar از این پست تشکر کرده اند.
  7. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    HSL همونطور که از اسمش پیداست دارای سه مولفه در hue و saturation و Luminosity است یعنی اینطوریه الگوش:
    hsl (hue , saturation , luminosity) is pattern
    فقط پارامتر اول با درصد بیان نمیشود!:d:d:d:d
    بخش اول یا
    hue درجه رنگ رو از دایره ی بالا مشخص میکنید!!!:rolleyes::rolleyes::rolleyes:
    بخش دوم
    saturation هستش!! این یکی شدت رنگ رو مشخص میکنه!! چقدر پرنگ یا کمرنگ باشه!!!:redface::redface::redface:
    اگر دو پارامتر دیه رو
    ثابت نگه داریم! و این یکی عو تغییر بدیم! مثل زیر میشه حاصل!:)):sneaky:
    [​IMG]
    دید که صد درصد خود رنگ هست و هرچه کمتر بشه! به سمت خاکستری حرکت میکنیم!
    دومیش
    luminosity هست اینم درصدی باید نوشته بشه!!! تاثیر تغییراتش هنگام ثابت موندن دو پارامتر دیه رو میبینیم!
    [​IMG]
    در زمینه ی کارکردش! از سایتی نقل قول مستقیم میارم!
    [
    Luminosity یا درخشندگی مشخص می کند که رنگ چقدر از سیاهی و سفیدی فاصله دارد. درخشندگی 50% به این معنی است که میزان تیرگی و روشنی رنگ متعادل است و اساسا بدون تغییر باقی می ماند . کم کردن میزان luminosity رنگ را تیره می کند: تمام رنگ های HSL با میزان luminosity صفر کاملا سیاه هستند. زیاد کردن luminosity رنگ را روشن می کند : در luminosity 100 % ، تمام رنگ های HSL سفید هستند.]

    حالا میبینیم! که پیدا کردن رنگ با این روش عاسون تره! ولی محدودیتای خاص خودشو داره!:bucktooth::bucktooth::bucktooth:
     
  8. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    متغیر کار بردی آلفا در کم رنگ کردن رنگ!:bored::bored:
    یعنی شما بخوایید یه طوری یه عنصر رو رنگ کنید که
    پشتش رو نشون بده و مقداری شفاف باشه!!
    این متغیر خاص روش هایی هستش که پرانتز دارن!!!
    به اینطور که بعد از گذاشتن یه کاما!! بعد از مشخص کردن پارامتر سوم! یک عدد بین صفر تا یک مینویسین!!:smuggrin::smuggrin:
    0 خیلی کم رنگ میکنه رنگ رو یعنی انگار شیشه هستش!!:eek::eek::eek:
    1 هم خیلی پر رنگه انگاری کدر هستش!!:cautious::cautious::cautious:
    و اعداد بینشون هم هرچقدر به صفر نزدیک باشن شفاف و هرچقدر به یک نزدیک باشند کدر هستند!:redface::redface::redface:
    مثالش::speechless:
     
  9. A Charismatic Illustratorツ عضو کادر مدیریت مدیر ارشد

    تاریخ عضویت:
    ‏15/8/17
    ارسال ها:
    3,992
    تشکر شده:
    28,872
    امتیاز دستاورد:
    113
    حرفه:
    عابیاری گیاهان دریایی و Illustration
    و اما بک گراند و پس زمینه! در CSS چگونه تعیین و استفاده میشه!!:hand:
    بک گراند میتونه
    رنگ باشه!! مث خیلی از سایتا و اینجا که بک گراندش سفیده!!:dream:
    و با تکه کد
    background-color: color name مشخص میشود!:smile:
    مثال:
    رنگ بک گراند هم کد نویسیشو یاد دادیم قبلا:))!:pose:
    میشه برای هر عنصر HTML
    یه بک گراند جدا داشته باشیم! مثلا::happy:
    میشه
    عکس هم بذارید بک گراند!:cool:
    خب عکس یه کم داستان داره!:bucktooth:
    در حالت عادی عکس بذارید بک گراند با تکیه کد::redface:

    Background-image :url( address) is pattern
    مثال:
    بدیهی هستش که بک گراند نباید طوری باشه که متن رو نشه تشخصی داد مثل ::whistling::whistling:

    تکرار بک گراند!
    خب همنطوری که میدونیم! ممکنه عکس منتخب برای بک گراند یه چیز خیلی کوچیک باشه و اصلا اندازه ی صفه ی سایت نباشه!:rolleyes:
    در حالت پیش فرض بروز یا مرورگر ما عکس رو هم در راستای محور xها (طول) و هم محور عرض ها (Y) تکرار میکند!:x3:
    و کدهاشون هم background-repeat: reapet-x or reapet-y هستن!! ما میتونیم! بگیم تنها عکس در یه راستا تکرار بشه! و این بسته به عکس هست!:))
    و عنصری که داریم براش بک گراند میذاریم!:))!
    مثال حالت پیش فرض رو نگاه کنید عکس در هر دو راستا تکرار شده است!:bored:
    مثال تکرار در راستای محور xها::bored:
    مثال تکرار در راستای yها::bored:
    میشه بگیم اصلا تکرار نکنه! bakground-repeat:none یعنی اینطوری::smuggrin:

    میشه گفت بک گراند کجا بشینه!!! بالای صفه پایین یا .....:cautious:
    مکان های صفحه عبارتند از::eek:

    1. بالا: top
    2. پایین: bottom
    3. راست: right
    4. چپ: left
    5. بالا راست: top right
    6. بالا چپ: top left
    7. پایین راست: bottom right
    8. پایین چپ: bottom left
    9. مرکز: center
    برای اینکه بگید در کدوم یک از این محل ها عکس بک گراندتون قرار بگیره! میتونید یکی از مقادیر بالا عو جلوی background-position بنویسید!:speechless:

    دقت کردید تا به حال تو وبلاگا مخصوصن با اسکرول کردن صفحه بک گراندشون ثابته! یکی از راهکار ها فیکس کردن بک گرانده! :bucktooth:
    با کد عه: background-attachment: fixed
    مثال:
    دقت کنید که ما همه ی موارد رو توی یه کد مستقل نوشتیم!!!
    میشه به صورت خولاصه نوشت!! یعنی به طور زیر:

    تمرین داریم: