CSS (Cascading Styel Sheet) คือชุดกฎการจัดรูปแบบที่ควบคุมลักษณะที่ปรากฏของเว็บเพจ เป็นหนึ่งในเครื่องมือสำคัญสำหรับการออกแบบเว็บไซต์ ต่อไปเราจะเริ่มเรียนรู้รูปแบบไวยากรณ์พื้นฐานของ css
1. กฎการกำหนด CSS
สไตล์ชีตแบบเรียงซ้อนเป็นไฟล์ข้อความธรรมดาที่สมบูรณ์ ซึ่งมักจะใช้เป็นไฟล์แยกต่างหากที่มีนามสกุล "css" เนื้อหาประกอบด้วยชุดกฎที่บอกเบราว์เซอร์ว่าจะจัดเรียงและแสดงเนื้อหาในแท็กคำจำกัดความ CSS ใด ประกอบด้วยสามส่วน: ตัวเลือก คุณลักษณะ และค่าแอตทริบิวต์ ไวยากรณ์มีดังนี้:
ไวยากรณ์: ตัวเลือก { คุณสมบัติ: ค่า }
ตัวเลือก {คุณสมบัติ: ค่า}
สไตล์ CSS ประกอบด้วยชุดกฎที่แยกวิเคราะห์โดยเว็บเบราว์เซอร์ จากนั้นนำไปใช้กับองค์ประกอบที่เกี่ยวข้องของเอกสาร HTML กฎสไตล์ CSS ประกอบด้วยสามส่วน ได้แก่ ตัวเลือก คุณสมบัติ และค่า:
1. ตัวเลือก: ตัวเลือกคือแท็ก html เพื่อกำหนดสไตล์ หลังจากกำหนดแท็ก html เป็นตัวเลือกแล้ว เนื้อหาภายใต้แท็กในหน้า html จะเปลี่ยนไปตามกฎที่กำหนดโดย CSS
2. คุณสมบัติ: ชื่อสไตล์ที่คุณต้องการตั้งค่าสำหรับองค์ประกอบ HTML อ้างอิงถึงเนื้อหาที่จะเปลี่ยนแปลงในตัวเลือก โดยทั่วไปได้แก่: คุณสมบัติแบบอักษร, คุณสมบัติสี, คุณสมบัติข้อความ ฯลฯ ด้านล่างนี้คือสไตล์ชีตที่เรากำหนดไว้
3. ค่า: ค่าของคุณลักษณะซึ่งประกอบด้วยค่าตัวเลขและหน่วยหรือคำสำคัญ ใช้เพื่อควบคุมผลการแสดงผลของคุณลักษณะบางอย่าง
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}ในสไตล์ชีตนี้:
1. @charsetgb2312 หมายถึง การใช้ชุดอักขระมาตรฐานแห่งชาติจีน
2. body และ p เป็นแท็กสองแท็กใน html และมีการตั้งค่าสไตล์สามสไตล์สำหรับแท็กทั้งสองนี้ กล่าวคือ:
ครอบครัวแบบอักษร: ระบุประเภทแบบอักษรของแบบอักษร
"> 2. ฝังสไตล์ชีต
สไตล์ชีต CSS ที่กำหนดไว้ในหน้า Html เรียกว่าสไตล์ชีต CSS แบบฝัง กล่าวคือ ในส่วนหัวของเอกสาร HTML จะใช้แท็กสไตล์และมีการกำหนดกฎ CSS หลายชุดในแท็ก
ไวยากรณ์: <head><styletype=text/css><!--......--></style></head>
แสดงให้เห็น:
<style> ระบุจุดเริ่มต้นของสไตล์ชีต CSS และเครื่องหมายสิ้นสุดคือ </style> ในเครื่องหมายเริ่มต้น <style> คุณสามารถเพิ่มแอตทริบิวต์บางอย่างได้ตามต้องการ เช่นแอตทริบิวต์ type=text/css ในส่วนด้านบน คอลัมน์ซึ่งระบุว่าสไตล์ชีต CSS ใช้ประเภท MIME ลักษณะเฉพาะของประเภทนี้คือเมื่อเบราว์เซอร์ไม่รองรับโค้ด CSS โค้ด CSS จะถูกกรองเพื่อป้องกันไม่ให้เบราว์เซอร์แสดงโค้ด CSS ในรูปแบบ ซอร์สโค้ด เพื่อให้มั่นใจในความน่าเชื่อถือมากขึ้น ให้เพิ่มตัวระบุความคิดเห็น <!--...--> อีกครั้งในสไตล์ชีต กฎ CSS ถูกกำหนดไว้ในตัวระบุความคิดเห็นนี้
ตัวอย่างที่ 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>สไตล์ชีต CSS แบบฝัง</title><styletype=text/css><!--@charsetgb2312; {font-fa mily:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body> นกจากภูเขาหลายพันลูกบินข้ามเส้นทางนับพันและร่องรอยของมนุษย์ถูกกวาดล้าง<p>นกจากภูเขานับพันบินข้ามเส้นทางนับพันและร่องรอยของมนุษย์ถูกกวาดล้าง</p></body></html>3. ลิงก์ไปยังสไตล์ชีตภายนอก
สไตล์ชีต CSS ภายนอกเป็นไฟล์ภายนอกที่มีส่วนต่อท้าย .css การกำหนดสไตล์ชีตภายนอกสามารถนำไปใช้กับหลายหน้าได้ คุณสามารถใช้แท็กลิงก์ในหน้า HTML เพื่อเชื่อมต่อสไตล์ชีต CSS ภายนอกได้ ไวยากรณ์จะเป็นดังนี้:
ไวยากรณ์:
<linkrel=stylesheethref=*.css” type=text/css>
พารามิเตอร์:
1. แอตทริบิวต์ rel ระบุว่าสไตล์ชีตจะรวมกับเอกสาร HTML อย่างไร ค่า rel: สไตล์ชีต ระบุการระบุสไตล์ชีตภายนอก
2. *.css เป็นไฟล์สไตล์ชีทที่บันทึกแยกต่างหาก
ตัวอย่างที่ 2 กำหนดไฟล์ css ภายนอก p2.css จากนั้นเชื่อมต่อไฟล์ในไฟล์ t2.htm
ตัวอย่างที่ 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>ลิงก์ไปยังสไตล์ชีตภายนอก</title><styletype=text/css><!--@charsetgb2312; body {ตระกูลแบบอักษร: 宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>เรียน คุณบิน ค่อยๆ ระวังกุหลาบหนามตรงหน้า<p>ที่รัก อ้าปากสิ กลิ่นดอกไม้ในสายลมจะทำให้คุณมึนเมา</p></body></html>4. สไตล์ชีตแบบอินไลน์
สไตล์อินไลน์หมายถึงสไตล์ชีต CSS ที่กำหนดไว้ในแท็กเฉพาะ HTML แท็ก HTML ที่ใช้กันทั่วไปส่วนใหญ่เป็นองค์ประกอบบางอย่างใน BODY เช่น: <p>, <h2>, <ul>, <div> ฯลฯ ต่อไปนี้เป็นตัวอย่างของสไตล์อินไลน์
ตัวอย่างที่ 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>เอกสารที่ไม่มีชื่อ</title></head><body><divstyle=color:blue;font- size :30px;>กลิ่นหอมของดอกไม้ในสายลมจะทำให้คุณมึนเมา</div><pstyle=color:#ff0000;font-style:italic;>กลิ่นหอมของดอกไม้ในสายลมจะทำให้คุณมึนเมา</p>< /ร่างกาย></html>
5. นำเข้าสไตล์ชีตภายนอก
การนำเข้าสไตล์ชีตภายนอกหมายความว่ามีการสร้างสไตล์ชีตแบบฝังในไฟล์ HTML แต่จำเป็นต้องใช้การตั้งค่าบางอย่างของสไตล์ชีตภายนอก ในกรณีนี้ คุณสามารถนำเข้าสไตล์ชีตภายนอกใน <style> และใช้ @ นำเข้า ดังแสดงในตัวอย่างด้านล่าง
<html><head><styletype=text/css><!--@importurl(mystyle.css);การประกาศสไตล์ชีตอื่น--></style></head></body>..... .</body></html>
ในหมู่พวกเขา @import url(mystyle.css); หมายถึงการนำเข้าสไตล์ชีต mystyle.css สไตล์ชีตภายนอกที่นำเข้าจะต้องอยู่ที่จุดเริ่มต้นของสไตล์ชีต เหนือสไตล์ชีตภายใน
ตัวอย่างที่ 4
กำหนดไฟล์ css ภายนอก p4.css จากนั้นนำเข้าไฟล์ในไฟล์ t4.htm
ตัวอย่างที่ 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>นำเข้าสไตล์ชีตภายนอก</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;body {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>นกนับพันบินข้ามภูเขาหลายพันลูก โดยไม่เห็นร่องรอยของมนุษย์<p>นกนับพันบินข้ามภูเขานับพัน โดยไม่เห็นร่องรอยของมนุษย์</p></body></html>6. การสืบทอดสไตล์ชีต CSS
ในสไตล์ชีต CSS คุณลักษณะบางอย่างของแท็กลูกจะสืบทอดแอตทริบิวต์ของแท็กหลัก ตัวอย่างเช่น แท็ก p เป็นองค์ประกอบย่อยของเนื้อหาแท็ก เมื่อแท็ก p ไม่ได้ตั้งค่าแอตทริบิวต์สีแบบอักษร เนื้อหา ใน p จะใช้สีในตัวค่า ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสถานการณ์นี้
ตัวอย่างที่ 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>สไตล์ชีต CSS แบบฝัง</title><styletype=text/css><!--@charsetgb2312; { font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千山鸟บินข้ามเส้นทางนับพัน ร่องรอยของมนุษย์ถูกลบล้าง<p>ภูเขาหลายพันลูก นกที่บินข้ามเส้นทางนับพัน ร่องรอยของมนุษย์ถูกลบล้าง</p></body></html>7. ตั้งค่าหลายองค์ประกอบ
CSS อนุญาตให้ใช้รูปแบบเดียวกับหลายแท็ก แต่ละแท็กจะถูกคั่นด้วยเครื่องหมายจุลภาคเมื่อใช้เป็นตัวเลือก ดังที่แสดงในตัวอย่างต่อไปนี้
ตัวอย่างที่ 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>สไตล์ชีต CSS แบบฝัง</title><styletype=text/css><!--@charsetgb2312; ,h2,h3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>นกนับพันบินข้ามภูเขาหลายพันลูก และผู้คนนับพันหายไป</h1> <h2> นกจากภูเขานับพันบินข้ามเส้นทางนับพัน หายไปอย่างไร้ร่องรอย</h2><h3>นกจากภูเขานับพันบินข้ามเส้นทางนับพัน หายไปอย่างไร้ร่องรอยของผู้คน</h3><p>นก จากภูเขานับพันลูกบินข้ามเส้นทางนับพัน หายไปอย่างไร้ร่องรอย</p></ body></html>