# อยากศึกษาวิธีใช้CSS ใช้ควบคุมfontง่ายๆ ใครอธิบายให้ทีครับ +1

danisthai

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

ไปอ่านๆเจอมาบ้าง แต่ก็ยังงงๆ เวลาลิ๊งค์ ให้ลิ๊งค์แค่นี้มาใส่หน้าเว็บindex ใช่ไหมครับ?

โค้ด เลือก


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

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

smapan

http://www.youtube.com/watch?v=sI41XMV-ssE

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

kungbest

มีรูปแบบการใช้พื้นฐานอยู่ 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 เท่านั้นคับ

goldxp

วิธีการกำหนดขนาด 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

เก็บๆ

goldxp

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

พลัง 1 แว้ว

danisthai

อ้างถึงจาก: goldxp ใน 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> */ }

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

goldxp

โค้ด เลือก


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

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