หน้านี้ได้รับการแปลโดย Cloud Translation API

จัดสไตล์ด้วย CSS

แอปพลิเคชัน Blockly สร้างขึ้นจากองค์ประกอบ HTML และ SVG องค์ประกอบเหล่านี้ มีป้ายกำกับด้วยคลาส CSS ที่ระบุสิ่งที่องค์ประกอบแสดง (เช่น blocklyBlock, blocklyField) รวมถึงสถานะขององค์ประกอบ (เช่น blocklyEditing, blocklySelected) นอกจากนี้ Blockly ยังมีชุดกฎ CSS เริ่มต้นให้ด้วย

คุณใช้ CSS เพื่อจัดรูปแบบแอปพลิเคชันได้โดยทำดังนี้

ลบล้างกฎ CSS ของ Blockly ด้วยกฎของคุณเอง
เพิ่มคลาส CSS ของคุณเองลงในคอมโพเนนต์ Blockly เพื่อให้มีความเฉพาะเจาะจงมากขึ้น
ใช้คลาสและกฎ CSS เพื่อจัดรูปแบบคอมโพเนนต์ที่กำหนดเอง

คลาส CSS

แอปพลิเคชัน Blockly ใช้คลาส CSS เพื่อระบุองค์ประกอบที่จะจัดรูปแบบ ซึ่งช่วยให้ควบคุมได้ละเอียดยิ่งกว่าตัวเลือกประเภท (องค์ประกอบ)

คลาส CSS ของ Blockly

Blockly ใช้คลาส CSS เพื่อให้ข้อมูลต่อไปนี้เกี่ยวกับองค์ประกอบ HTML และ SVG ที่ใช้

ประเภท คลาส CSS ของ Blockly ส่วนใหญ่จะระบุสิ่งที่องค์ประกอบแสดง ตัวอย่างเช่น องค์ประกอบรูทของบล็อกจะติดป้ายกำกับเป็น blocklyBlock องค์ประกอบบางอย่าง มีป้ายกำกับที่มีหลายคลาส โดยแต่ละคลาสจะเฉพาะเจาะจงมากกว่าคลาสก่อนหน้า เช่น องค์ประกอบรูทของช่องป้อนข้อความจะมีป้ายกำกับเป็น blocklyField, blocklyInputField และ blocklyTextInputField ประเภท คลาสจะยังคงเหมือนเดิมตลอดอายุของคอมโพเนนต์
รัฐ นอกจากนี้ Blockly ยังใช้คลาส CSS เพื่อระบุสถานะของคอมโพเนนต์ด้วย เช่น เมื่อเคอร์เซอร์อยู่ในช่องป้อนข้อความ องค์ประกอบรูท ของช่องจะติดป้ายกำกับด้วยblocklyEditing class เมื่อย้ายเคอร์เซอร์ออก ระบบจะนำคลาสนี้ออก
ข้อมูลเพิ่มเติม Blockly ใช้คลาส CSS บางคลาสเพื่อแสดง ข้อมูลเพิ่มเติม ตัวอย่างเช่น การแทรก <div> มีคลาสที่ ระบุชื่อของโปรแกรมแสดงผลและธีมปัจจุบันของเวิร์กสเปซ โดยทั่วไปแล้ว คลาสเหล่านี้จะยังคงเหมือนเดิมตลอดอายุการใช้งานของแอปพลิเคชัน

วิธีที่ง่ายที่สุดในการค้นหาคลาส CSS ที่ Blockly ใช้คือการเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์และตรวจสอบองค์ประกอบที่แอปพลิเคชันของคุณใช้

คลาส 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,
}]);

นอกจากนี้ คุณยังเพิ่มหรือนำคลาส CSS ออกจากองค์ประกอบ <g> ของบล็อกได้โดยเรียกใช้ BlockSvg.addClass หรือ BlockSvg.removeClass

ฟิลด์ป้ายกำกับ

หากต้องการเพิ่มหรือนำคลาส 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 ซึ่งจะกำหนดกฎที่จะใช้หากมีกฎมากกว่า 1 ข้อที่ใช้กับพร็อพเพอร์ตี้และองค์ประกอบที่กำหนด การเรียงซ้อนแบบย่อต่อไปนี้ครอบคลุมส่วนต่างๆ ของการเรียงซ้อนที่ Blockly ใช้บ่อยที่สุด และอาจช่วยคุณตอบคำถามที่ว่า "ทำไม CSS ของฉันถึงไม่ทำงาน" ได้

การเรียงซ้อนแบบง่าย

หากต้องการพิจารณากฎที่มีผลกับองค์ประกอบและพร็อพเพอร์ตี้ใดรายการหนึ่ง ให้ทำตาม ขั้นตอนเหล่านี้และหยุดเมื่อเหลือเพียงกฎเดียว

รวบรวมกฎทั้งหมดที่ใช้กับพร็อพเพอร์ตี้และองค์ประกอบ
หากกฎใดมีคำอธิบายประกอบ !important ให้ทิ้งกฎทั้งหมดที่ไม่มีคำอธิบายประกอบ !important
เลือกกฎที่มีความเฉพาะเจาะจงสูงสุด
- แอตทริบิวต์การนำเสนอ SVG มีความเฉพาะเจาะจงเป็น 0
- กฎในแท็ก <style> หรือสไตล์ชีตภายนอกจะมีการคำนวณความเฉพาะเจาะจงตามปกติ
- รูปแบบแทรกในบรรทัด (รูปแบบที่ตั้งค่าโดยแอตทริบิวต์ style) มีความเฉพาะเจาะจง สูงกว่าตัวเลือกอื่นๆ
เลือกกฎที่ปรากฏเป็นกฎสุดท้ายในเอกสาร
หากไม่มีกฎที่เกี่ยวข้อง ให้รับค่าของพร็อพเพอร์ตี้จากองค์ประกอบระดับบนสุดขององค์ประกอบ

อัลกอริทึมนี้จะไม่พิจารณาส่วนต่อไปนี้ของแคสเคด

transition พร็อพเพอร์ตี้ที่มีลำดับความสำคัญสูงสุด Blockly ใช้บางส่วนของรายการนี้
@media กฎ @ Blockly ใช้ตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
กฎที่เบราว์เซอร์หรือผู้ใช้ระบุ
กฎ @@scope และ @@layer รวมถึงพร็อพเพอร์ตี้ animation ซึ่ง Blockly ไม่ได้ใช้

กฎ CSS

กฎ CSS จะระบุวิธีจัดรูปแบบแอปพลิเคชัน Blockly มีชุดกฎเริ่มต้น ที่คุณสามารถลบล้างด้วยกฎของคุณเองได้

กฎ CSS ของ Blockly

Blockly มีชุดกฎ CSS เริ่มต้น วิธีและตำแหน่งที่เพิ่มกฎเหล่านี้จะมีผลต่อลำดับความสำคัญของกฎ

แท็กสไตล์

กฎ CSS ส่วนใหญ่ของ Blockly จะระบุอยู่ในแท็ก <style> 2 แท็ก เนื่องจากแท็กเหล่านี้อยู่ใกล้ด้านบนของหน้า กฎในแท็กจึงมีลำดับความสำคัญต่ำกว่ากฎที่มีความเฉพาะเจาะจงเดียวกันซึ่งอยู่ภายหลังในหน้า

Blockly.css.register rules

เมื่อแทรก Blockly ระบบจะเพิ่มแท็ก <style> เป็นแท็กย่อยของแท็ก <head> กฎในแท็กนี้มาจาก

เนมสเปซ Blockly.css หากต้องการดูกฎเหล่านี้ ให้เปิด core/css.ts แล้ว ค้นหา let content
คอมโพเนนต์แต่ละรายการซึ่งเรียกใช้ Blockly.css.register เพื่อเพิ่ม กฎ CSS เฉพาะคอมโพเนนต์ เนื่องจาก css.register เพิ่มกฎเหล่านี้ไว้ที่ส่วนท้ายของสตริง content กฎเหล่านี้จึงมีลำดับความสำคัญสูงกว่ากฎที่มีความเฉพาะเจาะจงเดียวกันซึ่งเพิ่มไว้ก่อนหน้านี้ หากต้องการดูกฎเหล่านี้ โปรดดูการเรียกBlockly.css.register

หากไม่ต้องการใช้กฎเหล่านี้ ให้ตั้งค่าตัวเลือกcssการกำหนดค่า เป็น false ในกรณีนี้ คุณมีหน้าที่รับผิดชอบในการระบุชุดกฎ CSS อื่น

กฎของโปรแกรมแสดงผล

เมื่อสร้างอินสแตนซ์ของโปรแกรมแสดงผล ระบบจะเพิ่มแท็ก <style> ที่มีกฎ CSS เฉพาะโปรแกรมแสดงผลเป็นแท็กย่อยของแท็ก <head> โปรดทราบว่าระบบจะเพิ่มกฎเหล่านี้เสมอ โดยจะไม่ได้รับผลกระทบจากตัวเลือกcssการกำหนดค่า หากต้องการดูกฎเหล่านี้ ให้ค้นหาเมธอด getCss_ ในโปรแกรมแสดงผล

รูปแบบในบรรทัด

โดยจะระบุสไตล์อินไลน์ด้วยแอตทริบิวต์ style และโดยทั่วไปจะสร้างขึ้น เมื่อสร้าง DOM สำหรับคอมโพเนนต์ ดูรายการบางส่วนได้ที่คำค้นหาใน GitHub นี้

สไตล์อินไลน์จะใช้กับองค์ประกอบที่สไตล์นั้นปรากฏโดยตรง และมีความจำเพาะเจาะจงสูงกว่าตัวเลือกใดๆ ด้วยเหตุนี้ การลบล้างจึงมัก กำหนดให้คุณต้องใช้!important คำอธิบายประกอบ

แอตทริบิวต์การนำเสนอ SVG

แอตทริบิวต์การนำเสนอ SVG คือพร็อพเพอร์ตี้การจัดรูปแบบ SVG ที่ใช้เป็นแอตทริบิวต์ขององค์ประกอบ SVG โดยมีค่าความเฉพาะเจาะจงเป็น 0 และต้องไม่มีคำอธิบายประกอบ !important จึงมีลำดับความสำคัญต่ำสุดในบรรดากฎทั้งหมดของ Blockly โดยทั่วไปแล้ว Blockly จะสร้างบล็อกเหล่านี้ในการเรียกใช้ createSvgElement

เพิ่มกฎ CSS ของคุณเอง

คุณเพิ่มกฎ CSS ของตัวเองได้โดยใช้วิธีเดียวกับ Blockly

เรียกใช้ Blockly.css.register ก่อนแทรก Blockly ระบบจะเพิ่มกฎของคุณหลังกฎของ Blockly และมีลำดับความสำคัญสูงกว่ากฎของ Blockly ที่มีความเฉพาะเจาะจงเดียวกัน
เพิ่มแท็ก <style> หรือลิงก์ไปยังชีตสไตล์ภายนอกเป็นองค์ประกอบระดับย่อยในภายหลังของแท็ก <head> เนื่องจาก Blockly จะเพิ่มกฎเป็น 2 โหนดแรกของแท็ก <head> กฎของคุณจึงมีลำดับความสำคัญสูงกว่ากฎ Blockly ที่มีความเฉพาะเจาะจงเดียวกัน
ใช้รูปแบบในบรรทัดเพื่อเพิ่มรูปแบบให้กับองค์ประกอบในคอมโพเนนต์ที่กำหนดเอง กฎเหล่านี้ จะมีความเฉพาะเจาะจงสูงกว่ากฎที่มีตัวเลือก
ใช้แอตทริบิวต์การนำเสนอในองค์ประกอบ SVG ในคอมโพเนนต์ที่กำหนดเอง กฎเหล่านี้ จะมีความเฉพาะเจาะจงต่ำกว่ากฎที่มีตัวเลือก

การแก้ปัญหา

หาก CSS ไม่ทำงาน สาเหตุที่เป็นไปได้มีดังนี้

คุณกำลังใช้พร็อพเพอร์ตี้ CSS ในองค์ประกอบ SVG หรือพร็อพเพอร์ตี้การจัดรูปแบบ SVG ใน องค์ประกอบ HTML ดูคุณสมบัติการจัดรูปแบบ SVG กับคุณสมบัติ CSS
กฎของคุณมีลำดับความสำคัญต่ำกว่ากฎอื่น ซึ่งมักเกิดจากความเฉพาะเจาะจงที่ต่ำกว่า วิธีแก้ไขที่เป็นไปได้มีดังนี้
- ใช้ตัวเลือกคลาสแทนตัวเลือกประเภท (องค์ประกอบ)
- ใช้ตัวเลือกหลายรายการ
- หากเป็นไปได้ ให้เพิ่มคลาสที่กำหนดเองลงในองค์ประกอบเป้าหมาย และใช้คลาสนี้ในกฎ
- หากจำเป็น ให้เพิ่ม!importantหมายเหตุในกฎ นี่เป็นตัวเลือกเดียวของคุณหากมีการระบุกฎที่ขัดแย้งกันโดยใช้สไตล์อินไลน์ (แอตทริบิวต์ style)
กฎของคุณมีความเฉพาะเจาะจงเหมือนกับกฎอื่น แต่เกิดขึ้นก่อนในหน้าเว็บ หากเพิ่มความเฉพาะเจาะจงของกฎไม่ได้ ให้ย้ายกฎไปไว้ด้านล่างในภายหลัง ของหน้า

กฎ CSS ที่คุณลบล้างไม่ได้มี 2 ประเภท ได้แก่

พร็อพเพอร์ตี้ที่ตั้งค่าภายในกฎ transition
!important กฎที่เบราว์เซอร์ระบุ