Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS
CSS
  1. การทำงานกับคุณสมบัติการแสดงผล CSS

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

  2. แสดง Inline-Block โดยใช้ CSS

    ชุดองค์ประกอบพร้อมการแสดงค่าคุณสมบัติบล็อกอินไลน์ใช้เพื่อแสดงองค์ประกอบเป็นคอนเทนเนอร์บล็อกระดับอินไลน์ ตัวอย่าง ให้เราดูตัวอย่างการใช้ค่าคุณสมบัติบล็อกอินไลน์ใน CSS - <!DOCTYPE html> <html> <head> <style> p {    background-color: orange;    color: white;

  3. การยุบขอบตารางโดยใช้ CSS

    หากต้องการยุบเส้นขอบตาราง ให้ใช้คุณสมบัติ border-collapse ใน CSS เรามาดูตัวอย่างการยุบขอบตารางกัน − ตัวอย่าง <!DOCTYPE html> <html> <head> <style> table {    border-collapse: collapse;    background-color: black;    color: white; } th, td {  

  4. ฟังก์ชัน CSS เอียง ()

    ฟังก์ชัน skew() ใช้เพื่อเอียงองค์ประกอบในตำแหน่ง 2 มิติ กำหนดจำนวนการเอียงที่จะใช้เป็นพารามิเตอร์ของฟังก์ชัน skew() ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .translate_img {    transform: translate(50px, 10%); } .skew_img {    transform-origin: top l

  5. การตั้งค่าขนาดตัวอักษรด้วยพิกเซลใน CSS

    ในการตั้งค่าคุณสมบัติขนาดฟอนต์ใน CSS คุณสามารถใช้พิกเซล (px) ได้เช่นกัน สิ่งนี้มีประโยชน์เมื่อคุณต้องการความแม่นยำของพิกเซลสำหรับข้อความ ตัวอย่าง เรามาดูตัวอย่างการกำหนดขนาดตัวอักษรด้วยพิกเซล − <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 5

  6. การควบคุมเค้าโครงตารางโดยใช้ CSS

    ในการควบคุมเค้าโครงตาราง ให้ใช้คุณสมบัติ table-layout คุณสามารถตั้งค่าเลย์เอาต์เป็น − table-layout: auto|fixed|initial|inherit; ตัวอย่าง ให้เราดูตัวอย่างเพื่อควบคุมการจัดวางตารางด้วยค่าอัตโนมัติ - <!DOCTYPE html> <html> <head> <style> table {    border-collapse: co

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

    ฟังก์ชัน rgb() ใช้สำหรับตั้งค่าสี RGB พารามิเตอร์สำหรับฟังก์ชันกำหนดความเข้มของสีเป็นเปอร์เซ็นต์หรือค่าตั้งแต่ 0 ถึง 255 ตัวอย่าง มาดูตัวอย่างการใช้งาน rgb() ใน CSS กันก่อน − <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-just

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

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

  9. การเพิ่ม Drop Shadow ให้กับรูปภาพโดยใช้ CSS3

    ในการเพิ่มเงาให้กับรูปภาพใน CSS3 ให้ใช้ค่า drop-shadow สำหรับคุณสมบัติตัวกรอง มีค่าดังต่อไปนี้ - h-เงา – เพื่อระบุค่าพิกเซลสำหรับเงาแนวนอน v-shadow – เพื่อระบุค่าพิกเซลสำหรับเงาแนวตั้ง ค่าลบจะทำให้เงาอยู่เหนือภาพ เบลอ – เพื่อเพิ่มเอฟเฟกต์เบลอให้กับเงา กระจาย - ค่าบวกทำให้เงาขยายตัวและค่าลบหดตัว

  10. text-justify คุณสมบัติใน CSS

    คุณสมบัติ text-justify ใน CSS ใช้เพื่อตั้งค่าวิธีการจัดข้อความเมื่อตั้งค่าคุณสมบัติ text-align เป็นค่า justify ต่อไปนี้เป็นค่าคุณสมบัติ - text-justify: auto|inter-word|inter-character|none|initial|inherit; ตัวอย่าง ให้เรามาดูตัวอย่างการใช้คุณสมบัติ text-justify ใน CSS − <!DOCTYPE html> <ht

  11. คุณสมบัติเลื่อนพฤติกรรม CSS

    คุณสมบัติ scroll-behavior ใช้เพื่อกำหนดลักษณะการทำงานของ scroll เราสามารถตั้งค่าคุณสมบัติที่แตกต่างกันดังต่อไปนี้สำหรับคุณสมบัติการเลื่อน - scroll-behavior: auto|smooth|initial|inherit; ตัวอย่าง ให้เรามาดูตัวอย่างการใช้งานคุณสมบัติพฤติกรรมการเลื่อน - <!DOCTYPE html> <html> <head>

  12. ฟังก์ชัน CSS3 scale3d()

    ฟังก์ชัน scale3d() ใช้เพื่อปรับขนาดองค์ประกอบในพื้นที่ 3 มิติ องค์ประกอบถูกปรับขนาดตามตัวเลขที่กำหนดเป็นพารามิเตอร์ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .scale3d_img {    transform: scale3d(0.5, 1, 1.7); } </style> </head> <body> <h1&g

  13. การทำความเข้าใจวิธีการกำหนดตำแหน่ง CSS

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

  14. การแปลงข้อความโดยใช้ CSS

    สำหรับการแปลงข้อความใน CSS ให้ใช้คุณสมบัติการแปลงข้อความด้วยค่าต่อไปนี้ - text-transform: none|capitalize|uppercase|lowercase|initial|inherit; ตัวอย่าง <!DOCTYPE html> <html> <head> <style> div {    line-height: 1.9;    text-transform: uppercase; } </st

  15. ฟังก์ชัน CSS3 matrix3d()

    ฟังก์ชัน matrix3d() ใน CSS ใช้เพื่อกำหนดเมทริกซ์การแปลง 3 มิติที่เป็นเนื้อเดียวกัน 4x4 ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo_img {    transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1); } </style> </head> <body> <h1>Learn&l

  16. CSS rgba() ฟังก์ชัน

    rgba() กำหนดค่าสี RGBA สำหรับสีแดง สีเขียว สีน้ำเงิน และอัลฟ่า อัลฟ่าคือความทึบของสี เช่น ตัวเลขระหว่าง 0.0 ถึง 1.0 ที่นี่ 1.0 จะเป็นแบบเต็มทึบ ตัวอย่าง ให้เรามาดูตัวอย่างการใช้งานฟังก์ชัน rgba() - <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100

  17. การเว้นวรรคตัวอักษรโดยใช้ CSS

    หากต้องการกำหนดช่องว่างระหว่างตัวอักษร เช่น อักขระ ให้ใช้คุณสมบัติการเว้นวรรคตัวอักษร ต่อไปนี้เป็นค่าคุณสมบัติ - letter-spacing: normal|length|initial|inherit; ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p.demo1 {    letter-spacing: 1px; } p.demo2 {    

  18. ทำความเข้าใจกับฟังก์ชันตัวกรอง CSS3

    ฟังก์ชันตัวกรองใช้เพื่อตั้งค่าเอฟเฟ็กต์ภาพบนองค์ประกอบต่างๆ เช่น คอนทราสต์ ความสว่าง การหมุนสี ความทึบ บนภาพ ฯลฯ ตอนนี้ให้เราดูฟังก์ชันตัวกรองบางอย่าง - คอนทราสต์ ในการตั้งค่าคอนทราสต์ของรูปภาพใน CSS ให้ใช้ฟิลเตอร์คอนทราสต์ (%) โปรดจำไว้ว่า ค่า 0 ทำให้รูปภาพเป็นสีดำ 100% สำหรับรูปภาพต้นฉบับและค่าเร

  19. การตั้งค่าสีข้อความโดยใช้ CSS

    หากต้องการกำหนดสีข้อความ ให้ใช้คุณสมบัติสีใน CSS คุณสามารถตั้งค่าสีด้วยชื่อสี ค่าฐานสิบหก ค่า RGB หรือใช้ค่า HSL ตัวอย่าง <!DOCTYPE html> <html> <head> <style> span {    background-color: orange;    color: white; } p.demo {    display: none; } sp

  20. คุณสมบัติโหมดการเขียนใน CSS

    คุณสมบัติโหมดการเขียนใช้เพื่อกำหนดว่าจะวางบรรทัดข้อความในแนวนอนหรือแนวตั้ง ค่าคุณสมบัติคือ − writing-mode: horizontal-tb|vertical-rl|vertical-lr; ตัวอย่าง <!DOCTYPE html> <html> <head> <style> p {    writing-mode: vertical-rl; } </style> </head> <body

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