How does css write?
The < style > tag in HTML is the tag used for assigning style to HTML elements using CSS (Cascading Style Sheets). It is a container for inserting CSS rules to be applied to various elements in a web page. Generally speaking, the < style > tag is placed in the < head > section of the HTML document to ensure that the style is applied when the web page loads.
< style > tag implementation:
Defines style:
Within the < style > tag, you can write CSS rules to define various characteristics of HTML elements such as color, font size, spacing, background, etc.
Formatting web pages:
The < style > tag allows you to control the formatting of web pages thoroughly, using CSS to determine the various characteristics of HTML elements.
Placement:
Generally, the < style > tag is located in the < head > section of the HTML document to ensure that the style is loaded before the content of the page.
Example:
Code
< head >
< style >
H1 {
Color: blue;
Text-align: center;
}
p {
font-size: 16px;
}
< / style >
< / head >
< body >
< h1 > topic < / h1 >
< p > paragraph < / p >
< / body >
In this example, the < style > tag requires that < h1 > be blue and centered, and p has a font size of 16px.
Importance of < style > tags:
Separation of structure and style:
The use of < style > tags separates structure (HTML) and style (CSS) assignments, which makes the code tidy and easy to maintain.
Re-adoption:
You can apply the CSS rules defined in the < style > tag to other HTML elements multiple times.
Style management:
It allows you to effectively manage the style of web pages, combining all styles in one place.
ถ้าเพิ่งเริ่มหัดทำเว็บ แล้วสงสัยว่า “css เขียนอย่างไร” แบบไม่อยากแยกไฟล์ก่อน วิธีที่ง่ายสุดคือเขียน CSS ไว้ในแท็ก <style> ภายในไฟล์ HTML เลย ซึ่งส่วนใหญ่จะวางไว้ใน <head> เพื่อให้สไตล์โหลดก่อนหน้าเว็บแสดงผล ทำให้หน้าไม่กระพริบ/เปลี่ยนสไตล์ทีหลัง 1) โครงสร้างพื้นฐานของ html style เวลาเขียนจะหน้าตาประมาณนี้ <head> <style> /* เขียนกฎ CSS ที่นี่ */ </style> </head> สิ่งที่ควรจำคือ ใน <style> ไม่ต้องใส่แท็ก HTML อื่นๆ แทรก และควรคอมเมนต์ด้วย /* */ (ไม่ใช่ <!-- -->) 2) css style เขียนกฎยังไงให้ถูก CSS จะประกอบด้วย “selector” + “{ property: value; }” เช่น h1 { color: blue; text-align: center; } หมายถึงเลือกแท็ก h1 ทุกตัว แล้วทำให้ตัวอักษรเป็นสีน้ำเงินและจัดกึ่งกลาง 3) ตัวอย่างที่เจอบ่อย: ปรับขนาดตัวอักษรและระยะห่าง p { font-size: 16px; line-height: 1.6; margin: 0 0 12px; } อันนี้ช่วยให้อ่านย่อหน้าได้สบายขึ้น (ฉันใช้บ่อยมากเวลาเขียนบทความ/หน้าแนะนำ) 4) เลือกแบบ class และ id (แนะนำเวลาหน้าเริ่มยาว) ถ้าไม่อยากให้ทุก p ถูกเปลี่ยนเหมือนกัน ให้ใช้ class .highlight { background: #fff3b0; padding: 8px; } แล้วไปใส่ใน HTML ว่า <p class="highlight">...</p> ส่วน id จะใช้กับองค์ประกอบที่มีชิ้นเดียวในหน้า เช่น #mainTitle { color: blue; } 5) วาง <style> ตรงไหนถึงเหมาะ - วางใน <head>: เหมาะสุดสำหรับหน้าเดียว/ทดลองโค้ด - ถ้า CSS เยอะ: ควรแยกเป็นไฟล์ .css แล้วใช้ <link rel="stylesheet" href="style.css"> (ดูแลง่ายกว่า) 6) ทริคเล็กๆ ที่ช่วยลดพลาด - อย่าลืมปิดวงเล็บปีกกา } และใส่ ; หลังค่าแต่ละบรรทัด - ถ้า style ไม่ทำงาน ให้เช็กสะกด selector (h1 กับ .h1 คนละความหมาย) - ลองเปิด DevTools (Inspect) ดูว่ากฎไหนถูก override อยู่ สรุปคือ tag <style> เป็นวิธีเขียน style css ที่เร็วและตรงไปตรงมาสำหรับเริ่มต้น โดยเฉพาะตอนฝึกปรับสี (color), ขนาดตัวอักษร (font-size) และการจัดวาง (text-align/margin) พอเริ่มใช้จริงหลายหน้า ค่อยย้ายไปไฟล์ CSS แยกจะทำให้จัดการง่ายขึ้นมาก