Search: css

การจัดตำแหน่งด้วย position ใน CSS

การจัดตำแหน่งด้วย position ใน CSS จะช่วยให้เราสามารถควบคุมตำแหน่งของ HTML element ได้อย่างมีประสิทธิภาพ โดย CSS มี 4 ประเภทของ position ได้แก่ static, relative, absolute, และ fixed ดังนี้ (more…)

Float ให้กล่องลอยอยู่เหนือ element ใน css

Float ใน CSS คือการกำหนดคุณสมบัติขององค์ประกอบในหน้าเว็บไซต์ที่ช่วยให้เราสามารถจัดหน้าเว็บไซต์ให้เหมาะสมและดูสวยงามได้ตามที่ต้องการได้มากขึ้น โดยส่วนมากจะใช้ Float เพื่อจัดเรียงเนื้อหาหรือองค์ประกอบภายใน element ให้ตัวอักษรหรือเนื้อหาอยู่บนซ้ายหรือขวาของพื้นที่ที่กำหนดไว้ [caption id="attachment_22306" align="alignnone" width="1024"] Float ให้กล่องลอยอยู่เหนือ element ใน css[/caption] ตัวอย่

กำหนดภาพพื้นหลัง (background-image) ใน CSS

ใน CSS สามารถกำหนดภาพพื้นหลังขององค์ประกอบได้ด้วยคุณสมบัติ background-image โดยใช้รูปภาพเป็นค่าของคุณสมบัตินี้ ตัวอย่างการกำหนดภาพพื้นหลังด้วย background-image ดังนี้ selector { background-image: url("image.jpg"); } โดย selector คือเลือกตัวเลือกองค์ประกอบที่ต้องการให้มีภาพพื้นหลัง และ url("image.jpg") คือที่อยู่ของไฟล์ภาพที่ต้องการใช้เป็นพื้นหลัง ในตัวอย่างนี้เป็นไฟล์ชื่อ image.jpg ที่อยู่

Box model ใน CSS

Box model ใน CSS เป็นแนวคิดที่ใช้ในการอธิบายวิธีการคำนวณขนาดของ element ในหน้าเว็บไซต์ โดยแบ่ง element ออกเป็นส่วนย่อย 4 ส่วน คือ: Content: ส่วนที่เป็นเนื้อหาภายใน element Padding: ส่วนของระยะห่างระหว่าง Content กับ Border Border: เส้นขอบของ element Margin: ระยะห่างระหว่าง Border ของ element กับ element อื่นๆ บนหน้าเว็บไซต์ โดย box model จะคำนวณขนาดของ element โดยใช้ขนาดของ content เป็นหลัก

การกำหนดลักษณะข้อความ (text-decoration) ใน CSS

การกำหนดลักษณะข้อความ (text-decoration) ใน CSS ใน CSS มี property ชื่อว่า text-decoration ซึ่งใช้สำหรับกำหนดลักษณะข้อความต่างๆ เช่น การเพิ่มเส้นขีดใต้, เส้นขีดทับ, เส้นขีดข้าง, และการลบเส้นขีด เป็นต้น โดยมีค่าที่สามารถกำหนดได้ดังนี้ underline - เพิ่มเส้นขีดใต้ข้อความ overline - เพิ่มเส้นขีดทับข้อความ line-through - เพิ่มเส้นขีดข้างข้อความ none - ไม่มีเส้นขีด underline overline - เพิ่มเส้นข

การกำหนดสีใน CSS

การกำหนดสีใน css การกำหนดสีใน CSS คือ การกำหนดค่าสีให้กับแต่ละองค์ประกอบในเว็บไซต์ ซึ่งสามารถทำได้หลายวิธี เช่น ใช้ชื่อสี, รหัสสี HEX, รหัสสี RGB, รหัสสี RGBA, สี HSL, และสี HSLA เพื่อกำหนดสีของข้อความ พื้นหลัง ขอบเขต และองค์ประกอบอื่นๆ ในเว็บไซต์ เพื่อให้มีการแสดงผลตามที่ต้องการ โดยสามารถกำหนดความโปร่งใส ความเข้ม ความสว่าง และอื่นๆ ได้ตามที่ต้องการ การกำหนดสีใน CSS เป็นส่วนสำคัญที่ช่วยให้เว็บไซต

การแอด CSS Font จาก Google มาใช้

Google Font เป็นเว็บไซต์ที่ให้บริการฟอนต์ฟรีสำหรับใช้ในการออกแบบเว็บไซต์ ซึ่งเราสามารถนำมาใช้กับ CSS ได้โดยตรง โดยทำการลิงก์ไปยังไฟล์ฟอนต์ที่เก็บอยู่บน Google Font และกำหนด font-family ให้เป็นชื่อฟอนต์ที่ต้องการใช้ ตัวอย่างการใช้งาน Google Font ใน CSS ดังนี้ 1. ให้เพิ่มลิงก์ไปยังไฟล์ CSS ของ Google Font ในส่วนหัวของเอกสาร HTML ดังนี้ <head> <link rel="stylesheet" href="https://font

การกำหนดฟอนต์ (font) ใน CSS

การกำหนดฟอนต์ (font) ใน CSS ทำได้โดยใช้คุณสมบัติ font-family ซึ่งจะกำหนดชนิดของฟอนต์ที่ต้องการใช้ในเว็บไซต์ โดยฟอนต์ที่ใช้จะต้องอยู่ในเครื่องผู้ใช้ หรือถ้าไม่มีฟอนต์นั้นในเครื่องผู้ใช้ CSS จะพยายามค้นหาฟอนต์ตามลำดับที่กำหนด จนกว่าจะพบฟอนต์ที่เหมาะสม เมื่อพบฟอนต์ที่เหมาะสมแล้ว จะนำมาแสดงผลในหน้าเว็บไซต์ ตัวอย่างการกำหนด font-family ด้วย CSS: body { font-family: Arial, Helvetica, sans-serif; }

การเขียน css แบบ external หรือ ลิงค์จากไฟล์ css ด้านนอก – บทที่ 3

การเขียน css แบบ external หรือ ลิงค์จากไฟล์ css ด้านนอก หมายถึงเราเขียน css ไฟล์ไว้ต่างหากเลย โดยเขียนไว้ชื่อ styles.css แล้วใช้ แทก <links> ไฟล์ css เข้ามาใช้ ทำให้สะดวกกว่าเพราะจะแก้ css เราก็ไปแก้ที่ไฟล์ css ที่เดียว ไม่ต้องไปแก้ทีละหน้าที่ไฟล์ html แต่ละหน้า [caption id="attachment_22035" align="aligncenter" width="779"] การเขียน css แบบ external หรือ ลิงค์จากไฟล์ css ด้านนอก[/caption

หน่วยขนาดของ CSS Absolute Lengths (แบบค่าคงที่ไม่เปลี่ยนแปลง)

หน่วยขนาดของ CSS Absolute Lengths (แบบค่าคงที่ไม่เปลี่ยนแปลง) หน่วย css ประเภทนี้จะมีความยาวที่มีขนาดตามที่กำหนด ไม่มีการเปลี่ยนแปลง ซึ่งหน่วยที่พบบ่อยที่สุดคือ px เหมาะสำหรับการใช้ใน element ที่ต้องการให้มีขนาดตามที่กำหนด แต่หน่วยแบบนี้มักมีปัญหากับการ responsive เพราะปัจจุบันหน้าจอของ device มีหลากหลายขนาด ถ้าออกแบบมาไม่ดีอาจทำให้การแสดงผลมีปัญหาในหน้าจอบางขนาดได้ px, pixel หรือ หน่วยที่อ้างถึงจ

1
2
3