Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS
CSS
  1. ตำแหน่งสัมพัทธ์ใน CSS

    ด้วยการวางตำแหน่งสัมพัทธ์ องค์ประกอบจะอยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งปกติ สำหรับสิ่งนี้ ให้ใช้ ตำแหน่ง:สัมพันธ์ ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> div.demo {    position: relative;    color: white;    backgro

  2. การเยื้องข้อความโดยใช้ CSS

    สำหรับการเยื้องข้อความ ให้ใช้คุณสมบัติ text-indent ใน CSS นี่สำหรับการเยื้องของบรรทัดแรกในย่อหน้า ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> div {    text-indent: 30px; } </style> </head> <body> <h1>Demo Heading</

  3. การตั้งค่าสีพื้นหลังโดยใช้ CSS

    ในการตั้งค่าสีพื้นหลังโดยใช้ CSS ให้ใช้คุณสมบัติสีพื้นหลัง ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline underline;    background-color: red; } </style> </head> <body> <h1>

  4. ทำซ้ำพื้นหลังใน CSS

    การทำซ้ำพื้นหลังใน CSS ใช้เพื่อกำหนดวิธีการทำซ้ำรูปภาพพื้นหลังบนหน้าเว็บ สำหรับสิ่งนี้ ให้ใช้คุณสมบัติ background-repeat ต่อไปนี้สามารถเป็นค่าคุณสมบัติ - background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit; ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head&

  5. การตั้งค่าตำแหน่งพื้นหลังโดยใช้ CSS

    ตำแหน่งพื้นหลังคือการกำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง สำหรับสิ่งนี้ ให้ใช้คุณสมบัติตำแหน่งพื้นหลัง ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png"); &n

  6. การตั้งค่ากฎของคอลัมน์ใน CSS3

    การตั้งค่ากฎของคอลัมน์ ใช้คุณสมบัติกฎคอลัมน์จดชวเลข ซึ่งช่วยให้คุณตั้งค่าคุณสมบัติต่อไปนี้ - column-rule-width: set the width of the rule between columns column-rule-style: set the style of the rule between columns column-rule-color: set the rule of the rule between columns ค่าของกฎคอลัมน์สามารถกำห

  7. ฟังก์ชัน CSS translate()

    ฟังก์ชัน translate() ใน CSS ใช้เพื่อเปลี่ยนตำแหน่งองค์ประกอบในแนวนอนและแนวตั้ง ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} .translate_img { &nb

  8. การวางตำแหน่งที่แน่นอนใน CSS

    ด้วยการวางตำแหน่งแบบสัมบูรณ์ องค์ประกอบจะอยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งบรรพบุรุษที่ใกล้ที่สุด ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> div.demo1 {    position: relative;    color: white;    background-color: orange

  9. การตั้งค่าประเภทสไตล์รายการโดยใช้ CSS

    ในการตั้งค่าประเภทสไตล์รายการใน CSS ให้ใช้คุณสมบัติ list-style-type ใน CSS ตัวอย่าง เรามาดูตัวอย่างกันว่าเราตั้งค่าประเภทรายการสำหรับรายการที่ไม่เรียงลำดับ - <!DOCTYPE html> <html> <head> <style> ul {    list-style-type: square; } </style> </head> <b

  10. ทำความเข้าใจ CSS Absolute และ Relative Units

    หน่วย CSS แอบโซลูท หน่วยความยาวสัมบูรณ์ได้รับการแก้ไขโดยสัมพันธ์กัน หน่วยเหล่านี้ใช้เมื่อทราบรูปแบบเอาต์พุตแล้ว ต่อไปนี้คือหน่วยความยาวสัมบูรณ์บางส่วน - Sr.No หน่วย &คำอธิบาย 1 ซม. เซนติเมตร 2 มม มิลลิเมตร 3 ใน นิ้ว (1in =96px =2.54cm) 4 px * พิกเซล (1px =1/96th of 1in) 5 pt คะแน

  11. การเปลี่ยนตำแหน่งของ List Markers โดยใช้ CSS

    คุณสมบัติ list-style-position ใช้เพื่อกำหนดตำแหน่งของตัวทำเครื่องหมายรายการ ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-position: outside; } ul.demo2 {    list-style-position: inside; } </style> </

  12. การใช้รูปภาพเป็นรายการเครื่องหมายใน CSS

    หากต้องการใช้รูปภาพเป็นเครื่องหมายรายการ ให้ใช้คุณสมบัติ list-style-image ใน CSS ตัวอย่าง เรามาดูตัวอย่างการใช้ภาพเป็น List Markers - <!DOCTYPE html> <html> <head> <style> ul.demo1 {    list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'

  13. การตั้งค่าความสูงของบรรทัดโดยใช้ CSS

    หากต้องการกำหนดความสูงของเส้น ให้ใช้คุณสมบัติความสูงของเส้น ต่อไปนี้เป็นค่าคุณสมบัติ - line-height: normal|number|length|initial|inherit; ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> div {    line-height: 1.9; } </style> </head> &

  14. การลบการขีดเส้นใต้เริ่มต้นของลิงก์โดยใช้ CSS

    หากต้องการลบลิงก์เริ่มต้นที่ขีดเส้นใต้โดยใช้ CSS โค้ดจะเป็นดังนี้ - ตัวอย่าง <!DOCTYPE html> <html> <head> <style> a:link {    color: blue;    text-decoration: none; } a:visited {    color: blue;    text-decoration: none; } </style&g

  15. แต่งลิงค์ด้วย CSS

    ในการจัดรูปแบบลิงก์ด้วย CSS อันดับแรก เราควรทราบสถานะลิงก์ต่อไปนี้:ลิงก์ เข้าชมแล้ว โฮเวอร์ และใช้งานอยู่ ใช้คลาสหลอกขององค์ประกอบสมอเพื่อจัดรูปแบบลิงก์ - a:link for link a:visited forvisited link a:link for hover on link a:active for active link ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html>

  16. การวางตำแหน่งคงที่ใน CSS

    ด้วยการวางตำแหน่งคงที่ องค์ประกอบจะไม่ได้รับผลกระทบจากคุณสมบัติด้านบน ด้านล่าง ด้านซ้าย และด้านขวา สำหรับสิ่งนี้ ให้ใช้ ตำแหน่ง:คงที่ ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> div.static {    position: static;    color: white; &

  17. ฟังก์ชัน CSS3rotator3d()

    ฟังก์ชันrotator3d() ใน CSS ใช้เพื่อหมุนองค์ประกอบในพื้นที่ 3 มิติ ตั้งค่าจำนวนและมุมของการหมุนเป็นพารามิเตอร์ของrotator3d() ตัวอย่าง เรามาดูตัวอย่างกัน − <!DOCTYPE html> <html> <head> <style> .demo {    transform: rotate3d(1, 1, 1, 45deg); } .skew_img {   &nbs

  18. การตั้งค่าขนาดตัวอักษรด้วยคำสำคัญใน CSS

    ในการตั้งค่าขนาดฟอนต์ด้วยคุณสมบัติขนาดฟอนต์ คุณสามารถกำหนดคำสำคัญได้เช่นกัน คำหลักเหล่านี้แบ่งออกเป็นคำหลักขนาดสัมบูรณ์หรือขนาดสัมพัทธ์ - คำหลักขนาดสัมพัทธ์ รวมคีย์เวิร์ดต่อไปนี้:ใหญ่ขึ้น เล็กลง คำหลักขนาดสัมบูรณ์ รวมคำหลักต่อไปนี้:xx-small, x-small, เล็ก, กลาง, ใหญ่, x-large, xx-large, xxx-large

  19. การใช้เอฟเฟกต์ซีเปียกับรูปภาพโดยใช้ CSS3

    หากต้องการใช้เอฟเฟกต์ซีเปียกับรูปภาพโดยใช้ CSS3 ให้ใช้ค่าซีเปียสำหรับคุณสมบัติตัวกรอง ตัวอย่าง รหัสมีดังต่อไปนี้ − <!DOCTYPE html> <html> <head> <style> img.demo {    filter: sepia(100%); } </style> </head> <body> <h1>Learn Spring Framework&

  20. การปรับความอิ่มตัวของภาพโดยใช้ CSS3

    หากต้องการทำให้รูปภาพอิ่มตัวด้วย CSS3 ให้ใช้ค่าคุณสมบัติอิ่มตัวสำหรับคุณสมบัติตัวกรอง ตัวอย่าง เรามาดูตัวอย่างการปรับความอิ่มตัวของภาพกัน − <!DOCTYPE html> <html> <head> <style> img.demo {    filter: saturation(500%); } </style> </head> <body> <

Total 1566 -คอมพิวเตอร์  FirstPage PreviousPage NextPage LastPage CurrentPage:25/79  20-คอมพิวเตอร์/Page Goto:1 19 20 21 22 23 24 25 26 27 28 29 30 31