พ.ย. 06 2013

องค์ประกอบของ css

By Support and has no comments yet.
มีอยู่ 3 ส่วนคือ 1.Selector 2.Properties 3.Values ซึ่งถ้าไม่มี 3ส่วนนี้ครบ ก็จะไม่สามารถทำงานได้   ตัวอย่างการใช้งาน css h1 { color:#000; } h1 คือ selector ว่าเราเลือก tag h1 ทั้งหมด color คือคุณสมบัติที่เลือก ในที่นี้เลือกสี #000 คือ Values คือค่าของตัว Properties ซึ่งในที่นี้มีค่าเป็นสีดำ   สรุปก็คือ กำหนดให้ tag h1 ทั้งหมดเป็นสีดำ  
Categories: CSS
ต.ค. 30 2013

CSS การกำหนดความกว้างของบรรทัด

By Support
กำหนดขนาดของบรรทัดโดยใช้คำสั่ง line-heigh เช่น #text-test1{ float:left; width:500px; height:200px; font-size:14px; font-family:Tahoma, Geneva, sans-serif; line-height:1.5em; } โดยคำสั่งนี้สามารถใช้หน่อยได้สองแบบคือ line-height:1.5em; และ line-height:20px; หน่อย em ก็คือ ขนาดจำนวนเท่า ส่วน px ก็คือ จำนวนความละเอียดของหน้าจอ
Categories: CSS
ต.ค. 29 2013

CSS การจัดการกับข้อความ

By Support
ในการทำเว็บไซต์ การจัด css ให้กับข้อความก็เป็นสิ่งที่จำเป็น เพื่อให้การจัดเรียงกันของตัวอักษร ขนาด สี เป็นไปตามที่นักพัฒนาต้องการ วันนี้เรามาดู คำสั่งในการจัดการกับข้อความกันครับ .text{ font-family: Tahoma; font-size: 18px; color:#000; font-weight:bold; line-height: 1; word-wrap:break-word; } จากโคดตัวอย่างด้านบน มาดูกันว่า แต่ละคำสั่ง ใช้กันอย่างไร คำสั่งแรก คือ font-family ใช้กำหนด ประเภทของ font ที่เราต้องการ font-size  ใช้กำหนด ขนาดของ font color  ใช้กำหนด สีของ font font-weight ใช้กำหนด ความหนาของ font สามารถกำหนดความหนาเป็น bold หรือเป็นค่า 100,200,... ได้ตามต้องการ line-height  ใช้กำหนด ความสูงระยะห่างของแต่ละบรรทัด word-wrap  ใช้กำหนด การทำงานในกรณีที่ข้อความในบรรทัดนั้นยาวเกินกว่าบล็อก ที่ครอบไว้แล้ว เราใช้ break-word ในการตัดคำเพื่อขึ้นบรรทัดใหม่  
Categories: CSS
ต.ค. 25 2013

วิธีการใส่เงาตัวหนังสือด้วย css3

By Support
ใน css3 จะมีคำสั่งที่ใช้ในการใส่เงาให้กับ ตัวหนังสือ คือคำสั่ง text-shadow วิธีใช้ เช่น <html> <head> <style> h1{ text-shadow:5px 5px 5px #000; } </style> </head> <body> <H1>TEST CSS TEXT SHADOW</H1> </body> </html> เป็นการใส่เงาให้กับตัวหนังสือที่อยู่ใน tag H1 ให้มีความหนา 5px เบลอ 5px เยื้องไปข้างหลัง 5px และสีของเงาคือ สีดำ(#000)
Categories: CSS
ต.ค. 24 2013

[Css] Margin กับ Padding ต่างกันอย่างไร

By Support
Margin คือการเลื่อนตำแหน่ง ของวัตถุ ไปตามที่เรากำหนด โดยเลื่อนไปทั้งวัตถุ เช่น .box { margin-left:50px; } ผลก็คือ tag ที่ใช้ class box จะถูกเลื่อนไปทางขวา 50px; นั่นเอง Padding คือการเลื่อนภายในวัตถุ โดยจะไม่เลื่อนตัววัตถุ เช่น .box{ padding-top:30px; } ผลก็คือ ภายใน tag ที่ใช้ class box จะถูกเลื่อนลงไป 30px; นั่นเอง   box
Categories: CSS
ธ.ค. 05 2012

การใส่ Tag H1 H2 H3 …. โดยไม่ขึ้นบรรทัดใหม่

By admin
เรื่องการใส่ Tag H1,H2,H3.... เพื่อหวังผล SEO นั้น สำหรับมือใหม่ที่เพิ่งหัดเล่น CSS นั้นอาจปวดหัวบ้าง เพราะใส่ Tag ไปแล้ว ทำให้ขึ้นบรรทัดใหม่ ไม่สวยงาม จัดตัวหนังสือยาก แต่ไม่ใช่เรื่องยากแต่อย่างใดครับ เพียงแค่ใส่โค้ดด้านล่างนี้ที่ CSS ของเราเท่านั้ัน display: inline;    
Categories: CSS
tags: