บทช่วยสอน CSS HTML มอง! รูปแบบและสี ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ลอง - ตัวอย่าง,วิธีการใช้ CSS,สไตล์แบบอินไลน์,HTML ตัวอย่างสไตล์ - สีพื้นหลัง,ตัวอย่าง,HTML สไตล์ตัวอย่าง - ตัวอักษรสีตัวอักษรขนาดตัวอักษร,ตัวอย่าง,HTML ตัวอย่าง Style - การจัดแนวข้อความ,ตัวอย่าง,สไตล์ชีตภายใน,สไตล์ชีตภายนอก,แท็กรูปแบบ HTML,แท็กและแอตทริบิวต์เลิก,

CSS HTML

(Cascading Style Sheets) CSS สำหรับการแสดงผล HTML องค์ประกอบรูปแบบแท็ก

มอง! รูปแบบและสี

จัดการข้อความ
สีกล่อง
และอื่น ๆ th.


ลอง»


ตัวอย่าง

ลอง - ตัวอย่าง

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

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

เชื่อมโยงไปยังสไตล์ชีตภายนอก
ตัวอย่างนี้แสดงให้เห็นว่า แท็กเชื่อมโยงไปยังสไตล์ชีตภายนอก


วิธีการใช้ CSS

ใน HTML 4, CSS ถูกนำมาใช้เพื่อให้ดีขึ้นทำให้องค์ประกอบ HTML แนะนำ

CSS สามารถเพิ่มเป็น HTML ในรูปแบบต่อไปนี้:

  • สไตล์แบบอินไลน์ - การใช้แอตทริบิวต์ "style" ในองค์ประกอบ HTML
  • แผ่นสไตล์ภายใน - ที่หัวของเอกสาร HTML <head> โดยใช้ element <style> จะมี CSS
  • อ้างอิงภายนอก - ใช้ไฟล์ CSS ภายนอก

วิธีที่ดีที่สุดคือผ่านการอ้างอิงไฟล์ CSS ภายนอก

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

คุณสามารถเว็บไซต์ CSS กวดวิชา, CSS กวดวิชา ที่จะเรียนรู้เพิ่มเติมความรู้ CSS


สไตล์แบบอินไลน์

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

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

เรียนรู้รูปแบบเพิ่มเติมกรุณาเยี่ยมชม CSS กวดวิชา


HTML ตัวอย่างสไตล์ - สีพื้นหลัง

พื้นหลังแอตทริบิวต์สีพื้นหลังสี (สีพื้น) กำหนดองค์ประกอบ:

ตัวอย่าง

< body style = " background-color:yellow; " > < h2 style = " background-color:red; " > 这是一个标题 </ h2 > < p style = " background-color:green; " > 这是一个段落。 </ p > </ body >

ลอง»

พื้นหลังในช่วงต้นแอตทริบิวต์สี (สีพื้น) คือการใช้ความหมาย bgcolor แอตทริบิวต์

ลองดู: เก่า HTML เพื่อตั้งค่าโหมดพื้นหลัง


HTML สไตล์ตัวอย่าง - ตัวอักษรสีตัวอักษรขนาดตัวอักษร

เราสามารถใช้ font-family (Font) สี (สี) และ font-size (ขนาดตัวอักษร) เพื่อกำหนดรูปแบบของคุณลักษณะตัวอักษร:

ตัวอย่าง

< h1 style = " font-family:verdana; " > 一个标题 </ h1 > < p style = " font-family:arial;color:red;font-size:20px; " > 一个段落。 </ p >

ลอง»

ตอนนี้ที่ใช้กันทั่วไป font-family (Font) สี (สี) และ font-size (ขนาดตัวอักษร) คุณลักษณะในการกำหนดรูปแบบข้อความแทนการใช้ <font> แท็ก


HTML ตัวอย่าง Style - การจัดแนวข้อความ

ใช้ text-align (การจัดตำแหน่งข้อความ) แอตทริบิวต์ระดับระบุแนวตั้งของข้อความ:

ตัวอย่าง

< h1 style = " text-align:center; " > 居中对齐的标题 </ h1 > < p > 这是一个段落。 </ p >

ลอง»

text-align text-align คุณสมบัติการเปลี่ยนป้ายเก่า <Center>

ความพยายาม


สไตล์ชีตภายใน

เมื่อไฟล์เดียวต้องใช้รูปแบบพิเศษที่คุณสามารถใช้สไตล์ชีตภายใน คุณสามารถ <head> ส่วนโดย <style> กำหนดแผ่นลักษณะภายใน:

<head>
<ชนิด style = "text / CSS">
body {สีพื้นหลัง: สีเหลือง;}
P {สี: สีฟ้า;}
</ style>
</ head>


สไตล์ชีตภายนอก

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

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


แท็กรูปแบบ HTML

标签 描述
<style> 定义文本样式
<link> 定义资源引用地址


แท็กและแอตทริบิวต์เลิก

ใน HTML 4, HTML แท็กรูปแบบการสนับสนุนองค์ประกอบเดิมที่กำหนดเองและคุณลักษณะที่ได้รับการคัดค้าน ป้ายเหล่านี้จะไม่สนับสนุนรุ่นใหม่ของแท็ก

ป้ายเลิก: <font> <Center> <ตี>

คุณลักษณะที่เลิกใช้สีและ bgcolor

CSS HTML มอง! รูปแบบและสี
10/30