CSS از بالا به پایین – از جمله CSS3

افشای: پشتیبانی شما به حفظ سایت کمک می کند! ما برای برخی از خدماتی که در این صفحه توصیه می کنیم هزینه ارجاع دریافت می کنیم.


Sheets Style Cascading یا CSS ، زبانی است که وب را زیبا می کند. در کنار HTML و JavaScript ، یکی از فناوری هایی است که باید هر توسعه دهنده جلوی آن تسلط یابد.

اگرچه وب سرشار از منابع برای کمک به شما در یادگیری CSS است ، اگر مبتدی باشید ممکن است برای جدا کردن منابع عالی از منابع کاملاً دشوار ، مشکل داشته باشید.

در این راهنمای منابع ما یک مقدمه اساسی در مورد CSS ارائه می دهیم ، چه چیزی قادر است و همچنین ویژگی های ارائه شده در آخرین نسخه: CSS3.

شروع کار با CSS

اگر آماده پرش به سیستم هستید ، این راهنما شامل موارد زیر است:

  • معرفی CSS: اگر تازه وارد CSS هستید ، این مکان برای شروع است. در این بخش یک مرور کلی از CSS ارائه شده است و شما را به سمت منابع عالی دیگر راهنمایی می کند.
  • چه جدید در CSS3 است: اگر می خواهید ماژول هایی را که در CSS3 پیموده شده اند تحقیق کنید ، به این موضوع بروید تا در مورد پرس و جوهای رسانه ای ، اندازه جعبه ، تحولات سه بعدی ، انیمیشن ها ، طرح بندی های ستون چندگانه و موارد دیگر مطلع شوید..
  • ایجاد وب سایتهای پاسخگو با CSS: امروزه وب سایت ها باید به زیبایی با دستگاهی از هر اندازه ارائه شوند و CSS زبانی است که باعث می شود آن اتفاق بیفتد.
  • نحوه ساخت دکمه های درب کشویی: یک آغازگر در ترکیب jQuery با CSS برای ایجاد جلوه های بسیار جالب.
  • همه چیز درباره رنگهای CSS: با رنگ های CSS بلند شوید و بروید. این بخش شامل یک مرجع عالی در رنگ است.
  • نوشتن CSS کارآمد:: داشتن صفحات سریع بارگیری از همیشه مهمتر است. این روش نحوه نوشتن CSS را نشان می دهد که می تواند بار بار شما را به میزان قابل توجهی کاهش دهد.
  • Master CSS آنلاین: این منابع مسیری را برای تسلط بر CSS فراهم می کنند. اگر سبکی از یادگیری را با یادگیری ترجیح می دهید ، این بخش برای شما مناسب است.
  • آثار شگفت انگیز CSS: به دنبال الهام هستید؟ در اینجا ما برخی از شگفت انگیزترین خلاقیت های CSS را در وب جمع آوری کرده ایم.
  • کلمه رسمی در CSS3: اکنون که برخی از CSS را می شناسید ، و یاد گرفته اید که کدام ماژول ها در CSS3 به کار رفته اند ، این ایده خوبی است که خود را با W3C ، سازمانی که توسعه CSS را توسعه می دهد ، آشنا کنید..
  • خواندن توصیه می شود: اگر ترجیح می دهید با کمک کتاب الکترونیکی یا شومیز یاد بگیرید ، لیست کتابهای پیشنهادی ما را بررسی کنید ، جایی که مطمئناً عنوانی را پیدا می کنید که علاقه شما را جلب کند.

معرفی CSS

Contents

معرفی CSS

CSS یا همان شیوه نامه های آبشار ، زبانی است که برای تعیین سبک و ظاهر یک وب سایت استفاده می شود.

محتوای یک وب سایت ، از جمله سرفصل ها ، پاراگراف ها و تصاویر طبق دستورالعمل موجود در یک سند HTML بارگیری می شود ، و CSS به مرورگر شما می گوید که چگونه هر عنصر را در آن سند HTML ارائه دهد.

CSS برای انجام کارهایی مانند موارد موقعیت در وب سایت و تعیین مواردی مانند رنگ پس زمینه ، اندازه و اندازه مرز ، فضای بین یک آیتم با مورد دیگر ، خانواده فونت و موارد دیگر استفاده می شود..

اصلی ترین مزیت CSS این است که جدایی بین طراحی وب سایت و محتویات وب سایت ایجاد می کند. با جدا کردن محتوا از طراحی ، تغییر طراحی می تواند با تنظیم فقط چند قانون CSS در یک فایل CSS تغییر یابد..

سه مکان برای نوشتن قوانین CSS

قبل از نوشتن یک خط CSS ، باید بدانید که چگونه آن را بنویسید ، و چگونه می توانید آن را با محتوای HTML که تأثیر می گذارد ، گره بزنید. سه مکان مختلف وجود دارد که می توانید CSS بنویسید:

  • شیوه نامه خارجی: سندی که صرفاً شامل قوانینی CSS باشد که می تواند برای چندین اسناد HTML با استفاده از عنصر LINK در یک هدر سند HTML اعمال شود.
  • ورق سبک داخلی: سبک های CSS که مستقیماً در یک هدر سند HTML بین برچسب های عنصر سبک تعبیه شده است.
  • سبک های درون خطی: سبک های CSS با استفاده از ویژگی سبک درون سند HTML به یک عنصر HTML اضافه شده است.

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

یک شیوه نامه خارجی می تواند به هر تعداد از اسناد HTML مرتبط باشد که شما را قادر می سازد ظاهر یک وب سایت کامل را از یک فایل CSS کنترل کنید..

مرتبط کردن قوانین CSS به عناصر HTML خاص

قوانین CSS از دو بخش ساخته شده است: یک انتخاب و اعلامیه. هر اظهارنامه همچنین از دو بخش تشکیل می شود: یک ویژگی و یک مقدار.

  • انتخاب کننده ها عناصر HTML (های) HTML را که باید قانون CSS به آن اعمال شود ، شناسایی یا انتخاب کنید.
  • خصوصیات نام هایی هستند که ویژگی مورد نظر را توصیف می کنند. چند خاصیت CSS که معمولاً مورد استفاده قرار می گیرند حاشیه ، مرز ، رنگ پس زمینه ، متن ترازی و سبک قلم هستند.
  • ارزش های توصیف کنید که چگونه یک ملک باید ظاهر شود. اگر خاصیت مورد نظر حاشیه باشد ، ممکن است مقدار مشترک 10 پیکسل باشد.

انتخابگرها و مشخصات

اغلب اوقات یک شیوه نامه حاوی قوانین متناقض برای یک عنصر HTML است. مفهومی از ویژگی انتخاب کننده تعیین خواهد کرد که کدام قوانین برای هر عنصر HTML اعمال می شود.

به عنوان مثال ، اگر لیستی از پیوندها برای ناوبری اصلی استفاده می شود ، و لیست های اضافی در بدنه اصلی یک صفحه ارائه می شود ، لیست پیمایش و لیست های موجود در بدن به مجموعه های مختلفی از قوانین CSS نیاز دارد..

در غیر این صورت ، منوی ناوبری و لیست موجود در بدنه صفحه مشمول همان قوانین CSS خواهد بود.

درک نحوه کار انتخاب کنندگان CSS ، کلید نوشتن قوانینی است که بر روی عناصر HTML صحیح تأثیر می گذارد.

در حالی که رایج ترین انتخاب کننده های CSS انتخاب ، شناسه ، کلاس و برچسب ها یا عناصر هستند ، انتخاب های دیگری مانند ویژگی ها ، انتخاب کننده های موقعیت یابی ، انتخاب های شبه و ترکیب های انتخاب کننده می توانند برای ایجاد قوانینی با مشخصات بیشتر استفاده شوند..

موارد متداول CSS

بسیاری از خصوصیات CSS وجود دارد که تقریباً در هر صفحه از HTML اعمال می شود. آشنایی با این خصوصیات رایج CSS به شما امکان می دهد تا با بیشتر وظایف یک ظاهر طراحی شده و موقعیت یابی مقابله کنید.

قلم استایل

CSS می تواند برای ایجاد هر سبک فونت مورد نظر استفاده شود. چه از نظر رنگ ، اندازه ، وزن ، ارتفاع خط ، تراز ، مورد ، نوع فونت یا تزئیناتی از قبیل زیرنویس ها و نقاطی که می خواهید کنترل کنید ، می توان از ویژگی های CSS برای ایجاد اثر دلخواه استفاده کرد.

با استفاده از اصول ویژگی ، می توانید برای هر عنصر HTML در یک صفحه ، یک سبک متفاوت قلم اعمال کنید.

مدل جعبه

فضای اطراف هر عنصر HTML با تفکر در مورد آنچه به عنوان مدل جعبه یاد می شود بهتر درک می شود:

نمودار مدل Box

مدل جعبه شامل سه ویژگی CSS است: بالشتک ، حاشیه و حاشیه. این خصوصیات را می توان برای هر عنصر HTML اعمال کرد. ساده ترین درک این سه خاصیت به عنوان مثال.

عنصر پاراگراف HTML زیر را در نظر بگیرید:

پاراگراف متن.

تأثیر نوشتن قانون CSS زیر چیست؟?

پ {
بالشتک: 10px؛
مرز: جامد 1px؛
حاشیه: 10px؛
}

این پاراگراف توسط احاطه شده است:

  • ابتدا 10 پیکسل لایه باز (فضای خالی) در همه طرف متن پاراگراف,
  • دوم ، یک مرز جامد با عرض 1 پیکسل در اطراف پاراگراف و padding,
  • سوم ، 10 پیکسل حاشیه (فضای خالی) بین مرز و هر عنصر مجاور.

این چیزی است که به عنوان مدل جعبه شناخته می شود. هر عنصر ابتدا توسط فضای خالی به نام padding ، بعدی توسط یک حاشیه و در آخر با فضای خالی به نام حاشیه جعبه می شود.

با استفاده از floats

Floats برای ارسال عناصر HTML به سمت چپ یا راست عنصر والدین آنها استفاده می شود بدون اینکه آنها را از جریان کلی سند HTML جدا کنید. آنها به همراه دارایی خواهرش روشن ، آنها یکی از بهترین راهها برای ایجاد چیدمان وب سایت هستند.

در حالی که ما قصد نداریم همه چیز را پوشش دهیم تا درباره شناورها بدانیم ، درک اساسی در مورد نحوه عملکرد آنها هنگام شروع یادگیری CSS بسیار مهم است..

درک آسان شناورها در زمینه سند پردازشگر کلمه ساده ترین است. تصویری را در یک سند متنی در نظر بگیرید.

به طور معمول هر تصویر یا در تمام طول سمت راست قرار دارد ، با متن در سمت چپ تصویر جریان می یابد ، یا تمام راه را به سمت چپ ، با متن در سمت راست تصویر جریان می یابد. در وب سایت ، این نگاه با استفاده از ویژگی float انجام می شود.

خاصیت float چهار مقدار قابل قبول دارد: چپ ، راست ، هیچ و وراثت. در مورد مثال بالا:

  • اگر تصویر مطابق قاعده CSS باشد با خاصیت شناور و مقدار سمت چپ ، در سمت چپ عنصر والدین قرار می گیرد و متن در سمت راست جریان دارد..
  • مقدار ارزش درست همانطور که انتظار دارید انجام می شود.
  • هیچ کدام مانع از حرکت عنصر در هر جهت نمی شوند.
  • وراثت باعث می شود این عنصر مقدار شناور اعمال شده روی عنصر والدین را به ارث ببرد.

از floats معمولاً برای ایجاد منوهای پیمایش سایت استفاده می شود. به طور معمول یک منوی ناوبری سایت شامل یک لیست بدون هماهنگی HTML است که هر مورد در لیست به سمت چپ یا راست قرار می گیرد و در نتیجه مواردی که در کنار یکدیگر قرار دارند به جای اینکه در یک لیست لیست بولت قرار گیرند ، در فهرست قرار می گیرند..

به عنوان مثال ، یک منوی ناوبری معمولی ممکن است در HTML به این شکل باشد:

  • خانه

  • فروشگاه ما

  • درباره ما

  • با ما تماس بگیرید.

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

لی
شناور به سمت چپ؛
}

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

Float را پاک کنید

خاصیت دیگری که اغلب در رابطه با شناورها استفاده می شود خاصیت واضح است. هنگامی که یک عنصر شناور است ، تمام عناصر بعدی به بالا می روند و خود را در کنار عنصر شناور تراز می کنند.

در مواردی که می خواهید عناصر بعدی از زیر آیتم شناور شروع کنند ، نه اینکه در کنار آن باشد ، می توانید از خاصیت روشن استفاده کنید تا آنها را وادار به شروع در یک خط جدید کنید.

ما فقط سطح کارهایی را که می توان با شناورها و ویژگی های روشن انجام داد ، خراش دادیم ، اما ما این مقاله عالی را از CSS-Tricks یافتیم که نگاهی عمیق به این موضوع دارد.

با استفاده از ویژگی موقعیت

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

از دو مقدار می توان با ویژگی موقعیت استفاده کرد: نسبی و مطلق. پس از اعمال یکی از این مقادیر ، می توان از خواص اضافی مانند بالا ، پایین ، چپ و راست برای قرار دادن عنصر آسیب دیده بطور خاص استفاده کرد..

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

با این حال ، این یک ویژگی خاص در دنیای توسعه CSS است ، و شما خوب است که اصول استفاده از ویژگی موقعیت را یاد بگیرید..

چه جدید در CSS3 است

چه جدید در CSS3 است

در حالی که CSS2 یک خصوصیات واحد بود ، CSS3 به بیش از پنجاه ماژول مختلف شکسته شده است ، هر کدام در یک مرحله متفاوت توسعه و پذیرش.

کار مداوم در CSS3 توسط کنسرسیوم جهانی وب یا W3C اداره می شود و آنها یک مکان متمرکز را ارائه می دهند که می توانید تمام کارهای استانداردسازی CSS3 در حال انجام را پیگیری کنید..

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

  • در حالی که توانایی ایجاد ساده است تصاوير متحرك مدت زمان طولانی است که با JavaScript امکان پذیر است ، اکنون انیمیشن های CSS با استفاده از نحو ساده تر CSS ساخته می شوند.
  • محاسبه عملکردی که اکنون با CSS3 در دسترس است برای ایجاد طرح های پاسخگو بسیار مفید است. می توان از آن برای افزودن ، تفریق ، ضرب یا تقسیم استفاده کرد و نتیجه محاسبه بعنوان مقدار خاصیت استفاده می شود.
  • انواع انتخاب کننده های پیشرفته با CSS3 افزوده شد ، که امکان افزایش ویژگی در هنگام انتخاب عناصر برای قوانین CSS را فراهم می آورد.
  • علاوه بر این شیب ها به عنوان یک نوع پس زمینه به توسعه دهندگان CSS توانسته است زمینه های چشمگیر را ایجاد کنند که به سرعت بارگیری و نمایش داده می شوند.
  • عرض و ارتفاع خواص اعمال شده بر روی یک عنصر حاوی بالشتک ، حاشیه و حاشیه نیست. در نتیجه ، بالشتک ، حاشیه و مرز باعث افزایش اندازه یک عنصر فراتر از عرض و ارتفاع مشخص می شود. این به مدت طولانی توسعه دهندگان CSS را ناامید کرده است که برای تنظیم دقیق طرح های وب سایت به ریاضیات پیچیده متوسل می شوند. اما ، با ویژگی جدید جعبه اندازه ، می توان از جعبه حاشیه ارزش استفاده کرد ، وادار کردن بالشتک ، حاشیه و حاشیه در محدودیت عرض و ارتفاع مشخص شده ، در نتیجه ساده طراحی طرح های صفحه وب.
  • CSS می تواند برای اعمال مرزها برای هر عنصر HTML مورد استفاده قرار گیرد ، و با خاصیت تصویر حاشیه ای ، ایجاد و استفاده از یک مرز سفارشی از همیشه آسان تر است. نحو خاصیت این ملک بسیار پیچیده است ، اما به محض قطع کردن آن می توانید به سرعت مرزهای یک نوع را برای هر عنصر در یک وب سایت ایجاد کنید..
  • داستان های رسانه تعیین کنید آیا نمای دستگاه مورد استفاده برای دسترسی به سایت مطابق با مشخصات خاص مشخص شده است یا خیر. ماژولmedia CSS3 یکی از ابزارهای کلیدی است که برای ایجاد وب سایتهای پاسخگو استفاده می شود. با استفاده از پرس و جوهای رسانه ای ، یک توسعه دهنده CSS می تواند قوانینی CSS ایجاد کند که فقط در صورت برآورده شدن برخی از ویژگی های رسانه ای ، از جمله عرض و ارتفاع مشاهده ، و قابلیت نمایش رنگ ، ایجاد شود. از این طریق ، توسعه دهندگان CSS می توانند عناصر را دوباره تغییر دهند و تغییر اندازه دهند ، یا همه آنها را با هم مخفی کنند ، بر اساس نتایج پرس و جو رسانه ای.
  • استفاده كردن زمینه های مختلف ایجاد CSS3 با ایجاد یک پیش زمینه خاص ، ساده تر از همیشه است. با استفاده از ویژگی پس زمینه ، می توانید چندین تصویر پس زمینه ، رنگ و شیب را برای هر عنصر اعمال کنید.
  • استفاده كردن ستون ها ایجاد یک طرح با الهام از روزنامه با ویژگی ستونها در CSS3 آسانتر است. از این ویژگی می توان برای تنظیم تعداد ستون ها و عرض به راحتی استفاده کرد و ظرفی را ایجاد کرد که محتوا به راحتی از یک ستون به ستون دیگر جریان یابد. ستون ها همچنین برای ایجاد منوهای ناوبری انعطاف پذیر مفید هستند.
  • تحولات سه بعدی توسط CSS3 امکان پذیر است. این یک موضوع پیچیده برای استاد است ، و شما خوب خواهید بود تا با خواندن در مورد تبدیل CSS و سپس کار کردن با چند آموزش شروع کنید.

ایجاد وب سایتهای پاسخگو با CSS

ایجاد وب سایتهای پاسخگو با CSS

صدها ، اگر نه هزاران نفر ، اندازه ها و وضوح نمایشگرهای مختلف دستگاهی که هر روز برای دسترسی به وب استفاده می شود وجود دارد و در نتیجه ، دیگر کافی نیست که یک وب سایت کامل اندازه کامل داشته باشید و یک یا دو طرح برای دستگاه های کوچکتر.

امروز ، وب سایت شما باید روی صفحه های بزرگ ، دستگاه های کوچک و اندازه هر نمای بین آنها قابل مشاهده باشد.

برای انجام این کار ، وب سایت CSS شما باید سه اصل رانندگی طراحی وب پاسخگو را رعایت کند.

  • ابتدا ، ستون فقرات یا شبکه ، که طرح کلی شما را تعریف می کند ، باید روان باشد.
  • دوم ، تصاویر باید به طور خودکار از اندازه تغییر کنند تا زیبایی هر دستگاهی ارائه شود.
  • سوم ، برای جستجوی نقاطی که طراحی اصلی مایعات تجزیه شود ، باید از نمایش داده های رسانه ای استفاده شود.

هنگام نزدیک شدن به یک پروژه جدید طراحی وب ، بسیاری از طراحان با تجربه با یک شروع می کنند اول موبایل تکنیک. سایتی که با این تکنیک طراحی شده است با ساده ترین طراحی در نظر گرفته شده برای کوچکترین منظره آغاز می شود و با افزایش اندازه بازدید از آن ، سبک های دیگری اضافه می شود.

اولین تکنیک موبایل دو مزیت قابل توجه را ارائه می دهد:

  • ابتدا طراح را وادار می کند تا کارکردهای اساسی وب سایت را مشخص کند و از آنها به عنوان پایه و اساس طراحی وب سایت استفاده کند. اغلب اوقات ، یک وب سایت با اندازه کامل حاوی محتوا ، مانند ابزارک ها ، منوها و مواردی از این دست است که هنگام مشاهده در یک دستگاه تلفن همراه جزئی از سایت نیستند. اولین رویکرد تلفن همراه به اطمینان حاصل می کند که هدف اصلی و کارایی سایت در مرکز اندازه در کلیه اندازه های مشاهده قرار می گیرد.
  • دوم ، بازدید کنندگان وب سایت که از طریق تلفن همراه به سایت دسترسی پیدا می کنند ، قوانین CSS و منابع وب سایت را کمتر بارگیری می کنند. اگر سایت کامل بارگیری شود ، یک کاربر تلفن همراه منابع بسیار بیشتری از آنچه لازم است را بارگیری می کند. اولین رویکرد تلفن همراه فقط موارد مناسب را در دستگاه تلفن همراه بارگذاری می کند ، برخی از اطلاعات گرانبها بازدید کننده را ذخیره می کند و یک تجربه بارگیری در سایت را ایجاد می کند.

یادگیری طراحی پاسخگو

یکی از بهترین راه ها برای یادگیری تکنیک های طراحی پاسخگو ، با یک پروژه ساده طراحی پاسخگو است. با ایجاد اولین طراحی سایت پاسخگو خود ، درک بهتری از مفاهیمی که در مورد آنها صحبت کرده ایم ، به دست خواهید آورد.

با رشد محبوبیت طرح بندی های ستون ، چالش جدیدی برای طراحان سایت به وجود آمده است: چالش تطبیق چیدمان ستون با دستگاه های با هر اندازه.

خوشبختانه ، منابعی برای کمک به مبتدیان CSS و توسعه دهندگان با تجربه به طور یکسان یاد می گیرند که چگونه با این خاصیت جدید CSS در یک محیط پاسخگو کار کنند.

یکی دیگر از راههای عالی برای درک چگونگی بهترین توسعه دهندگان CSS سایتها ، مراجعه به وب سایت پاسخگو ، در طیف وسیعی از اندازه ها ، به صورت جانبی است. Media Query یک سایت است که در آن می توانید صدها طراحی وب سایت پاسخگو در طیف وسیعی از اندازه ها ، همه را در یک صفحه مشاهده کنید.

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

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

فقط با استفاده از CSS می توانید دکمه های عالی و قدرتمند ایجاد کنید. حتی با کمی جی کوئری می توانید کارهای بیشتری انجام دهید.

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

برای تغییر انیمیشن بر روی تصویر کلیک کنید.

دکمه های کشویی درب مثال 1

ایجاد تصاویر شما

روشی که می خواهیم از این دکمه ها استفاده کنیم ، CSS “درب کشویی” نام دارد. برای تنظیم این دکمه ها برای هر نسخه از این دکمه به دو تصویر نیاز داریم – در مورد ما ، دو تصویر دکمه سیاه و دو تصویر دکمه آبی ، چهار تصویر در کل.

برای ایجاد این تصاویر ما با تصاویر دکمه جامد شروع می کنیم.

دکمه آبی
دکمه سیاه

کاری که باید انجام دهیم تقسیم هر دکمه به دو تصویر است:

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

در اینجا تصاویری که پس از برش در اندازه های مناسب به آنها خواهیم رسید:

دکمه آبی سمت چپدکمه آبی سمت راستدکمه آبی سمت راست
دکمه سیاه سمت چپدکمه سیاه درست استدکمه سیاه درست است

پس از ایجاد هر چهار تصویر ، برای شروع کدنویسی آماده هستید.

دکمه HTML

دکمه HTML ما از سه مؤلفه تشکیل شده است: یک بسته بندی دیواری بیرونی ، یک عنصر لنگر و یک عنصر دهانه.

متن دکمه

در بلوک کد بالا ، هر سه عنصر به صورت جداگانه جدا شده اند تا بتوانید راحت تر ببینید که چه اتفاقی می افتد.

با این حال ، در عمل ، شما احتمالاً می خواهید همه آنها را درون خط نگه دارید ، به ویژه اگر از سیستم مدیریت محتوا (CMS) مانند WordPress استفاده می کنید که بعد از هر شکست خط ، برچسب های پاراگراف را وارد می کند..

افزودن تصاویر دکمه

در حال حاضر ، اگر بیت HTML را از مثال بالا ارائه دهید ، تمام آنچه را دریافت خواهید کرد پیوندی است که می گوید: “دکمه متن”. قدم بعدی که می خواهیم برداریم اضافه کردن تصویر دکمه به کد ماست.

با این حال ، قبل از انجام این کار ، اجازه دهید کمی ظاهر طراحی شده را به بسته بندی دیواری بیرونی اضافه کنیم تا ببینیم که چه چیزی کمی واضح تر اتفاق می افتد.

.دکمه کشویی
نمایش: inline-block؛
عرض: خودکار؛
حاشیه: 20px؛
}

این بیت کد به سادگی کمی فضای اطراف دکمه ما را اضافه می کند ، و div حاوی را مجبور می کنیم تا به اندازه پیوند و متن کوچک شود. اکنون ما آماده اضافه کردن تصاویر دکمه خود هستیم.

.پیوند کشویی
پس زمینه-تصویر: url (‘blue-button-right.png’)؛
اندازه پس زمینه: خودکار 100٪؛
پس زمینه-موقعیت: درست؛
پس زمینه-تکرار: بدون تکرار.
}
.متن کشویی
پس زمینه-تصویر: url (‘blue-button-left.png’)؛
اندازه پس زمینه: خودکار 100٪؛
پس زمینه-موقعیت: سمت چپ؛
پس زمینه-تکرار: بدون تکرار.
}

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

دکمه بد

دکمه یک ظاهر طراحی شده

بیایید کمی متن به متن اضافه کنیم. این باعث می شود دکمه ما بیشتر به یک دکمه نگاه کند. علاوه بر این ، ما باید نمایشگر دهانه ها و عناصر لنگر را به داخل بلوک تغییر دهیم تا بتوانیم هر دو را به حالت بالایی پاسخ دهند و روشی را که می خواهیم آنها را به حاشیه برسانیم..

.پیوند کشویی
نمایش: inline-block؛
}
.متن کشویی
بالشتک: 20px؛
نمایش: inline-block؛
}

این کد اندازه ای به دکمه ما می دهد. با این حال ، ما هنوز همپوشانی مشکل بین تصاویر چپ و راست را داریم. کاری که ما باید انجام دهیم اینست که از حاشیه استفاده کنیم تا تصویر سمت راست را کمی به سمت راست حرکت دهیم و سپس دقیقاً همان حاشیه منفی را روی تصویر سمت چپ اعمال کنیم.

.پیوند کشویی
حاشیه سمت چپ: 17px؛
}
.متن کشویی
حاشیه سمت چپ: -17px؛
}

مقدار 17 پیکسل برای تصاویر دکمه خاص ما کاربرد دارد. اگر از تصاویر مختلف استفاده می کنید ، لازم است تا این مقدار را با استفاده از آزمایشی و خطا مرتب سازی کنید تا دکمه مناسب به نظر برسد.

قبل از حرکت ، بیایید جلوتر برویم و کمی سبک به متن دکمه ما اضافه کنیم.

.متن کشویی
رنگ: #fff؛
اندازه قلم: 14pt؛
font-family: ‘Open-Sans’، Arial، sans-serif؛
تبدیل متن: حروف بزرگ؛
font-weight: bold؛
متن-تراز: مرکز؛
}

در این مرحله ، دکمه ما در واقع شبیه یک دکمه است!

دکمه خوب

اثر شناور دکمه

در حال حاضر ، اگر موس خود را روی دکمه شناور کنید ، هیچ علامت تصویری وجود ندارد که موش شما روی دکمه باشد. بیایید این کار را با اضافه کردن یک اثر شناور رفع کنیم.

.متن کشویی: شناور ، متن. اسلاید: فعال {
جعبه-سایه: inset 0 0 0 1000px rgba (255،255،255، .2)؛
}

در حالی که مطمئناً کار می کند ، کمی خشن است. اول ، اثر شناور خیلی سخت به داخل و خارج منتقل می شود. دوم ، اگر دکمه را روی یک پس زمینه تاریک قرار دهید ، متوجه خواهید شد که اثر شناور از گوشه های دور دکمه گسترش می یابد.

ما می توانیم هر دو مورد را با چند خط کد اضافه شده به عنصر span برطرف کنیم.

.متن کشویی
-وب سایت-انتقال-ویژگی: جعبه-سایه. / * صفری * /
-طول دوره وب: مدت زمان: .2 ثانیه؛ / * صفری * /
انتقال-ویژگی: جعبه-سایه؛
مدت زمان انتقال: .2s؛
مرز-شعاع: 12px؛
}

اکنون اثر شناور ما در طول دو صد صدم ثانیه وارد و خارج خواهد شد – یک تسکین کوچک ، اما به اندازه کافی برای اینکه احساس انتقال راحت شود. دوم ، قانون شعاع مرزی گوشه هایی از اثر شناور را دور می زند تا متناسب با تصویر باشد.

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

تغییر دکمه تصاویر

در حال حاضر ، ما می توانیم URL را به ویژگی عنصر href عنصر اضافه کنیم ، و دکمه های ما به عنوان لینک عالی کار می کنند. با این حال ، در بالای این پست ، جیفی وجود داشت که یک اثر ضامن را نشان می داد که تصویر دکمه را تغییر می داد. اکنون بیایید روند ایجاد دکمه های جابجایی را طی کنیم.

ابتدا باید تصویر جدید را به دکمه ها اضافه کنیم. روشی که ما انجام خواهیم داد این است که با اضافه کردن تصاویر دکمه به یک کلاس جدید ، و سپس با استفاده از jQuery برای جابجایی کلاس و خاموش کردن دکمه در هنگام کلیک دکمه.

بیایید با CSS شروع کنیم.

.دکمه فعلی .sliding-link
پس زمینه-تصویر: url (‘black-button-right.png’)؛
}
.دکمه فعلی. اسلاید-متن {
پس زمینه-تصویر: url (‘black-button-left.png’)؛
}

در حال حاضر ، اثر ضامن کار نمی کند. اما اگر دکمه فعلی کلاس را به صورت دستی به دکمه ظرف ظرف اضافه کنید ، نسخه دوم دکمه خود را مشاهده خواهید کرد.

برای جابجایی بین دو نسخه از دکمه کلیک ، باید از جی کوئری استفاده کنید تا کلاس دکمه فعلی را روشن یا خاموش برای دکمه تغییر دهید.

با این حال ، قبل از انجام این کار ، باید تصمیم بگیریم کدام دکمه ها را می خواهیم دکمه های ضامن باشند. ما می توانیم این کار را با اضافه کردن یک کلاس به هر دکمه ای که می خواهیم به عنوان دکمه های ضامن استفاده کنیم ، انجام دهیم. بیایید برای این منظور از دکمه جابجایی کلاس استفاده کنیم.

بنابراین ، برای تعیین هر دکمه به عنوان دکمه جابجایی ، ما فقط می خواهیم آن کلاس را به بسته بندی دیواری بیرونی اضافه کنیم:

اکنون ، ما می توانیم از jQuery برای جابجایی و خاموش کردن کلاس دکمه فعلی برای آن دکمه استفاده کنیم.

$ (“دکمه جابجایی”) را کلیک کنید (عملکرد () click
$ (این) .toggleClass (“دکمه فعلی”)؛
بازگشت به دروغ؛
})؛

چند مورد در آن کد وجود دارد. بیایید از آن عبور کنیم.

ابتدا ، ما jQuery را از کتابخانه های میزبان Google بارگذاری می کنیم. اگر وب سایت شما قبلاً از jQuery استفاده کرده است ، می توانید اولین عنصر اسکریپت را حذف کنید.

عنصر اسکریپت دوم شامل یک عملکرد ساده jQuery است.

این تابع با مشاهده دکمه ضامن کلاس ، هر عنصر را تماشا می کند. هنگامی که هر عنصر با آن کلاس کلیک شد ، یک تابع به ضرب و شتم دکمه جریان کلاس برای روشن یا خاموش کردن عنصر کلیک شده اخراج می شود.

سرانجام ، این تابع مقدار کاذب را بازمی گرداند که از رفتار پیوند پیش فرض جلوگیری می کند ، یعنی بارگذاری مجدد صفحه از آنجا که ویژگی href عنصر لنگر ما روی یک دکمه ضامن خالی خواهد بود.

با افزودن آن بیت کد ، می توانیم دکمه خود را به محتوای قلب خود تغییر دهیم.

برای تغییر انیمیشن بر روی تصویر کلیک کنید.

دکمه کشویی درب نمونه 2

کد منبع کامل

اگر مراحل را به صورت مرحله به مرحله دنبال کرده اید ، از قبل نسخه کامل کد منبع را برای این دکمه ها ایجاد کرده اید. با این حال ، اگر در حال دنبال کردن نبوده اید ، می توانید با کپی کردن کد زیر در یک سند HTML ، کد منبع کامل دکمه موجود در این آموزش را بگیرید..

دکمه های درب کشویی

.دکمه کشویی
نمایش: inline-block؛
عرض: خودکار؛
حاشیه: 20px؛
}
.پیوند کشویی
پس زمینه-تصویر: url (‘blue-button-right.png’)؛
اندازه پس زمینه: خودکار 100٪؛
پس زمینه-موقعیت: درست؛
پس زمینه-تکرار: بدون تکرار.
نمایش: inline-block؛
حاشیه سمت چپ: 17px؛
}
.متن کشویی
پس زمینه-تصویر: url (‘blue-button-left.png’)؛
اندازه پس زمینه: خودکار 100٪؛
پس زمینه-موقعیت: سمت چپ؛
پس زمینه-تکرار: بدون تکرار.
نمایش: inline-block؛
بالشتک: 20px؛
حاشیه سمت چپ: -17px؛
رنگ: #fff؛
اندازه قلم: 14pt؛
font-family: ‘Open-Sans’، Arial، sans-serif؛
تبدیل متن: حروف بزرگ؛
font-weight: bold؛
متن-تراز: مرکز؛
-وب سایت-انتقال-ویژگی: جعبه-سایه. / * صفری * /
-طول دوره وب: مدت زمان: .2 ثانیه؛ / * صفری * /
انتقال-ویژگی: جعبه-سایه؛
مدت زمان انتقال: .2s؛
مرز-شعاع: 12px؛
}
.متن کشویی: شناور ، متن. اسلاید: فعال {
جعبه-سایه: inset 0 0 0 1000px rgba (255،255،255، .2)؛
}
.دکمه فعلی .sliding-link
پس زمینه-تصویر: url (‘black-button-right.png’)؛
}
.دکمه فعلی. اسلاید-متن {
پس زمینه-تصویر: url (‘black-button-left.png’)؛
}


دکمه را تغییر دهید

دکمه پیوند

$ (“دکمه جابجایی”) را کلیک کنید (عملکرد () click
$ (این) .toggleClass (“دکمه فعلی”)؛
بازگشت به دروغ؛
})؛

دکمه خود را به خوبی استفاده کنید

آخرین قطعه از پازل این است که دکمه های جدید خود را به خوبی استفاده کنید. اینجا تعدادی ایده برای نحوه شروع شما موجود است:

  • URL را به ویژگی عنصر href عنصر اضافه کنید و از این دکمه برای پیوند به هر صفحه استفاده کنید. توجه داشته باشید که برای این کار می خواهید کلاس دکمه جابجایی را از روی بسته بندی دکمه تقسیم حذف کنید.
  • هنگام جابجایی دکمه از jQuery یا JavaScript اضافی برای نمایش یا پنهان کردن اطلاعات اضافی استفاده کنید.
  • اگر واقعاً احساس جاه طلبی دارید ، از دکمه های ناوبری سایت استفاده کنید و از jQuery برای تعیین اینکه آیا صفحه فعلی با URL دکمه مطابقت دارد یا اگر کلاس دو را مطابقت دارد ، استفاده کنید.

همه چیز درباره رنگهای CSS

همه چیز درباره رنگهای CSS

یکی از مهمترین – و به طور بالقوه گیج کننده – چیزهایی که می توان با CSS مشخص کرد ، رنگ است. تقریباً همه عناصر موجود در یک صفحه وب با استفاده از CSS می توانند رنگ آمیزی شوند.

ویژگی های رنگ CSS

یکی از جزئیاتی که غالباً از توسعه دهندگان جلوی جدید استفاده می کند ، خاصیت رنگ CSS است. چیزی که باعث سردرگمی آن می شود این است که رنگ خود عنصر را کنترل نمی کند بلکه متن درون عنصر است.

رنگ یک عنصر (جعبه) خود را معمولاً با رنگ پس زمینه ، رنگ حاشیه یا ویژگی های پس زمینه و مرزها ، که شامل اطلاعات مربوط به رنگ است ، کنترل می شود. همچنین می توانید رنگ را بر روی یک کادر سایه تنظیم کنید.

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

اعلامیه های رنگی

گذشته از ویژگی های مختلف CSS که می توان برای مشخص کردن یک رنگ استفاده کرد ، سه روش مختلف برای شناسایی یک رنگ در CSS وجود دارد: RGB ، مقدار هگزا یا نام.

/ * هر سه این یک رنگ هستند. * /

.قرمز-rgb
پس زمینه-رنگ: rgb (255، 0، 0)؛
}

.hex قرمز
پس زمینه-رنگ: # ff0000؛
}

.نام قرمز {
پس زمینه-رنگ: قرمز؛
}

مورد دوم (مقدار سحر و جادو) رایج ترین است ، اما ما با RGB شروع خواهیم کرد زیرا مقادیر سحر و جادو معنی ندارد ، مگر اینکه بفهمید که چگونه RGB کار می کند.

مقادیر RGB

مانیتورهای رایانه ای ، صفحه های تلویزیونی و سایر نمایشگرهای مشابه دارای پیکسل هستند. در نمایشگرهای رنگی ، هر پیکسل به سه زیر پیکسل تقسیم می شود: قرمز ، سبز و آبی.

اینها به اصطلاح “رنگهای اصلی نور” هستند. ترکیبی از این سه رنگ در شدت های مختلف می تواند برای ایجاد هر رنگی که چشم انسان قادر به دیدن آن باشد ، مورد استفاده قرار گیرد. این به “مخلوط کردن رنگ افزودنی” معروف است.

(ارزش دانستن این است که این همه ارتباطی با چشم انسان دارد و نه با خود نور.)

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

به عنوان یک استاندارد ، رایانه ها برای هر زیر پیکسل از صفر (0 – تمام راه) تا 255 (همه راه) استفاده می کنند (برای مثال ، 128 به صورت نیمه کاره است). این 256 شدت ممکن برای هر زیر پیکسل است ، به این معنی که می توان مقدار هر پیکسل را به عنوان یک بایت 8 بیتی ذخیره کرد (2 8 = 256).

از آنجا که سه رنگ وجود دارد ، هر یک با 8 بیت نشان داده می شود ، تعداد کل رنگ هایی که می توان از این طریق نشان داد بیش از 16 میلیون است (256 3 = 16،777،216).

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

rgb (0، 128، 255)

در آن مثال ، زیر پیکسل قرمز تمام راه است ، زیر پیکسل سبز نیمه کاره است ، و زیر پیکسل آبی تمام راه است. این رنگ به نظر می رسد:

در این سیستم ، رنگ سفید (تمام رنگها در تمام طول) rgb (255 ، 255 ، 255) و سیاه (تمام رنگهای خاموش) rgb (0 ، 0 ، 0) است.

رنگ های RGB همچنین با استفاده از رقم اعشاری نه با یک رقم دنباله ، می توانند به صورت درصد مشخص شوند:

rgb (0.0 ، 50.0 ، 100.0)

این استفاده بسیار رایج نیست.

مقادیر هگز

یک روش کم حجم تر برای نوشتن همان اطلاعات دقیق ، استفاده از مقادیر هگزا است. مقدار رنگ شش ضلعی با علامت هش (پوند) نوشته شده است ، و به دنبال آن شش شخصیت شش ضلعی در سه جفت ، مانند این:

# 0080ff

جفت اول مقدار قرمز را نشان می دهد ، جفت دوم مقدار سبز را نشان می دهد و جفت سوم مقدار آبی را نشان می دهد. در این مثال 00 به معنای بدون رنگ قرمز به هیچ عنوان ، 80 به معنی نیمه سبز روشن و ff به معنای آبی تمام راه یک است. بنابراین این همان رنگ rgb است (0، 128، 255).

در صورت عدم استفاده از شماره های شش ضلعی ، این ممکن است کمی گیج کننده به نظر برسد. در سیستم اعشاری عادی ما ، هر رقم می تواند 10 مقدار (0-9) داشته باشد. در شماره گذاری شش ضلعی ، هر رقم دارای 16 مقدار ممکن است (0-9 ، a-f).

این باعث می شود که تمام مقادیر 0-255 را در دو رقم ، 0-ff نشان دهیم. برای اطلاعات بیشتر به این آموزش شش ضلعی مراجعه کنید.

در این سیستم رنگ سفید #ffffff و رنگ سیاه # 000000 است.

مقادیر رنگ Hex متداول ترین روش برای تعیین رنگ ها در CSS است.

نام های رنگی CSS

روش نهایی برای مشخص کردن یک رنگ خاص ، استفاده از یکی از نامهای رنگی از پیش تعریف شده است. W3C لیستی از نام های رسمی رنگ را که می توان به جای کد رنگی شماره گذاری شده استفاده می کند ، نگه می دارد و گاه به روز می کند. به عنوان مثال ، به جای # 000000 می توان از رنگ سیاه استفاده کرد.

در روزهای ابتدایی وب ، این رنگ های نامگذاری شده به تعریف مجموعه ای غیر رسمی از “رنگهای ایمن وب” کمک می کردند که در اکثر مرورگرها و صفحه های نمایش به خوبی پشتیبانی می شدند..

امروز ، بزرگترین مزیت داشتن نام های رنگی این است که به راحتی می توان آنها را به خاطر آورد. بعنوان مثال ، به یاد آوردن نور کم نور (و به درستی تایپ کنید) از معادل آن ، # add8e6 یا rgb (173 ، 216 ، 230).

لیست نام های رنگی CSS

نام رنگ
مقادیر هگز
مثال رنگ
آلیسبلو# f0f8ff
عتیقه# faebd7
آب# 00ffff
آکوامارین# 7fffd4
لاجوردی# f0ffff
رنگ بژ# f5f5dc
سوپ غلیظ خامه ای# ffe4c4
سیاه# 000000
بلانشالوند# ffe4c4
آبی# 0000f
آبی رنگ# 8a2be2
رنگ قهوه ای# a52a2a
مشروب فروشی# deb887
cadetblue# 5f9ea0
منشور# 7fff00
شکلات# d2691e
مرجان# ff7f50
گل ذرت# 6495
ذرت# fff8dc
زرشکی# dc143c
آبی تیره# 00008b
darkcyan# 008b8b
darkgoldenrod# b8860b
خاکستری تیره# a9a9a9
سبز تیره# 006400
خاکستری تیره# a9a9a9
darkkhaki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
darkorange# ff8c00
darkorchid# 9932 سی سی
قرمز تیره# 8b0000
darksalmon# e9967a
صفحه تاریک# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
تیره# 00ced1
تیره# 9400d3
صورتی پررنگ# ff1493
عمیق# 00bfff
کم نور# 696969
دیمگری# 696969
طفره رفتن# 1e90ff
آتش سوزی# b22222
گلهای سفید# fffaf0
جنگل سبز# 228b22
فوشیا# ff00ff
گینزبورو#dcdcdc
شبح# f8f8ff
طلا# ffd700
طلایی# daa520
خاکستری# 808080
سبز# 008000
سبزی# adff2f
خاکستری# 808080
زنبور عسل# f0fff0
نقطه داغ# ff69b4
هندی# cd5c5c
نیلی# 4b0082
عاج# fffff0
خاکی# f0e68c
اسطوخودوس# e6e6fa
مروارید# fff0f5
قانون# 7cfc00
لیمونچیفون#fffacd
آبی کمرنگ# add8e6
سبک# f08080
فانوس# e0ffff
نورپردازی# fafad2
خاکستری روشن# d3d3d3
سبز روشن# 90ee90
خاکستری روشن# d3d3d3
صورتی روشن# ffb6c1
چراغ# ffa07a
صفحه نور# 20b2aa
سبکی# 87cefa
چراغ چراغ# 778899
چراغ راهنما# 778899
صاعقه# b0c4de
زرد کمرنگ# ffffe0
اهک# 00ff00
لیمو سبز# 32cd32
ملحفه# faf0e6
مارون# 800000
مواد مخدر متوسط# 66cdaa
دانه متوسط# 0000cd
واسطه# ba55d3
میانبر# 9370db
صفحه متوسط# 3cb371
متوسط# 7b68ee
میانبرگ# 00fa9a
مخلوط متوسط# 48d1cc
متوسط# c71585
آبی نیمه شب# 191970
نعناع# f5fffa
میسیروز# ffe4e1
موکاسین# ffe4b5
navajowhite#ffdead
نیروی دریایی# 000080
قدیمی# fdf5e6
زیتون# 808000
olivedrab# 6b8e23
نارنجی# ffa500
نارنجی# ff4500
ارکیده# da70d6
palegoldenrod# eee8aa
سبز کمرنگ# 98fb98
paleturquoise#afeeee
رنگ پریدگی# db7093
پاپیونیت# ffefd5
هلو# ffdab9
پرو# cd853f
رنگ صورتی# ffc0cb
آلو# dda0dd
پودر آبی# b0e0e6
رنگ بنفش# 800080
rebeccapurple# 663399
قرمز# ff0000
گل سرخ# bc8f8f
آبی سلطنتی# 4169e1
زین# 8b4513
ماهی سالمون# fa8072
ماسه سنگ# f4a460
رنگ دریایی# 2e8b57
صدف دریایی# fff5ee
سینا# a0522d
نقره# c0c0c0
آبی آسمانی# 87ceeb
تخته سنگ# 6a5acd
صفحه‌نمایش# 708090
slategrey# 708090
برف#fffafa
بهار# 00ff7f
فولاد# 4682b4
برنزه# d2b48c
اشک# 008080
خار# d8bfd8
گوجه فرنگی# ff6347
فیروزه# 40e0d0
بنفشه# ee82ee
گندم# f5deb3
سفید#ffffff
دود سفید# f5f5f5
زرد# ffff00
رنگ زرد# 9acd32

سایر منابع رنگی CSS

  • CSS Color Tutorial از W3Schools یک مرور کلی در مورد این موضوع است که نمونه های دیگری دارد.
  • CSS Color Converter ابزاری آنلاین است که هر فرمت رنگی را می گیرد و آن را به سایر افراد تبدیل می کند ، بعلاوه گزینه های ممکن برای پالت رنگی را نیز ارائه می دهد..
  • مرجع CSS Color از شبکه توسعه دهنده Mozilla یکی از بهترین مکان ها برای کسب اطلاعات در مورد استانداردها و مشخصات مختلف رنگ است.
  • رنگ ها ، پس زمینه ها و شیب ها: اضافه کردن فردیت با CSS (2015) ، توسط اریک ا مایر ، کتابی عالی است که رنگ های CSS را با جزئیات پوشش می دهد.

نوشتن CSS کارآمد

نوشتن CSS کارآمد

نوشتن CSS کارآمد بسیار مهم است. کاربران اینترنت امروزه از فاصله بسیار کوتاهی برخوردار هستند ، بنابراین هر چه مدت زمان طولانی تر سایت شما طول بکشد ، شانس ابتلا به دکمه عقب بیشتر می شود.

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

در زیر برجسته می کنیم که چرا CSS کارآمد مهم است ، نحوه نوشتن انتخابگرهای کارآمدتر و ارائه برخی از ابزارهایی که می تواند به شما در بهینه سازی بیشتر کد خود کمک کند.

چرا موضوعات CSS کارآمد

عدم توجه به راندمان CSS هنگام نوشتن کد شما می تواند به عملکرد کلی صفحه شما آسیب جدی برساند. و آخرین موردی که می خواهید داشتن وب سایت بارگذاری کند است.

هدف شما این است که این امکان را برای مرورگر فراهم آورید که کد شما را آسان تر کند – حتی مرورگرهایی که کارایی کمتری دارند.

استدلال هایی مطرح شده است که این وظیفه نویسنده نیست که نگران بهینه سازی انتخاب کنندگان باشد ، بلکه باید کار موتور باشد که کد را تهیه می کند. اگرچه این مسئله تا حدی صحیح است ، اما هر کاربر قصد ندارد از یک مرورگر مدرن استفاده کند.

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

اما ، داشتن یادآوری کاربران در هنگام نوشتن کد همیشه ایده خوبی است.

انتخاب کنندگان مهم ترین هستند

یکی از مهمترین جنبه های نوشتن CSS کارآمد ، درک چگونگی خواندن و گردآوری مرورگرها است. نکته مهم برای درک این است که آنها از راست به چپ می خوانند.

این با انتخاب کلید شروع می شود و به سمت چپ حرکت می کند تا به جستجوی اجداد در انتخاب قانون باشد. سپس ، آن را به حرکت به سمت چپ خود ادامه می دهد تا زمانی که این قاعده کامل شود ، یا نتیجه عدم تطابق باشد.

بنابراین ، اگر کد شما ul می خواند > li img ، سپس اولین چیزی که تفسیر می شود یک IMG است.

انتخاب کلید آخرین بخشی است که ما به انتهای انتخاب انتخاب کرده ایم.

چهار نوع انتخاب CSS

چهار انتخاب اصلی CSS وجود دارد که شما باید از آن آگاه باشید و از راه درست استفاده کنید تا کد CSS شما کارآمد باشد. انتخاب کنندگان زیر از نظر کارآیی آنها سفارش داده می شوند. کسانی که در بالا هستند کارآمدترین و پایین ترین سطح کمترین هستند.

انتخاب شناسه

انتخاب کننده شناسه با استفاده از ویژگی ID به یک عنصر HTML خاص اشاره می کند و به شرح زیر است:

# ناوبری اصلی

در HTML از این موارد استفاده می شود:

انتخاب کلاس

انتخاب کننده کلاس عناصر را در یک ویژگی خاص کلاس انتخاب می کند و به شرح زیر می باشد:

.مرکز

در HTML از این موارد استفاده می شود:

انتخاب برچسب

انتخاب کننده های برچسب نسبت به شناسه ها و کلاس ها کارآیی کمتری دارند ، بنابراین باید از آنها کم استفاده شود. اما آنها هنوز هم می توانند در شرایط مناسب مؤثر باشند. انتخاب کنندگان برچسب ها به طور کلی شبیه به این شکل هستند:

اول

در HTML ، برچسب به سادگی مانند CSS هر زمان که از تگ استفاده شود ، طراحی می شود (در این حالت Ul).

انتخاب جهانی

انتخاب جهانی می تواند برای هر عنصر موجود در سند شما اعمال شود. برای نوشتن CSS کارآمد ، باید از استفاده از انتخاب جهانی در هر زمان ممکن خودداری کنید. انتخاب کننده جهانی به شرح زیر تعیین می شود:

*

قوانین CSS کارآمد برای نگه داشتن ذهن

چند قانون اساسی وجود دارد که باید در نظر داشته باشید که به شما در نوشتن CSS کارآمد تر کمک می کند. با در نظر گرفتن این قوانین ، کد CSS شما سریعتر بارگیری می شود و عملکرد بهتری را در هر مرورگر وب اطراف خود انجام می دهد.

از انتخاب کنندگان نزول استفاده نکنید

یک انتخاب صادق هر دو انتخابی است که توسط یک ترکیب دهنده جدا نمی شوند. انتخاب فرزندان کمترین انتخاب کننده است و واقعاً می تواند تأثیر منفی بر عملکرد داشته باشد.

برخی از نمونه انتخاب کنندگان فرزندان که نباید از آنها استفاده کنید ، عبارتند از:

هدر H3

پاورقی

.تقسیم بدن

شناسه های واجد شرایط را برچسب گذاری نکنید

از آنجا که شناسه ها می توانند فقط به یک عنصر واحد مراجعه کنند ، منطقی نیست که آنها را با برچسب خاصی که از آنها استفاده خواهد شد واجد شرایط کنید. مثلا,

li # ناوبری سمت چپ

لازم نیست به مرورگر بگویید انتخابگر برای چه برچسبی استفاده خواهد شد. در عوض ، این کارآمدتر است:

# ناوبری سمت چپ

توجه داشته باشید که همین مورد در مورد کلاسها نیز صادق است اما در میزان کمتری. بنابراین کلاس ها را هم قبول نکنید.

تا حد امکان از وراثت CSS استفاده کنید

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

به عنوان مثال ، اندازه قلم به ارث می رسد. بنابراین اگر آن را برای بدنه سند تنظیم کردید ، لازم نیست آن را برای برچسب های p و li تنظیم کنید.

قوانین خود را محدود کنید

اضافه کردن بیش از حد بسیاری از قوانین به برچسب های شما کد CSS شما را کند کرده و روند تطبیق را بسیار پیچیده می کند.

مثلا

body .Widget-چپ # ویجت

این کد ضعیف است. خیلی زیاد اتفاق می افتد از سوی دیگر:

# ویجت

.ویجت سمت چپ

اینها بسیار کارآمدتر هستند.

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

ابزارهایی برای بهبود CSS شما

اگر قوانین فوق را در نظر داشته باشید کد CSS شما بسیار کارآمد تر خواهد بود.

اما اگر به دنبال بهینه سازی کد CSS خود هستید ، ابزاری وجود دارد که به شما کمک می کند تا به آنجا بروید. در زیر چند ابزار ارائه داده ایم که به فشرده سازی CSS شما ، تعریف انتخاب کننده ها و حتی ایجاد شناسه های شخصی برای شما کمک می کنند.

  • تست استرس CSS: این بسیار جالب است زیرا تنظیمات میکرو را در سایت شما ایجاد می کند ، مانند پیمایش ، بزرگنمایی ، تغییر اندازه و موارد دیگر. به علاوه ، تمام این کارها را در کمتر از 30 ثانیه انجام می دهد. سپس گزارشی در مورد اثربخشی CSS شما ارسال می کند.
  • شناسه های CSS را تعریف کنید: لودر وب بسته CSS ابزاری بسیار مفید است. این می تواند به تعیین کلاس ها و شناسه ها کمک کند و حتی می تواند برخی از بهینه سازی های CSS را برای شما انجام دهد.
  • انتخاب های CSS خود را کاهش دهید: این همه انتخاب کننده های CSS را که در حال حاضر در محل هستند به همراه انتخاب کننده عناصر استفاده می کند. این به شما امکان می دهد تعداد انتخاب کنندگانی را که استفاده می کنید کاهش دهید ، بنابراین می توانید بار کلی حافظه خود را کاهش دهید. با استفاده از این ابزار می توانید هر URL را وصل کنید ، بنابراین می توانید سایر سایت ها را نیز مطالعه کنید.
  • کد CSS خود را کوچک کنید: کد CSS موجود خود را کوچک کنید. کد کمتری برای تهیه بهتر باید داشته باشید. این یک تصویر صفحه نمایش “قبل” و “بعد” را فراهم می کند ، بنابراین می توانید تغییرات این ابزار را مشاهده کنید.
  • فایلهای CSS خود را فشرده سازی کنید: با پاک کردن پرونده های CSS به پاک کردن آن کمک خواهید کرد. بنابراین ، می تواند به کاهش اندازه کلی پاسخ HTTP و در نتیجه زمان پاسخگویی سرور کمک کند.

نوشتن CSS کارآمد ایده خوبی است

اینکه انتخاب CSS خود را بهینه کنید یا خیر ، بستگی به شما دارد. با مرورگرهای امروزی کاملاً ضروری نیست. با این حال ، اگر شما در حال ایجاد یک سایت پیچیده هستید ، ارزش انجام آن را دارد.

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

Master CSS آنلاین

Master CSS آنلاین

بسیاری از مکان ها به صورت آنلاین وجود دارند که با یادگیری CSS می توانید فیلم ها ، آموزش های کامل و حتی کدگذاری را در مرورگر مشاهده کنید. در حالی که ده ها منبع ، اگر صدها نفر هم موجود نباشند ، در اینجا تعدادی از مکان های رایگان مورد علاقه ما برای یادگیری CSS وجود دارد.

اگر واقعاً با CSS کاملاً جدید هستید, از اینترنت نترسید یک سری ویدیو مبتدی مبتدی است که CSS و HTML را معرفی می کند. اگر از ابتدا شروع می کنید ، این یک سریال خوب تولید شده است و کسانی که تازه برای یادگیری CSS در راه سفر خود قرار گرفته اند را نمی ترساند.

اگر پیش از این هرگز شیوه نامه ننوشتید ، مکان خوبی برای نوشتن اولین مورد شما است آموزش CSS ارائه شده توسط کنسرسیوم جهانی وب (W3C) این آموزش توضیحات زیادی ارائه نمی دهد ، بنابراین اگر شما یک یادگیرنده دست در دست هستید ، این ممکن است مکانی ایده آل برای شروع باشد.

نوشتن HTML و CSS مستلزم استفاده از ویرایشگر متن ، ذخیره فایل ها با قالب بندی مناسب و هدر ها و استفاده از مرورگر برای مشاهده کار شما است. اگر ترجیح می دهید برنامه ای را طی کنید که به شما امکان می دهد پرونده ها را مستقیماً در مرورگر خود ویرایش کنید, کدکدایی دقیقاً همان چیزی است که شما به دنبال آن هستید.

منبعی دیگر که تقریباً همان زمینه Codecademy را در بر می گیرد ، اما منابعی که به شما یاد می دهد نحوه استفاده از ویرایشگر متن و نحوه ذخیره فایل ها را با فرمت صحیح یاد بگیرید ، است. یادگیری کد HTML و CSS را بیاموزید توسط Shay Howe. پس از دستیابی به اصول اولیه ، یک برنامه پیشرفته نیز موجود است.

کنترل صفحه بندی صفحه یکی از سخت ترین و مهمترین کارهایی است که با CSS انجام می شود. اگر در گرفتن آویز کنترل طرح بندی مشکلی دارید ، آموزش آن را از چیدمان را یاد بگیرید فقط چیزی است که شما نیاز دارید.

شبکه توسعه دهنده Mozilla یک آموزش CSS ارائه می دهد که تمام عملکردهای اساسی CSS را به روشی پوشش می دهد که شما را برای حرکت به سمت موضوعات چالش برانگیز تر آماده می کند.

اگر می خواهید پایه ای محکم باشد که بتوانید به یک توسعه دهنده CSS همه جانبه تبدیل شوید ، می توانید خیلی بدتر از آموزش MDN CSS انجام دهید.

سرانجام ، بدون ذکر سازمانی که مانع توسعه CSS می شود ، هیچ لیستی از منابع کامل نخواهد بود.

اگرچه مطمئناً ساده ترین آموزش در این لیست نیست ، اما جامع و مفصل است. اگر هدف شما یادگیری کمی CSS است ، این آموزش برای شما نیست ، اما اگر در تلاش برای تبدیل شدن به یک توسعه دهنده CSS همه جانبه هستید ، این یک آموزش خوب برای گرفتن زیر کمربند خود است..

الهام طراحی

آثار شگفت انگیز CSS

اگر به دنبال الهام گرفتن از طراحی هستید یا می خواهید درک بهتری از کارهایی که CSS می تواند انجام دهد ، در اینجا چند مکان برای بررسی آثار برجسته CSS وجود دارد..

  • Creative Bloq این لیست برگزیده بیست و دو انیمیشن چشمگیر CSS را جمع کرده است. وقتی به آنها نگاه می کنید ، به خاطر داشته باشید که بسیاری از این انیمیشن ها علاوه بر CSS از JavaScript نیز استفاده می کنند.
  • جوایز طراحی CSS این لیست را با ده انیمیشن کامل با نسخه ی نمایشی و آموزش ایجاد کرده است تا بتوانید مفاهیم را برای پروژه های خود بکار بگیرید..
  • MDN DemoStudio مکانی است که می توانید صدها نسخه نمایشی CSS را بر اساس محبوبیت ، تعداد بازدیدها ، وضعیت روند یا با مشاهده جدیدترین نسخه های نمایشی طبقه بندی شده مشاهده کنید..
  • بسیاری از انیمیشن های انتخاب شده برای لیست های قبلی در Code Pen میزبانی می شوند و رفتن مستقیم به قلم ها به شما امکان دسترسی به تعداد زیادی از انیمیشن های چشمگیر را می دهد که با استفاده از HTML ، CSS و JavaScript ساخته شده اند..
  • اگر تمام انیمیشن های فانتزی مورد نظر خود را مشاهده کرده اید ، و در عوض می خواهید ببینید که چگونه می توان از CSS برای تغییر کامل یک وب سایت بدون ایجاد یک تغییر در HTML استفاده کرد ، این طرح های وب سایت ظریف را که بر قدرت تأکید می کند ، بررسی کنید. CSS.

کلمه رسمی در CSS3

کلمه رسمی در CSS3

W3C سازمانی است که توسعه استانداردهای وب ، از جمله ماژول های CSS3 را هدایت می کند. با یادگیری CSS و سطح مهارت خود ، باید خود را با W3C و مستندات فنی ارائه شده آشنا کنید..

صفحه اصلی W3C CSS صفحه پرتاب همه چیزها CSS در W3C است. از این صفحه می توانید اطلاعات مربوط به کارهای استاندارد توسعه در حال انجام را پیدا کنید.

خواندن توصیه می شود

خواندن توصیه می شود

یکی از مؤثرترین راهها برای درک عمیق تر و تخصص با CSS3 استفاده از منابع و روشهای مختلف آموزش است.

اگر یک آموزش یا دو آموزش را امتحان کرده اید و می خواهید یک روش اضافی را امتحان کنید ، یا اگر ترجیح می دهید از متن نوشتاری کار کنید ، در اینجا چند مورد از بهترین متون CSS موجود در بازار آمده است:

  • CSS3 For Web Designers (2010) ، نوشت Dan دن سدرهلم: با پیشگفتاری از جفری زلدمن ، بنیانگذار A List Apart ، و تأییدهایی از کریس کوییر از CSS-Tricks و اریک مایر ، نویسنده چندین کتاب در مورد CSS ، این متن توسط Dan Cedarholm ، بنیانگذار Dribbble ، استاندارد طلا برای متون CSS3 است.
  • HTML و CSS: طراحی و ساخت وب سایت ها (2011) ، توسط Jon Duckett: این متون شامل HTML و CSS است ، و یکی از محبوب ترین و مورد احترام ترین معرفی ها برای هر دو موضوع است.
  • CSS را در یک روز بیاموزید و آن را خوب بیاموزید (2015) ، توسط جیمی چان: اگر مبتدی CSS هستید و می خواهید خیلی سریع مقدمات را بدست آورید ، این کتاب برای شما مناسب است..
  • CSS: Manual Manual (2015) ، توسط دیوید ساویر مک فارلند: این متن صرفاً برای مبتدیان در نظر گرفته نشده است ، بلکه در عوض مباحث پیشرفته ای مانند Flexbox و استفاده از Sass را در بر می گیرد. اگر آمادگی خود را برای ترقی از وضعیت مبتدی دارید ، این متن به شما کمک می کند تا به آنجا بروید.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map