Archive for February, 2007

เริ่มต้นด้วย Selectors

Selectors?
อธิบายง่ายๆก็คือ tag ธรรมชาติที่เราใช้ๆกัน ใน html นั่นเอง ในไฟล์ .css?เราจะเขียนเป็นรูปแบบ เช่น

body {
color:#000000;
font-size:14px;
}

หรือ

p {
color:red;
font-size:16px
}

รูปแบบจะเป็นแบบนี้ คือ tag { property : value ; } แต่ถ้ามีหลายๆ property ในบรรทัดสุดท้าย ไม่ต้องปิดด้วย ; ก็ได้ ให้ผลเหมือนกัน แต่ผมมักจะเขียน ; ทุกบรรทัดเพราะ กันพลาดนะครับ เมื่อกำหนดแบบนี้แล้ว text ที่อยู่ใน body ทั้งหมด จะเป็นสีดำ ฟ้อนต์ 14 และ ถ้าอยู่ใน <p>…..</p>จะเป็นสีแดง ขนาด 16

Related Articles

Share
Categories: กฎการเขียน CSS
Tags:

!DOCTYPE..อย่างไรกัน

เป็นแท็กที่มีลักษณะพิเศษ ต้องประกาศไว้ตอนต้นของเอกสาร โดยไม่้ต้องมีแท็กปิด (closing tag)
มีรูปแบบการใช้ 3 รูปแบบ คือ

STRICT
-ใช้เมื่อไฟล์เอกสารของคุณ เป็น xhtml css แท้ๆ

TRANSITIONAL
-แบบนี้ค่อนข้างยืดหยุ่นกว่า คุณสามารถใช้ css และ attribute ปกติแทรกใน tag ได้ เช่น <p align=”left”>

FRAMESET
-ใช้เมื่อหน้าเว็บของคุณมีการใช้ frame

**จำเป็นต้องประกาศ DOCTYPE ถ้าต้องการให้ผ่าน Validator

ตรวจสอบความถูกต้องของ xhtml ได้ที่ http://validator.w3.org/

Related Articles

มารู้จักกับ xhtml กันก่อน

??????? XHTML (Extensible HyperText Markup Language) มาตรฐานใหม่ เพราะว่า html แบบเดิมๆนั้น ไม่สามารถแสดงผลได้ตรงกันในทุก browser ได้นั่นเอง ทาง องค์กร W3C? จึงได้กำหนดมาตรฐานใหม่ เป็น xhtml โดยนำข้อดีของ xml และ html มารวมเข้าด้วยกัน และเพิ่มกฎเกณฑ์บางประการ ให้มีความเข้มงวดมากยิ่งขึ้น เพื่อให้เป็นมาตรฐานเดียวกัน และแสดงผลในทุก browser ได้อย่างถูกต้อง Read more…

Related Articles

10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS part2

6. Don?t worry about image borders
เลิกใช้ border=”0″ ในรูปภาพที่เป็น Link หากเราใช้ css จะง่ายกว่านั้นมาก

<style type="text/css">
    img { border : 0; }
</style>

<a href="#"><img src="/path/to/image.jpg" /></a>

7. Aligning text with form inputs
บ่อยครั้งที่เรา พิมพ์ข้อความ ถัดจากจาก ช่องกรอกข้อความ แต่มันไม่อยู่ในไลน์เดียวกัน วิธีง่ายๆที่จะจัดให้ช่องและข้อความอยู่ตรงกลาง ดังนี้

<style type="text/css">
    input, select { vertical-align : middle; }
</style>

Username: <input type="text" name="example" />

ตัวอย่างนี้อาจจะนึกไม่ออก ต้องลองใช้ดูนะครับ

Read more…

Related Articles