Upload
aislin
View
50
Download
0
Embed Size (px)
DESCRIPTION
Cascade Style Sheets (CSS). ตัวอย่างและการใช้งาน CSS. Contents. พื้นฐานก่อนเข้าสู่บทเรียน ปัญหาที่เกิดขึ้น แล้ว (CSS) จะช่วยแก้ปัญหาอย่างไร ? CSS คืออะไร ? CSS มาจากใคร ? CSS Attribute Structure เราใช้ CSS ในภาษา HTML อย่างไร ? The Span & Div tags. Style Definitions - PowerPoint PPT Presentation
Citation preview
Cascade Style Sheets (CSS)
ตั�วอย่�างและการใช้�งาน CSS
1
July 2009, Rev 0Athitha Chokananrattana
Contents พื้��นฐานก�อนเข้�าสู่��บทเร�ย่น
ปั�ญหาท�"เก#ดข้%�น
แล�ว (CSS) จะช้�วย่แก�ปั�ญหาอย่�างไร?
CSS คื�ออะไร?
CSS มาจากใคืร?
CSS Attribute Structure
เราใช้� CSS ในภาษา HTML อย่�างไร?
The Span & Div tags
Style Definitions
CSS selectors
Grouping & Inheritance
Classes
Applying a Class to an Element
Cascading Concept
Linking to an external Style Sheet
12 Quick CSS Effects
July 2009, Rev 0Athitha Chokananrattana
2
พื้��นฐานก�อนเข้�าสู่��บทเร�ย่น
ผู้��เช้�"ย่วช้าญในการออกแบบเว-บไซตั/: perfectionists
คืวามตั�องการให�เว-บไซตั/สู่ามารถเปั1ดได�ก�บท2กๆเว-บบราวเซอร/ <font size="2">
ผู้ลล�พื้ธ์/ท�"ได�ในแตั�ละเว-บบราวเซอร/ เหม�อนก�นหร�อไม�? Mozilla & Opera? vs. IE & NN?
สู่5าหร�บคืนท�"ม�ปั�ญหาเร�"องการมอง ตัาบอด ตัาบอดสู่� ห�หนวก ข้นาดข้องจอ ข้นาดข้องคืวามละเอ�ย่ดจอ คืวามเร-วเคืร�อข้�าย่ คืวามเร-วข้องซ�พื้�ย่� คืวามจ2ข้องแรม
การรองร�บก�บด#จ#ตัอลท�ว�, เกมสู่/, PDAs, WAP
July 2009, Rev 0Athitha Chokananrattana
3
ปั�ญหาท�"เก#ดข้%�น
ใช้�เวลานาน: การวางตั5าแหน�งข้องคื5า รวมไปัถ%งร�ปัภาพื้ การวางตัารางให�สู่มด2ล
การคื�นหาในเว-บ: การคื�นหาข้�อคืวาม ข้�อม�ลในเว-บ การร#งร�บก�บอ2ปักรณ์/เพื้�"อ
ช้�วย่อ�าน
July 2009, Rev 0Athitha Chokananrattana
4
แล�ว(CSS) ช้�วย่แก�ไข้ปั�ญหาอย่�างไร? (1)
CSS สู่ามารถคืวบคื2มในแตั�ละ elements โดย่การเข้�ย่นคืวบคื2มจากท�"ท�"เด�ย่ว:
<FONT style="font-size:12px">This font is size 12 pixels</FONT>
โดย่สู่ามารถท�"จะแย่กก�นระหว�างการแสู่ดงผู้ลและเน��อหาข้องเว-บ
July 2009, Rev 0Athitha Chokananrattana
5
แล�ว(CSS) ช้�วย่แก�ไข้ปั�ญหาอย่�างไร? (2)
กรณ์�ท�"ไม�ตั�องการให�เว-บบราวเซอร/ แสู่ดงการข้�ดเสู่�นใตั�ก�บข้�อคืวามเช้�"อมโย่ง แลตั�องการให�ข้�อคืวามท�เปั8นคื5าเช้�"อมโย่งเปั8นสู่�ด5า ลองพื้#พื้ม/ตัามน�� :
<a href=“info.htm" style="color:black; text-decoration:none;">Info</A>
มาท5าคืวามเข้�าใจก�บ CSS ก�น.
July 2009, Rev 0Athitha Chokananrattana
6
CSS คื�ออะไร?
CSS คื�อ ภาษา (language, or a micro-language )ซ%"งใช้�โดย่การเข้�ย่น TAG รวมตั�วเปั8นอ�นหน%"งอ�นเด�ย่วก�นก�บภาษา HTML
CSS ม�ร�ปัแบบการเข้�ย่นข้องตั�วเอง ไม�สู่ามารถใช้�ได�ก�บเว-บบราวเซอร/ร2 �นเก�าๆได� สู่ามารถท�"จะคืวบคื2มการแสู่ดงผู้ล ตั��งแตั� สู่� ข้นาด การจ�ดวางตั5าแหน�ง
ข้องภาษา HTML ได�
July 2009, Rev 0Athitha Chokananrattana
7
CSS มาจากใคืร?
การพื้�ฒนาปัร�บปัร2งมาตัรฐานข้อง CSS มาจาก World Wide Web Consortium (W3C) (pay them a visit at www.w3c.org)
โดย่มาตัรฐานในการแสู่ดงผู้ลน��น มาจากกล2�มข้องผู้��พื้�ฒนาเว-บบราวเซอร/ท��งหลาย่ ได�แก� Mozilla projects, Microsoft, Netscape, Opera, Chrome
July 2009, Rev 0Athitha Chokananrattana
8
CSS Attribute Structure (1)
ในตั�วอย่�างสู่��นๆ โคื�ดด�านล�างน��แสู่ดงให�เห-น 2 attributes (e.g. size, color) with values (e.g. 4px, #003366). ในแตั�ละ attribute จะปัระกอบด�วย่ property และ value ด�งตั�วอย่�าง:
<p style="color: #00FF00;
margin-left: 10px">...</p>
July 2009, Rev 0Athitha Chokananrattana
9
CSS Attribute Structure (2)
อ�กตั�วอย่�าง:
<P style="width: 50px; border-style: solid; border-width: 1px; border-color: black; padding: 5px"> Here's some words</P>
โคื�ดน��จะได�การแสู่ดงผู้ลเปั8นแบบใด?
July 2009, Rev 0Athitha Chokananrattana
10
CSS Attribute Structure (3)
The basic syntax for CSS is:
attribute: value;
such as:
font-weight: bold
color: #330033
With a semi-colon between pairs:
font-weight: bold; color: #330033
July 2009, Rev 0Athitha Chokananrattana
11
เราใช้� CSS ในภาษา HTML อย่�างไร? (1)
ใช้� CSS style โดย่เข้�ย่นรวมไปัก�บโคื�ดภาษา HTML โดย่ตัรง
โดย่ใช้� Attribute style="..." within the tag (just as you would use color="..." or href="...")and write your CSS between the quotes:
<tagname style=" … ">
Values</tagname>
July 2009, Rev 0Athitha Chokananrattana
12
เราใช้� CSS ในภาษา HTML อย่�างไร? (2)
An example of the style attribute in work with the H1 tag would be:
<H1 style=" … ">
Your text here</H1>
This method of applying a style to HTML is called inline styles, because the style attribute is in the tag it wants to apply itself to.
July 2009, Rev 0Athitha Chokananrattana
13
เราใช้� CSS ในภาษา HTML อย่�างไร? (3)
เราสู่ามารถใช้� style="..." ในท2กๆ syntax ข้องภาษา HTML ท�"ตั�องการท�"จะก5าหนดการแสู่ดงผู้ลโดย่ใช้� CSS โดย่การใสู่�ร�ปัแบบข้อง CSS ลงไปั เช้�น <p> <h1> <body> และอ�"นๆ
e.g. แตั�ไม�สู่ามารถท�"จะก5าหนด CSS บางตั�วได� เช้�นการก5าหนด margin ให�ก�บตั�วอ�กษร เพื้ราะว�า ล�กษณ์ะข้องตั�วอ�กษรไม�ได�ม�ล�กษณ์ะเปั8น blocks เหม�อนก�บ table เปั8นตั�น: <P>, <H1>, <H2> etc.
14
July 2009, Rev 0Athitha Chokananrattana
The Span & Div tags (1)
แตั�ในกรณ์�ท�"ตั�องการจ5าท5าการก5าหนดตั5าแหตั�งน��น จ%งตั�องม�การใช้� TAG เพื้�"อช้�วย่ให�ว�ตัถ2 หร�อข้�อคืวามม�ล�กษณ์ะเปั8น blocks จ%งจะสู่ามารถก5าหนดการแสู่ดงผู้ลได� ?
In 'traditional' HTML you would write this:
<FONT color="blue">
<B><I>… </I></B>
</FONT>
15
July 2009, Rev 0Athitha Chokananrattana
The Span & Div tags (2)
ใน CSS จะเข้�ย่น โคื�ด ด�งน�� :
style= "color: blue; font-weight: bold; font-style: italic"
But now you don’t need any of the block tags, where do you put the style="..."?
Could use any of these tags; but the favoured means is to use the “do nothing” span tag:
July 2009, Rev 0Athitha Chokananrattana
16
The Span & Div tags (3)
<SPAN style="color:blue; font-weight:bold; font-style:italic">...
</SPAN>
<SPAN> ไม�ได�ม�คืวามหมาย่เฉพื้าะเจาะจง เหม�อน TAG <b> แตั�ม�คืวามหมาย่ว�า สู่#"งท�"อย่��ภาย่ใน <span> คื�ออย่��ภาย่ในพื้��นท�"ข้องฉ�น ด�งน��นในตั�ว <span> จะสู่ามารถท�"จะจ�ด ช้#นข้วา ช้#ดบน จ�ดกลางได�
<DIV> เหม�อนก�นก�บ <SPAN> แตั� div จะเปั8นล�กษณ์ะ blocks ท�"เข้�มแข้-งกว�า
July 2009, Rev 0Athitha Chokananrattana
17
Style Definitions (1)
การก5าหนด Style Definitions น��นเปั8นการเข้�ย่นโคื�ด สู่�วนหน%"งในหน�าเว-บไซตั/ โดย่เน��อหาท�"เร�ย่นมาก�อนหน�าน�� เปั8นการเข้�ย่นโคื�ด CSS แทรกไปัภาย่ในเน��อหาข้อง HTML เราเร�ย่กว�า Inline Style Sheets
ซ%"งสู่ามารถท�"จะก5าหนดการแสู่ดงผู้ลในตั5าแหน�งตั�างๆท�"เราตั�องการได� แตั�ถ�าตั�องการก5าหนด CSS โดย่ให�ม�ผู้ลก�บหน�าเว-ย่น��นท��งหน�า เราจะตั�องแทรกโคื�ดลงไปัตัรงบร#เวณ์ TAG <HEAD> เพื้�"อก5าหนด CSS
July 2009, Rev 0Athitha Chokananrattana
18
Style Definitions (2)
ตั�วอย่�าง style definition:
a {
text-decoration: none; color: black;
font-family: Verdana; font-size: 12pt;
}
จะได�ผู้ลล�พื้ธ์/เปั8นอย่�างไร
July 2009, Rev 0Athitha Chokananrattana
19
CSS selectors (1)
A form of Style Definition used for mouse rollovers Supported by later browsers Can define a:link, a:active, a:hover, Simply applies the selected style when the corresponding
action is triggered (e.g. on it's own, when clicked on, on mouse over)
July 2009, Rev 0Athitha Chokananrattana
20
CSS selectors (2)
a:link { text-decoration: none;
color: black; font-weight: bold }
a:hover {text-decoration: underline; color: darkgreen
}
สู่#"งท�"ได�คื�อ ข้�อคืวามเช้�"อมโย่งจะเปั8นอ�กษรท�"ไม�ข้�ดเสู่�นใตั� สู่�ด5า เปั8นตั�วหนา และเม�"อเอาเม�าท/ ไปัวางท�บข้�อคืวามเช้�"อมโย่ง จะแสู่ดงเสู่�นใตั� และเปั8นสู่�เข้�ย่วเข้�ม
July 2009, Rev 0Athitha Chokananrattana
21
Grouping
ในบางคืร��งท�"ตั�องการให�หลาย่ๆ TAG แสู่ดงผู้ลเหม�อนก�น ก-สู่ามารถเข้�ย่นคื5าสู่�"งได�ภาย่ในคืร��งเด�ย่ว
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif
}
July 2009, Rev 0Athitha Chokananrattana
22
Inheritance
Selectors ท��งหมดสู่ามารถท�"จะถ�าย่ทอดคื2ณ์ล�กษณ์ะตั�อก�นไปัได� โดย่จะเอาคื2ณ์ล�กษณ์ะ และคื�า จ2ถ�าย่ทอดจาก TAG แม�ไปัสู่�� TAG ล�ก
e.g. กรณ์�ท�"ก5าหนดสู่�ตั�วอ�กษรท�" TAG <BODY> เปั8นสู่�เข้�ย่ว ภานใน <BDDY> ตั�วอ�ษรท��งหมดก-จะเปั8รสู่�เข้�ย่ว รวมไปัถ%งใน <P> <TABLE> หร�ออ�"นท�"ไม�ได�ม�การก5าหนด เพื้#"อมเตั#ม ก-จะเปั8นเหม�อ�นก�บท�" TAG <BODY> ก5าหนด
July 2009, Rev 0Athitha Chokananrattana
23
Classes (1)
ม� 2 ว#ธ์�ในการก5าหนด Styles ว#ธ์�แรกคื�อการแทรกไปัใน HTML tag
e.g. <body>, <p>, <font> <a>
ว#ธ์�ท�"สู่อง สู่ร�างร�ปัแบบตัามท�"เราตั�องการ e.g. ถ�าเราตั�องการการแสู่ดงผู้ลแบบพื้#เศษ ท�"จะตั�องการใช้�ก�บหลาย่ๆ TAG แตั�
อาจจะไม�จ5าเปั8นตั�องแสู่ดงเหม�อนก�นหมด เช้�น <h2> บางตั5าแหน�งอย่ากให�แสู่ดงเปั8นล�กษณ์ะห�วข้�อข้�าวแบบพื้#เศษ แตั�ไม�ตั�องการท2กตั5าแหน�ง เราจะท5าอย่�างไร
ด�งน��นเราอ�จจะ5าหนด ห�วข้�อ <h2> ในร�ปัแบบท�"เราก5าหนดเอง แตั�ก-จะใช้�ช้�"อ h2 ไม�ได� เพื้ราะม�นก-จะไปัซ5�าก�น จ%งตั�องตั��งข้�"อใหม� เช้�น h2modify การตั��งช้�"อ new style เร�ย่กว�า ’h2modify'. และการเข้�ย่นในล�กษณ์ะน��จะเร�ย่กว�า class.
July 2009, Rev 0Athitha Chokananrattana
24
Classes (2)
The definition for this subhead would be:
<style>
<!--
. h2modify { font-family: Arial; color: #0066CC;
font-size: 18pt }
-->
</style>
July 2009, Rev 0Athitha Chokananrattana
25
Classes (3)
คื5าเตั�อน '.' การใสู่�จ2ด หน�า style name? การใสู่� จ2ด เปั8นอ�กษระพื้#เศษท�"ท5าให�เว�บบราวเซอร/ จดจ5าคื5าเหล�าน��นเปั8นพื้#เศษ
ว�าคื5าน��นไม�ใช้� TAG ในภาษา HTML แตั�เปั8นคื5าท�"ม�การก5าหนดคื�าบางอย่�างไว�
July 2009, Rev 0Athitha Chokananrattana
26
Applying a Class to an Element (1)
Surprisingly enough, it's done through the class=" … " attribute. For example:
.warning { color: lime; background: #ff80c0 }
… used in HTML with the CLASS attribute …
<h1 CLASS="warning">STOP!</h1>
July 2009, Rev 0Athitha Chokananrattana
27
Applying a Class to an Element (2)
ในตั�วอย่�าง warning class สู่ามารถท�"จะปัระย่2กตั/ใช้�ได�ก�บท2กๆ element ข้อง TAG <body> ซ%"งการแสู่ดงผู้ลก-จะไปัสู่�มพื้�นธ์/ก�บ CSS
ในสู่�วนข้อง จ2ด จะใสู่�เฉพื้าะตัอนท�"ก5าหนดคื�าเท�าน��น ใย่ข้ณ์ะท�"เร�ย่กใช้�น��น ไม�ตั�องใสู่�จ2ด
July 2009, Rev 0Athitha Chokananrattana
28
Applying a Class to an Element (3)
เราสู่ามารถก5าหนด CSS แบบเฉพื้าะเจะจงลงไปัอ�ก เช้�น
p.news {
font-weight: bolder;
color: red; background: white
}
จากตั�วอย่�างจะพื้บว�า สู่ามารถเร�ย่กใช้� class news โดย่จะตั�องใช้�คื��ก�บ tag <p> จ%งจะได�การแสู่ดงผู้ลตัามท�"ก5าหนดไว� ถ�าใช้�ร�วมก�บ tag อ�"นจะไม�แสู่ดงผู้ล
July 2009, Rev 0Athitha Chokananrattana
29
Applying a Class to an Element (4)
<p class="news">Due to the recent traffic crisis in Galway city, the Government have decided to abolish the road taxes, and instead introduce rent.</p>
The next example will not work: the news class only works with the <p> tag
<h1 class="news">STOP!</h1>
July 2009, Rev 0Athitha Chokananrattana
30
Cascading Concept (1)
Cascading Concept เปั8นล�กษณ์ะโคืรงสู่ร�างตั�นไม� กล�าวคื�อม�ล5าด�บคืวามสู่5าคื�ญในการแสู่ดงผู้ล กล�าวคื�อ หากม�การก5าหนด CSS หลาย่ระด�บ เช้�น ในระด�บ inline คื�อแทรกในโคื�ด และระด�บ internal คื�อแทรกไว�ท�" <head>
คื5าถามท�"ตัามมาคื�อ การแสู่ดงผู้ลน��นจะเปั8นไปัตัาม inline หร�อ internal
July 2009, Rev 0Athitha Chokananrattana
31
Cascading Concept (2)
ย่กตั�วอย่�าง The <p> tag as: black 12px Arial A .link class as: blue Verdana
ลองด�ท�"โคื�ดน��:
<p>For a more info,
<a href="...” class="link"
style="color: green">click here</a>
or else </p>
คื5าว�า click here จะเปั8นอย่�างไร
July 2009, Rev 0Athitha Chokananrattana
32
Cascading Concept (3)
สู่#"งท�"เก#ดข้%�นคื�อ คื5าว�า click here จะเปั8นสู่�เข้�ย่ว
เหตั2ผู้ลเพื้ราะว�า ล5าด�บคืวามสู่5าคื�ญข้องการแสู่ดงผู้ลน��น 1. Inline
2. Internal
3. External
4. Web browser default
This may seem difficult, but in practice it isn't, and makes good sense Plus it gives great flexibility to the designer to manipulate elements
at any stage
So go forth and use it!
July 2009, Rev 0Athitha Chokananrattana
33
Linking to an external Style Sheet (1)
ในการสู่ร�าง css แบบ internal น��น จะสู่ามารถท�"จะก5าหนดการแสู่ดงผู้ลในไฟล/น��นๆ ได�เพื้�ย่งไฟล/เด�ย่ว แตั�ในเว-บไซตั/น��น ม�ไฟล/เปั8นสู่#บๆ หร�อมากกว�าร�อย่ไฟล/ การแทรก CSS ท�"แตั�ละไฟล/น��น ก-อาจจะท5าให�ย่2�งย่ากในการคืวบคื2ม
เราคืงไม�ตั�องการท�"จะตั�องแก�ไข้ CSS ท��งร�อย่ไฟล/ ด�งน��นจ%งม�อ�กร�ปัแบบคื�อแบบ external
34
July 2009, Rev 0Athitha Chokananrattana
Linking to an external Style Sheet (2)
CSS สู่ามารถท�"จะท5าให�เราสู่ร�าง style sheet โดย่ท�"สู่ามารถท�"จะไปัคืวบคื2มหน�าเว-บท2กไฟล/ ได�
ซ%"งจะท5าให�การคืวบคื2มการแสู่ดงผู้ลข้องหน�าเว-บท��งหมดอย่��ท�"ท�"เด�ย่ว
July 2009, Rev 0Athitha Chokananrattana
35
Linking to an external Style Sheet (3)
การเช้�"อมโย่งไปัย่�งไฟล/ style sheet, สู่าสู่ารถท5าได�โดย่การก5าหนด โคื�ดในสู่�วนข้อง <header>:
<LINK
REL="stylesheet"
TYPE="text/css"
HREF="style.css">
July 2009, Rev 0Athitha Chokananrattana
36
Linking to an external Style Sheet (4)
This creates a link between our webpage and the style sheet, and all styles in the style sheet are adopted for the current webpage.
It is important to know that external Style Sheets can only contain CSS specific mark-up. In otherwords, it CANNOT contain any HTML, only what you would normally place in the head section when defining styles.
July 2009, Rev 0Athitha Chokananrattana
37
Sample Style Sheet (1)
/* This is a comment */
a { font-family: Verdana; font-size: 10pt;
color: #0000FF; text-decoration: none }
a:visited { color: #0000FF;
text-decoration: none }
a:hover { color: #0000FF;
text-decoration: underline }
a:active { color: #FF8000 }
July 2009, Rev 0Athitha Chokananrattana
38
Sample Style Sheet (2)
body { font-family: Verdana; font-size: 10pt; font-style: normal; font-weight: normal; color: #000000; background-color: #FFFFFF }
td { font-family: Verdana; font-size: 10pt; font-style: normal; font-weight: normal; color: #000000; background-color: #FFFFFF }
h1 { font-family: Verdana, "Times New Roman", Times, serif; font-size: 9px; color: #666666 }
July 2009, Rev 0Athitha Chokananrattana
39
12 Quick CSS Effects (1)
Control your text size Ever get really miffed that setting <FONT
size="n"> for your text never properly controls the result? And moreover, the sizes 1, 2, 3, 4 and so on don't leave much room for precision. The CSS font-size property offers far more control. Try this:
<p style="font-size: 12px">Put your text in here</p>
July 2009, Rev 0Athitha Chokananrattana
40
12 Quick CSS Effects (2)
Format all your text in one fell swoop Why mess up your HTML applying font tags to
every line of body text? This style rule should do for just about every line of body text you use:
p { font: normal 11px
Verdana, Arial, Helvetica, sans-serif }
td { font: normal 11px Verdana, Arial, Helvetica, sans-serif }
July 2009, Rev 0Athitha Chokananrattana
41
12 Quick CSS Effects (3)
Centralise your heading styles Now you can set up sub-styles for headings,
subheadings and so on in just one place - so you can reformat the whole lot by changing just one line. Add this to your style sheet:
.subhead { font-size: 14px; font-weight: bold; }
Then for the subhead, write:
<p class="subhead">Subhead in here</p>
July 2009, Rev 0Athitha Chokananrattana
42
12 Quick CSS Effects (4)
Get clever with links The default behaviour for links - underlined and
turning red on rollover in IE isn't to every designer's taste.
a { color: #003366; text-decoration: none }
a:hover { color: white; background-color: #003366 }
Now there's no underline, but the links have a blue-green background colour when you roll over.
July 2009, Rev 0Athitha Chokananrattana
43
12 Quick CSS Effects (5)
Create text margins Margins are a nightmare to create in old HTML,
fiddling about with tables and never quite knowing how the widths are going to turn out. Forget it: turn to CSS instead:
<p style="margin-left: 10px">...</p>
Simple, eh?
July 2009, Rev 0Athitha Chokananrattana
44
12 Quick CSS Effects (6)
Funky IE cursor effects In Internet Explorer, you can change the cursor
that appears when you roll over a link - or indeed, images, text and so on that don't have links. How? Try this style rule:
a { cursor: crosshair }
Alternatives to crosshair include hand, text, help, wait, and various resize options: n-resize (for a North angle), ne-resize (for Northeast), and so on.
July 2009, Rev 0Athitha Chokananrattana
45
12 Quick CSS Effects (7)
Juicy quote Ever wanted to have tempting
quotes appearing in large italics through the main text of your articles (or callouts as they call them in the magazine business)? No probs. Just put this before a <P> tag:
<DIV style="
width: 130px;
float: right;
color: maroon;
font-size: 18px;
font-style: italic;
font-weight: bold">
"Here's your juicy quote" </div>
July 2009, Rev 0Athitha Chokananrattana
46
12 Quick CSS Effects (8)
Designer forms Web forms look pretty
dull in the default scheme of things, but you can easily style them up a bit with CSS. It only works in IE and Netscape after V6, but it's well worth it.
The effect appears as a black form input field and the text comes out white.
<FORM><INPUT type="text" name="textfield" style="
color: white; background-color: black;
font: 11px Verdana,Helvetica" value="Enter your keywords" size="30"></FORM>
July 2009, Rev 0Athitha Chokananrattana
47
12 Quick CSS Effects (9)
Form sizes Another form-related stroke of CSS genius: if you
test your work on all the browsers and platforms, you'll find it's nigh on impossible to get the widths of inputs, dropdowns and so on the same for all viewers - which is a pain if you're after well-spaced design. You can take 95 per cent control of this using the width CSS property, which works on forms for IE, and using the traditional size="" for NS:
<INPUT type="text" style="width: 200px" size="30">
July 2009, Rev 0Athitha Chokananrattana
48
12 Quick CSS Effects (10)
Enter keywords... Not really CSS this, but while we're on forms, here's
a useful JavaScript trick that people always ask about: how to include words in a form field, such as 'Enter keywords', which clear when they click in the space. Simple:
<INPUT type="text" name="textfield" value="Enter your keywords" onfocus="this.value=''" size="30">
(After this.value=, that's two single quotes followed by a double quote)
July 2009, Rev 0Athitha Chokananrattana
49
12 Quick CSS Effects (11)
Cool scrollbars Did you know that in IE
you can change the colours of the scollbars at the right and bottom of your page? Pretty cool.
Twiddle the colour # references to suit yourself.
body {
scrollbar-face-color: #2A314C;scrollbar-shadow-color: #2A314C;
scrollbar-highlight-color: #2A314C;
scrollbar-3dlight-color: #9AB6C4;
scrollbar-darkshadow-color: #20253A;
scrollbar-track-color: #20253A; scrollbar-arrow-color: #CCCCCC
}
July 2009, Rev 0Athitha Chokananrattana
50
12 Quick CSS Effects (12)
Background control People often ask about how the pros
create the effect where you have a background graphic which doesn't tile and repeat; or which doesn't move when you scroll the page. The answer, of course, is using CSS, and here it is:
body {
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed
}
- Replace background.gif with the URL of the image.
- background-repeat can be no-repeat, repeat, repeat-x or repeat-y. Attachment can by fixed or scroll.
July 2009, Rev 0Athitha Chokananrattana
51
That's it folks!
That’s more or less it as regarding CSS!
www.w3schools.com
Any Questions—after workshop!
July 2009, Rev 0Athitha Chokananrattana
52