ค้นหาส่วนหัว "html"ควรอยู่ที่ด้านบนของเอกสาร

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

พื้นหลัง: การไล่ระดับสีเชิงเส้น (ทิศทาง/มุม, color1, color2, color3 และอื่นๆ);

สร้างการไล่ระดับสีในแนวตั้งหากคุณไม่ระบุทิศทาง การไล่ระดับสีจะไล่จากบนลงล่าง หากต้องการสร้างการไล่ระดับสี ให้ป้อนโค้ดต่อไปนี้ระหว่างแท็ก :

html (ความสูงขั้นต่ำ: 100%;) เนื้อความ (พื้นหลัง: -webkit- การไล่ระดับสีเชิงเส้น (#93B874, #C9DCB9); พื้นหลัง: -o- การไล่ระดับสีเชิงเส้น (#93B874, #C9DCB9); พื้นหลัง: -moz- เชิงเส้น -การไล่ระดับสี(#93B874, #C9DCB9); พื้นหลัง: การไล่ระดับสีเชิงเส้น(#93B874, #C9DCB9);

• เบราว์เซอร์ต่างๆ จะใช้ฟังก์ชันการไล่ระดับสีต่างกัน ดังนั้นคุณจึงต้องเพิ่มโค้ดหลายเวอร์ชัน

1. สร้างการไล่ระดับสีแบบมีทิศทางหากคุณไม่ต้องการให้การไล่ระดับสีทำงานในแนวตั้ง ให้ระบุทิศทางที่สีจะจางลง เมื่อต้องการทำเช่นนี้ ให้ป้อนรหัสต่อไปนี้ระหว่างแท็ก :

   html (ความสูงขั้นต่ำ: 100%;) เนื้อความ (พื้นหลัง: -webkit- การไล่ระดับสีเชิงเส้น (ซ้าย, #93B874, #C9DCB9); พื้นหลัง: -o- การไล่ระดับสีเชิงเส้น (ขวา, #93B874, #C9DCB9); พื้นหลัง: -moz- การไล่ระดับสีเชิงเส้น (ขวา, #93B874, #C9DCB9); พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, #93B874, #C9DCB9);

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

2. ใช้คุณสมบัติอื่นเพื่อปรับแต่งการไล่ระดับสีคุณสามารถทำอะไรได้มากกว่าที่คุณคิด

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

     พื้นหลัง : การไล่ระดับสีเชิงเส้น (#93B874 10%, #C9DCB9 70%, #000000 90%);

   • เพิ่มความโปร่งใสให้กับสี ในกรณีนี้ก็จะค่อยๆจางลง เพื่อให้ได้ผลจางลง ให้ใช้สีเดียวกัน หากต้องการตั้งค่าสี คุณต้องใช้ฟังก์ชัน rgba() ค่าสุดท้ายจะกำหนดความโปร่งใส: 0 คือสีทึบ และ 1 คือสีโปร่งใส

     พื้นหลัง : การไล่ระดับสีเชิงเส้น (ไปทางขวา , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));

ตรวจสอบรหัสโค้ดสำหรับสร้างการไล่ระดับสีเป็นพื้นหลังของหน้าเว็บจะมีลักษณะดังนี้:

< html > < head > < style >html (ความสูงขั้นต่ำ: 100%;) เนื้อความ (พื้นหลัง: -webkit- การไล่ระดับสีเชิงเส้น (ซ้าย, #93B874, #C9DCB9); พื้นหลัง: -o- การไล่ระดับสีเชิงเส้น (ขวา, #93B874, #C9DCB9); พื้นหลัง: -moz- การไล่ระดับสีเชิงเส้น (ขวา, #93B874, #C9DCB9); พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา, #93B874, #C9DCB9); < body >

งาน

เปลี่ยนสีของข้อความชื่อเรื่องและพื้นหลังด้านล่าง

สารละลาย

หากต้องการเปลี่ยนสีพื้นหลังด้านล่างข้อความ ให้ใช้คุณสมบัติสากลของพื้นหลัง ซึ่งควรเพิ่มลงในตัวเลือก h1 สีของชื่อเรื่องมีการเปลี่ยนแปลงโดยใช้คุณสมบัติสี ซึ่งถูกเพิ่มลงในตัวเลือกนี้ด้วย (ตัวอย่างที่ 1)

ตัวอย่างที่ 1: สีพื้นหลังใต้ส่วนหัว

HTML5 CSS 2.1 IE Cr Op Sa Fx

กฎแห่งโลกภายนอก

กฎของโลกภายนอกอนุมานโลกที่เข้าใจได้อย่างมีระเบียบวิธี แม้ว่าในทางการจะยอมรับสิ่งที่ตรงกันข้ามก็ตาม

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 1.

ข้าว. 1. สีพื้นหลังใต้ชื่อข้อความ

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

วิธีเปลี่ยนสีตัวอักษรใน html

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

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

ตัว( สี:แดง; )

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

รูปแบบการบันทึกสี

บางทีคุณอาจมีความรู้เกี่ยวกับการออกแบบเว็บไซต์บ้างไหม? ในกรณีนี้ คุณควรรู้ว่ามีโหมดสีที่แตกต่างกัน ตัวอย่างเช่น rgb, rgba, hsl, hex เป็นต้น แน่นอนว่าวิธีที่ง่ายที่สุดในการกำหนดโทนเสียงก็คือการเขียนคำหลัก เราทำสิ่งนี้ในตัวอย่างข้างต้น ค่าสีแดงทำให้ตัวอักษรเป็นสีแดง น้ำเงิน – น้ำเงิน น้ำตาล – น้ำตาล นี่เป็นเพียงชื่อดอกไม้ในภาษาอังกฤษ

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

p( color: #000; ) /* ข้อความในย่อหน้าจะเป็นสีดำ */ table( color: #fff; ) /* เนื้อหาในตารางจะเป็นสีขาว -

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

RGB เป็นอีกหนึ่งรูปแบบการบันทึกยอดนิยม ย่อมาจากสีแดง เขียว น้ำเงิน สีในรูปแบบนี้ได้รับการตั้งค่าดังนี้:

#footer( สี: rgb(234, 22, 56); )

องค์ประกอบที่มีส่วนท้ายของรหัสจะได้รับสีที่ระบุ ส่วนแบ่งของสีแดงจะเป็น 234, เขียว – 22, น้ำเงิน – 56 ค่าเหล่านี้สามารถเขียนได้ตั้งแต่ 0 ถึง 255 ดังนั้นเฉดสีของเราจะใกล้กับสีแดงมากขึ้น ใน Paint คุณสามารถเพิ่มสีให้กับจานสีของคุณได้โดยการเปลี่ยนความอิ่มตัวของสีหลักทั้งสามสี

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

Rgba - ข้อความโปร่งแสง!

ใช่ นี่เป็นโหมดการบันทึกใหม่ที่มีอยู่ในโปรแกรมแก้ไขกราฟิกมาเป็นเวลานาน แต่เพิ่งปรากฏในการออกแบบเว็บเมื่อไม่นานมานี้ มันเขียนแบบนี้:

ก( rgba(255, 12, 22, 0.5); )

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

ตั้งค่าสีผิดวิธี

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

วิธีกำหนดสีสำหรับส่วนที่ต้องการ

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

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

เพียงเท่านี้ ตอนนี้สิ่งที่เหลืออยู่ก็คือการเข้าถึงตัวเลือกใน css

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

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

คุณสามารถระบุสีได้อย่างไร?

สีใน HTML (และ CSS) สามารถระบุได้หลายวิธี ฉันจะแสดงสีที่ได้รับความนิยมและแพร่หลายที่สุด:

• ชื่อสี- HTML มีรายการจำนวนมาก และเพื่อระบุสีก็เพียงพอที่จะเขียนชื่อเป็นภาษาอังกฤษเช่นแดงเขียวน้ำเงิน
• รหัสสี HEX- สามารถรับสีใดๆ ก็ได้อย่างแน่นอนโดยการผสมสีพื้นฐานสามสีในสัดส่วนที่ต่างกัน - แดง เขียว และน้ำเงิน รหัส HEX คือค่าเลขฐานสิบหกสามคู่ที่รับผิดชอบจำนวนสีเหล่านี้ในแต่ละสี รหัสสีต้องนำหน้าด้วยเครื่องหมายแฮช (#) เช่น #FF8C00, #CC3300 เป็นต้น

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

เปลี่ยนสีข้อความได้อย่างไร?

หากต้องการเปลี่ยนสีข้อความในองค์ประกอบใดๆ ของหน้า HTML คุณต้องระบุแอตทริบิวต์ style ภายในแท็ก ไวยากรณ์ทั่วไปมีดังนี้:

<тег style= "สี:ชื่อสี" >... - การระบุสีข้อความตามชื่อ

<тег style= "color:#รหัส HEX">... - การระบุสีข้อความด้วยรหัส

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

ตัวอย่างการเปลี่ยนสีข้อความ

ข้อความหัวเรื่องสีแดง

ข้อความย่อหน้าสีน้ำเงิน

ตัวเอียงสีเขียว ข้อความสีแดง.

ผลลัพธ์ในเบราว์เซอร์

เปลี่ยนสีพื้นหลังได้อย่างไร?

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

<тег สไตล์= "พื้นหลัง:ชื่อสี">... - ระบุสีพื้นหลังตามชื่อ

<тег style= "พื้นหลัง:#รหัส HEX">... - ระบุสีพื้นหลังด้วยรหัส

ตัวอย่างการเปลี่ยนสีพื้นหลัง

ชื่อ.

ย่อหน้า

ข้อความตัวหนา ข้อความธรรมดา

ผลลัพธ์ในเบราว์เซอร์

ชื่อ.

ย่อหน้า

ข้อความตัวหนาข้อความธรรมดา

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

การบ้าน.

1. ตั้งชื่อบทความและหัวข้อทั้ง 2 หัวข้อ เขียนหนึ่งย่อหน้าในตอนต้นของบทความและแต่ละส่วน
2. ตั้งค่าทั้งหน้าเป็นขนาดฟอนต์ Courier 16px ชื่อบทความเป็น 22px และหัวข้อย่อยเป็น 19px
3. ให้ชื่อบทความมีสีข้อความ #0000CC และหัวข้อย่อยมีสีข้อความ #CC3366
4. ใช้สีพื้นหลัง #66CC33 เพื่อเน้นคำสองคำในย่อหน้าที่สอง และในย่อหน้าที่สามเป็นสีเดียวกันแต่มีคำที่ขีดเส้นใต้ไว้คำเดียว
5. อย่าลืมว่าคุณสามารถจัดกลุ่มค่าแอตทริบิวต์ของสไตล์ได้โดยใส่เครื่องหมายอัฒภาค (;) ไว้ระหว่างค่าเหล่านั้น