การสร้างเว็บเพจแรก พื้นฐาน HTML

ในบทนี้เราจะพูดถึงวิธีการใช้ CSS ในเอกสาร HTML กล่าวคือ เชื่อมโยงคำอธิบายสไตล์ขององค์ประกอบเข้ากับองค์ประกอบโดยตรง หรือแท็ก HTML บางตัว

งานนี้สามารถทำได้สามวิธี:

  • เขียนคำอธิบายสไตล์โดยตรงในองค์ประกอบนั้นเอง วิธีการนี้จะใช้ได้ก็ต่อเมื่อมีองค์ประกอบดังกล่าวเพียงองค์ประกอบเดียวในเอกสาร HTML ที่ต้องการคำอธิบายสไตล์แยกต่างหาก
  • เขียนคำอธิบายสไตล์สำหรับองค์ประกอบที่เหมือนกันทั้งหมดของเอกสาร HTML วิธีการนี้สมเหตุสมผลหากรูปแบบของเพจนั้นแตกต่างโดยพื้นฐานจากการออกแบบโดยรวมของไซต์ (กลุ่มของเพจที่เชื่อมต่อถึงกัน)
  • แทรกคำอธิบายสไตล์ขององค์ประกอบ HTML ลงไป แยกไฟล์ซีเอสเอส สิ่งนี้จะช่วยให้คุณสามารถจัดการการออกแบบของเว็บไซต์ทั้งหมด แต่ละหน้าของเว็บไซต์ที่ระบุการอ้างอิงถึงไฟล์ CSS วิธีนี้เป็นการใช้ Cascading Style Sheet ที่มีประสิทธิภาพมากที่สุด

ลองมาดูแต่ละตัวเลือกให้ละเอียดยิ่งขึ้นและในขณะเดียวกันก็ทำความคุ้นเคยกับกฎของไวยากรณ์การเขียน CSS

คุณลักษณะสไตล์

แท็ก HTML เกือบทุกแท็กมีแอตทริบิวต์ สไตล์ซึ่งบ่งชี้ว่ามีการใช้คำอธิบายสไตล์บางอย่างกับแท็กนี้

มันเขียนแบบนี้:

สไตล์ = "">

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

ตัวอย่างเช่น:

style="สี: #ff0000; ขนาดตัวอักษร:12px"> นี่คือย่อหน้าที่มีสไตล์เฉพาะตัว

ในกรณีนี้ เราระบุว่าย่อหน้านี้ควรแสดงเป็นสีแดงและมีขนาดตัวอักษร 12 พิกเซล ในบทต่อๆ ไป ผมจะพูดถึงรายละเอียดเกี่ยวกับสิ่งที่เขียนด้วยเครื่องหมายคำพูด แต่ตอนนี้เรากำลังพูดถึงวิธีใช้ CSS กับแท็ก HTML ใดๆ

ด้วยหลักการเดียวกันนี้ คุณสามารถระบุสไตล์เฉพาะสำหรับองค์ประกอบ HTML เกือบทุกองค์ประกอบได้




คุณลักษณะสไตล์

style="สีพื้นหลัง: #c5ffa0">

style="สี: #0000ff; ขนาดตัวอักษร:18px">เกี่ยวกับช้าง



รับซื้อช้าง


style="สี: #ff0000; ขนาดตัวอักษร:14px">


style="สี: #0000ff; ขนาดตัวอักษร:16px">เช่าช้าง


style="สี: #ff0000; ขนาดตัวอักษร:14px">




แต่ฉันจะทำซ้ำวิธีนี้อีกครั้ง การใช้งาน CSSดีเฉพาะในกรณีที่คุณต้องการตั้งค่าสไตล์บางอย่างให้กับองค์ประกอบ HTML จำนวนเล็กน้อย

แท็ก (เพื่อไม่ให้สับสนกับคุณลักษณะที่มีชื่อเดียวกัน) ซึ่งมีการอธิบายองค์ประกอบที่เราต้องการ

ดูตัวอย่างจะมีความเห็นด้านล่าง




แท็กสไตล์



ทุกอย่างเกี่ยวกับช้าง


ในเว็บไซต์นี้ คุณจะพบข้อมูลเกี่ยวกับช้าง


รับซื้อช้าง


กับเราคุณสามารถซื้อช้างที่ดีที่สุดในราคาที่แข่งขันได้!!


เช่าช้าง


ที่นี่ที่เดียวก็เช่าช้างได้!!




ดังที่เห็นได้จากตัวอย่าง เราได้รับผลลัพธ์เหมือนกับในกรณีแรกทุกประการ แต่ตอนนี้เราไม่ได้กำหนดสไตล์ให้กับแต่ละองค์ประกอบแยกกัน แต่วางไว้ใน "ส่วนหัว" ของเอกสาร ดังนั้นจึงบ่งชี้ว่าส่วนหัวทั้งหมด

,

- ย่อหน้าจะเป็นสีฟ้า

- สีแดง. ลองนึกภาพว่างานของเราจะง่ายขึ้นแค่ไหนหากมีร้อยย่อหน้าและประมาณสิบห้าหัวเรื่องในหน้าหนึ่ง และตัวเอกสารเองก็จะมีน้ำหนักน้อยลงโดยการ "ลบ" คำอธิบายสไตล์ที่ซ้ำกันทั้งหมดสำหรับแต่ละองค์ประกอบ

ตอนนี้ความคิดเห็นที่สัญญาไว้:

แท็ก รูปแบบขององค์ประกอบ HTML บางอย่างได้รับการประกาศโดยตรงตามไวยากรณ์ต่อไปนี้:

หากมีการระบุคุณสมบัติขององค์ประกอบหลายอย่างในบล็อกการประกาศสไตล์ คุณสมบัติเหล่านั้นจะถูกคั่นด้วยเครื่องหมายอัฒภาค

CSS ในไฟล์ภายนอกแยกต่างหาก

ในความคิดของฉันฉันพูดถึงข้อดีของ CSS เป็นหลักคือความสามารถในการใส่ข้อมูลทั้งหมดที่เกี่ยวข้องกับการออกแบบเว็บไซต์ลงในไฟล์ภายนอกที่แยกจากกันใช้เวลานานแค่ไหน

ดังนั้นให้เปิดแผ่นจดบันทึก (หรือโปรแกรมแก้ไขอื่น) แล้วเขียนข้อความต่อไปนี้:

เนื้อหา (สีพื้นหลัง: #c5ffa0)
a (สี:#000060; น้ำหนักแบบอักษร: ตัวหนา;)
a:hover (สี:#ff0000; น้ำหนักแบบอักษร: ตัวหนา; การตกแต่งข้อความ:ไม่มี)
h1 (สี: #0000ff; ขนาดตัวอักษร:18px)
h2 (สี: #ff00ff; ขนาดตัวอักษร:16px)
p (สี: #600000; ขนาดตัวอักษร:14px)

ฉันจะพยายามอธิบายรายละเอียดสิ่งที่เราเขียนเกี่ยวกับสิ่งแปลกประหลาดนี้ในบทต่อ ๆ ไปของหนังสือเรียนเล่มนี้

ทั้งหมด! ไฟล์คำอธิบายสไตล์ถูกสร้างขึ้นแล้ว! ตอนนี้สิ่งที่เหลืออยู่เพียงเล็กน้อยคือการบังคับ หน้าที่จำเป็นเว็บไซต์ของเราเพื่อรับข้อมูลจากไฟล์นี้

ทำได้โดยใช้แท็ก (การเชื่อมต่อ). แท็ก อเนกประสงค์และทำหน้าที่ "เชื่อมโยง" เอกสาร HTML กับไฟล์ภายนอกเพิ่มเติมเพื่อให้แน่ใจว่ามีการทำงานที่เหมาะสม แท็ก เป็นลิงก์ประเภทหนึ่งซึ่งไม่ได้มีไว้สำหรับผู้ใช้เท่านั้น แต่สำหรับโปรแกรมเบราว์เซอร์ (เบราว์เซอร์) เพราะ มีข้อมูลบริการเฉพาะ ซึ่งอยู่ในส่วนหัวของเอกสาร HTML ระหว่างแท็ก และเบราว์เซอร์จะไม่แสดงบนหน้าจอ

แท็ก มีคุณสมบัติ:

href- เส้นทางไปยังไฟล์
ญาติ- กำหนดความสัมพันธ์ระหว่างเอกสารปัจจุบันและไฟล์ที่กำลังอ้างอิง
  • ไอคอนทางลัด - ระบุว่าไฟล์ที่รวมอยู่นั้นเป็นไฟล์ .
  • สไตล์ชีต- ระบุว่าไฟล์ที่รวมมานั้นมีสไตล์ชีต
  • application/rss+xml - ไฟล์เข้า รูปแบบ XMLเพื่ออธิบายฟีดข่าว
พิมพ์- ชนิดข้อมูล MIME ของไฟล์แนบ

เนื่องจากเรารวมสไตล์ชีตแบบเรียงซ้อนเป็นไฟล์ภายนอก ลิงก์บริการของเราจึงอยู่ในรูปแบบต่อไปนี้:

ฉันขอย้ำอีกครั้งเพื่อขจัดความเข้าใจผิดที่อาจเกิดขึ้นได้อย่างแน่นอน คุณลักษณะ ญาติกำหนดค่า สไตล์ชีตเนื่องจากเรากำลังเชื่อมต่อสไตล์ชีตแบบเรียงซ้อนเป็นไฟล์ภายนอก เราจึงระบุเส้นทางไปยังไฟล์ css (ในตัวอย่างนี้ ไฟล์เรียกว่า mystyle.cssและอยู่ถัดจากเอกสาร HTML ที่เขียนลิงก์นี้) เรายังระบุว่าไฟล์นี้เป็นข้อความและมีคำอธิบายสไตล์ ประเภท = "ข้อความ/css"

ตอนนี้เราแทรกบรรทัดนี้ลงในส่วนหัวของหน้าเว็บไซต์ของเราและเพลิดเพลินไปกับผลลัพธ์..

ไฟล์ mystyle.css
เนื้อความ (สีพื้นหลัง: #c5ffa0)
a (สี:#000060; น้ำหนักแบบอักษร: ตัวหนา;)
a:hover (สี:#ff0000; น้ำหนักแบบอักษร: ตัวหนา; การตกแต่งข้อความ:ไม่มี)
h1 (สี: #0000ff; ขนาดตัวอักษร:18px)
h2 (สี: #ff00ff; ขนาดตัวอักษร:16px)
p (สี: #600000; ขนาดตัวอักษร:14px)
ไฟล์ดัชนี.html



แผ่นสไตล์แบบเรียงซ้อน



เมนู:


ทุกอย่างเกี่ยวกับช้าง
รับซื้อช้าง.
เช่าช้าง.

ทุกอย่างเกี่ยวกับช้าง


ในเว็บไซต์นี้ คุณจะพบข้อมูลเกี่ยวกับช้าง




ไฟล์Elephant.html



แผ่นสไตล์แบบเรียงซ้อน



เมนู:


ทุกอย่างเกี่ยวกับช้าง
รับซื้อช้าง.
เช่าช้าง.

รับซื้อช้าง


กับเราคุณสามารถซื้อช้างที่ดีที่สุดในราคาที่แข่งขันได้!!




ไฟล์ Elephant1.html



แผ่นสไตล์แบบเรียงซ้อน



เมนู:


ทุกอย่างเกี่ยวกับช้าง
รับซื้อช้าง.
เช่าช้าง.

เช่าช้าง


ที่นี่ที่เดียวก็เช่าช้างได้!!




ในตัวอย่างด้านบน "ไซต์เกี่ยวกับช้าง" บน ในขณะนี้มีสามหน้า แต่ละหน้าเชื่อมโยงกับไฟล์ css ภายนอกไฟล์เดียว - mystyle.css ดังนั้นเราจึง "ยกเลิกการโหลด" อย่างมีนัยสำคัญ และทำให้การออกแบบเว็บไซต์ทั้งหมด "เหมาะกับมือถือ" ลองนึกภาพดูว่าเราจะชนะได้กี่กิโลไบต์หากไซต์นี้มีเพจเต็มร้อยหน้า!? และเราจะประหยัดเวลาได้มากแค่ไหนหากเราต้องเปลี่ยนแปลงอะไรในการออกแบบ!?

ในบทนี้ เราได้ดูสามวิธีในการฝัง CSS ในเอกสาร HTML อันไหนดีกว่าที่จะใช้?

  • ใช้แอตทริบิวต์ สไตล์สำหรับองค์ประกอบใดๆ หากองค์ประกอบนี้ที่มีสไตล์แตกต่างจากองค์ประกอบอื่นๆ เป็นองค์ประกอบเดียวทั่วทั้งไซต์
  • ใช้แท็ก


    สร้างตาราง CSS และเชื่อมต่อกับหน้า html



    คุณยังสามารถกำหนดสไตล์โดยใช้แอตทริบิวต์ style:

    "https://www.w3.org/TR/html4/loose.dtd">


    <span>สร้างตาราง CSS</span>


    สร้างตาราง CSS และเชื่อมต่อกับหน้า html



    ไม่แนะนำให้ใช้ตัวอย่างเหล่านี้ เนื่องจากไม่ได้ให้ข้อได้เปรียบที่สำคัญมากกว่า html หากจำเป็นต้องเปลี่ยนการออกแบบเว็บไซต์ทั้งหมด คุณจะต้องแก้ไขทุกหน้าซึ่งจะใช้เวลานาน

    ต่อไป -

บทความที่เกี่ยวข้อง