ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programming# อยากศึกษาวิธีใช้CSS ใช้ควบคุมfontง่ายๆ ใครอธิบายให้ทีครับ +1
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: # อยากศึกษาวิธีใช้CSS ใช้ควบคุมfontง่ายๆ ใครอธิบายให้ทีครับ +1  (อ่าน 1271 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
danisthai
สมุนแก๊งเสียว
*

พลังน้ำใจ: 47
ออฟไลน์ ออฟไลน์

กระทู้: 730



ดูรายละเอียด เว็บไซต์
« เมื่อ: 10 พฤศจิกายน 2012, 15:21:12 »

อยากศึกษาวิธีใช้CSS
โดยใช้ควบคุมfontง่ายๆ ใครว่างๆ รบกวนอธิบายให้ทีครับ +1
ทุกวันนี้เวลาแก้Fontต้องแก้ทีละบรรทัด   100กว่าบรรทัด  ตายห่า!
ขอบคุณครับ   wanwan017


ไปอ่านๆเจอมาบ้าง  แต่ก็ยังงงๆ    เวลาลิ๊งค์  ให้ลิ๊งค์แค่นี้มาใส่หน้าเว็บindex ใช่ไหมครับ?
โค๊ด:
<link href="css.css" rel="stylesheet" type="text/css" />

แล้วเราก็แค่ไปตั้งในcss.css ยังไงบ้างครับ   หรือว่าหาตัวอย่างมาใช้ได้เลยครับ
บันทึกการเข้า

smapan
Global Moderator
เจ้าพ่อบอร์ดเสียว
*****

พลังน้ำใจ: 643
ออฟไลน์ ออฟไลน์

กระทู้: 8,272



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 10 พฤศจิกายน 2012, 15:35:30 »



มีคนพยายามอธิบายเป็น VDO ครับ
ลองดูละกันครับ ถ้าไม่มืพื้นฐานเลย อธิบายลำบากครับ
บันทึกการเข้า

จูมล่าโฮส สยามโฮสเว็บ modty.com
รวมที่พัก เช่ารายวัน ที่พักเช่ารายเดือนมากที่สุดแจ่มจริง
***Tel 083-757-1515 ติดปัญหา Joomla ตรงไหนรับปรึกษาฟรี โทรมาเถอะครับ ถ้าตอบได้ช่วยแน่นอน ไม่มีกั้ก. ***
kungbest
สมุนแก๊งเสียว
*

พลังน้ำใจ: 86
ออฟไลน์ ออฟไลน์

กระทู้: 670



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 10 พฤศจิกายน 2012, 15:41:13 »

มีรูปแบบการใช้พื้นฐานอยู่ 3 แบบคับ

1. แบบอ้าง tag เช่น <a href="#">url</a> | <div></div>
อ้างถึง
a { color: #ff0000}
div { width: 100% }

2. แบบอ้าง id เช่น <a href="#" id="id1">url</a> | <div id="id2"></div>
อ้างถึง
#id1 { ... }
#id2 { ... }
**id สามารถใช้กับ tag ได้เพียง 1 เดียว

3. แบบอ้าง class เช่น <a href="#" class="class1">url</a> | <div class="class2"></div>
อ้างถึง
.class1 { ... }
.class2 { ... }
**class สามารถใช้กับ tag ได้หลาย tag

เพราะฉะนั้นถ้าต้องการแก้ css ครั้งเดียวแล้วมีผลกับหลายๆ tag จะต้องใช้ แบบที่ 1 หรือ แบบที่ 2 เท่านั้นคับ

 wanwan020
บันทึกการเข้า

goldxp
สมุนแก๊งเสียว
*

พลังน้ำใจ: 73
ออฟไลน์ ออฟไลน์

กระทู้: 557



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 10 พฤศจิกายน 2012, 16:04:48 »

วิธีการกำหนดขนาด font ครับ

การกำหนดเป็น px จะเป็นการกำหนดแบบตรงตัว
การกำหนดเป็น em จะเป็นการกำหนดโดยเปรียบเทียบกับขนาดปัจจุบันของ parent tag

css.css
โค๊ด:
body{
  font-size:12px; /* font-size เป็น inherit property ดังนั้นจะทำให้ tag ต่างๆ ที่อยู่ใน tag body มีขนาด 12px ครับ */
}
p{
  font-size:10px; /* <body>ขนาด 12px<p>ขนาดเปลี่ยนเป็น 10px</p></body> */
}
a{
  font-size:2em;
/*
<body>
<a>ขนาดจะมีขนาด 24px (เนื่องจากเทียบกับ body font-size)</a>
<p><a>ขนาดจะมีขนาด 20px (เนื่องจากเทียบกับ p font-size)</a></p>
</body>
*/
}
บันทึกการเข้า

danisthai
สมุนแก๊งเสียว
*

พลังน้ำใจ: 47
ออฟไลน์ ออฟไลน์

กระทู้: 730



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 10 พฤศจิกายน 2012, 16:33:48 »

เก็บๆ  wanwan017
บันทึกการเข้า

goldxp
สมุนแก๊งเสียว
*

พลังน้ำใจ: 73
ออฟไลน์ ออฟไลน์

กระทู้: 557



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 10 พฤศจิกายน 2012, 16:40:29 »

ขอบคุณสำหรับ พลังน้ำใจอันแรกของผมครับ  wanwan017

พลัง 1 แว้ว wanwan020
บันทึกการเข้า

danisthai
สมุนแก๊งเสียว
*

พลังน้ำใจ: 47
ออฟไลน์ ออฟไลน์

กระทู้: 730



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 10 พฤศจิกายน 2012, 16:41:20 »

วิธีการกำหนดขนาด font ครับ

การกำหนดเป็น px จะเป็นการกำหนดแบบตรงตัว
การกำหนดเป็น em จะเป็นการกำหนดโดยเปรียบเทียบกับขนาดปัจจุบันของ parent tag

css.css
โค๊ด:
body{
  font-size:12px; /* font-size เป็น inherit property ดังนั้นจะทำให้ tag ต่างๆ ที่อยู่ใน tag body มีขนาด 12px ครับ */
}
p{
  font-size:10px; /* <body>ขนาด 12px<p>ขนาดเปลี่ยนเป็น 10px</p></body> */
}
a{
  font-size:2em;
/*
<body>
<a>ขนาดจะมีขนาด 24px (เนื่องจากเทียบกับ body font-size)</a>
<p><a>ขนาดจะมีขนาด 20px (เนื่องจากเทียบกับ p font-size)</a></p>
</body>
*/
}

ผมสามารถCopyโค้ดนี้  มาวางได้เลยใช่ไหมครับ(วางระหว่างแท็กเปิดปิดBody)  รบกวนด้วยท่านเทพcss   wanwan017
บันทึกการเข้า

goldxp
สมุนแก๊งเสียว
*

พลังน้ำใจ: 73
ออฟไลน์ ออฟไลน์

กระทู้: 557



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 10 พฤศจิกายน 2012, 16:47:39 »

โค๊ด:
body{
  font-size:12px; /* font-size เป็น inherit property ดังนั้นจะทำให้ tag ต่างๆ ที่อยู่ใน tag body มีขนาด 12px ครับ */
}
p{
  font-size:10px; /* <body>ขนาด 12px<p>ขนาดเปลี่ยนเป็น 10px</p></body> */
}
a{
  font-size:2em;
/*
<body>
<a>ขนาดจะมีขนาด 24px (เนื่องจากเทียบกับ body font-size)</a>
<p><a>ขนาดจะมีขนาด 20px (เนื่องจากเทียบกับ p font-size)</a></p>
</body>
*/
}
โค้ดตรงนี้ใส่ไว้ในไฟล์ css.css ครับ เพิ่มต่อท้ายโค้ดเดิมก็ได้ครับ
บันทึกการเข้า

danisthai
สมุนแก๊งเสียว
*

พลังน้ำใจ: 47
ออฟไลน์ ออฟไลน์

กระทู้: 730



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 10 พฤศจิกายน 2012, 16:51:15 »

ขอบคุณครับ   ได้1วิธีละ  เดี๋ยวคืนนี้ลองดู  wanwan017
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์