การเพิ่ม CSS CSS คืออะไร สไตล์ CSS มีไว้ทำอะไร?

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

มีหลายตัวเลือกสำหรับการดำเนินการนี้: การใช้สไตล์ชีตแบบซ้อน สไตล์ชีตภายนอก และสไตล์อินไลน์

วันนี้เราจะมาพูดถึงวิธีหลัง

การแทรกสไตล์ลงในแท็ก HTML

สาระสำคัญ วิธีนี้ก็คือว่า การลงทะเบียนที่จำเป็นเราฝังมันไว้ในแท็ก แบบแยก คุณลักษณะ - สไตล์- คุณลักษณะนี้ สามารถนำไปใช้ได้ไปยังแท็กใดๆ ก็ตาม แต่เฉพาะภายในส่วนเนื้อหาของไซต์เท่านั้น ภายในร่างกาย- ค่าของแอตทริบิวต์นี้คือตัวดำเนินการของสไตล์ที่ต้องนำไปใช้กับองค์ประกอบที่กำหนด

ตัวอย่างเช่น ตั้งค่าขนาดแบบอักษรที่แตกต่างกันสำหรับข้อความสองย่อหน้าที่แตกต่างกัน:

< p style= "font-size:25px;" >ตั้งค่าข้อความส่วนนี้มีความสูงของตัวอักษร 25 พิกเซล < p style= "font-size:15px; color:#2400ff;"> และข้อความนี้จะเป็นตัวอักษรสูง 15 พิกเซล และเรายังจะย้อมเป็นสีน้ำเงินเพื่อสาธิตการใช้งานหลายสไตล์ในเวลาเดียวกัน

ข้อบกพร่อง

ตัวอย่างนี้แสดงให้เห็นอย่างสมบูรณ์แบบว่าสไตล์ดังกล่าวอุดตันโค้ดของหน้าอย่างไร

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

การจัดรูปแบบข้อความจำนวนมากก็จะเป็นเรื่องยากเช่นกัน ฉันคิดว่าไม่มีใครพอใจกับโอกาสที่จะระบุขนาดตัวอักษรสำหรับแต่ละย่อหน้า โดยเฉพาะอย่างยิ่งหากมี 40 ย่อหน้าดังกล่าว

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

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

เพื่อความชัดเจน ลองดูตัวอย่างด้านล่าง:

< div style= "ตระกูลฟอนต์: "Roboto Condensed", sans-serif"> รายการถูกต้อง < div style= "ตระกูลฟอนต์: "Roboto Condensed", sans-serif">นั่นก็ถูกต้องเช่นกัน < div style= "font-family: " Roboto Condensed ", sans-serif" >นี่ไม่ใช่รายการที่ถูกต้อง < div style= "font-family: " Roboto Condensed ", sans-serif" >และนี่ก็ไม่เป็นความจริงเช่นกัน

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

เมื่อใดควรใช้สไตล์อินไลน์

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

< div id= "productRate" > < div style= "width: 40%" >

การบันทึกความกว้างที่ต้องการสำหรับบล็อกนี้จะเป็นเรื่องง่าย

สถานการณ์ที่คล้ายกันอาจเกิดขึ้นได้หากจำเป็นต้องแทนที่ภาพพื้นหลัง (ตัวอย่าง) ของผู้ใช้ที่มีบทบาทผู้ดูแลระบบ ในกรณีนี้ แท็ก img อาจไม่เหมาะสม ดังนั้นจึงควรอ้างอิงถึงแอตทริบิวต์ style:

< div style= "background:url(fon.jpg)" >

นอกจากนี้โปรแกรมเมอร์มักจะหันไปใช้สไตล์ในตัวเมื่อวางหน้าต่างป๊อปอัป บ่อยครั้งที่กระบวนการนี้ดำเนินไปดังนี้: บล็อกที่กำลังออกแบบอยู่ได้รับการกำหนด display:block และหน้าต่างที่เหลือจะถูกซ่อนไว้โดยใช้ display:none เพื่อไม่ให้รบกวนการทำงานของโปรแกรมเมอร์ด้วยสายตา นี่คือตัวอย่าง:

< div class = "element" style= "display:block" >หน้าต่างป๊อปอัพที่ถูกออกแบบให้เป็น ในขณะนี้

บรรทัดล่าง

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

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

ดำเนินการ งานนี้เป็นไปได้ในสามวิธี:

• เขียนคำอธิบายสไตล์ลงในองค์ประกอบโดยตรง วิธีนี้ใช้ได้เฉพาะเมื่อมีองค์ประกอบดังกล่าวเพียงองค์ประกอบเดียวเท่านั้น เอกสาร HTML e ซึ่งต้องการคำอธิบายสไตล์แยกต่างหาก
• เขียนคำอธิบายสไตล์สำหรับองค์ประกอบที่เหมือนกันทั้งหมดของเอกสาร HTML วิธีการนี้สมเหตุสมผลหากรูปแบบของเพจนั้นแตกต่างโดยพื้นฐานจากการออกแบบโดยรวมของไซต์ (กลุ่มของเพจที่เชื่อมต่อถึงกัน)
• แยกคำอธิบายสไตล์ขององค์ประกอบ HTML ลงในไฟล์ CSS แยกต่างหาก ซึ่งจะช่วยให้คุณสามารถจัดการการออกแบบของไซต์ทั้งหมด แต่ละหน้าของไซต์ที่ระบุการอ้างอิงไปยังไฟล์ 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)
ไฟล์ Index.html

เมนู:

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

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

เมนู:

รับซื้อช้าง

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

เมนู:

เช่าช้าง

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

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

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

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

  นี่คือหัวข้อ

  
  

  นี่คือย่อหน้า

  
  

  CSS ภายนอก

  สไตล์ชีตภายนอกใช้เพื่อกำหนดสไตล์สำหรับเพจ HTML จำนวนมาก

  ด้วยสไตล์ชีตภายนอก คุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมดของคุณด้วยการเปลี่ยนไฟล์เพียงครั้งเดียว!

  หากต้องการใช้สไตล์ชีตภายนอก ให้เพิ่มลิงก์ในส่วนนั้น หน้า HTML:

  ตัวอย่าง

  
  
  
  
  
  

  นี่คือหัวข้อ

  
  

  นี่คือย่อหน้า

  
  

  สไตล์ชีตภายนอกสามารถเขียนในรูปแบบใดก็ได้ โปรแกรมแก้ไขข้อความ- ไฟล์ต้องไม่มีโค้ด HTML และต้องบันทึกเป็นนามสกุล . ซีเอสเอส

  นี่คือลักษณะของ "styles.css":

  ร่างกาย(
  สีพื้นหลัง: Powderblue;
  }
  h1 (
  สี:สีฟ้า;
  }
  พี(
  สี:สีแดง;
  }

  แบบอักษร CSS

  คุณสมบัติสี CSS ระบุสีข้อความที่จะใช้

  คุณสมบัติตระกูลแบบอักษร CSS ระบุแบบอักษรที่จะใช้

  คุณสมบัติขนาดตัวอักษร CSS กำหนดขนาดของข้อความที่จะใช้

  ตัวอย่าง

  
  
  
  
  
  

  นี่คือหัวข้อ

  
  

  นี่คือย่อหน้า

  
  

  CSS ชายแดน

  คุณสมบัติเส้นขอบ CSS กำหนดเส้นขอบรอบ ๆ องค์ประกอบ HTML:

  ตัวอย่าง

  พี(
  }
  

  การขยาย CSS

  คุณสมบัติการขยาย CSS กำหนดช่องว่างภายใน (ช่องว่าง) ระหว่างข้อความและเส้นขอบ:

  ตัวอย่าง

  พี(
  เส้นขอบ: 1px ผงสีน้ำเงินทึบ;
  ช่องว่างภายใน: 30px;
  }

  จากผู้เขียน:สวัสดีผู้อ่านพอร์ทัล webformyself ที่รัก ในการพัฒนาเว็บไซต์ การออกแบบทรัพยากรบนเว็บมีความสำคัญอย่างยิ่ง นี่คือหน้าที่ของภาษา CSS (สไตล์ชีตแบบเรียงซ้อน) ซึ่งเราจะพูดถึงในวันนี้ หรือมากกว่านั้นเกี่ยวกับการเชื่อมต่อและการใช้งาน มาดูสไตล์ CSS บางอย่างสำหรับเว็บไซต์ที่ใช้ในการออกแบบหน้าเว็บกัน

  การเชื่อมต่อ css

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

  ต้องบอกว่าโดยทั่วไปแล้ว ยังมีความเป็นไปได้ที่จะรวมสไตล์ไว้ในไฟล์ html อีกด้วย ตัวอย่างเช่น สามารถกำหนดได้โดยใช้แอตทริบิวต์ style หรือแท็กเดียวกัน สิ่งนี้เรียกว่าสไตล์อินไลน์ แนวทางนี้ไม่ได้รับการต้อนรับในปัจจุบันและละเมิดมาตรฐานการพัฒนาสมัยใหม่

  จะทำอย่างไรให้ถูกต้องคุณถาม? ในการทำเช่นนี้คุณต้องสร้าง ไฟล์ใหม่ด้วยส่วนขยาย css แล้วเชื่อมต่อกับ html ทำได้ง่ายมากโดยใช้แท็กลิงก์ซึ่งรับผิดชอบในการเชื่อมต่อไฟล์ภายนอก ทำเช่นนี้:

  < link rel = "stylesheet" type = "text/css" href = "style.css" >

  แท็กเป็นแบบเดี่ยวตามที่คุณเข้าใจแล้ว ฉันจะบอกคุณเพิ่มเติมเล็กน้อยเกี่ยวกับคุณลักษณะของมัน:

  rel = “stylesheet” – โดยทั่วไปแล้ว คุณลักษณะ rel จะถูกเขียนเพื่อกำหนดบทบาทของไฟล์บนเพจ ในกรณีของเรา บทบาทคือสไตล์ชีตซึ่งเป็นสิ่งที่ระบุไว้

  type = “text/css” - ประเภทที่เรียกว่า MIME ซึ่งโดยปกติจะระบุให้กับไฟล์ที่รวมไว้ทั้งหมดเพื่อให้เบราว์เซอร์ตีความได้อย่างถูกต้อง ในเว็บเบราว์เซอร์สมัยใหม่ คุณสามารถละเว้นแอตทริบิวต์นี้ได้

  href = “style.css” เป็นแอตทริบิวต์มาตรฐานที่ระบุที่อยู่ของไฟล์ภายนอกของเรา ในกรณีนี้ ไฟล์จะถูกเขียนตามข้อเท็จจริงที่ว่าไฟล์นั้นมีลักษณะของชื่อ นามสกุล css และอยู่ในโฟลเดอร์เดียวกันกับเอกสาร html

  อย่างที่คุณเห็นเมื่อเชื่อมต่อไฟล์ css เฉพาะแอตทริบิวต์ href เท่านั้นที่จะเปลี่ยนแปลง อย่างอื่นไม่จำเป็นต้องเปลี่ยน คุณสามารถเชื่อมต่อสไตล์ชีตเข้ากับเพจได้มากเท่าที่คุณต้องการ แต่ไม่เกิน 2-4 สไตล์ถือว่าเหมาะสมที่สุด เนื่องจากการร้องขอไปยังเซิร์ฟเวอร์มากเกินไปก็ไม่ดีเช่นกัน

  ฉันจะรับสไตล์ CSS สำเร็จรูปสำหรับเว็บไซต์ได้ที่ไหน

  โอเค ด้วยการเชื่อมต่อ ฉันหวังว่าทุกอย่างชัดเจนไม่มากก็น้อย แต่คุณกำลังสร้างไฟล์เปล่าและเพื่อให้มองเห็นเอฟเฟกต์ของการเพิ่มคุณจะต้องเขียนกฎด้วยตัวเองหรือนำไปจากที่อื่น

  

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

  ตัวเลือกคือคุณลักษณะของภาษา CSS ที่เป็นเอกลักษณ์ ทำไมพวกเขาถึงต้องการ? ลองนึกภาพรหัสนี้:

  ข้อความส่วนหัว

  ข้อความในย่อหน้า

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

  p( ขนาดตัวอักษร: 12px; ) .title( ขนาดตัวอักษร: 36px; )

  ขนาดตัวอักษร: 12px; ชื่อ ( ขนาดตัวอักษร: 36px;

  เราตั้งค่าขนาดตัวอักษรสำหรับทุกย่อหน้าเป็น 12 พิกเซล และองค์ประกอบที่มีคลาสชื่อ (ในกรณีของเรา h1) จะได้รับขนาดตัวอักษรที่ใหญ่กว่ามากที่ 36 พิกเซล โปรดทราบว่าในกรณีของย่อหน้า สไตล์จะมีผลกับทุกสไตล์ ไม่ว่าจะมีกี่ย่อหน้าก็ตาม

  ตัวเลือกที่สองระบุเพียงองค์ประกอบเดียวเท่านั้นด้วยคลาสหัวเรื่อง แน่นอนว่าเราสามารถสร้างองค์ประกอบอื่นๆ ที่มีคลาสเดียวกันได้อย่างแน่นอน ซึ่งไม่ได้ห้าม และพวกมันจะได้รับกฎเดียวกัน แต่ถ้าเราแค่เขียนลงไป แท็ก html h1 (ไม่มีคลาสหัวเรื่อง) ดังนั้นจะไม่มีการเพิ่มกฎลงไป

  นี่คือวิธีที่ css ช่วยให้คุณเลือกองค์ประกอบที่คุณต้องการได้อย่างสะดวกและปล่อยองค์ประกอบที่ไม่จำเป็นไว้เพียงอย่างเดียว เกี่ยวอะไรกับเรื่องนี้. สไตล์สำเร็จรูปที่คุณสามารถหาได้บนอินเทอร์เน็ต? ทุกอย่างเชื่อมโยงกับคลาสและตัวระบุบางอย่าง ดังนั้นคุณจึงไม่สามารถเชื่อมต่อตารางเหล่านี้กับไฟล์ใด ๆ ได้อย่างง่ายดาย ตารางเหล่านั้นจะไม่ทำงานหากองค์ประกอบที่จำเป็นไม่มีคลาสที่เหมาะสมใน html

  ตัวอย่างเช่น ในสไตล์ชีต เราเห็นโค้ดต่อไปนี้:

  Nav( width: 300px; พื้นหลัง: aqua; ... ) .nav a( display: block; color: #ccc; ... )

  นำทาง( ความกว้าง: 300px;

  จากสิ่งนี้เพียงอย่างเดียว เราสามารถสรุปได้ว่าบางแห่งบนหน้า html ของเราควรมีองค์ประกอบที่มีคลาส nav และควรมีลิงก์ด้วย หากสิ่งนี้เป็นจริง การออกแบบจะถูกนำไปใช้กับพวกเขา และรูปลักษณ์ของพวกเขาก็จะเปลี่ยนไปตามนั้น หากตรวจไม่พบองค์ประกอบดังกล่าว โค้ดก็จะถูกละเว้น

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

  จะสร้างสไตล์ CSS สำหรับเว็บไซต์ของคุณด้วยตัวเองได้อย่างไร?

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

  

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

  นอกจากนี้ คุณสามารถเรียนรู้และเชี่ยวชาญพื้นฐานของ CSS ได้ในส่วนพรีเมียมของเรา มีหลักสูตรหนึ่งที่เน้นคุณสมบัติพื้นฐานของภาษานี้โดยเฉพาะ -

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

  ด้วยเหตุนี้ฉันจึงบอกลาคุณ อ่านบล็อก webformy ของเราด้วยตนเองเพื่อพัฒนาความรู้ของคุณในด้านการสร้างเว็บไซต์

  > สไตล์ CSS พื้นฐานสำหรับการสร้างเว็บไซต์ ตามกฎแล้ว สไตล์การแสดงสำหรับคอนเทนเนอร์และเนื้อหาจะถูกเขียนในสไตล์ชีต ซึ่งโดยปกติจะเรียกว่า stile.css แม้ว่าจะสามารถเรียกอะไรก็ได้ที่คุณต้องการก็ตาม สิ่งสำคัญคือในหน้าในแท็ก เป็นเส้นทางที่ถูกต้องไปยังสไตล์ชีต

  หากต้องการกำหนดสไตล์ให้กับคอนเทนเนอร์บนเพจ คุณสามารถกำหนดคลาสให้กับคอนเทนเนอร์ได้ ตัวอย่างเช่น ภาชนะ

  คุณสามารถกำหนดสไตล์ที่เรียกว่า chapka_saita จากนั้นคลาสจะถูกกำหนดให้กับคอนเทนเนอร์บนเพจ

  เนื้อหา

  - สไตล์ชีตระบุสไตล์สำหรับ chapka_saita ชื่อในตาราง stile.css ขึ้นต้นด้วยจุด

  ชัปกา_ไซตา (อิน วงเล็บปีกการะบุสไตล์)

  คุณยังสามารถระบุสไตล์สำหรับคอนเทนเนอร์ได้โดยตรงหากไม่ได้กำหนดคลาสไว้ ตัวอย่างเช่น สไตล์สำหรับคอนเทนเนอร์

  เนื้อหา

  ขึ้นต้นด้วยชื่อคอนเทนเนอร์

  ส่วนหัว (เราระบุสไตล์ในวงเล็บปีกกา)

  คุณยังสามารถระบุสไตล์สำหรับคอนเทนเนอร์โดยใช้ตัวระบุได้ ซึ่งจะมีลักษณะดังนี้

  เนื้อหา

  ในสไตล์ชีต ตัวระบุจะเริ่มต้นด้วยสัญลักษณ์แฮช

  #blok1 (เราระบุสไตล์ด้วยเครื่องหมายปีกกา)

  หากคุณต้องการระบุรูปแบบของส่วนหัวในคอนเทนเนอร์ ลิงก์ รูปภาพ ก็จะมีลักษณะเช่นนี้

  Chapka_saita (ในวงเล็บปีกกาเป็นรูปแบบหลักของคอนเทนเนอร์)
  .chapka_saita h1, h2 (รูปแบบสำหรับส่วนหัวในแท็ก

  และ

  สำหรับภาชนะนี้)
  .chapka_saita a (รูปแบบสำหรับลิงก์ในคอนเทนเนอร์นี้)
  .chapka_saita a:hover ( รูปแบบสำหรับลิงก์เมื่อวางเมาส์ไว้เหนือ )
  .chapka_saita img (สไตล์สำหรับรูปภาพในคอนเทนเนอร์นี้)
  สไตล์ต่างๆ เขียนด้วยเครื่องหมายปีกกาและคั่นด้วยเครื่องหมายอัฒภาค

  ตระกูลแบบอักษร: Arial; ระบุแบบอักษรคอนเทนเนอร์ซึ่งมักใช้ในแท็ก ซึ่งเนื้อหาทั้งหมดของเพจ

  ความสูงของเส้น: 1.2; กำหนดความสูงของบรรทัดสำหรับแบบอักษร

  การเยื้อง

  ช่องว่างภายใน: 10px; ตั้งค่าการเยื้องภายในของเนื้อหาจากเส้นขอบของคอนเทนเนอร์ ในกรณีนี้การเยื้องคือ 10 พิกเซล คุณสามารถระบุค่าเป็นเปอร์เซ็นต์ หรือเป็น em
  ระยะขอบ: 5px; กำหนดระยะขอบด้านนอกของคอนเทนเนอร์
  ระยะขอบ: 10px 5px 0px 15px; สามารถระบุการเยื้องแยกกันสำหรับแต่ละด้านได้
  ขอบล่าง: 10px; คุณสามารถระบุการเยื้องได้เพียงด้านเดียว ในกรณีนี้ การเยื้องจากด้านล่างคือ 10 พิกเซล เช่นเดียวกับการเสริมภายใน

  ด้านล่างนี้คือตัวอย่างสไตล์ของแท็ก

  เนื้อความ ( ขอบซ้าย: อัตโนมัติ; ขอบขวา: อัตโนมัติ; ความกว้าง: 930px; ขนาดตัวอักษร: 12px; ตระกูลแบบอักษร: Arial; ความสูงบรรทัด: 1.2; ภาพพื้นหลัง: url(images/fon.jpg); )

  รูปแบบข้อความ

  ขนาดตัวอักษร: 12px; ระบุขนาดตัวอักษร สามารถระบุเป็น พิกเซล เปอร์เซ็นต์ หรือ ems
  สี: #0000ff; ระบุสีแบบอักษร ในกรณีนี้ #0000ff สีน้ำเงิน คุณสามารถระบุคำได้ เช่น color: green; นั่นคือสีเขียว
  การตกแต่งข้อความ: ไม่มี; ลบขีดล่าง ใช้สำหรับลิงก์เพื่อลบขีดล่าง
  การแปลงข้อความ: ตัวพิมพ์ใหญ่; ทำให้ตัวอักษรทั้งหมดของข้อความเป็นตัวพิมพ์ใหญ่ แทนที่จะใช้ตัวพิมพ์ใหญ่ คุณสามารถเขียนความหมายอื่น และในทางกลับกัน ให้ขีดเส้นใต้หรือขีดทับบนหรือล่าง
  แบบอักษรน้ำหนัก: ตัวหนา; ทำให้แบบอักษรเป็นตัวหนา สามารถใช้ค่าอื่นแทนตัวหนาได้
  การจัดแนวข้อความ: ซ้าย; ตั้งค่าการจัดแนวข้อความ ในกรณีนี้ ไปทางซ้าย ไปทางด้านซ้ายของคอนเทนเนอร์ คุณสามารถตั้งค่าคอนเตอร์ ความสูงได้
  ข้อความเงา: 1px 2px 1px 0px #000000; สี: #f9f5ed; เงาสำหรับข้อความ

  ลักษณะคอนเทนเนอร์

  สีพื้นหลัง: #DCDCDC; กำหนดสีพื้นหลังให้กับคอนเทนเนอร์ ในกรณีนี้คือ #DCDCDC สีเทา
  ภาพพื้นหลัง: url (images/fon.jpg); ตั้งค่าภาพพื้นหลัง

  เส้นขอบ: 1px ทึบ #E8E8E8; จะกำหนดเส้นขอบ วลีทึบหมายถึงเส้นขอบทึบ #E8E8E8 คือสีของเส้นขอบ คุณสามารถระบุเส้นขอบแยกกันสำหรับแต่ละด้านได้ เช่น border-top: 2px solid #E8E8E8;
  รัศมีเส้นขอบ: 10px; เมื่อปัดเศษมุมของคอนเทนเนอร์ คุณสามารถตั้งค่าการปัดเศษที่แตกต่างกันในแต่ละมุม รัศมีเส้นขอบ: 2px 6px 10px 0px;
  กล่องเงา: #2C2C29 10px 10px 10px; ร่มเงาสำหรับภาชนะ

  ความกว้าง:926px; บ่งบอกถึงความกว้างของภาชนะ
  ความสูง: 240px; ความสูงของภาชนะ

  ลอย:ซ้าย; กดคอนเทนเนอร์ไปทางด้านซ้าย โดยค่าเริ่มต้นคอนเทนเนอร์จะเรียงตามลำดับ และหากคุณต้องการเรียงหลายบล็อก จะต้องตั้งค่าคุณสมบัติ float:left; และความกว้างความสูง: px; เพื่อให้พอดีกับความกว้างของคอนเทนเนอร์หลัก
  ลอย:ขวา; เหมือนกันแต่ภาชนะดันชิดขวา
  หากคุณต้องการสร้างคอนเทนเนอร์ไว้ตรงกลาง ให้ระบุความกว้างและระยะขอบเป็น avto เช่น: margin-left: auto; ขอบขวา: อัตโนมัติ; ความกว้าง: 150px;