ข้ามไปที่เนื้อหา
HubSpot ฐานความรู้
โปรดทราบ:: บทความนี้จัดทำขึ้นเพื่อความสะดวกของคุณ ได้รับการแปลโดยอัตโนมัติโดยใช้ซอฟต์แวร์การแปลและอาจไม่ได้รับการพิสูจน์อักษร บทความฉบับภาษาอังกฤษนี้ควรถือเป็นฉบับทางการที่คุณสามารถค้นหาข้อมูลล่าสุดได้มากที่สุด คุณสามารถเข้าถึงได้ที่นี่

ทำความเข้าใจที่มาของสไตล์การแต่งตัวของเพจ

อัปเดตล่าสุด: 30 มกราคม 2026

สามารถใช้ได้กับการสมัครใช้บริการใดๆ ต่อไปนี้ ยกเว้นที่ระบุไว้:

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

ทำความเข้าใจว่าสไตล์ถูกนำไปใช้อย่างไร

สไตล์จะถูกนำไปใช้ตามลำดับที่เฉพาะเจาะจงโดยขึ้นอยู่กับตำแหน่งที่เพิ่มใน HubSpot ตัวอย่างเช่นสไตล์ที่เพิ่มในสไตล์ชีตส่วนกลางจะถูกแทนที่ด้วยสไตล์ที่เพิ่มในหน้าใดหน้าหนึ่ง 

ใช้รายการนี้เพื่อทำความเข้าใจที่มาของสไตล์การแต่งตัวของหน้าเว็บโดยเริ่มจากสไตล์ที่ใช้ก่อนและลงท้ายด้วยสไตล์ที่ใช้ก่อน

  1. CSS โมดูลที่กำหนดเอง
In the design manager, the inspector is displayed for a module. The Linked files section is present in the screenshot and shows an attached stylesheet.
    • CSS ภายในมาร์กอัป HubL ของโมดูลภายในบล็อค require_css block
  2. เพิ่มสไตล์ชีตไปยังเทมเพลตผ่านบล็อค require_css block ในเครื่องมือแก้ไขโค้ด
  3. สไตล์ชีตเริ่มต้นของ HubSpot (เช่น layout.css) ในตัวจัดการการออกแบบ
  4. สไตล์ชีตที่แนบมากับเทมเพลตในตัวแก้ไขเค้าโครง
In the design manager, the inspector is displayed for a template. The Linked stylesheets section is present in the screenshot and shows an attached stylesheet.
  1. สไตล์ชีตที่แนบมาในแท็บการตั้งค่าของหน้าเว็บของคุณ
In the content editor, advanced page settings are displayed, including the Stylesheets section with configurable options for Domain stylesheets and Page stylesheets.
  1. สไตล์ชีตที่แนบมาในการตั้งค่าของคุณสำหรับทุกโดเมน
  2. สไตล์ชีตที่แนบมาในการตั้งค่าของคุณสำหรับโดเมนเฉพาะ
  3. เพิ่ม CSS ภายใน < style > แท็ก ตัวอย่างเช่น HEAD HTML ของการตั้งค่าเว็บไซต์การ ตั้งค่าหน้าเว็บหรือเทมเพลต
In the content editor for a page, the page settings are displayed for the Additional code snippets section.
  1. สไตล์ที่เพิ่มผ่านเครื่องมือแก้ไขหน้าเว็บ HubSpot จะเพิ่ม!importantสไตล์เหล่านี้ด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับ ! แท็กสำคัญและผลกระทบต่อสไตล์การแต่งตัว

In the content editor a module sidebar editor is displayed for the Styles tab.

ค้นหาการจัดแต่งในหน้าตัวอย่างหรือหน้าสด

ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์ของคุณเพื่อค้นหารูปแบบที่ใช้กับเว็บไซต์สดของคุณหรือหน้าตัวอย่าง เบราว์เซอร์แต่ละตัวจะแตกต่างกันเล็กน้อยในการแก้ปัญหาสไตล์ ในตัวอย่างต่อไปนี้จะใช้ Google Chrome

  1. ไปที่เนื้อหาของคุณ:
  2. คลิกชื่อเพจของคุณ
  3. ในตัวแก้ไขเนื้อหาให้คลิกดูตัวอย่างที่ด้านบนขวา
  4. ในหน้าแสดงตัวอย่างให้คลิกเปิดในแท็บใหม่
  5. ในตัวอย่างให้คลิกขวาที่องค์ประกอบที่คุณต้องการตรวจสอบจากนั้นเลือกตรวจสอบ
  6. ในบานหน้าต่างองค์ประกอบคุณจะเห็น HTML ของหน้าเว็บ คลิกที่องค์ประกอบเพื่อดูสไตล์ของพวกเขา
  7. ในบานหน้าต่างสไตล์ให้ตรวจสอบกฎ CSS ที่ใช้กับองค์ประกอบนั้น เลือกและล้างช่องทำเครื่องหมายถัดจากแต่ละสไตล์เพื่อลบหรือเพิ่มสไตล์ชั่วคราว สิ่งนี้จะช่วยในการระบุว่ากฎใดที่มีผลต่อองค์ประกอบ
A preview of a page is displayed in the Chrome browser. An element is right-clicked to bring up the browser menu and the Inspect option is selected. An element is clicked and the styles pane displays where checkboxes are cleared or selected.
  1. ทางด้านขวาของกฎ CSS คุณจะเห็นชื่อแหล่งที่มาของสไตล์นั้น นี่เป็นการยืนยันว่าแหล่งที่มาของสไตล์ลิ่งอยู่ที่ไหน วางเมาส์เหนือชื่อแหล่งที่มาเพื่อดูชื่อเต็ม:
    • หากสไตล์ลิ่งมาจากไฟล์ CSS ชื่อของสไตล์ชีตจะปรากฏถัดจากการประกาศ CSS ไปที่ตัวจัดการดีไซน์ค้นหาสไตล์ชีตและทำการแก้ไขตามต้องการ
In the developer tools of Google Chrome, the style pane is displayed for an element. A box is placed around the source name of a CSS declaration.
    • หากชื่อแหล่งที่มาเริ่มต้นด้วยโมดูลการจัดแต่งทรงผมจะมาจาก CSS ของโมดูล วางเมาส์เหนือชื่อแหล่งที่มาเพื่อดูชื่อเต็มของโมดูล
In the developer tools of Google Chrome, the style pane is displayed for an element. A box is placed around the source name of a CSS declaration.
    • หากชื่อแหล่งที่มาคือสไตล์ชีตตัวแทนผู้ใช้การจัดแต่งทรงผมเป็นส่วนหนึ่งของการจัดแต่งทรงผมเริ่มต้นของเบราว์เซอร์
      • โดยทั่วไปคุณจะเห็นสิ่งนี้สำหรับการจัดแต่งแท็ก HTML (เช่น

        เป็นต้น) เมื่อเบราว์เซอร์ไม่สามารถหากฎการจัดแต่งสำหรับองค์ประกอบได้ 

      • สไตล์ชีตตัวแทนผู้ใช้สามารถถูกแทนที่ได้โดยการเพิ่มสไตล์ของคุณเองลงในองค์ประกอบนั้น
In the developer tools of Google Chrome, the style pane is displayed for an element. A box is placed around the source name of a CSS declaration.
    • หากชื่อต้นทางคือ URL ของหน้าเว็บสไตล์จะมาจากแท็ก