คุณสมบัติ background-repeat คุณสมบัติ background-repeat ใช้ควบคุมการซ้ำของภาพในพื้นหลัง คุณสามารถใช้ค่า no-repeat หากไม่ต้องการให้ภาพซ้ำ ภาพจะแสดงเพียงครั้งเดียว ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-repeat: <html> <head> <style> body

การใช้ background-image เพื่อกำหนดภาพพื้นหลังขององค์ประกอบ ให้ใช้คุณสมบัติ background-image ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-image: <html> <head> <style> body { background-image: url(/css/images/css.jpg); } </

คุณสมบัติ background-position คุณสมบัติ background-position ใช้ควบคุมตำแหน่งของภาพในพื้นหลัง ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-position ตัวอย่างนี้ตั้งตำแหน่งภาพพื้นหลังห่างจากด้านซ้าย 30 พิกเซล: <html> <head> <style> body {

คุณสมบัติ background-repeat เพื่อควบคุมการซ้ำของภาพในพื้นหลัง ให้ใช้คุณสมบัติ background-repeat คุณสามารถใช้ค่า no-repeat หากไม่ต้องการให้ภาพซ้ำ ในกรณีนี้ภาพจะแสดงเพียงครั้งเดียว ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-repeat: <html> <head> <styl

คุณสมบัติ background-position เพื่อควบคุมตำแหน่งของภาพในพื้นหลัง ให้ใช้คุณสมบัติ background-position ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-position ตัวอย่างนี้ตั้งตำแหน่งภาพพื้นหลังห่างจากด้านซ้าย 30 พิกเซล: <html> <head> <style> body

คุณสมบัติ background-image คุณสมบัติ background-image ใช้สำหรับกำหนดภาพพื้นหลังขององค์ประกอบ ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-image: <html> <head> <style> body { background-image: url(/latest/inter-process-communication.pn

คุณสมบัติ background-attachment เพื่อควบคุมการเลื่อนของภาพในพื้นหลัง ให้ใช้คุณสมบัติ background-attachment ตัวอย่าง ลองรันโค้ดต่อไปนี้เพื่อเรียนรู้การทำงานของคุณสมบัติ background-attachment: <!DOCTYPE html> <html> <head> <style> body { background-image: u

Embedded CSS: ใช้แอลิเมนต์ <style> ใน HTML คุณสามารถวางกฎ CSS ลงในเอกสาร HTML ได้โดยใช้แอลิเมนต์ <style> แท็กนี้จะถูกวางไว้ภายใน <head>...</head> กฎที่กำหนดจะมีผลกับองค์ประกอบทั้งหมดในเอกสาร ตัวอย่าง ตัวอย่างต่อไปนี้แสดงการใช้ Embedded CSS ด้วยแอลิเมนต์ <style>: <!D

Internal CSS: วางกฎสไตล์ภายในแท็ก <style> คุณสามารถวางกฎ CSS ลงในเอกสาร HTML ได้โดยใช้แอลิเมนต์ <style> แท็กนี้จะถูกวางไว้ภายในแท็ก <head>...</head> กฎที่กำหนดด้วยวิธีนี้จะถูกนำไปใช้กับองค์ประกอบทั้งหมดในเอกสาร ตัวอย่าง <!DOCTYPE html> <html> <head> &

การใช้ Inline CSS ด้วยแอตทริบิวต์ style คุณสามารถใช้ style attribute ขององค์ประกอบ HTML ใดๆ เพื่อกำหนดกฎสไตล์ได้ กฎเหล่านี้จะถูกนำไปใช้กับองค์ประกอบนั้นอย่างเดียว นี่คือไวยากรณ์ทั่วไป: <element style=...style rules...> ตัวอย่าง <html> <head> </head> <body> &l

@import ใช้ import external stylesheet คล้ายกับแอตทริบิวต์ <link>Syntax ของ @import rule:<head> @import URL; </head>ตัวอย่างการ import style sheet file เข้า HTML document:<head> @import new.css; </head>

แอตทริบิวต์ <link> ใช้รวม external style sheet file ในเอกสาร HTMLExternal style sheet คือไฟล์ข้อความแยกต่างหากมีนามสกุล .css กำหนด Style rules ทั้งหมดในไฟล์นี้ แล้วรวมไฟล์นี้ในเอกสาร HTML ใดๆ ด้วย <link>พิจารณา style sheet file ชื่อ new.css ที่มีกฎดังนี้:h1, h2, h3 { color: #36C; fon

กฎการลับทับ Style Sheet Rule ดังนี้:Inline stylesheet มีความสำคัญสูงสุด จะลับทับกฎใน <style>...</style> หรือ external style sheetกฎใน <style>...</style> จะลับทับกฎใน external style sheetกฎใน external style sheet มีความสำคัญต่ำสุด ใช้ فقطเมื่อกฎข้างต้นไม่適用

คุณอาจต้องเพิ่มความคิดเห็นในบล็อก stylesheet การทำอย่างนี้ง่ายมาก ให้ใส่ความคิดเห็นภายใน /*.....this is a comment in style sheet.....*/คุณสามารถใช้ /* ....*/ เพื่อ comment หลายบรรทัด คล้ายกับ C และ C++ตัวอย่างการเพิ่ม comment:<!DOCTYPE html> <html> <head> <style>

CSS รองรับหน่วยวัดหลายอย่าง รวมถึง absolute units เช่น inches, centimeters, points และ relative measures เช่น percentages และ em units คุณต้องใช้ค่าเหล่านี้ขณะระบุการวัดต่างๆ ใน Style rulesหน่วยวัด CSS ดังนี้:หน่วยคำอธิบายตัวอย่าง%กำหนดการวัดเป็นเปอร์เซ็นต์สัมพัทธ์กับค่าอื่น โดยทั่วไปคือ enclosing e

เพื่อตั้งค่า viewport height ใน CSS:h1 { font-size: 4.0vh; }เพื่อตั้งค่า viewport width ใน CSS:h1 { font-size: 5.5vw; }

เพื่อตั้งค่า letter-spacing ด้วย CSS ให้ใช้หน่วยวัด emการวัดสัมพัทธ์ของความสูงฟอนต์คือ em spaces เนื่องจาก 1 em unit เทียบเท่าขนาดฟอนต์ที่กำหนด หากตั้งฟอนต์ 12pt แต่ละ em จะเป็น 12pt ดังนั้น 2em จะเป็น 24ptตัวอย่างลองรันโค้ดตั้งค่า letter-spacing:<html> <head> </head> <bod

สมมติคุณต้องการใช้กฎ style กับ element เฉพาะเมื่อมันอยู่ภายใน element อื่น ตัวอย่างกฎ style จะใช้กับ <em> เฉพาะเมื่ออยู่ใน <ul>:ul em { color: #FFFF00; }สมมติสำหรับ <ol> element และกฎ style ใช้กับ <strong>:ol strong { color: #808000; }

คุณสามารถกำหนดกฎ style จากแอตทริบิวต์ class ของ element ทุก element ที่มี class นั้นจะถูกจัดรูปแบบตามกฎ.black { color: #808000; }กฎนี้ทำให้เนื้อหาสีดำสำหรับทุก element ที่ class=black ในเอกสาร สามารถเฉพาะเจาะจงได้:h1.black { color: #808000; }กฎนี้ทำให้สีดำเฉพาะ <h1> ที่ class=blackคุณสามาร

คุณสามารถกำหนดกฎ style จากแอตทริบิวต์ id ของ element ทุก element ที่มี id นั้นจะถูกจัดรูปแบบตามกฎ#black { color: #000000; }กฎนี้ทำให้เนื้อหาสีดำสำหรับทุก element ที่มี id=black ในเอกสาร สามารถเฉพาะเจาะจงได้มากขึ้น:h1#black { color: #000000; }กฎนี้ทำให้สีดำเฉพาะ <h1> ที่มี id=blackพลังจริงข