หากต้องการเปลี่ยนสีข้อความ คุณต้องทราบชื่อสีหรือรหัสเลขฐานสิบหก รหัสประกอบด้วยสัญลักษณ์ปอนด์ # และตัวเลขที่แสดงถึงความเข้มขององค์ประกอบสีแดง เขียว และน้ำเงิน สามารถเรียกชื่อสีมาตรฐานได้เพียง 16 สีเท่านั้น

ชื่อสี รหัส aqua ##00FFFF สีดำ ##000000 สีฟ้า ##0000FF fuchsia ##FF00FF สีเทา ##808080 สีเขียว ##008000 มะนาว ##00FF00 maroon ##800000 สีกรมท่า ##000080 สีมะกอก ##808000 สีม่วง ##800080 สีแดง # #FF0000สีเงิน ##C0C0C0นกเป็ดน้ำ ##008080สีขาว ##FFFFFFสีเหลือง ##FFFF00

คำแนะนำ

วางส่วนหัวในระดับต่างๆ ระหว่างแท็กเปิดและแท็กปิดที่เหมาะสม หากยังไม่ได้ดำเนินการในซอร์สโค้ดของหน้าเว็บ ตัวอย่างเช่น ส่วนหัวที่สำคัญที่สุด (ระดับแรก) ควรอยู่ระหว่างแท็ก

และ

หัวเรื่อง

และ

และ

วางในส่วนหัวของซอร์สโค้ด (ระหว่างแท็ก และ) คำแนะนำในการบอกเบราว์เซอร์ของผู้เข้าชมว่าสถานที่นี้มีคำอธิบายสไตล์ใน CSS:

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

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

วิดีโอในหัวข้อ

คุณจะต้อง

• คอมพิวเตอร์ อินเทอร์เน็ต การเข้าถึงเนื้อหาไซต์

คำแนะนำ

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

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

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

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

ป้อนชื่อใหม่ของคุณในช่องนี้ อย่าลืมคลิกปุ่มบันทึกซึ่งมีชื่อเรียกแตกต่างกันในเว็บเอ็นจิ้นต่างๆ - "บันทึก", "เผยแพร่", "อัปเดต"

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

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

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

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

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

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

หลังจากนี้หน้าต่างเพิ่มเติมจะปรากฏขึ้นที่ด้านล่างของหน้าต่างเบราว์เซอร์ซึ่งจะแสดงโค้ด 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); )

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

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

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

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

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

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

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

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

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

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

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

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

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

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