lab#5
TRANSCRIPT
Lab#5 Style and Selector 322432 Web Design Technology
CSS Basic
Single Source of HTML
CSS Style Sheet
Web Browser
Other Media
Print Output
FormaAng data for mulBple desBnaBon
Server Clients
CSS Syntax
selector { property:value } selector { property1:value1; property2:value2 }
วิธีใช้งาน Style Sheet
1. Inline Styles วิธีการนี้ควรใชในกรณีที่ตองการกำหนด style ใหกับ element ของ HTML พียงอันเดียวเปนการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยูในคำสั่ง style="" ดังนี้
<Tag style="property:value;">
<p style="color:black; font-family:Arial; font-weight:bold”>ตัวอยางขอความ</p>
2. Internal Style Sheet
วิธีการนี้ควรใชในกรณีที่มีเพียง HTML ไฟลเดียวที่ใช style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ใหกับ HTML Tag ใดๆ แลว จะมีผลกับเอกสาร HTML ทั้งหนา นิยมใสสวนของคำสั่ง Style Sheet ไวระหวาง
<head>...</head>
<style type="text/css"> <!--selector {property1: value1; property2: value2}... --> </style>
3. External Style Sheet
<link rel="stylesheet" type="text/css" href="URL ไฟล์.css">
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body>
Example
CSS Selector
• Descendant Selector • Parent-‐Child Selector • Adjacent Selector • AZribute Selector
1. Descendant Selector
li em { color: green; }
แบบนี้จะเลือกทุก ๆ em ที่อยู่ภายใต ้li โดยเลือกทั้งหมดไม่ว่า em จะซ้อนด้วยแท็กอื่นอีกที ขอแค่ให้มี li ครอบอยู่ก่อนหน้านั้น <ul> <li>Item One</li> <li>Item <em>two</em></li> </ul> <p>An <em>italicized</em> words.</p>
?
2. Parent-‐Child Selector
body > p { font-‐weight: bold; }
แบบนี้จะเลือกเฉพาะ p ที่เป็น element ลูกโดยตรงของ body ไม่นับพวกที่โดนซ้อนอยู่อีกโดย tag อื่น
<body> <div class="sidebar"> <p id="para1">This is the sidebar.</p> </div> <p id="para2">Welcome to the web site! Here's a list</p> <ul> <li> <p id="para3">This is the first paragraph in the list. It's also the last.</p> </li> </ul> </body>
3. Adjacent Selector
h1+h2 { margin-‐top: 11px; }
จากตัวอย่างเป็นการบอกให้ h2 ตัวแรกที่อยู่ติดกับ h1 มีช่องว่างด้านบน 11 px
<h1>This is important stuff!</h1> <h2>First important item</h2> <h2>Second important item</h2>
จากตัวอย่าง แท็ก h2 บรรทัดที่ 2 จะห่างจาก h1 ขนาด 11 px แต่จะไม่มีผลกับ h2 ในบรรทัดที่สาม
4. AZribute Selectors
selector แบบที่ 4 นี้จะคล้ายกับการเขียนโปรแกรม โดยมีรูปแบบดังนี้ 1. [attribute] จะเข้าเงื่อนไขคือกําหนด attribute ทั้งหมด
2. [attribute="value"] จะเข้าเงื่อนไขเมื่อมีการกําหนดค่าให้กับ attribute
3. [attribute~="value"] คือ attribute ใด ๆ ที่มีคําตรงกับค่าที่กําหนด จากการเว้นช่องว่าง
4. [attribute|="value"] คือ attribute ใด ๆ ที่มีคําตรงกับค่าที่กําหนด โดยใช้เครื่องหมายคําพูด
4. AZribute Selectors
input[type="text"] { color: white; background-‐color: black; }
ถ้าต้องการให้ textbox (<input type=”text” />) มีตัวอักษรสีขาว และพื้นหลังเป็นสีดํา
Selector ที่เป็น Class aZribute
การประกาศใชเครื่องหมาย "." นำหนาชื่อ class .topic {color:red;
font-‐family:Arial; font-‐weight:bold; text-‐align:center; }
<div class="topic”>ชื่อเรื่อง</div> <p class="topic”>หัวขอ</p>
p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center }
Selector ที่เป็น ID aZribute
เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ใหกับ HTML element ผาน ID attribute เหมือนกับ Class แตตางกันที่ ID จะใชกับ element ที่มีเพียงอันเดียวในเอกสาร HTML การประกาศใช # นำหนา ID
#chapter {color:red; font-‐weight:bold}
<p id="chapter">Chapter ขอความในนี้จัดวางกึ่งกลาง และเปนสีแดง ตัวหนา</p>
CSS3 Selector
a[href$=.“.pdf”] //ตัวอยาง ลิ้งคเพื่อเรียกไฟล Adobe Acrobat ได
Child Selector
:first-child เปน Selector สำหรับจัดรูปแบบใหกับ Child เชน ul :frist-child // จัดรูปแบบใหกับ text child .book :first-child { color: #F33F00; }
Lab#5 Style and Selectors คำสั่ง กำหนดขอมูลให ขาวมา 2 เรื่อง ใหใช CSS จัดรูปแบบขอมูลใหสวยงาม โดยจะใหโจทยในชั่วโมงเรียน คะแนนเต็ม 10 คะแนน เกณฑในการใหคะแนนความสวยงาม และเทคนิควิธีที่ใช สงงานเขา LMS โดยหากมีไฟลรูปภาพที่โหลดมาเองใหใสมาใน
โฟลเดอรดวย
