[list][url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]CSS[/url] ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ [/list] หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ
[list]Tooltip คือ กล่องข้อความ สำหรับอธิบายรายละเอียดของข้อความ ที่มีขนาดสั้นหรือคลุมเครือยากต่อความเข้าใจ เป็นการซ้อนไว้ต้องนำเมาส์ไปชี้ถึงแสดง[/list]ข้อความได้
[b][color=#0000FF][size=110]Tooltips Class (คลาสของทูลทิปส์)[/size][/color][/b]
[list][b]w3-tooltip[/b] : The tooltip element โดย w3-tooltips จะแสดงข้อความที่ซ้อนในบรรทัดเดียวกันเลย
[b]w3-text[/b] : The tooltip text โดยถ้าใช้ร่วมกับ w3-tooltips จะทำให้ข้อความน่าสนใจมาขึ้น [/list]
[b][size=150][color=#0000BF]ตัวอย่างโค้ด[/color][/size][/b]
[b][list][color=#000080][size=120]รูปตัวอย่างก่อนนำเมาส์ไปชี้ของโค้ดรูปแบบที่ 1,2,3,4 และ 5[/size][/color][/list][/b]
[list][attachment=5]before.JPG[/attachment][/list]
[b][list][size=120][color=#000080]รูปแบบที่ 1[/color][/size][/list][/b]
[list][code]<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<p class="w3-tooltip">Nena <span class="w3-text w3-tag"><b>is very beautiful</b></span> is rich.</p>
</div>
</body>
</html> [/code][/list]
[list][b][size=110][color=#FF0000]ผลลัพธ์รูปแบบที่ 1[/color][/size][/b][/list]
[list][attachment=4]after.png[/attachment][/list]
[list][size=120][color=#000080]รูปแบบที่ 2[/color][/size][/list]
[list][code]<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<p class="w3-tooltip">Nena <span class="w3-text w3-tag"><b>is very beautiful</b></span> is rich.</p>
</div>
</body>
</html> [/code][/list]
[list][b][size=110][color=#FF0000]ผลลัพธ์รูปแบบที่ 2[/color][/size][/b][/list]
[list][attachment=3]after1.png[/attachment][/list]
[list][size=120][color=#000080]รูปแบบที่ 2[/color][/size][/list]
[list][code]<!DOCTYPE html>
<html>
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<p class="w3-tooltip">Nena <span class="w3-text w3-tag w3-red">is very beautiful</span> is rich.</p>
</div>
</body>
</html>[/code][/list]
[list][b][size=110][color=#FF0000]ผลลัพธ์รูปแบบที่ 3[/color][/size][/b][/list]
[list][attachment=2]after2.png[/attachment][/list]
[list][size=120][color=#000080]รูปแบบที่ 4[/color][/size][/list]
[list][code]<!DOCTYPE html>
<html>
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<p class="w3-tooltip">Nena <span class="w3-text w3-tag w3-round-xlarge">is very beautiful</span> is rich.</p>
</div>
</body>
</html> [/code][/list]
[list][b][size=110][color=#FF0000]ผลลัพธ์รูปแบบที่ 4[/color][/size][/b][/list]
[list][attachment=1]after3.png[/attachment][/list]
[list][size=120][color=#000080]รูปแบบที่ 5 เมื่อนำเมาส์มาชี้จะค่อยๆแสดงข้อความที่ซ้อนขึ้นมา[/color][/size][/list]
[list][code]<!DOCTYPE html>
<html>
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<p class="w3-tooltip">Nena <span class="w3-text w3-tag w3-animate-opacity">is very beatiful</span> is rich.</p>
</div>
</body>
</html> [/code][/list]
[list][b][size=110][color=#FF0000]ผลลัพธ์รูปแบบที่ 5[/color][/size][/b][/list]
[list][attachment=0]after4.png[/attachment][/list]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]
[color=#FF00BF][i]_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] , [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]CSS[/url] โดยสามารถศึกษาได้จากบทเรียน [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2127-php-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]PHP[/url] ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________[/color][/i]
[b][color=#FF0000]----------------------------------------------------------------------------------------------------------------------------------------------------------------[/color][/b]
Log in with LINE