อยากศึกษาวิธีใช้CSS
โดยใช้ควบคุมfontง่ายๆ ใครว่างๆ รบกวนอธิบายให้ทีครับ +1
ทุกวันนี้เวลาแก้Fontต้องแก้ทีละบรรทัด 100กว่าบรรทัด ตายห่า!
ขอบคุณครับ :wanwan017:
ไปอ่านๆเจอมาบ้าง แต่ก็ยังงงๆ เวลาลิ๊งค์ ให้ลิ๊งค์แค่นี้มาใส่หน้าเว็บindex ใช่ไหมครับ?
<link href="css.css" rel="stylesheet" type="text/css" />
แล้วเราก็แค่ไปตั้งในcss.css ยังไงบ้างครับ หรือว่าหาตัวอย่างมาใช้ได้เลยครับ
http://www.youtube.com/watch?v=sI41XMV-ssE
มีคนพยายามอธิบายเป็น VDO ครับ
ลองดูละกันครับ ถ้าไม่มืพื้นฐานเลย อธิบายลำบากครับ
มีรูปแบบการใช้พื้นฐานอยู่ 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:
วิธีการกำหนดขนาด 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>
*/
}
เก็บๆ :wanwan017:
ขอบคุณสำหรับ พลังน้ำใจอันแรกของผมครับ :wanwan017:
พลัง 1 แว้ว :wanwan020:
อ้างถึงจาก: 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 :wanwan017:
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 ครับ เพิ่มต่อท้ายโค้ดเดิมก็ได้ครับ
ขอบคุณครับ ได้1วิธีละ เดี๋ยวคืนนี้ลองดู :wanwan017: