Cascading Style Sheet ง การเขียนเว็บไซต์ สไตล์ ป. พ. ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดงพิทยา คม
Cascading Style Sheet เป็นการจัดรูปแบบหน้าตาของ เว็บแบบพิเศษ เป็นการจัดรูปแบบหน้าตาของ เว็บแบบพิเศษ แก้ข้อจำกัดของภาษา html แก้ข้อจำกัดของภาษา html
ตำแหน่งของ CSS อยู่ใน tag อยู่ใน tag อยู่ในคำสั่งต่างๆ อยู่ในคำสั่งต่างๆ อยู่ในไฟล์อื่น อยู่ในไฟล์อื่น ในวิชานี้จะกล่าวถึงเฉพาะ 3 ตำแหน่งแรกเท่านั้น ในวิชานี้จะกล่าวถึงเฉพาะ 3 ตำแหน่งแรกเท่านั้น
ใน tag ใน tag จะมีผลตลอดทั้งเอกสาร จะมีผลตลอดทั้งเอกสาร <style> … ส่วนกำหนด CSS … </style></head>
ใน tag ใน tag จะมีผลต่อจากจุดที่กำหนด จะมีผลต่อจากจุดที่กำหนด <style> … ส่วนกำหนด CSS … </style></body>
ใน tag จะมีผลเฉพาะในคำสั่งนั้น เช่น จะมีผลเฉพาะในคำสั่งนั้น เช่น AAA AAA
รูปแบบการ กำหนดสไตล์ชีท ชื่อ tag { รูปแบบ 1 : ค่า ; รูปแบบ 2 : ค่า ;... ; รูปแบบ n : ค่า ; } ชื่อ tag { รูปแบบ 1 : ค่า ; รูปแบบ 2 : ค่า ;... ; รูปแบบ n : ค่า ; } โดยที่ชื่อ tag คือ คำสั่งภาษา html ที่จะ กำหนด โดยที่ชื่อ tag คือ คำสั่งภาษา html ที่จะ กำหนด รูปแบบ คือ คุณสมบัติต่างๆของ tag นั้นๆจะแตกต่างกันไปตาม tag รูปแบบ คือ คุณสมบัติต่างๆของ tag นั้นๆจะแตกต่างกันไปตาม tag ค่า คือ ค่าของคุณสมบัตินั้น ค่า คือ ค่าของคุณสมบัตินั้น ระหว่างคุณสมบัติกับค่าจะคั่นด้วย เครื่องหมาย : และระหว่างคุณสมบัติจะ คั่นด้วยเครื่องหมาย ; ในแต่ละ tag จะ กำหนดกี่คุณสมบัติก็ได้ ระหว่างคุณสมบัติกับค่าจะคั่นด้วย เครื่องหมาย : และระหว่างคุณสมบัติจะ คั่นด้วยเครื่องหมาย ; ในแต่ละ tag จะ กำหนดกี่คุณสมบัติก็ได้
คุณสมบัติที่สำคัญ พื้นหลัง พื้นหลัง ตัวอักษร ตัวอักษร ตาราง ตาราง Cursor Cursor อื่นๆ อื่นๆ
การกำหนด ลักษณะพื้นหลัง เกือบทุก tag สามารถกำหนด ลักษณะพื้นหลังได้ เกือบทุก tag สามารถกำหนด ลักษณะพื้นหลังได้ เลือกใส่คำสั่งได้ใน 3 จุดที่ผ่าน มาแล้วคือ เลือกใส่คำสั่งได้ใน 3 จุดที่ผ่าน มาแล้วคือ ที่ จะมีผลตลอดทั้ง เอกสาร ที่ จะมีผลตลอดทั้ง เอกสาร ที่ มีผลต่อจากจุดที่ กำหนด ที่ มีผลต่อจากจุดที่ กำหนด ใน tag จะมีผลเฉพาะใน tag นั้นมักจะต่อจาก style= ใน tag จะมีผลเฉพาะใน tag นั้นมักจะต่อจาก style= มีคุณสมบัติที่น่าสนใจดังนี้ มีคุณสมบัติที่น่าสนใจดังนี้
background- image:URL( ไฟล์ ) จะมีผลเช่นเดียวกับคำสั่ง <body background= ชื่อรูป ) จะมีผลเช่นเดียวกับคำสั่ง <body background= ชื่อรูป ) เช่น background- image:URL(ball.gif) เช่น background- image:URL(ball.gif)
background- color: สี จะมีผลเช่นเดียวกับคำสั่ง <body bgcolor= สี ) จะมีผลเช่นเดียวกับคำสั่ง <body bgcolor= สี ) สามารถใช้ สามารถใช้ background-color:#ff00ff ฐานสิบหก background- color:RGB(00,255,128) ฐาน สิบ เช่น background-color:red เช่น background-color:red
background- attachment: เป็นการกำหนดว่าจะให้พื้นหลัง เลื่อนตามการเลื่อนขึ้นเลื่อนลง หรือเปล่ามีได้สองค่าคือ เป็นการกำหนดว่าจะให้พื้นหลัง เลื่อนตามการเลื่อนขึ้นเลื่อนลง หรือเปล่ามีได้สองค่าคือ Background- attachment:scroll คือจะ เลื่อนตาม Background- attachment:scroll คือจะ เลื่อนตาม Background- attachment:fixed คือจะไม่ เลื่อนตาม Background- attachment:fixed คือจะไม่ เลื่อนตาม
background- repeat: ใช้กำหนดว่าในกรณีที่รูปเล็กกว่า หน้าจอจะให้ทำซ้ำรูปอย่างไร ใช้กำหนดว่าในกรณีที่รูปเล็กกว่า หน้าจอจะให้ทำซ้ำรูปอย่างไร Background-repeat:repeat แสดงภาพซ้ำเต็มพื้นหลัง Background-repeat:repeat แสดงภาพซ้ำเต็มพื้นหลัง Background-repeat:repeat-x แสดงภาพซ้ำตามแนวนอน Background-repeat:repeat-x แสดงภาพซ้ำตามแนวนอน Background-repeat:repeat-y แสดงภาพซ้ำตามแนวดิ่ง Background-repeat:repeat-y แสดงภาพซ้ำตามแนวดิ่ง Background-repeat:no-repeat แสดงเพียงภาพเดียว Background-repeat:no-repeat แสดงเพียงภาพเดียว
background- position:(left,top ) ใช้ในกรณีที่กำหนดการทำซ้ำเป็น no-repeat ใช้ในกรณีที่กำหนดการทำซ้ำเป็น no-repeat Left หมายถึง ห่างจากทางซ้าย top หมายถึงห่างจากด้านบน Left หมายถึง ห่างจากทางซ้าย top หมายถึงห่างจากด้านบน เช่น background- position:(150,10) หมายถึงห่าง จากด้านซ้าย 150 ด้านบน 10 เช่น background- position:(150,10) หมายถึงห่าง จากด้านซ้าย 150 ด้านบน 10 สามารถใช้คำภาษาอังกฤษแทนได้ เช่น left top right center สามารถใช้คำภาษาอังกฤษแทนได้ เช่น left top right center เช่น background-position:left เช่น background-position:left