این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

با CSS استایل کنید

برنامه های بلاکی از عناصر HTML و SVG ساخته شده اند. این عناصر با کلاس‌های CSS برچسب‌گذاری می‌شوند که نشان‌دهنده آنچه هستند (به عنوان مثال blocklyBlock ، blocklyField ) و همچنین وضعیت آنها (مثلا blocklyEditing ، blocklySelected ) را مشخص می‌کند. Blockly همچنین مجموعه ای پیش فرض از قوانین CSS را ارائه می دهد.

می توانید از CSS برای استایل دادن به برنامه خود استفاده کنید:

قوانین CSS Blockly را با قوانین خود نادیده بگیرید.
برای ویژگی های بیشتر، کلاس های CSS خود را به اجزای Blockly اضافه کنید.
از کلاس ها و قوانین CSS برای استایل دادن به اجزای سفارشی استفاده کنید.

کلاس های CSS

برنامه های Blockly از کلاس های CSS برای شناسایی عناصری که باید استایل دهی شوند استفاده می کنند. این کنترل دقیق تری نسبت به انتخابگرهای نوع (عنصر) فراهم می کند.

کلاس های CSS مسدود شده

Blockly از کلاس‌های CSS برای ارائه انواع اطلاعات زیر در مورد عناصر HTML و SVG استفاده می‌کند.

تایپ کنید. بیشتر کلاس های Blockly CSS مشخص می کنند که یک عنصر چه چیزی را نشان می دهد. به عنوان مثال، عنصر ریشه یک بلوک دارای برچسب blocklyBlock است. برخی از عناصر با چندین کلاس برچسب گذاری شده اند که هر کدام از کلاس قبلی خاص تر هستند. به عنوان مثال، عنصر ریشه یک فیلد ورودی متن دارای برچسب blocklyField ، blocklyInputField ، و blocklyTextInputField است. کلاس های نوع برای طول عمر یک جزء یکسان باقی می مانند.
ایالت Blockly همچنین از کلاس های CSS برای تعیین وضعیت یک جزء استفاده می کند. به عنوان مثال، هنگامی که مکان نما روی یک فیلد ورودی متن است، عنصر ریشه آن با کلاس blocklyEditing برچسب گذاری می شود. هنگامی که مکان نما از آن دور می شود، این کلاس حذف می شود.
اطلاعات تکمیلی. Blockly از چند کلاس CSS برای ارائه اطلاعات اضافی استفاده می کند. به عنوان مثال، injection <div> دارای کلاس هایی است که نام رندر و موضوع فعلی فضای کاری را ارائه می دهد. این کلاس ها به طور کلی در طول عمر برنامه یکسان می مانند.

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

کلاس های CSS سفارشی

می توانید از کلاس های CSS سفارشی برای ارائه ویژگی های بیشتر به اجزای Blockly استفاده کنید.

فضاهای کاری

برای افزودن یا حذف یک کلاس CSS از تزریق <div> یک فضای کاری، WorkspaceSvg.addClass یا WorkspaceSvg.removeClass را فراخوانی کنید.

جعبه ابزار

برای افزودن یک کلاس CSS به یک دکمه یا یک برچسب در جعبه ابزار، از کلید web-class در تعریف JSON خود از جعبه ابزار استفاده کنید. برای اطلاعات بیشتر، دکمه ها و برچسب ها را ببینید.

برای نادیده گرفتن کلاس‌های CSS مورد استفاده برای بخش‌های مختلف یک دسته، از کلید cssConfig در تعریف JSON خود از دسته استفاده کنید. این به شما امکان می‌دهد تا به دسته‌های فردی استایل بدهید. برای اطلاعات بیشتر، به دسته CSS مراجعه کنید.

بلوک ها

برای افزودن کلاس‌های CSS به یک بلوک سفارشی، یک رشته یا آرایه‌ای از رشته‌ها را به کلید classes ارسال کنید.

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String",
    }
  ],
  "classes": "myStringLengthBlock",
  "output": "Number",
  "colour": 160,
}]);

همچنین می توانید با فراخوانی BlockSvg.addClass یا BlockSvg.removeClass یک کلاس CSS را از عنصر <g> یک بلوک اضافه یا حذف کنید.

فیلدهای برچسب

برای افزودن یا حذف یک کلاس CSS از عنصر <text> که توسط یک فیلد برچسب یا فیلد برچسب قابل سریال‌سازی استفاده می‌شود، FieldLabel.setClass را فراخوانی کنید. همچنین می توانید نام کلاس را به سازنده برچسب ارسال کنید.

کلاس های CSS و اجزای سفارشی

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

اگر جزء شما زیر کلاس Field یا Icon است، روش initView را لغو کنید. به عنوان مثال:

class MyCustomField extends Blockly.FieldTextInput {
  ...

  initView() {
    super.initView();

    // Add custom CSS class so we can style the field.
    if (this.fieldGroup_) {
      Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
    }
  }
}

برای اطلاعات بیشتر، به سفارشی کردن فیلدها با CSS یا ایجاد نمای نماد مراجعه کنید.

هنگام ساختن یک عنصر SVG، کلاس خود را به Blockly.utils.dom.createSvgElement ارسال کنید:
```
this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});
```

هنگام ساختن یک عنصر HTML، از Blockly.utils.dom.addClass استفاده کنید:

const myDiv = document.createElement('div');
Blockly.utils.dom.addClass(myDiv, 'myInformation');

برای افزودن یا حذف کلاس‌ها پس از ساخت، از Blockly.utils.dom.addClass یا Blockly.utils.dom.removeClass استفاده کنید.

setMyHighlight(highlight) {
  if (highlight) {
    Blockly.utils.dom.addClass(this.svgRoot, 'myHighlight');
  } else {
    Blockly.utils.dom.removeClass(this.svgRoot, 'myHighlight');
  }
}

پس زمینه قوانین CSS

اگر ویژگی‌های استایل SVG و آبشار CSS را می‌دانید، می‌توانید از این بخش صرفنظر کنید .

ویژگی های یک ظاهر طراحی SVG در مقابل ویژگی های CSS

عناصر SVG با ویژگی های یک ظاهر طراحی SVG استایل بندی شده اند. اینها می توانند به عنوان ویژگی در عناصر SVG (معروف به ویژگی های ارائه ) یا در قوانین CSS استفاده شوند. بنابراین، همه موارد زیر یک کار را انجام می دهند.

<!-- SVG file with presentation attributes. -->
<circle fill="red" ... />

<!-- SVG file with <style> tag. -->
<style>
  circle {fill:red;}
</style>
<circle ... />

/* External CSS file.*/
circle {fill:red;}

<!-- SVG file with inline style. -->
<circle style="fill:red;" ... />

لیست ویژگی های سبک SVG مرتبط است اما با لیست ویژگی های CSS متفاوت است:

همان مفهوم، همان نام. به عنوان مثال، هر دو SVG و CSS direction برای تعیین اینکه متن LTR یا RTL است استفاده می کنند.
مفهوم یکسان، نام متفاوت. به عنوان مثال، SVG از fill برای تعیین رنگ پر استفاده می کند. CSS از background-color استفاده می‌کند.
فقط CSS CSS دارای ویژگی های بسیاری است که در SVG نیستند، مانند margin و padding .
فقط SVG SVG دارای چند ویژگی است که در CSS نیستند، مانند x و y .

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

آبشار CSS

آبشار CSS اولویت‌های قوانین CSS را تعیین می‌کند، که تعیین می‌کنند اگر بیش از یک قانون برای یک ویژگی و عنصر خاص اعمال شود، از کدام قانون استفاده شود. آبشار ساده شده زیر بخش‌هایی از آبشار را که بیشتر توسط Blockly استفاده می‌شود پوشش می‌دهد و ممکن است به شما در حل این سوال کمک کند: "چرا CSS من کار نمی‌کند؟"

آبشار ساده شده

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

تمام قواعد مربوط به ویژگی و عنصر را جمع آوری کنید.
اگر قوانینی دارای حاشیه نویسی !important ، همه قوانینی که حاشیه نویسی !important ندارند را کنار بگذارید.
قوانینی را با بالاترین ویژگی انتخاب کنید.
- ویژگی های ارائه SVG دارای ویژگی صفر هستند.
- قوانین موجود در تگ <style> یا شیوه نامه خارجی، ویژگی آنها به طور معمول محاسبه می شود.
- سبک های درون خطی (سبک های تنظیم شده توسط یک ویژگی style ) دارای ویژگی بالاتر از هر انتخابگر هستند.
قانونی را انتخاب کنید که آخرین بار در سند ظاهر می شود.
اگر هیچ قانونی اعمال نمی شود، ارزش ویژگی را از والد عنصر به ارث ببرید.

این الگوریتم بخش های زیر از آبشار را در نظر نمی گیرد:

خاصیت transition که بالاترین اولویت را دارد. Blockly از تعدادی از این موارد استفاده می کند.
@media at-rule. Blockly از یکی از این موارد استفاده می کند.
قوانین مشخص شده توسط مرورگر یا کاربر.
@scope و @layer at-rules و ویژگی animation که توسط Blockly استفاده نمی شود.

قوانین CSS

قوانین CSS نحوه استایل بندی برنامه شما را مشخص می کند. Blockly مجموعه‌ای از قوانین پیش‌فرض را ارائه می‌کند که می‌توانید با قوانین خود آن‌ها را لغو کنید.

قوانین CSS مسدود شده

Blockly مجموعه ای پیش فرض از قوانین CSS را ارائه می دهد. نحوه و مکان اضافه شدن این قوانین بر اولویت آنها تأثیر می گذارد.

برچسب های سبک

اکثر قوانین CSS Blockly در دو تگ <style> مشخص شده اند. از آنجایی که این تگ‌ها در نزدیکی بالای صفحه قرار می‌گیرند، قوانین موجود در آن‌ها اولویت کمتری نسبت به قوانین با همان ویژگی‌هایی دارند که بعداً در صفحه ایجاد می‌شوند.

قوانین Blockly.css.register

وقتی Blockly تزریق می شود، یک تگ <style> به عنوان فرزند تگ <head> اضافه می کند. قوانین موجود در این تگ از:

فضای نام Blockly.css . برای دیدن این قوانین، core/css.ts را باز کنید و let content را جستجو کنید.
اجزای منفرد، که Blockly.css.register را فراخوانی می‌کنند تا قوانین CSS خاص جزء را اضافه کنند. از آنجایی که css.register این قوانین را به انتهای رشته content اضافه می کند، اولویت بالاتری نسبت به قوانین با همان ویژگی هایی دارند که قبلا اضافه شده بودند. برای مشاهده این قوانین، به تماس‌های Blockly.css.register مراجعه کنید.

اگر نمی خواهید از این قوانین استفاده کنید، گزینه css configuration را روی false قرار دهید. در این مورد، شما مسئول ارائه یک مجموعه جایگزین از قوانین CSS هستید.

قوانین رندر

هنگامی که رندر نمونه سازی می شود، یک تگ <style> حاوی قوانین CSS خاص رندرکننده را به عنوان فرزند تگ <head> اضافه می کند. توجه داشته باشید که این قوانین همیشه اضافه می شوند -- آنها توسط گزینه پیکربندی css تحت تاثیر قرار نمی گیرند. برای مشاهده این قوانین، متد getCss_ را در رندر خود جستجو کنید.

سبک های درون خطی

سبک های درون خطی با ویژگی style مشخص می شوند و عموماً زمانی ایجاد می شوند که DOM برای یک جزء ایجاد می شود. برای فهرست جزئی، به این جستار GitHub مراجعه کنید.

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

ویژگی های ارائه SVG

ویژگی های ارائه SVG ویژگی های سبک SVG هستند که به عنوان ویژگی های عناصر SVG استفاده می شوند. آنها دارای ویژگی صفر هستند و نمی توانند حاوی حاشیه نویسی !important ، بنابراین آنها کمترین اولویت را در بین همه قوانین Blockly دارند. Blockly به طور کلی آنها را در فراخوانی برای createSvgElement ایجاد می کند.

قوانین CSS خود را اضافه کنید

می توانید قوانین CSS خود را با استفاده از روش های مشابه Blockly اضافه کنید:

قبل از تزریق Blockly Blockly.css.register تماس بگیرید. قوانین شما بعد از Blockly اضافه می شوند و اولویت بیشتری نسبت به قوانین Blockly با همان ویژگی دارند.
به عنوان فرزند بعدی تگ <head> ، یک برچسب <style> یا پیوند به یک شیوه نامه خارجی اضافه کنید. از آنجا که Blockly قوانین خود را به عنوان دو فرزند اول تگ <head> اضافه می کند، قوانین شما اولویت بیشتری نسبت به قوانین Blockly با همان ویژگی خواهند داشت.
از سبک های درون خطی برای افزودن سبک به عناصر در یک جزء سفارشی استفاده کنید. این قوانین دارای ویژگی بالاتری نسبت به قوانین با انتخابگر خواهند بود.
از ویژگی های ارائه در عناصر SVG در یک جزء سفارشی استفاده کنید. این قوانین دارای ویژگی کمتری نسبت به قوانین با انتخابگر خواهند بود.

عیب یابی

اگر CSS شما کار نمی کند، در اینجا دلایل احتمالی وجود دارد:

شما از ویژگی های CSS روی یک عنصر SVG یا ویژگی های سبک SVG در یک عنصر HTML استفاده می کنید. ویژگی های یک ظاهر طراحی SVG در مقابل ویژگی های CSS را ببینید.
قانون شما نسبت به قانون دیگر اولویت کمتری دارد. این معمولاً به دلیل ویژگی کمتر است. راه های ممکن برای رفع این مشکل عبارتند از:
- به جای انتخابگر نوع (عنصر) از انتخابگر کلاس استفاده کنید.
- از چند انتخابگر استفاده کنید.
- در صورت امکان، یک کلاس سفارشی به عنصر هدف خود اضافه کنید و از این کلاس در قانون خود استفاده کنید.
- به عنوان آخرین راه حل، یک حاشیه !important را به قانون خود اضافه کنید. اگر یک قانون رقابتی با استفاده از یک سبک درون خطی (ویژگی style ) مشخص شده باشد، این تنها انتخاب شماست.
قانون شما دارای ویژگی مشابه با قانون دیگر است، اما در ابتدای صفحه رخ می دهد. اگر نمی توانید ویژگی قانون خود را افزایش دهید، آن را بعداً در صفحه منتقل کنید.

دو نوع قانون CSS وجود دارد که نمی توانید آنها را لغو کنید:

ویژگی هایی که در داخل یک قانون transition تنظیم می شوند.
قوانین !important که توسط مرورگر مشخص شده است.