วิธีเปลี่ยนสีตัวอักษรใน Word ตั้งค่าสีข้อความ แอตทริบิวต์สีของแท็กแบบอักษร

คุณอาจสังเกตเห็นว่าในหลาย ๆ ไซต์ขนาดตัวอักษรมีขนาดเล็กมาก ซึ่งเป็นสาเหตุว่าทำไมคุณจึงต้องปวดสายตา ขยายตัวอักษรด้วยเมาส์ (Ctrl + หมุนวงล้อของเมาส์) และโดยทั่วไปจะรู้สึกไม่สบายตัว ฉันอยากจะออกจากเว็บไซต์นี้โดยเร็วที่สุด นอกจากนี้ยังมีจุดสำคัญอีกประการหนึ่งคือใน เมื่อเร็วๆ นี้ผู้คนออนไลน์มากขึ้นเรื่อยๆ อุปกรณ์เคลื่อนที่และเนื่องจากหน้าจอมีขนาดเล็ก การแสดงกราฟิกจึงมีบทบาทสำคัญ
ในขณะเดียวกันปัญหาก็สามารถแก้ไขได้ภายในไม่กี่นาทีอย่างที่พวกเขาพูด ในการดำเนินการนี้ ให้เปิดบทความของคุณ เลือกข้อความ จากนั้นคลิกที่บทความ คลิกขวาเมาส์และเลือก "ตรวจสอบองค์ประกอบ" หลังจากนี้ หน้าต่างรหัสจะปรากฏขึ้นที่ด้านล่างของหน้าจอ โดยที่ ด้านขวาคุณจะเห็นภาพนี้
ในบรรทัด ขนาดตัวอักษร:15px; ต้องเปลี่ยนเบอร์เข้า ด้านใหญ่- คลิกที่ลิงค์ “Style.css:739” ไฟล์ “Style.css” จะเปิดขึ้น เลื่อนลงและค้นหาบรรทัด 739 โดยเปลี่ยนตัวเลขตามที่คุณต้องการ สำหรับผู้ที่กลัวโค้ด สคริปต์ หรือการเปลี่ยนแปลงใดๆ ในบล็อกอย่างตื่นตระหนก ในขั้นตอนนี้ คุณไม่มีอะไรต้องกลัว คุณเพียงแค่เห็นว่าจะเกิดอะไรขึ้นหากคุณทำสิ่งนี้และสิ่งนั้น หลังจากที่คุณรีบูต การเปลี่ยนแปลงทั้งหมดจะหายไปและเพจจะกลับสู่รูปแบบก่อนหน้า

และเพื่อให้มีผล คุณจะต้องแก้ไขไฟล์เอง หากต้องการทำสิ่งนี้ ให้ไปที่ "ลักษณะที่ปรากฏ" - "ตัวแก้ไข" เปิดไฟล์ "Style.css" กด Ctrl+f แล้วป้อนรหัสบรรทัดต่อไปนี้ในหน้าต่างที่ปรากฏขึ้น - #main_content_post p ทำการเปลี่ยนแปลงและอัพเดตไฟล์ ฉันต้องเตือนคุณว่ามันมากเกินไป ตัวพิมพ์ใหญ่ก็มีผลเสียต่อการรับรู้เช่นกัน ทุกอย่างดีพอสมควร

จะเปลี่ยนขนาดตัวอักษรของชื่อเรื่องได้อย่างไร?

เราทำเช่นเดียวกัน - คลิกขวาที่ชื่อไซต์ - "สำรวจองค์ประกอบ" - เข้า คอลัมน์ด้านขวาเมื่อเลื่อนลงไปเราจะพบบรรทัดขนาดตัวอักษร ตามลิงค์ไปยังสไตล์ชีตค้นหา เส้นที่ต้องการและสร้างสรรค์ แต่มีความแตกต่างกันนิดหน่อย: เมื่อแบบอักษรของชื่อเรื่องเพิ่มขึ้น ในเวลาเดียวกันก็เพิ่มขึ้นด้วย หน้าแรกและองค์ประกอบอื่นๆ - ผู้เขียน หัวเรื่อง ความคิดเห็น พวกเขาเชื่อมโยงถึงกันและพูดตามตรงแล้วมันดูไม่เรียบร้อยเลย

วิธีแก้ไขอยู่ใน header.php เนื่องจากส่วนหัวเป็นของไฟล์นี้ เพิ่มคำสั่งต่อไปนี้ลงในบรรทัดเอาต์พุตชื่อไซต์ - padding: 0px;»> ดังนั้นเราจึงกำหนดขนาดของส่วนหัวเท่านั้น คุณสามารถแก้ไขคำอธิบายไซต์ได้ในลักษณะเดียวกัน เพื่อให้รู้สึกมั่นใจมากขึ้น ให้ทำ การสำรองข้อมูล- หากมีสิ่งผิดปกติเกิดขึ้น คุณสามารถย้อนกลับไปที่แผงควบคุมโฮสติ้งของคุณได้

จะเปลี่ยนสีตัวอักษรบนเว็บไซต์ได้อย่างไร?

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

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

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

หากต้องการตั้งค่าสี เพียงระบุชื่อ เช่น แดง เขียว น้ำเงิน ลองดูตัวอย่างเล็กๆ น้อยๆ:

<span>บทที่ 6 การเปลี่ยนสีข้อความ</span>

ข้อความสีเขียว

ข้อความสีแดง

ข้อความ สีม่วง



มาดูผลลัพธ์ในเบราว์เซอร์กัน:

ข้อความในย่อหน้าแรกเปลี่ยนเป็นสีเขียว ย่อหน้าที่สองเปลี่ยนเป็นสีแดง และย่อหน้าที่สามเปลี่ยนเป็นสีม่วง โดยรวมแล้วมีชื่อสีหลัก 16 ชื่อและชื่อสีเพิ่มเติม 130 ชื่อ รายการเต็มคุณสามารถดูสีได้ในตารางสี html

วิธีการระบุสีนี้เรียบง่ายแต่มีข้อจำกัดมาก ดังนั้นในการเปลี่ยนสีในโค้ด html จึงมักใช้ เลขฐานสิบหกนำหน้าด้วยเครื่องหมายแฮช (#) เช่น

เมื่อใช้การกำหนดนี้ คุณจะได้สีและเฉดสีมากกว่า 16 ล้านสี! คุณสามารถรับรหัสสีได้โดยใช้ตัวแปลงสี HEX ซึ่งมีอยู่บนไซต์ หรือใช้จานสีใน Photoshop ลองดูตัวอย่างและเขียนโค้ดต่อไปนี้:

<span>บทที่ 6 การเปลี่ยนสีข้อความ</span>

ข้อความสีเขียว

ข้อความสีแดง

ข้อความสีม่วง



มาบันทึกไฟล์และดูผลลัพธ์:

อย่างที่คุณเห็น เราได้ให้ข้อความมีสีเดียวกันกับตัวอย่างแรก เฉพาะที่นี่เท่านั้นที่เราใช้ ระบบเลขฐานสิบหกแคลคูลัสหรืออีกนัยหนึ่ง เราระบุสีในรูปแบบ HEX

ตอนนี้คุณได้เรียนรู้วิธีเปลี่ยนสีข้อความใน html แล้ว และในตอนท้ายของบทเรียน ฉันขอแนะนำให้ทำซ้ำแอตทริบิวต์ของแท็กทั้งหมด และตั้งค่าพารามิเตอร์ต่างๆ ให้กับข้อความพร้อมกัน ได้แก่ แบบอักษร ขนาด และสี เขียนตัวอย่าง:

<span>เราให้พารามิเตอร์หลายตัวแก่ข้อความ</span>

ตั้งค่าแบบอักษร ขนาด และสีของข้อความ

ตั้งค่าแบบอักษร ขนาด และสีของข้อความ



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

การจัดรูปแบบข้อความเป็นหนึ่งในฟังก์ชันหลักของโปรแกรมแก้ไข

การเปลี่ยนสีตัวอักษร

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

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

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

การเน้นสีของส่วนที่แยกจากกันของเอกสาร

เพื่อให้การเน้นสีไม่เกี่ยวข้องกับแบบอักษร แต่เป็นพื้นที่ที่ล้อมรอบพื้นที่ของส่วนที่กำหนด ผู้ใช้จะต้องไปที่หมวดหมู่ "หน้าแรก" ท่ามกลางเครื่องมืออื่น ๆ ให้เลือกลูกศรซึ่งอยู่ในเมนูดรอป - เมนูลงใกล้กับเส้น "สี" การจัดการนี้จะเรียกคำสั่งใน Word ที่เปลี่ยนแกมมาของการเลือกเอง

ผู้ใช้จะต้องชี้ไปที่โทนสีที่ต้องการ จากนั้นใช้เคอร์เซอร์เพื่อร่าง ส่วนที่จำเป็นเอกสาร. ต่อจากนั้นส่วนนี้จะถูกเน้นด้วยสีเฉพาะ

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

ยกเลิกการกระทำที่เลือก

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

Data-lazy-type = "รูปภาพ" data-src = "http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-50-04-Screenshot-screen.png" alt="2015-12-05 01-50-04 ภาพหน้าจอ" width="205" height="79"> !} คำพูดคือที่สุด โปรแกรมยอดนิยมสำหรับการดู พิมพ์ และแก้ไขข้อความใดๆ แต่ไม่ใช่ทุกคนที่จะเข้าใจความซับซ้อนของโปรแกรมนี้ได้ วันนี้ฉันจะสอนคุณ ในรูปแบบต่างๆเน้นและเปลี่ยนสีข้อความ

การใช้แถบเครื่องมือด้านบน

Data-lazy-type = "รูปภาพ" data-src = "http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-33-04-Screenshot-screen.png" alt="2015-12-05 01-33-04 ภาพหน้าจอ" width="266" height="273"> !} กำลังเปิด โปรแกรมแก้ไขข้อความเราแต่ละคนเห็นสาขางานหลักที่เราทำงานกับข้อความ แผงด้านบนเครื่องมือตั้งอยู่เหนือพื้นที่ทำงานและช่วยให้คุณสามารถดำเนินการขั้นพื้นฐานได้ หากต้องการเปลี่ยนสีข้อความคุณต้องเลือกด้วยเคอร์เซอร์ของเมาส์แล้วเลือกแท็บ: "หน้าแรก" นี่คือสิ่งที่มักจะเปิดตามค่าเริ่มต้นเมื่อคุณเริ่มทำงานกับเอกสาร เมนูของแท็บนี้แบ่งออกเป็นส่วนต่างๆ ส่วนที่เราสนใจเป็นอันดับสองจากซ้ายเรียกว่า "แบบอักษร" ที่นี่เราต้องใส่ใจกับสัญลักษณ์ของตัวอักษร "A" ซึ่งเรียกว่า: "สีข้อความ" ถัดจากสัญลักษณ์นี้จะมีลูกศรเล็กๆ ชี้ลง ซึ่งเป็นสิ่งที่เราควรคลิก ในเมนูที่เปิดขึ้น ให้เลือกเฉดสีที่เราชอบมากที่สุด โปรดทราบว่าหากคุณไม่ได้เลือกข้อความโดยใช้เคอร์เซอร์ของเมาส์ แต่ทำตามขั้นตอนอื่นทั้งหมดแล้วทุกอย่าง ตัวอักษรต่อมาจะเป็นสีที่คุณเลือก

การใช้แถบเครื่องมือขนาดเล็ก

วิธีนี้ถือว่าเร็วและสะดวกที่สุดสำหรับผู้ใช้มือใหม่ โปรแกรมเวิร์ด- หากต้องการเปิดแถบเครื่องมือขนาดเล็ก ให้คลิกขวาที่ พื้นที่ทำงานเอกสาร. ในเมนูบริบทที่ปรากฏขึ้น คุณสามารถไปได้สองวิธี:

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

PNG" alt="2015-12-05 01-37-21 ภาพหน้าจอ" width="458" height="111" srcset="" data-srcset="http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-37-21-Скриншот-экрана..png 300w" sizes="(max-width: 458px) 100vw, 458px"> !}
2) ในอันที่ใหม่กว่า เวอร์ชันของ Wordในเมนูบริบทเดียวกันซึ่งเรียกโดยการคลิกขวาที่เมาส์จะมีสัญลักษณ์ "A" ที่คุ้นเคยอยู่แล้วซึ่งรับผิดชอบสีของข้อความ
การดำเนินการเหล่านี้สามารถใช้ได้ทั้งกับส่วนของเอกสารที่เลือกและกับข้อความในอนาคต หากคุณต้องการเปลี่ยนข้อความทั้งหมด คุณควรใช้ชุดค่าผสม ปุ่ม Ctrl+ A ซึ่งจะเลือกทั้งเอกสาร

การเน้นข้อความด้วยสี

Data-lazy-type = "รูปภาพ" data-src = "http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-39-15-Screenshot-screen.png" alt="2015-12-05 01-39-15 ภาพหน้าจอ" width="206" height="191"> !} ฉันคิดว่ามันคุ้มค่าที่จะพูดถึงฟังก์ชันนี้ใน Word ซึ่งจำเป็นเพื่อที่จะเน้นให้มากที่สุด ข้อมูลที่มีความหมายในเอกสาร การดำเนินการนั้นง่ายมาก แต่จะช่วยให้เราได้ผลลัพธ์ที่สวยงาม มันจะดูราวกับว่าเราหยิบปากกาเน้นข้อความขึ้นมา ก่อนอื่นเราต้องเลือกพื้นที่ของเอกสารด้วยเมาส์ที่เราต้องการใช้การกระทำนี้ จากนั้นคุณจะต้องดำเนินการหลายอย่างในแท็บ "หน้าแรก" เมื่อพบบล็อก "แบบอักษร" แล้ว เราจะมองหาปุ่มที่เรียกว่า "สีเน้นข้อความ" ซึ่งอยู่ทางด้านซ้ายของปุ่ม "สีข้อความ" ที่คุ้นเคย ตามค่าเริ่มต้น ข้อความจะถูกเน้นด้วยสีเหลือง แต่สามารถแก้ไขได้โดยคลิกที่ลูกศรชี้ลงถัดจากปุ่มไฮไลต์ บางครั้งจำเป็นต้องลบส่วนที่เลือกออก โดยเลือกรายการ "ไม่มีสี" ในแท็บการเลือกสี

การใช้การเติม

Data-lazy-type = "รูปภาพ" data-src = "http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-40-48-Screenshot-screen.png" alt="2015-12-05 01-40-48 ภาพหน้าจอ" width="238" height="253"> !} การดำเนินการนี้จะเติมพื้นหลังของเอกสารด้วยสีที่สนใจ ข้อแตกต่างที่สำคัญระหว่างการเติมและส่วนที่เลือกก็คือ ทั้งสองอย่างจะถูกใส่สี ระยะห่างระหว่างบรรทัด- ควรทำสิ่งนี้หากคุณต้องการให้ข้อมูลโดดเด่น ในการกรอกข้อมูลคุณจะต้องไปที่แท็บ "หน้าแรก" และค้นหาปุ่มที่ดูเหมือนกระป๋องสีซึ่งอยู่ในบล็อก "ย่อหน้า" หลังจากคลิก ระบบจะเติมข้อมูลให้กับย่อหน้าสุดท้ายของเอกสาร หากจำเป็นต้องใช้การเติมกับทั้งเอกสาร คุณควรใช้คีย์ผสม Ctrl+A ที่คุ้นเคยอยู่แล้ว ซึ่งจะช่วยให้คุณสามารถเลือกทั้งเอกสารได้ หากต้องการลบการเติมออก เช่นเดียวกับในกรณีของการเลือก คุณต้องเลือกตัวเลือก "ไม่มีสี" ฉันอยากจะทราบว่าคุณจะได้รับผลลัพธ์ที่น่าสนใจเมื่อคุณรวมเครื่องมือทั้งหมดเข้ากับการเปลี่ยนสีข้อความ

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

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

ดังนั้น. ปัญหาใหญ่ที่สุดคือการไม่เปลี่ยนคุณสมบัติเอง และคำจำกัดความขององค์ประกอบหรือที่เรียกว่าตัวเลือกนั้นอยู่ในไฟล์ style.css ต้องเปลี่ยนคุณสมบัติเพื่อให้ลักษณะที่ปรากฏบนเพจเปลี่ยนแปลง ด้วยความสามารถปัจจุบันของเบราว์เซอร์ เราจึงสามารถกำหนดตัวเลือกที่ต้องการได้อย่างง่ายดาย

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

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

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

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

ใน ในกรณีนี้องค์ประกอบที่ไฮไลต์คือชื่อบทความ นั่นคือมันถูกห่อหุ้มด้วยแท็ก h1...h6 และดูเหมือนว่านี้:

ชื่อเรื่องของบทความ

ตอนนี้เพิ่มเติมเล็กน้อยเกี่ยวกับวิธีใช้คุณสมบัติเบราว์เซอร์นี้ ในคอลัมน์ด้านซ้าย เราสามารถเลือกองค์ประกอบใดๆ ของหน้าเว็บได้โดยการวางเมาส์เหนือโค้ด html ในกรณีนี้ องค์ประกอบจะถูกไฮไลต์เพื่อให้ชัดเจนยิ่งขึ้นว่าองค์ประกอบใดอยู่ในองค์ประกอบใด ในขณะนี้เราเลือกแล้ว และทางด้านขวาคือสไตล์ทั้งหมดที่เกี่ยวข้อง วัตถุนี้- ควรพิจารณาว่าองค์ประกอบสามารถได้รับผลกระทบไม่เฉพาะจากสไตล์ที่เกี่ยวข้องโดยตรงกับองค์ประกอบนั้นเท่านั้น แต่ยังรวมถึงสไตล์สากลที่ใช้กับองค์ประกอบที่คล้ายกันทั้งหมดบนเพจด้วย

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

H1( /* รูปแบบส่วนหัว */ )

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

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

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

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

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

สำหรับส่วนหัวใดส่วนหัวหนึ่ง โค้ดใน style.css จะมีลักษณะดังนี้:

H1( สี: RGB(216, 48, 48); )

และหากเป็นส่วนหัวทั้งหมดจะเป็นดังนี้:

H1, h2, h3, h4, h5, h6( สี: rgb(216, 48, 48); )

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

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

หลังจากนี้หน้าต่างที่มีรหัสไซต์จะปรากฏที่ด้านล่าง และองค์ประกอบที่เลือกจะถูกเน้นในโค้ดด้วย และบนหน้าเว็บนั้นเบราว์เซอร์จะวนองค์ประกอบที่ต้องการและระบุตัวเลือกซึ่งค่อนข้างสะดวก

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

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

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

หลังจากกำหนดรหัสสีแล้วเปลี่ยนใหม่ เราจะเห็นการเปลี่ยนแปลงในหน้าเว็บไซต์ด้วย และถ้าเราพอใจกับผลลัพธ์ เราก็เพียงคัดลอกสีแบบอักษร ป้อนตัวเลือกที่ต้องการ และวางโค้ดสีลงไป หลังจากนั้นเราจะบันทึกและตรวจสอบผลลัพธ์

เพื่อเปลี่ยนสีตัวอักษร องค์ประกอบ HTMLโดยใช้ เบราว์เซอร์โอเปร่า- คุณต้องเปิดหน้าด้วยองค์ประกอบที่คุณต้องการเปลี่ยนรูปลักษณ์ เลื่อนเคอร์เซอร์ไปเหนือมัน คลิกขวา และเลือกรายการ "ตรวจสอบองค์ประกอบ" ในเมนูแบบเลื่อนลง

หลังจากนั้นหน้าต่างเพิ่มเติมจะปรากฏขึ้นด้านล่างโดยแบ่งออกเป็นสองส่วน เช่นเดียวกับกรณีของ Google Chrome คอลัมน์ซ้ายด้วยโค้ด html ของเพจ และคอลัมน์ด้านขวาพร้อมสไตล์ CSS เมื่อคุณเลือกองค์ประกอบใดองค์ประกอบหนึ่ง องค์ประกอบนั้นจะถูกไฮไลต์ทั้งด้านล่างในโค้ดของหน้าและบนตัวหน้าเอง

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

หลังจากกำหนดสีแล้ว เปิดไฟล์ style.css และเพิ่มหรือเปลี่ยนสไตล์ที่ต้องการ บันทึกและตรวจสอบผลลัพธ์

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

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

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