สร้างและใช้สไตล์

สิ่งสำคัญ:  บทความนี้เป็นการแปลด้วยเครื่อง โปรดดู ข้อจำกัดความรับผิดชอบ โปรดดูบทความฉบับภาษาอังกฤษ ที่นี่ เพื่อใช้อ้างอิง

สไตล์คือ ชุดของการจัดรูปแบบลักษณะที่กำหนดไว้ใน cascading style sheet (CSS) คุณสามารถนำสไตล์ไปยังเนื้อหาใน Web page รวมถึงข้อความ (อักขระแต่ละตัวหรือทั้งย่อหน้า), กราฟิก ชั้น ตาราง และแม้แต่ลงในเนื้อความของหน้าเว็บทั้งหมด สไตล์ทำให้คุณสามารถนำชุดของค่าและคุณสมบัติ โดยไม่ต้องการตั้งค่าคุณสมบัติทุกครั้งที่คุณต้องการใช้เหล่านั้นได้อย่างมีประสิทธิภาพ

สไตล์ของ CSS แบบเรียงซ้อนในแง่ที่กฎลักษณะโดยรวมนำไปใช้กับองค์ประกอบ HTML เว้นแต่ว่ากฎลักษณะภายในเครื่องแทนพวกเขา โดยทั่วไป กฎลักษณะภายในเครื่องจะมีผลเหนือกฎลักษณะทั่วไป ตัวอย่างเช่น สไตล์แบบกำหนดเองใน CSS แบบภายในเว็บเพจแทนสไตล์แบบกำหนดเองใน CSS แบบภายนอก ในทำนองเดียวกัน แบบอินไลน์ CSS ที่กำหนดเองภายในองค์ประกอบของ HTML เดียวลงในเว็บเพจแทนสไตล์ใด ๆ ที่กำหนดเองสำหรับองค์ประกอบที่เดียวกันใน CSS ภายใน หรือที่อยู่ภายนอกของเว็บเพจ ในส่วนของกฎลักษณะโดยรวมที่ไม่ contradicted ด้วยกฎสำหรับสไตล์ CSS ภายในเครื่องนำไปใช้กับองค์ประกอบ HTML แม้ว่าจะใช้ลักษณะภายในเครื่อง

ในบทความนี้

ชนิดของสไตล์

สร้างสไตล์

นำสไตล์

ชนิดของสไตล์

สไตล์ที่อยู่ใน CSS แบบภายใน หรือภายนอกสามารถ นคลาส นองค์ประกอบ หรือ สามารถ น id มีกำหนดสไตล์ตามกฎชุดของ ซึ่งประกอบด้วยตัวเลือก ตาม ด้วยบล็อกของประกาศคุณสมบัติที่ปรากฏขึ้นระหว่างวงเล็บปีกกาใช้ปีกกาซ้าย ({}) และปีกกาขวา (}) แต่ละชนิดของสไตล์จะแตกต่างจากสไตล์ชนิดอื่น ๆ ด้วยตัวเลือกของ เครื่องหมายมหัพภาค (.) นำหน้าตัวเลือกสำหรับสไตล์นคลาส เครื่องหมายเลขที่ (#) นำหน้าตัวเลือกสไตล์ยึดตาม id และตัวเลือกลักษณะที่มีนองค์ประกอบที่ประกอบด้วยขององค์ประกอบ HTML เช่นองค์ประกอบ H1 เท่านั้น

สไตล์นคลาส

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

ในตัวอย่างต่อไปนี้ "บทนำ" เป็นตัวเลือกสไตล์ และ "ขนาดฟอนต์: ขนาดเล็ก" ถูกประกาศคุณสมบัติหนึ่ง แล้วตาม ด้วยการประกาศคุณสมบัติที่สองออก

ตัวอย่างของกฎการตั้งค่าสำหรับสไตล์นคลาส

.introduction {font-size: small; color: white}

ตัวอย่างของการนำไปใช้กับแท็ก < p > สไตล์นคลาส

<p class="introduction">

องค์ประกอบใช้สไตล์

ใช้องค์ประกอบนสไตล์เพื่อกำหนดชุดของคุณสมบัติที่คุณต้องการให้ทุกอินสแตนซ์ขององค์ประกอบ HTML เฉพาะเจาะจงเพื่อใช้ในเว็บเพจ ตัวอย่างเช่น เพื่อสร้างระยะขอบของพิกเซล 25 รอบย่อหน้าทั้งหมด (เนื้อหาล้อมรอบ ด้วยแท็ก < p >) ในเว็บเพจของคุณ คุณสร้างสไตล์ตัวนองค์ประกอบที่ใช้องค์ประกอบ p เป็นตัวเลือกของ และประกอบด้วยประกาศสำหรับคุณสมบัติระยะขอบ ดังที่แสดงไว้ในโค้ดต่อไปนี้

ตัวอย่างของกฎการตั้งค่าสำหรับแอสไตล์นองค์ประกอบ

p { margin-left: 25px; margin-right: 25px }

ใช้ id สไตล์

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

ตัวอย่างของกฎการตั้งค่าสำหรับแอสไตล์น id

#footer {background-color: #CCCCCC; margin: 15px}

ตัวอย่างของลักษณะการใช้ id นำไปใช้กับแท็ก < p >

<p id="footer">

สไตล์แบบอินไลน์

ใช้ลักษณะแบบอินไลน์เมื่อคุณต้องการกำหนดชุดของคุณสมบัติสำหรับรายการเดียวหรือช่วงของรายการในเว็บเพจ และไม่ต้องการนำสไตล์นั้น ไม่เหมือนกับสไตล์ น id นองค์ประกอบ และ นคลาส คุณสมบัติกำหนดไว้ ในในส่วนหัวของเว็บเพจ (ภายใน CSS) หรือ ไฟล์ภายนอก CSS คุณสมบัติของแบบอินไลน์ สไตล์ (หรือแบบอินไลน์ CSS) จะถูกกำหนดโดยตรงใน HTML องค์ประกอบที่คุณต้องการใช้สไตล์

ตัวอย่างของกฎการตั้งค่าสำหรับแอสไตล์แบบอินไลน์

<p style="font-weight: bold; font-style: italic; color: #FF0000">

ด้านบนของหน้า

สร้างสไตล์

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

สร้างสไตล์แบบ โดยใช้กล่องโต้ตอบสไตล์ใหม่

  1. เลือกทำอย่างใดอย่างหนึ่งต่อไปนี้

    • เมื่อต้องการเพิ่มสไตล์ลง CSS แบบภายนอก เปิดไฟล์.css

    • เมื่อต้องการเพิ่มสไตล์ลง CSS แบบภายใน เปิดเว็บเพจ

    • การเพิ่มลักษณะแบบอินไลน์ เปิดเว็บเพ แล้ว เลือกเนื้อหาคุณต้องการสไตล์

  2. เลือกทำอย่างใดอย่างหนึ่งต่อไปนี้

    • เมื่อต้องการสร้างสไตล์ใหม่    คลิกสไตล์ใหม่ ในหนึ่งตำแหน่งที่ตั้งต่อไปนี้: บานหน้าต่างงานใช้สไตล์ หรือบานหน้าต่างงานสไตล์จัดการ แถบเครื่องมือสไตล์ หรือเมนูรูปแบบ

    • เมื่อต้องการคัดลอกลักษณะที่มีอยู่    เลือกทำอย่างใดอย่างหนึ่งต่อไปนี้:

      • ในบานหน้าต่างงานใช้สไตล์ ชี้ไปที่สไตล์ที่คุณต้องการคัดลอก คลิกลูกศรที่ปรากฏขึ้น และเลือกแล้วคัดลอกสไตล์ใหม่

      • ในบานหน้าต่างงานสไตล์จัดการ หรือบานหน้าต่างคุณสมบัติ CSS กขวาสไตล์ที่คุณต้องการคัดลอก นั้นแล้ว เลือกคัดลอกลักษณะใหม่

  3. ในกล่องโต้ตอบสไตล์ใหม่ ทำต่อไปนี้:

ใช้คำสั่งนี้

เมื่อต้องการทำเช่นนี้

ตัวเลือก

  • เมื่อต้องการใช้ตัวเลือกคลาส พิมพ์เครื่องหมายมหัพภาค (.) ตาม ด้วยชื่อที่ไม่ซ้ำ

  • เมื่อต้องการใช้ตัวเลือก id พิมพ์เครื่องหมายเลขที่ (#) ตาม ด้วยชื่อที่ไม่ซ้ำ

    หมายเหตุ: ชื่อตัวเลือก id และคลาสในไม่สามารถประกอบด้วยช่องว่างเว้นแต่ว่าคุณกำลังสร้างตัวเลือกที่ซับซ้อน

  • เมื่อต้องการใช้ตัวเลือกองค์ประกอบ อย่างใดอย่างหนึ่งพิมพ์ชื่อขององค์ประกอบ HTML หรือคลิกที่กล่องดรอปดาวน์ตัวเลือก แล้วเลือกชื่อองค์ประกอบ

  • เมื่อต้องการใช้ตัวเลือกแบบอินไลน์ เลือกสไตล์แบบอินไลน์

  • เมื่อต้องการสร้างตัวเลือกที่ซับซ้อน พิมพ์ตัวเลือก

กำหนดใน

เลือกอย่างใดอย่างหนึ่งต่อไปนี้

  • หน้าปัจจุบัน บวกสไตล์ใหม่ไปยัง CSS ภายในเว็บเพจปัจจุบัน

  • สไตล์ชีตใหม่ เพิ่มสไตล์ใหม่เพื่อ CSS ภายนอกเปล่าใหม่

  • สไตล์ชีที่มีอยู่ เพิ่มสไตล์ใหม่เพื่อ CSS แบบภายนอกที่มีอยู่ที่คุณระบุ

นำลักษณะใหม่เมื่อต้องการเลือกเอกสาร

นำสไตล์ส่วนที่เลือกปัจจุบันในเว็บเพจปัจจุบัน

URL

ถ้าคุณเลือกสไตล์ชีที่มีอยู่ ในการกำหนดใน ใส่ URL ไปยังไฟล์.css

ประเภท

เลือกอย่างใดอย่างหนึ่งต่อไปนี้ แล้ว ตั้งค่าคุณสมบัติที่ปรากฏทางด้านขวาในกล่องโต้ตอบ:

เคล็ดลับ: ประเภทที่ปรากฏในตัวหนาในรายการประเภท ประกอบด้วยการตั้งค่าคุณสมบัติ

  • ฟอนต์ ตั้งค่าคุณสมบัติฟอนต์ รวมถึงขนาด น้ำหนัก ตกแต่ง และสี

  • บล็อก ตั้งค่าความสูง ของเส้น จัดแนวข้อความ การเยื้องของข้อความ และระยะห่างระหว่างข้อความ

  • พื้นหลัง ชุดคุณสมบัติของรูปภาพพื้นหลังและสีพื้นหลัง

  • เส้นขอบ ตั้งค่าเส้นขอบและคุณสมบัติ

  • กล่อง ตั้งค่าคุณสมบัติช่องว่างและระยะขอบของกล่องและองค์ประกอบของบล็อกระดับ

  • ตำแหน่ง ตั้งค่าขนาดและตำแหน่งของกล่องและองค์ประกอบของบล็อกระดับ

  • เค้าโครง ตั้งค่าการมองเห็น ลอย และตัดลักษณะการทำงาน รูปวาด และคุณสมบัติอื่น ๆ เค้าโครงของกล่องและองค์ประกอบของบล็อกระดับ

  • รายการ ตั้งค่าคุณสมบัติขององค์ประกอบรายการ รวมถึงชนิด ตำแหน่ง และรูป

  • ตาราง ตั้งค่าคุณสมบัติของตารางที่เกี่ยวข้องกับองค์ประกอบ รวมถึงระยะห่าง เค้าโครง คุณสมบัติเส้นขอบ

หมายเหตุ: คุณยังสามารถคัดลอกสไตล์จาก CSS หนึ่งไปยังอีก ในบานหน้าต่างงานสไตล์จัดการ ลากสไตล์จาก CSS ที่ประกอบด้วยลักษณะที่ชื่อของ CSS คุณต้องการคัดลอกการ หรือ ไปยังจุดใดในรายการของสไตล์ในเป้าหมาย CSS

สร้างลักษณะแบบอินไลน์ โดยใช้บานหน้าต่างงานคุณสมบัติ CSS

  1. ในมุมมองออกแบบหรือมุมมองโค้ด ในเว็บเพจของคุณ เลือกเนื้อหาคุณต้องการเพิ่มแอสไตล์แบบอินไลน์ไปใช้

  2. ในคุณสมบัติ CSS บานหน้าต่างงาน ภายใต้นำกฎ อย่างใดอย่างหนึ่งคลิกขวาที่ตัวเลือกที่คุณต้องการนำสไตล์แบบอินไลน์ไป หรือ ถ้า "(ไม่มีใช้กฎ) " ปรากฏขึ้น คลิกขวาที่ใดก็ได้ภายใต้นำกฎ แล้ว คลิ กสไตล์แบบอินไลน์ใหม่ บนเมนูทางลัด

  3. ภายใต้คุณสมบัติ CSS ตั้งค่าคุณสมบัติคุณต้องการ

สร้าง และนำสไตล์ undefined ใหม่

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

  1. ในมุมมองออกแบบหรือมุมมองโค้ด ในเว็บเพจของคุณ เลือกรายการคุณต้องการนำสไตล์ไปใช้

  2. เมื่อต้องการสร้าง และนำสไตล์ใหม่โดยไม่ต้องการกำหนดคุณสมบัติ ใด ๆ บนแถบเครื่องมือสไตล์ ในกล่องคลาส หรือID พิมพ์ชื่อที่ไม่ซ้ำสำหรับสไตล์ใหม่

ด้านบนของหน้า

ใช้ลักษณะ

คุณสามารถใช้บานหน้าต่างงานใช้สไตล์ บานหน้าต่างงานสไตล์จัดการ หรือแถบเครื่องมือลักษณะ การนำสไตล์ นคลาส หรือ ใช้ id จากของคุณภายใน และภายนอก cascading style sheet (CSS) บานหน้าต่างงานใช้สไตล์ ช่วยให้คุณสไตล์หลายนำไปใช้กับส่วนที่เลือก ในขณะที่ลักษณะจัดการ บานหน้าต่างงานและแถบเครื่องมือสไตล์ จะถูกจำกัดไว้เพื่อนำสไตล์หนึ่ง แถบเครื่องมือสไตล์ ช่วยให้คุณสามารถตั้งชื่อ และนำสไตล์ undefined ใหม่ในหน้าของคุณได้อย่างรวดเร็ว

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

  1. ในมุมมองออกแบบ หรือมุมมองโค้ด ในเว็บเพจของคุณ เลือกรายการคุณต้องการนำสไตล์ไปใช้

  2. เลือกทำอย่างใดอย่างหนึ่งต่อไปนี้

    • เมื่อต้องการนำสไตล์ที่มีอยู่หลาย    ในบานหน้าต่างงานใช้สไตล์ กด CTRL ในขณะที่คุณคลิกที่แต่ละสไตล์ที่คุณต้องการ

    • เมื่อต้องการนำสไตล์ที่มีอยู่เดียว    เลือกทำอย่างใดอย่างหนึ่งต่อไปนี้:

      • ในบานหน้าต่างงานใช้สไตล์ คลิกสไตล์คลาสหรือรหัสที่คุณต้องการ

      • บนแถบเครื่องมือลักษณะ ในชั้นเรียน หรือกล่องดรอปดาวน์ID คลิกสไตล์คุณต้องการ

      • ในบานหน้าต่างงานสไตล์จัดการ คลิกขวาคลาสหรือ id สไตล์คุณต้อง แล้ว คลิกนำไปใช้สไตล์ บนเมนูทางลัด

    • เมื่อต้องการสร้าง และนำสไตล์ใหม่โดยไม่ต้องการกำหนดคุณสมบัติใด ๆ    บนแถบเครื่องมือสไตล์ ในกล่องคลาส หรือID พิมพ์ชื่อที่ไม่ซ้ำสำหรับสไตล์ใหม่

ด้านบนของหน้า

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

ขยายทักษะของคุณ
สำรวจการฝึกอบรม
รับฟีเจอร์ใหม่ก่อนใคร
เข้าร่วม Office Insider

ข้อมูลนี้เป็นประโยชน์หรือไม่

ขอบคุณสำหรับคำติชมของคุณ!

ขอขอบคุณสำหรับคำติชมของคุณ! เราคิดว่าอาจเป็นประโยชน์ที่จะให้คุณได้ติดต่อกับหนึ่งในตัวแทนฝ่ายสนับสนุน Office ของเรา

×