เมื่อใดและเหตุใดจึงต้องใช้แท็กสไตล์นอก CSS สไตล์ชีต

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

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

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

การใช้สไตล์ชีตทั่วไป

ในเกือบทุกเว็บไซต์ในปัจจุบัน คุณจะเห็นการจัดรูปแบบดังนี้:

<link rel='stylesheet' id='divi-style-css'  href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />

หากคุณเป็นสมาชิก Elegant Themes ที่ใช้ Divi (คุณควรเป็น!) ที่เรียกสไตล์ชีตแบบเต็มที่ฉันใช้ตัวอย่างนี้มาจาก:

/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 3.0.40
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

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

แท็กสไตล์การใช้งานสมัยใหม่

แน่นอนว่าเว็บไซต์ของคุณมีสไตล์ชีต CSS แบบนั้น คุณจะใช้มัน คุณมี custom.css และ stylesheet.css และอาจมีมากกว่านั้น คุณทราบแล้วว่าเว็บไซต์ของคุณควรมีลักษณะอย่างไร และพอใจกับมัน

ทำไมคุณถึงต้องการแท็กสไตล์?

เนื่องจากสไตล์ชีตเป็นโซลูชันภาพรวม แท็กสไตล์คือโซลูชันขนาดเล็ก

ชีตจัดการลักษณะที่ปรากฏของไซต์ของคุณได้ดียิ่งขึ้น ไม่ใช่องค์ประกอบเฉพาะและไฮไลท์พิเศษ บางครั้งการใส่โค้ดแบบใช้ครั้งเดียวลงในสไตล์ชีตอาจได้ผลมากกว่าการใส่โค้ดแบบใช้ครั้งเดียวทิ้ง

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

อินสแตนซ์เดียวขององค์ประกอบ

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

ตัวอย่างเช่น หากคุณมีวิดเจ็ตแถบด้านข้างที่ต้องการแบบอักษรพิเศษ คุณ สามารถ ใส่ลงใน div ให้รหัส CSS แก่ div จากนั้นไปที่สเปรดชีตเพื่อรวมบางสิ่งง่ายๆ เช่น {font-family: “Exo” , Arial, sans-serif;} แต่นั่นเป็นปัญหามาก

ตัวเลือกที่ดีกว่าคือทำสิ่งนี้?

<div style="font-family: "Exo", Arial, sans-serif;" />

Bada-bing, bada-boom คุณทำเสร็จแล้วและวิดเจ็ตนั้นก็โดดเด่นเพราะเป็นเครื่องเดียวที่มีสไตล์เฉพาะนั้น (และใช่ ฉันตระหนักดีว่าการใช้แบบอักษรใหม่และแตกต่างกันอาจขัดแย้งกับส่วนที่เหลือของการออกแบบของคุณ แต่นี่เป็นเพียงตัวอย่าง)

หนึ่งหน้าง่าย

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

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

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

<style>
h2, h3, h4 {
  font-family: "Exo", Arial, sans-serif!important; 
  text-align: right; 
	font-size: 2rem; 
	color: blue;}
body, p {font-family: "Roboto", Arial, sans-serif!important; 
  font-size: 1.2rem; 
	color: red; 
	background: #000;}
	</style>

ประเด็นตรงนี้คือ HTML 5 นั้นยอดเยี่ยมเมื่อคุณเพิ่มแท็กสไตล์ลงในส่วนหัวของเว็บไซต์ของคุณ เพื่อให้คุณปรับแต่งสไตล์ชีตที่มีอยู่ได้ แม้ว่าในกรณีนี้ไม่จำเป็นต้องใช้แท็ก !important (ซึ่งแทบไม่มีเลย) ฉันรู้สึกราวกับว่านี่อาจเป็นครั้งเดียวที่จะใช้แท็ก !important เพราะพวกเขาจะไม่ทำให้เกิดแท็กสปาเก็ตตี้มากเหมือนคุณ (หรือ devs อื่น ๆ ) เริ่มทำงานบนไซต์เนื่องจากใช้กับหน้านี้เท่านั้น

ขนาดวิวพอร์ตหลายขนาด

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

แต่อีกครั้ง หากคุณมีหน้าเดียวหรือองค์ประกอบที่คุณต้องการให้ปรากฏแตกต่างออกไปหรือไม่ปรากฏเลยบนมือถือ (หรือความละเอียดเดสก์ท็อปที่เล็กกว่าหรือใหญ่กว่า) คุณสามารถทำได้ด้วยแท็กสไตล์ในส่วนหัว

<style>
@media (max-width: 767px) {

.white_text {
    color: #ffffff;
}

.blue_text {
    color: #cbe1f3;
}

.white_background {
    background-color: #ffffff;
}

.blue_background {
    background-color: #003663;
}

#email_form_a {
  display:none;
}
</style>

สไตล์และโปรไฟล์

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

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

คุณจะใช้แท็กสไตล์นอกสไตล์ชีต .css ได้อย่างไร คุณสามารถให้ข้อมูลเชิงลึกอะไรแก่ผู้คนได้บ้าง

ภาพขนาดย่อของบทความโดย Creative Thoughts / shutterstock.com