1 / 52

Cascade Style Sheets (CSS)

Cascade Style Sheets (CSS). ตัวอย่างและการใช้งาน CSS. Contents. พื้นฐานก่อนเข้าสู่บทเรียน ปัญหาที่เกิดขึ้น แล้ว (CSS) จะช่วยแก้ปัญหาอย่างไร ? CSS คืออะไร ? CSS มาจากใคร ? CSS Attribute Structure เราใช้ CSS ในภาษา HTML อย่างไร ? The Span & Div tags. Style Definitions

aislin
Télécharger la présentation

Cascade Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Athitha Chokananrattana Cascade Style Sheets (CSS) ตัวอย่างและการใช้งาน CSS

  2. Athitha 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

  3. Athitha Chokananrattana พื้นฐานก่อนเข้าสู่บทเรียน • ผู้เชี่ยวชาญในการออกแบบเว็บไซต์: perfectionists • ความต้องการให้เว็บไซต์สามารถเปิดได้กับทุกๆเว็บบราวเซอร์ • <font size="2"> ผลลัพธ์ที่ได้ในแต่ละเว็บบราวเซอร์ เหมือนกันหรือไม่? Mozilla & Opera? vs. IE & NN? • สำหรับคนที่มีปัญหาเรื่องการมอง ตาบอด ตาบอดสี หูหนวก ขนาดของจอ ขนาดของความละเอียดจอ ความเร็วเครือข่าย ความเร็วของซีพียู ความจุของแรม • การรองรับกับดิจิตอลทีวี,เกมส์, PDAs, WAP

  4. Athitha Chokananrattana ปัญหาที่เกิดขึ้น • ใช้เวลานาน: • การวางตำแหน่งของคำ รวมไปถึงรูปภาพ • การวางตารางให้สมดุล • การค้นหาในเว็บ: • การค้นหาข้อความ ข้อมูลในเว็บ การริงรับกับอุปกรณ์เพื่อช่วยอ่าน

  5. Athitha Chokananrattana แล้ว(CSS) ช่วยแก้ไขปัญหาอย่างไร? (1) • CSS สามารถควบคุมในแต่ละ elements โดยการเขียนควบคุมจากที่ที่เดียว: <FONTstyle="font-size:12px">This font is size 12 pixels</FONT> • โดยสามารถที่จะแยกกันระหว่างการแสดงผลและเนื้อหาของเว็บ

  6. Athitha Chokananrattana แล้ว(CSS) ช่วยแก้ไขปัญหาอย่างไร? (2) • กรณีที่ไม่ต้องการให้เว็บบราวเซอร์ แสดงการขีดเส้นใต้กับข้อความเชื่อมโยง แลต้องการให้ข้อความท่เป็นคำเชื่อมโยงเป็นสีดำ ลองพิพม์ตามนี้ : <a href=“info.htm" style="color:black; text-decoration:none;">Info</A> • มาทำความเข้าใจกับ CSS กัน.

  7. Athitha Chokananrattana CSS คืออะไร? • CSS คือ ภาษา (language, or a micro-language ) ซึ่งใช้โดยการเขียน TAG รวมตัวเป็นอันหนึ่งอันเดียวกันกับภาษา HTML • CSS มีรูปแบบการเขียนของตัวเอง • ไม่สามารถใช้ได้กับเว็บบราวเซอร์รุ่นเก่าๆได้ • สามารถที่จะควบคุมการแสดงผล ตั้งแต่ สี ขนาด การจัดวางตำแหน่ง ของภาษา HTML ได้

  8. Athitha Chokananrattana CSS มาจากใคร? • การพัฒนาปรับปรุงมาตรฐานของ CSS มาจาก World Wide Web Consortium (W3C) (pay them a visit at www.w3c.org) • โดยมาตรฐานในการแสดงผลนั้น มาจากกลุ่มของผู้พัฒนาเว็บบราวเซอร์ทั้งหลาย ได้แก่ Mozilla projects, Microsoft, Netscape, Opera, Chrome

  9. Athitha Chokananrattana CSS Attribute Structure (1) • ในตัวอย่างสั้นๆ โค้ดด้านล่างนี้แสดงให้เห็น 2attributes (e.g. size, color) with values (e.g. 4px, #003366). ในแต่ละ attribute จะประกอบด้วย property และ value ดังตัวอย่าง: <p style="color:#00FF00; margin-left:10px">...</p>

  10. Athitha Chokananrattana CSS Attribute Structure (2) • อีกตัวอย่าง: <P style="width: 50px; border-style: solid; border-width: 1px; border-color: black; padding: 5px">Here's some words</P> • โค้ดนี้จะได้การแสดงผลเป็นแบบใด?

  11. Athitha Chokananrattana CSS Attribute Structure (3) • The basic syntax for CSSis: attribute:value; such as: font-weight:bold color:#330033 • With a semi-colon between pairs: font-weight:bold;color:#330033

  12. Athitha Chokananrattana เราใช้ 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>

  13. Athitha Chokananrattana เราใช้ 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.

  14. Athitha Chokananrattana เราใช้ CSS ในภาษา HTML อย่างไร? (3) • เราสามารถใช้ style="..." ในทุกๆ syntax ของภาษา HTML ที่ต้องการที่จะกำหนดการแสดงผลโดยใช้ CSS โดยการใส่รูปแบบของ CSS ลงไป เช่น <p> <h1> <body> และอื่นๆ • e.g. แต่ไม่สามารถที่จะกำหนด CSS บางตัวได้ เช่นการกำหนด margin ให้กับตัวอักษร เพราะว่า ลักษณะของตัวอักษรไม่ได้มีลักษณะเป็น blocks เหมือนกับ table เป็นต้น: • <P>, <H1>, <H2> etc.

  15. Athitha Chokananrattana The Span & Div tags (1) • แต่ในกรณีที่ต้องการจำทำการกำหนดตำแหต่งนั้น จึงต้องมีการใช้ TAG เพื่อช่วยให้วัตถุ หรือข้อความมีลักษณะเป็น blocks จึงจะสามารถกำหนดการแสดงผลได้ ? • In 'traditional' HTML you would write this: <FONT color="blue"> <B><I>… </I></B> </FONT>

  16. Athitha 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:

  17. Athitha Chokananrattana The Span & Div tags (3) <SPAN style="color:blue; font-weight:bold; font-style:italic">... </SPAN> • <SPAN> ไม่ได้มีความหมายเฉพาะเจาะจง เหมือน TAG <b> แต่มีความหมายว่า สิ่งที่อยู่ภายใน <span> คืออยู่ภายในพื้นที่ของฉัน ดังนั้นในตัว <span> จะสามารถที่จะจัด ชินขวา ชิดบน จัดกลางได้ • <DIV> เหมือนกันกับ <SPAN> แต่ div จะเป็นลักษณะ blocks ที่เข้มแข็งกว่า

  18. Athitha Chokananrattana Style Definitions (1) • การกำหนด Style Definitions นั้นเป็นการเขียนโค้ด ส่วนหนึ่งในหน้าเว็บไซต์ โดยเนื้อหาที่เรียนมาก่อนหน้านี้ เป็นการเขียนโค้ด CSS แทรกไปภายในเนื้อหาของ HTML เราเรียกว่าInline Style Sheets • ซึ่งสามารถที่จะกำหนดการแสดงผลในตำแหน่งต่างๆที่เราต้องการได้ แต่ถ้าต้องการกำหนด CSS โดยให้มีผลกับหน้าเว็ยนั้นทั้งหน้า เราจะต้องแทรกโค้ดลงไปตรงบริเวณ TAG <HEAD> เพื่อกำหนด CSS

  19. Athitha Chokananrattana Style Definitions (2) • ตัวอย่าง style definition: a { text-decoration:none; color:black; font-family: Verdana; font-size: 12pt; } • จะได้ผลลัพธ์เป็นอย่างไร

  20. Athitha Chokananrattana 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)

  21. Athitha Chokananrattana CSS selectors (2) a:link { text-decoration: none; color: black;font-weight: bold} a:hover {text-decoration: underline; color: darkgreen } • สิ่งที่ได้คือ ข้อความเชื่อมโยงจะเป็นอักษรที่ไม่ขีดเส้นใต้ สีดำ เป็นตัวหนา และเมื่อเอาเม้าท์ ไปวางทับข้อความเชื่อมโยง จะแสดงเส้นใต้ และเป็นสีเขียวเข้ม

  22. Athitha Chokananrattana Grouping • ในบางครั้งที่ต้องการให้หลายๆ TAG แสดงผลเหมือนกัน ก็สามารถเขียนคำสั่งได้ภายในครั้งเดียว H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }

  23. Athitha Chokananrattana Inheritance • Selectors ทั้งหมดสามารถที่จะถ่ายทอดคุณลักษณะต่อกันไปได้ โดยจะเอาคุณลักษณะ และค่า จุถ่ายทอดจาก TAG แม่ไปสู่ TAG ลูก • e.g. กรณีที่กำหนดสีตัวอักษรที่ TAG <BODY> เป็นสีเขียว ภานใน <BDDY>  ตัวอัษรทั้งหมดก็จะเป็รสีเขียว รวมไปถึงใน <P> <TABLE> หรืออื่นที่ไม่ได้มีการกำหนด เพิ่อมเติม ก็จะเป็นเหมือ่นกับที่ TAG <BODY> กำหนด

  24. Athitha Chokananrattana Classes (1) • มี 2 วิธีในการกำหนด Styles • วิธีแรกคือการแทรกไปใน HTML tage.g. <body>, <p>, <font> <a> • วิธีที่สอง สร้างรูปแบบตามที่เราต้องการ • e.g. ถ้าเราต้องการการแสดงผลแบบพิเศษ ที่จะต้องการใช้กับหลายๆ TAG แต่อาจจะไม่จำเป็นต้องแสดงเหมือนกันหมด เช่น <h2> บางตำแหน่งอยากให้แสดงเป็นลักษณะหัวข้อข่าวแบบพิเศษ แต่ไม่ต้องการทุกตำแหน่ง เราจะทำอย่างไร • ดังนั้นเราอ่จจะำหนด หัวข้อ <h2> ในรูปแบบที่เรากำหนดเอง แต่ก็จะใช้ชื่อ h2 ไม่ได้ เพราะมันก็จะไปซ้ำกัน จึงต้องตั้งขื่อใหม่ เช่น h2modify การตั้งชื่อ new styleเรียกว่า’h2modify'. และการเขียนในลักษณะนี้จะเรียกว่าclass.

  25. Athitha Chokananrattana Classes (2) • The definition for this subhead would be: <style> <!-- . h2modify {font-family: Arial; color: #0066CC; font-size: 18pt} --> </style>

  26. Athitha Chokananrattana Classes (3) • คำเตือน '.' การใส่จุด หน้า style name? • การใส่ จุด เป็นอักษระพิเศษที่ทำให้เว้บบราวเซอร์ จดจำคำเหล่านั้นเป็นพิเศษ ว่าคำนั้นไม่ใช่ TAG  ในภาษา  HTML   แต่เป็นคำที่มีการกำหนดค่าบางอย่างไว้

  27. Athitha Chokananrattana 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>

  28. Athitha Chokananrattana Applying a Class to an Element (2) • ในตัวอย่าง warning class สามารถที่จะประยุกต์ใช้ได้กับทุกๆ element ของ TAG  <body> ซึ่งการแสดงผลก็จะไปสัมพันธ์กับ CSS • ในส่วนของ จุด จะใส่เฉพาะตอนที่กำหนดค่าเท่านั้น ใยขณะที่เรียกใช้นั้น ไม่ต้องใส่จุด

  29. Athitha Chokananrattana Applying a Class to an Element (3) • เราสามารถกำหนด CSS แบบเฉพาะเจะจงลงไปอีก เช่น p.news { font-weight: bolder; color: red; background: white } • จากตัวอย่างจะพบว่า สามารถเรียกใช้ class news โดยจะต้องใช้คู่กับ tag <p> จึงจะได้การแสดงผลตามที่กำหนดไว้ ถ้าใช้ร่วมกับ tag อื่นจะไม่แสดงผล

  30. Athitha Chokananrattana Applying a Class to an Element (4) <pclass="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>

  31. Athitha Chokananrattana Cascading Concept (1) • Cascading Concept เป็นลักษณะโครงสร้างต้นไม้ กล่าวคือมีลำดับความสำคัญในการแสดงผล กล่าวคือ หากมีการกำหนด CSS หลายระดับ เช่น ในระดับ inline คือแทรกในโค้ด และระดับ internal คือแทรกไว้ที่ <head> • คำถามที่ตามมาคือ การแสดงผลนั้นจะเป็นไปตาม inline หรือ internal

  32. Athitha Chokananrattana 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> • คำว่า click here จะเป็นอย่างไร

  33. Athitha Chokananrattana Cascading Concept (3) • สิ่งที่เกิดขึ้นคือ คำว่า click here จะเป็นสีเขียว • เหตุผลเพราะว่า ลำดับความสำคัญของการแสดงผลนั้น • Inline • Internal • External • 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!

  34. Athitha Chokananrattana Linking to an external Style Sheet (1) • ในการสร้าง css แบบ internal นั้น จะสามารถที่จะกำหนดการแสดงผลในไฟล์นั้นๆ ได้เพียงไฟล์เดียว แต่ในเว็บไซต์นั้น มีไฟล์เป็นสิบๆ หรือมากกว่าร้อยไฟล์ การแทรก CSS ที่แต่ละไฟล์นั้น ก็อาจจะทำให้ยุ่งยากในการควบคุม • เราคงไม่ต้องการที่จะต้องแก้ไข CSS ทั้งร้อยไฟล์ ดังนั้นจึงมีอีกรูปแบบคือแบบ external

  35. Athitha Chokananrattana Linking to an external Style Sheet (2) • CSS สามารถที่จะทำให้เราสร้าง style sheet โดยที่สามารถที่จะไปควบคุมหน้าเว็บทุกไฟล์ ได้ • ซึ่งจะทำให้การควบคุมการแสดงผลของหน้าเว็บทั้งหมดอยู่ที่ที่เดียว

  36. Athitha Chokananrattana Linking to an external Style Sheet (3) • การเชื่อมโยงไปยังไฟล์ style sheet, สาสารถทำได้โดยการกำหนด โค้ดในส่วนของ <header>: <LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

  37. Athitha Chokananrattana 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 whendefining styles.

  38. Athitha Chokananrattana 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}

  39. Athitha Chokananrattana 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 }

  40. Athitha Chokananrattana 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>

  41. Athitha Chokananrattana 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}

  42. Athitha Chokananrattana 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>

  43. Athitha Chokananrattana 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.

  44. Athitha Chokananrattana 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?

  45. Athitha Chokananrattana 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.

  46. Athitha Chokananrattana 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"> &quot;Here's your juicy quote&quot;</div>

  47. Athitha Chokananrattana 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 fieldand 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>

  48. Athitha Chokananrattana 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">

  49. Athitha Chokananrattana 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)

  50. Athitha Chokananrattana 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 }

More Related