Top Banner
Theerayut Thongkrau CSS Cascading Style Sheets Chapter 2
82

CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ

Aug 07, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • Theerayut Thongkrau

    CSSCascading Style Sheets

    Chapter 2

  • CSS• CSS ยอ่มาจาก Cascading Style Sheets• เป็นภาษาท่ีใชใ้นการก าหนดรูปแบบการแสดงผลของ

    HTML Element• เกิดข้ึนพร้อมกบั HTML 4.0 เพ่ือแกปั้ญหาการแสดงผล• สามารถแทรกค าสัง่ CSS ในโคด้ HTML หรือแยกส่วนออกเป็นไฟล์ .css ได้

    2

  • CSS กบั HTML• HTML ใชก้ าหนดโครงสร้างและก ากบัส่วนประกอบของหนา้เวบ็

    • CSS ใชก้ าหนดรูปแบบการแสดงผลของหนา้เวบ็ ในแต่ละส่วนของเอกสาร

    • แทก็ หรือ attribute ของ HTML ท่ีใชใ้นการจดัรูปแบบส่วนใหญ่ถูกยกเลิกแลว้ใน HTML version 5 เช่น , alignซ่ึงยงัใชไ้ดอ้ยู ่แต่เพ่ือใหแ้ยกส่วนกนัชดัเจนควรใช ้CSS

    3

  • 4

    bedroom {ผ้าม่าน: สีเทา;พืน้: ยาง ลายไม้;

    }

    bathroom {พืน้: กระเบ้ือง สีเขยีว;ผนัง: สีขาว;

    }

    CSS กบั HTMLHTML = การวางโครงสร้างของบา้นCSS = การตกแต่งบา้น

  • CSS Syntax• CSS ประกอบดว้ย 2 ส่วน ไดแ้ก่ Selector และ รายการ Property

    5

    h1 { color: blue; font-size: 12px;}

    propertyvalue

    Selector

    • Selector คือ ช่ืออิลิเมนต,์ ช่ือคลาส หรือ id ท่ีตอ้งการน ามาจดัรูปแบบ

    • CSS Property คือ ช่ือคุณสมบติัท่ีตอ้งการจดัรูปแบบ

    • Value คือ ค่าท่ีตอ้งการก าหนดรูปแบบใหก้บั Property อาจมีไดห้ลายค่า แต่ละค่าคัน่ดว้ยช่องวา่ง และปิดทา้ยดว้ย ;

    • เคร่ืองหมาย { } ใชก้ าหนดขอบเขตของ Selector

  • CSS Property

    6

    Property

    คณุสมบตัเิกีย่วกบัสี color (สตีวัอกัษร)background-color (สพีืน้หลัง)

    คณุสมบตัเิกีย่วกบัการจดัชอ่งวา่ง(Spacing)

    margin paddingmargin-left, margin-right, margin-top, margin-bottompadding-left, padding-right, padding-top, padding-bottom

    คณุสมบตักิรอบตา่งๆ border-widthborder-styleborder-colorborder (ก ำหนดควำมกวำ้ง รปูแบบ สใีนครัง้เดยีว)

    การจดัต าแหนง่ขอ้ความ text-aligntext-indentword-spacingletter-spacingline-heightwhite-space

  • CSS Property

    7

    Property

    Font font-familyfont-sizefont-weightfont-stylefont-varianttext-decoration

    ขนาด widthheight

    Layout positionleft, rightfloat, clear

    Graphics background-imagebackground-repeatbackground-position

  • คู่มือ CSS• เราสามารถเลือก CSS Property มาปรับใชก้บัเวบ็เพจโดยดูจาก CSS Properties Reference

    https://cssreference.iohttp://devdocs.io/css

    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

    8

    https://cssreference.io/http://devdocs.io/csshttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference

  • การแทรกค าส่ัง CSS• Internal Style Sheet - ใส่ค าสัง่ CSS ในแท็ก ภายใตแ้ทก็ วธีิน้ีเหมาะ

    กบัการจดัรูปแบบใหก้บัเวบ็หนา้เดียว• External Style Sheet - ใส่ค าสัง่ CSS ในไฟล์แยกต่างหาก แลว้อา้งถึงไฟลใ์นแทก็

    ซ่ึงอยูภ่ายใตแ้ทก็ เหมาะกบัการจดัรูปแบบใหก้บัเวบ็หลายหนา้ท่ีใช่รูปแบบเดียวกนั

    • Inline Style Sheet - ใส่ค าสัง่ CSS ในแท็กที่ต้องการโดยตรง เพื่อจดัรูปแบบเฉพาะแทก็นั้นๆ วธีิน้ีควรท าเม่ือมีความจ าเป็นเท่านั้น เพราะยากต่อการกลบัมาแกไ้ขในภายหลงั

    หมายเหตุ หากมีช่ือ Selector ซ ้ ากนั Browser จะเลือกใชรู้ปแบบตามล าดบัดงัน้ี

    Inline Internal External 9

  • Internal Style Sheet

    Computer Science Department, KKU

    ภาควชิาวทิยาการคอมพวิเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลยัขอนแก่น จดัตั้งอยา่งเป็นทางการเม่ือวนัท่ี 23 มีนาคม 2537 ผลิตบณัฑิตระดบัปริญญาตรีมาแลว้ 21 รุ่น และปริญญาโทมาแลว้มากกวา่ 10 รุ่น

    เป้าหมาย

    ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะดา้น ตรงกบัความตอ้งการของผูป้ระกอบการ

    10

    เพิ่ม CSS ในการก าหนดสี font ของแทก็

    p {color: maroon;

    }

    ผลลพัธ์

  • External Style Sheet

    11

    p {

    color: maroon;

    }

    Computer Science Department, KKU

    ภาควชิาวทิยาการคอมพวิเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลยัขอนแก่นจดัตั้งอยา่งเป็นทางการเม่ือวนัท่ี 23 มีนาคม 2537 ผลิตบณัฑิตระดบัปริญญาตรีมาแลว้ 21 รุ่น และปริญญาโทมาแลว้มากกวา่ 10 รุ่น

    mystyle.css

    p {color: maroon;

    }

    /* ไม่ตอ้งใส่แทก็ HTML ใดๆในน้ี */

    หากอยูบ่น server เดียวกนัควรอา้งอิงโดยใช ้Relative URL

  • Inline Style Sheet

    • ใช ้Attribute style แทรกในแทก็ แลว้ก าหนดคุณสมบติั CSS

    12

    Computer Science Department, KKU

    ภาควชิาวทิยาการคอมพิวเตอร์ คณะวทิยาศาสตร์

    เป้าหมาย

    ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม

  • p {

    background-color: red;

    border: 1px solid gray;

    }

    1 Selector มีได้หลาย Property

    13

    ก าหนดใหแ้ทก็

    มีสีพ้ืนเป็นสีแดง และ

    มี 2 property

    มีกรอบขนาด 1 พิกเซล แบบทึบ สีเทา

    ค่าของ property สามารถมีไดห้ลายค่า โดยคัน่แต่ละค่าดว้ยช่องวา่ง

  • Selector ทีม่รูีปแบบเหมือนกนั

    14

    h1 {font-family: sans-serif;color: gray;

    }

    h2 {font-family: sans-serif;color: gray;

    }

    h1, h2 {font-family: sans-serif;color: gray;

    }

    รูปแบบเหมือนกนั สามารถก าหนดช่ือแทก็ไวด้ว้ยกนัได ้โดยคัน่ดว้ย comma

  • ก าหนดรูปแบบเพิม่เตมิให้ Selector เดมิ

    15

    border-bottom: 1px solid black;

    h1, h2 {font-family: sans-serif;color: gray;

    }

    เพิ่มรูปแบบเส้นใตใ้หก้บัแทก็ และ

    h1 {border-top: 1px solid black;

    }

    เม่ือตอ้งการเพิ่มบางรูปแบบใหก้บั ซ่ึงถูกก าหนดรูปแบบไปแลว้สามารถท าไดโ้ดยการระบุ Selector h1 เพียงอยา่งเดียว

    ผลลพัธ์

  • การสืบทอด property• เม่ือมีการก าหนดคุณสมบติั CSS ในแทก็ท่ีอยูร่ะดบัเหนือกวา่ แทก็ท่ีซอ้นอยูจ่ะไดรั้บคุณสมบติันั้นไปดว้ย

    16

    body {font-family: sans-serif;

    }

    h1 {font-family: sans-serif;color: gray;

    }

    ไม่จ าเป็นตอ้งใส่ เพราะไดรั้บการสืบทอดจากแทก็ท่ีอยู ่level เหนือกวา่แลว้

  • ปัญหาการใช้ Selector โดยช่ือแท็ก

    17

    ถา้ตอ้งการก าหนดสี font ของแทก็

    ตวัท่ี 2 ใหมี้ความแตกต่างกบัแทก็

    ตวัแรกจะท าอยา่งไร ?

    p {

    color: maroon;

    }

    Computer Science Department, KKU

    ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

    เป้าหมาย

    ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

  • Class Selector• การก าหนด selector เป็นช่ือ tag จะท าให ้tag เดียวกนัมีรูปแบบเหมือนกนัหมด ดงันั้นเราจะตั้งช่ือ Class ข้ึน เพื่อใช้ในการจ าแนกรูปแบบท่ีมีความแตกต่างกนั

    18

    p.greentea {color: green;

    }

    p.red {color: red;

    }

    คลาส red คลาส greentea

  • Class Selector

    19

    p {

    color: maroon;

    }

    Computer Science Department, KKU

    ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

    เป้าหมาย

    ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

    p.red {color: red;

    }

    p.greentea {color: green;

    }

    ภาควิชาวิทยาการคอมพิวเตอร์ คณะวทิยาศาสตร์

    ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

    ผลลพัธ์

  • p {

    color: maroon;

    }

    Computer Science Department, KKU

    ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

    เป้าหมาย

    ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

    p.greentea {color: green;

    }

    class ทีไ่ม่ผูกกบัแท็ก

    20

    Computer Science Department, KKU

    เป้าหมาย

    p.red {color: red;

    }

    .greentea {color: green;

    }

    ภาควิชาวทิยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

    ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

    ผลลพัธ์

  • การใช้รูปแบบจากคลาส 2 คลาสขึน้ไป

    21

    .red {color: red;

    }

    .line {border-bottom: 1px solid black;

    }

    Computer Science Department, KKU

    ผลลพัธ์

    คัน่ช่ือคลาสท่ีน ามาใชด้ว้ยช่องวา่ง

  • ID Selector• id ใชส้ าหรับก าหนดรูปแบบท่ีปรับใชก้บั 1 Element เท่านั้น (single/unique element)

    22

    #para1 { text-align:center; color:red; }#para2 { text-align:right; }

    This is a paragraph 1.This is a paragraph 2.

    ผลลพัธ์

  • Pseudo Selectors• Element บางตวัสามารถใส่

    รูปแบบพิเศษได ้เช่น แทก็ มี 4 สถานะ ไดแ้ก่ link, visited, hover, และ active การก าหนดรูปแบบให้แตกต่างกนัไปในแต่ละสถานะน้ีเรียกวา่ Pseudo Selectors

    23

    a:link {color:green; text-decoration:none;}a:hover {color:red;background-color:yellow;}a:active {color:blue;}a:visited {color:pink;}

    Pantip

    a:link a:hover

    a:active a:visitedผลลพัธ์

  • Attribute Selectors• Attribute Selectors คือ การเลือกใส่รูปแบบใหก้บั Element ท่ีมีค่า attribute ตามท่ีก าหนด

    24

    input[type="password"] {

    background-color:red;}

    Username:
    Password:

    ผลลพัธ์

  • สรุป Selector

    25

    Selectors CSS code HTML code

    Tag h1, h2 { color: red; } ……

    Tag รว่มกบั Class p.large { font-size: 2em;}

    ...

    Class .large { font-size: 16pt; }

    ...

    หรอื... หรอื...

    id #para1 { text-align:center; }

    หรอื… หรอื…

    Pseudo a:link { text-decoration:none; } …

    Attribute input[type="password"] {background-color:red;

    }

  • CSS Comment• การอธิบายส่วนต่างๆของโคด้ CSS จะช่วยใหก้ารแกไ้ขโคด้ง่ายข้ึนในภายหลงั Comment ท่ีเขียนข้ึน Browser จะไม่สนใจ

    /*This is a comment*/

    p {

    text-align: center;

    /*This is another comment*/

    color: black;

    font-family: arial;

    }

    26

  • การก าหนดสีใน CSS• แบบค าท่ีมีความหมายสี เช่น silver, maroon, yellow

    ดูสีอ่ืนท่ี https://developer.mozilla.org/en/docs/Web/CSS/color_value

    • แบบเลขฐาน 16#ff0000

    • แบบเลขฐาน 10rgb(255,255,0)

    • แบบก าหนด % ความเขม้ของสีrgb(80%,80%,100%)

    27

    R G B

    R G B

    ตัวอย่างp {

    font-family: Arial, sans-serif;

    background-color: #00ff00;

    color: rgb(255,255,0);

    font-size: 2em;

    font-weight: bold;}

    https://developer.mozilla.org/en/docs/Web/CSS/color_value

  • คุณสมบัต ิTransparency• การท าสีแบบโปร่งแสงจะใช้

    วธีิก าหนดค่าสีดว้ย rgba(red, green, blue, ค่า alpha)

    • การท าใหภ้าพมีความโปร่งแสงจะใชคุ้ณสมบติั

    opacity: ค่า alpha

    28

    h1 {background-color: rgba(34, 234, 0, 0.3);border: 1px #336699 solid;

    }img:hover {

    opacity: 0.5;}

    Computer Science Department, KKU

    ค่า alpha มีค่าในช่วง 0-10 - โปร่งใส1 - สีทึบ

  • หน่วยต่างๆใน CSSช่ือหน่วย ค าอธิบาย

    % เปอร์เซ็นต์

    in น้ิว

    cm เซนติเมตร

    mm มิลลิเมตร

    em1em มีขนาดเท่ากบัฟอนตปั์จจุบนัของ Element นั้น 2em หมายถึง 2 เท่าของฟอนตปั์จจุบนั ตวัอยา่งเช่ร Element นั้นมีขนาดฟอนต ์12 pt เม่ือก าหนดขนาด 2em จะเพิ่มขนาดเป็น 24 pt

    ex 1ex คือ 1/2 ของความสูงของฟอนตป์กติ

    pt point (1 pt = 1/72 น้ิว)

    pc pica (1 pc = 12 points)

    px pixels (จุดบนหนา้จอ)29

  • หน่วยต่างๆใน CSSแนะน าให้ใช้ ใช้เท่าที่จ าเป็น ไม่แนะน าให้ใช้

    ส าหรับแสดงผลออกทางหน้าจอ em, px, % ex

    pt, cm, mm,

    in, pc

    ส าหรับแสดงผลออกทางกระดาษที่ส่ังจากเคร่ืองพมิพ์

    em, cm, mm,

    in, pt, pc, %px, ex

    30

    1in = 2.54cm = 25.4mm = 72pt = 6pc

    ท่ีมา: https://www.w3.org/Style/Examples/007/units.en.html

    https://www.w3.org/Style/Examples/007/units.en.html

  • คุณสมบัตพืิน้หลงั (Background)• background-color สีพ้ืนหลงั

    background-color: #e0ffff;

    • background-image ระบุภาพพ้ืนหลงั

    background-image: url('img_tree.png');

    • background-size ก าหนดขนาดภาพพื้นหลงั (กวา้งและสูง) เช่นbackground-size: 80px 60px;

    • background-attachment ก าหนดใหย้ดึภาพพ้ืนหลงั ไม่ใหเ้ล่ือนตามbackground-attachment: fixed;

    31

  • background-position ก าหนดต าแหน่งภาพพืน้หลงั

    • left top• left center• left bottom• right top• right center• right bottom• center top• center center• center bottom

    32

  • คุณสมบัต ิbackground-repeat• repeat – วางพ้ืนหลงัใหเ้ตม็ (ค่า default)• repeat-x – วางพ้ืนหลงัเฉพาะในแนวนอน• repeat-y – วางพ้ืนหลงัเฉพาะในแนวตั้ง• no-repeat – วางพ้ืนหลงัเพียงคร้ังเดียว

    33

    body { background-image: url('smiley.gif');background-repeat: no-repeat;background-position: left bottom;

    }

  • ตัวอย่าง

    34

    .decoratedBox {

    width: 600px;height: 130px;border: 1px solid gray;margin: 20px;padding: 20px;background-image: url('top-left.png'), url('bottom-right.png');

    background-position: left top, right bottom;

    background-repeat: no-repeat, no-repeat;}

    This box combines two background images, which are positioned in its top-left and bottom-right.

    ภาพแรก ใหแ้สดงดา้นบนซา้ย แสดงคร้ังเดียว

    ภาพท่ีสอง ใหแ้สดงดา้นล่างขวา แสดงคร้ังเดียว

  • ตัวอย่าง

    35

    body {

    margin: 20px;padding: 20px;background-image: url('top-left.png'), url('bottom-right.png');background-position: left top, right bottom;background-repeat: no-repeat, no-repeat;

    }

    This box combines two background images, which are positioned in its top-left and bottom-right.












  • ชนิดของ HTML Element• Block Element คือ Element ท่ีจองพ้ืนท่ีบนหนา้เวบ็ในแนวนอนทั้งหมดของ browser เช่น ,

    , , , ซ่ึง browser จะแสดงผลในบรรทัดใหม่เสมอ

    • Inline Element คือ Element ท่ีจองพ้ืนท่ีบนหนา้เวบ็ตามขนาดของเน้ือหาภายในแทก็ หรือตามขนาดจริง เช่น , , , , การแสดงผลจะแสดงในแนวนอนเรียงตามล าดบั โดยไม่ขึน้บรรทัดใหม่ จนกว่าพืน้ที่แนวนอนจะเต็ม

    36

  • และ • แทก็ (เป็น Block) และแทก็ (เป็น Inline) มกัใชใ้น

    การก ากบั (Markup) หรือครอบส่วนต่างๆของหนา้เวบ็ เพื่อน า class หรือ id มาจดัรูปแบบในส่วนท่ีก ากบั

    37

    .greentea { color: green; }

    I love KKU Jub Jub

    I love KKU Jub Jub

    ผลลพัธ์

  • โครงสร้างของ Block Element

    Block Element ประกอบดว้ยส่วนต่างๆดงัน้ี• Margin คือ ช่องวา่งท่ีอยูร่อบกรอบ (border) ส่วนนอก ซ่ึง Margin จะไม่มีสีพื้น แต่จะ

    เป็นสีโปร่งใส (Transparent)• Border คือ เสน้กรอบท่ีลอ้มรอบส่วนท่ีเป็น Padding และเน้ือหา • Padding คือ ช่องวา่งท่ีอยูล่อ้มรอบเน้ือหา

    38

    width

    height

    paddingbordermargin

    top

    left right

    bottom

  • CSS Property ส าหรับ Block Element• การก าหนดพ้ืนท่ีทั้ง 4 ดา้น ใชเ้พียง margin หรือ padding

    margin: 60px; /* margin ทั้งส่ีดา้น 60 pixel เท่ากนั */ padding: 30px; /* padding ทั้งส่ีดา้น 30 pixel เท่ากนั */padding: 15px 30px 15px 30px; /* บน-15 ขวา-30 ล่าง-15 ซา้ย-30 */

    • ก าหนดพ้ืนท่ีดา้นใดดา้นหน่ึง เช่นmargin-left: 50px;

    margin-top: 30px;

    padding-right: 3in;

    padding-bottom: 5cm;

    39

  • Property ส าหรับ Block Element

    40

    .box1 {margin: 30px;border: 2px solid black;padding: 30px;width: 400px;height: 50px;background: gray;

    }.rounded {border-radius: 20px;

    }.shadow {box-shadow: 5px 5px 10px gray;

    }

    W3C announced on... Forum (IDPF)W3C announced... Forum (IDPF)W3C announced... Forum (IDPF)

    ค่าความ Blur เงา สีเงา

    ระยะห่างของเงากบักรอบในแนวตั้ง

    ระยะห่างของเงากบักรอบในแนวนอน

  • Display Property• ค่า default ของทุก Element มีค่า display ตามชนิด elementอยูแ่ลว้– Block Element ค่า default คือ display: block; – Inline Element ค่า default คือ display: inline;

    • Element ท่ีเป็น Block สามารถก าหนดใหเ้ป็น inline ได้ เช่น

    img { display: block; }

    • display property หากก าหนดค่าเป็น none แลว้ element นั้นจะไม่แสดงผล 41

  • display: flex; • display property ท่ีมีค่าเป็น flex ใชค้รอบ Block Element ท่ีตอ้งการใหป้รับ width

    หรือ height ได ้เพราะความกวา้งของ Block Element จะใชพ้ื้นท่ีในแนวนอนทั้งหมดเสมอ ส่วนความสูงจะข้ึนกบัเน้ือหา

    ศึกษา Flex Layout เพิ่มเติมท่ีน่ี https://css-tricks.com/snippets/css/a-guide-to-flexbox 42

    ใช้ Flex Layout ไม่ใช้ Flex Layout

    CSS.flex-container {

    display: flex; background-color: grey;

    }.item {

    background-color: blue;margin: 10px;

    }

    HTML

    item 1item 2item 3

    https://css-tricks.com/snippets/css/a-guide-to-flexbox

  • การจัดโครงสร้างของเวบ็• การวางโครงสร้างของเวบ็เกิดจากการใชแ้ทก็ หรือ Semantic Markup ในการจดัวาง ร่วมกบัการใชค้ าสัง่ CSSไม่ควรใช้ ในการจดัโครงสร้างเวบ็

    43

  • การจัดโครงสร้างของเวบ็ด้วย

    44

    body {

    width:500px;margin-top: 0px;margin-left: auto;margin-right: auto;

    }

    #header {background-color:navy;color: white;font-size: 25px;margin-bottom: 0px;

    }

    #section {display: flex;

    }

    #menu {background-color: aqua;height: 200px;width: 100px;

    }

    #content {background-color: gray;height: 200px;width: 400px;

    }

    #footer {background-color:blue;text-align:center;

    }

    My Web Site

    Menu
    Add
    Edit
    Delete

    Content...

    Developed by...Mr.Yeah

  • Semantic Element• HTML5 มีแทก็ท่ีใชใ้นการก ากบัต าแหน่งของหนา้เวบ็ ท่ีมีช่ือท่ีมี

    ความหมายมากข้ึน , , , , , , , , , ,

    • แทก็เหล่าน้ีไม่มีผลต่อการแสดงผลลพัธ์ แต่ช่วยใหก้ารก ากบัมีความหมายมากข้ึน และยงัช่วยให ้Search Engine เขา้ใจ

    • ศึกษาเพ่ิมเติม https://www.w3.org/TR/html5/sections.html45

    https://www.w3.org/TR/html5/sections.html

  • การจัดโครงสร้างของเวบ็ด้วยแท็ก Semantic

    46

    body {width:500px;margin-top: 0px;margin-left: auto;margin-right: auto;

    }

    header {background-color:navy;color: white;font-size: 25px;margin-bottom: 0px;

    }

    section {display: flex;

    }

    nav {background-color: aqua;height: 200px;width: 100px;

    }

    article {background-color: gray;height: 200px;width: 400px;

    }

    footer {background-color:blue;text-align:center;

    }

    My Web Site

    Menu
    Add
    Edit
    Delete

    Content...

    Developed by...Mr.Yeah

  • จัดกึง่กลางข้อความ• ใชแ้ทก็ท่ีเป็น black element และก าหนด text-align เป็น center

    47

    CSS

    .textcenter {text-align: center;

    }

    HTML

    The lines in this paragraph are all centered

  • จัดกึง่กลาง block ที่ก าหนดขนาด• Block Element ท่ีระบุความกวา้ง การจดัก่ึงกลางจะก าหนดพื้นท่ีดา้นซา้ยและขวาให้

    เท่ากนัดว้ยการใช ้auto กบั property margin-left และ margin-light

    48

    CSS.blocktext {

    width: 200px;margin-left: auto;margin-right: auto;

    }

    margin-left: auto; margin-right: auto;

    width: 200px;

    HTML

    This rather narrow block of text is ...example.

  • จดักึง่กลางรูปภาพ• ก าหนดใหภ้าพแสดงผลแบบ Block Element (ปกติภาพเป็นแบบ Inline Element) ดว้ย

    display: block; และก าหนด margin-left และ margin-light เป็น auto

    49

    CSS.center-img {

    display: block;margin-left: auto;margin-right: auto;

    }

    HTML

    margin-left: auto; margin-right: auto;

  • การจัดกึง่กลางในแนวตั้ง• ก าหนดส่วนสูงของ Block Element ควรก าหนดเป็น Flex Layout ก่อน แลว้ก าหนด

    align-items: center;

    50

    CSS.vcenter {height: 150px;display: flex;align-items: center;background-color: aqua;

    }

    HTML

    This paragraph is vertically centered.

    margin-right: auto;

    height: 150px;

  • การจัดกึง่กลางทั้งแนวตั้งและแนวนอน• ก าหนดส่วนสูงของ Block Element ควรก าหนดเป็น Flex Layout ก่อน แลว้ก าหนด

    align-items: center;

    51

    CSS.vcenter {height: 150px;display: flex;align-items: center;justify-content: center;background-color: aqua;

    }

    HTML

    This paragraph is vertically centered.

  • การจัดกึง่กลางทีถู่กยกเลกิใน HTML5• attribute align ถูกยกเลิกแลว้ใน HTML5 เช่น

    ...

    • แทก็ center ถูกยกเลิกแลว้ใน HTML5 เช่นHello

    52

  • การวางต าแหน่งข้อความและรูปภาพ

    53

    #img1 {vertical-align: top;

    }#img2 {

    vertical-align: middle;}#img3 {

    vertical-align: baseline;}

    ภำพนี ้ ใช ้vertical-align: top

    ภำพนี ้ ใช ้vertical-align: middle

    ภำพนี ้ ใช ้vertical-align: baseline

  • การจัดวาง ElementElement ในเวบ็เพจสามารถจดัวางไดห้ลายแบบ ดงัน้ี• Fixed• Relative• Absolute• Overlapping

    54

  • การจัดวางแบบ Fixed• แบบ Fixed คือ การก าหนดต าแหน่งบน Browser โดยท่ี Browser

    จะไม่มีการเคล่ือนท่ี Element นั้นเม่ือมีการเล่ือนหนา้

    55

    p.pos_fixed {position:fixed;top:30px;right:5px;

    }

    Some more text

    Note: IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.

    ก าหนดต าแหน่งท่ีจะน าไปวาง

    30pixel

    5pixel

  • การจัดวางแบบ Relative

    56

    h2.pos_left {position: relative;left: -20px;

    }h2.pos_right {

    position: relative;left: 20px;

    }

    This heading.This heading.

    ถอยหลงัจากขอบทางซา้ย 20 pixel

    เดินหนา้จากขอบทางซา้ย 20 pixel

    • แบบ Relative คือ การก าหนดต าแหน่งบน Browser โดยเร่ิมจากจุดท่ี Element นั้นอยู ่เช่น บรรทดัท่ี 2 ของหนา้ ถา้ตอ้งการใหเ้คล่ือนไปทางซา้ย 20pixel กจ็ะใชค้ าสัง่ left: 20px

  • ตัวอย่าง

    57

    img {

    position: relative;top: 100px;left: 100px;transform: rotate(10deg);

    }

    ก าหนดใหห้มุน 10 องศา จากจุดปัจจุบนั

  • การจัดวางแบบ Absolute• แบบ Absolute คือ การก าหนดต าแหน่งโดยนบัจากจุดเร่ิมตน้คือดา้นบนและดา้นขา้งของ Browser

    58

    h2 {

    position: absolute;left: 100px;top: 150px;

    }

    This is a heading with an absolute position

    With absolute positioning, an element can be placed anywhere on a page.

    150 pixel

    100 pixel

  • การจัดวางแบบ Overlapping• แบบ Overlapping คือ การจดัล าดบัชั้นของ Element ในแนวแกน z โดย

    ก าหนดเป็นค่าบวกหรือลบ ค่าบวกจะท าให ้Element อยูด่า้นบน ค่าลบจะท าใหอ้ยูด่า้นล่าง

    59

    img {

    position: absolute;left: 0px;top: 0px;z-index: -1;

    }

    This is a heading

    Because the image has a z-index of -1, it will be placed behind the text.

    ก าหนดต าแหน่งภาพท่ี (0,0) วางไวด้า้นหลงั

  • ตัวอย่าง

    60

    img {

    position: relative;top: 100px;left: 100px;

    }

    img: hover {transform: rotate(10deg) scale(2);z-index: 2;

    }

    ใหภ้าพอยูเ่หนือภาพปัจจุบนัระบุใหข้ยายภาพแนวตั้งและนอน 2 เท่า

    ก าหนด Pseudo Selector เพื่อใหใ้ชรู้ปแบบน้ีเม่ือมีเมาส์มาวาง

  • Font• การก าหนด Font ใน CSS สามารถก าหนดช่ือฟอนตส์ ารองไวไ้ดห้ลายช่ือ

    • เม่ือ Browser หาฟอนตบ์นเคร่ืองผูใ้ชไ้ม่เจอ จะคน้หาฟอนต์ท่ีก าหนดไวใ้นล าดบัถดัไป

    61

    body {

    font-family: Verdana, Geneva, Arial, sans-serif;

    }

  • คุณสมบัต ิtext-shadow

    62

    #shadow1 {

    font-size: 30px;font-weight: bold;text-shadow: gray 10px 10px 7px;

    }

    Shadow Text

    ระยะห่างของเงากบัขอ้ความในแนวนอน ระยะห่างของเงากบั

    ขอ้ความในแนวตั้ง

    ค่าความ Blur,ค่าการกระจายของเงา

    สีเงา

  • Web Font• Web Font คือ ฟอนตท่ี์เกบ็ไฟลไ์วบ้นเวบ็ตข์องตนเอง เม่ือตอ้งการใชฟ้อนตจ์ะโหลดมาพร้อมกบัหนา้เวบ็เพจ

    • Web Font แกปั้ญหาการใชฟ้อนตท่ี์มีความแตกต่างกนัไปในแต่ละเคร่ือง ท าใหไ้ม่ตอ้งกงัวลวา่เคร่ืองใดจะไม่มีฟอนตติ์ดตั้งอยู่

    • Web Font ช่วยใหส้ามารถใชฟ้อนตท่ี์แปลกใหม่ได ้โดยไม่ตอ้งแปลงขอ้ความใหเ้ป็นรูปภาพ

    63

  • ชนิดของ Web Font• TTF, OTF – ใชไ้ดก้บัทุก Browser ยกเวน้บน IE และ IOS

    • EOT – ใชบ้น IE อยา่งเดียว

    • WOFF – ใชไ้ดทุ้ก Browser (ก าลงัจะเป็นมาตรฐาน)

    • SVG – ใชบ้น IOS เท่านั้น64

  • การใช้ Web Font

    65

    /* 1. โหลดไฟล ์font */@font-face {

    font-family: "myFont"; /* ต ัง้ชือ่ font */src: url("THSarabunNew.ttf"); /* ระบชุือ่ไฟล ์font ทีจ่ะโหลด */

    }

    /* 2. น า font ทีโ่หลดแลว้มาใช ้โดยใชช้ือ่ตามทีต่ ัง้ไว ้*/body {

    font-family: "myFont"; }

    ทดสอบ

    สามารถเกบ็ในโฟลเดอร์อ่ืน และอา้งถึงดว้ย Relative URL ได้

  • แหล่ง download font• Font ภาษาองักฤษ

    – Font Squirrel, https://www.fontsquirrel.com– Dafont, https://www.dafont.com– Everything Fonts, https://everythingfonts.com/fonts

    • Font ภาษาไทย– https://www.f0nt.com

    66

    https://www.fontsquirrel.com/https://www.dafont.com/https://everythingfonts.com/fontshttps://www.f0nt.com/

  • Google Web Fonts• Google Web Fonts คือ Web Font แบบ online ท่ีใหบ้ริการฟรีแก่นกัพฒันา โดยไม่ตอ้ง

    โหลดไฟลฟ์อนตม์าไวท่ี้เวบ็ไซตข์องตนเอง นกัพฒันาเพียงระบุฟอนตท่ี์ตอ้งการใช้

    67

    เลือก Web Font ท่ีตอ้งการ

    ขั้นตอนการใช้ Google Web Font1. เลือก Web Font ท่ีตอ้งการจาก

    https://fonts.google.com

    2. เลือกฟอนตท่ี์ตอ้งการจากไอคอน

    3. กดท่ีแถบ Family Selected จะมีแทก็ค าสัง่ส าหรับน าไปใชบ้นหนา้เวบ็ เช่น

    4. เม่ือตอ้งการน าฟอนตม์าใชก้บั Selector ใด ใหใ้ส่ช่ือตามท่ี google ระบุ เช่นbody {

    font-family: 'Kanit', sans-serif;}

    https://fonts.google.com/

  • Awesome Fonts• Awesome Fonts คือ ฟอนตท่ี์อยูใ่นรูปแบบของ vector icons ใชส้ าหรับ

    นกัพฒันาท่ีตอ้งการแสดงไอคอนบนหนา้เวบ็ ซ่ึงมีความคมชดัสูง• การอา้งอิงใหก้ าหนดไฟล ์CSS จากเวบ็ https://fontawesome.com/start

    68

    Copy ค าสัง่ในการโหลดAwesome Fonts ไปวางไวใ้นแทก็

    https://fontawesome.com/start

  • Awesome Fonts• เลือกไอคอนท่ีตอ้งการใชจ้าก https://fontawesome.com/icons?d=gallery

    69

    https://fontawesome.com/icons?d=gallery

  • Awesome Fonts

    70

    Copy ค าสัง่ท่ีอา้งอิงถึงคลาสของไอคอนไปวางไวใ้นส่วนของเวบ็ท่ีตอ้งการ

  • Responsive Design• Responsive Design คือ วิธีการพฒันาเวบ็ใหส้ามารถแสดงผลไดต้ามขนาด

    ของอุปกรณ์ซ่ึงมีอยูห่ลากหลาย เช่น เคร่ือง PC, Tablet, Smart Phone• Responsive Design ใชแ้นวคิดท่ีวา่ เขียนคร้ังเดียว ท างานไดทุ้กอุปกรณ์

    (write once, run everywhere)

    71

  • แนวทางในการสร้างเวบ็แบบ Responsive Design

    • Mobile-first หมายถึง ใชรู้ปแบบโครงสร้างเวบ็ท่ีมีความเรียบง่ายมากท่ีสุด โดยออกแบบเร่ิมตน้ท่ีหนา้จอมือถือ

    • ใชค่้า CSS Property แบบ Relative (การอา้งอิงจากค่าเร่ิมตน้)เช่น ขนาด Font, ขนาดรูปภาพ

    • ตรวจสอบหนา้จอดว้ย Media Query• ใช ้CSS Framework ท่ีรองรับ เช่น Bootstrap, Bulma

    72

  • การก าหนด viewport ด้วยแท็ก

    73

    ก าหนดใหป้รับพื้นท่ีการแสดงผลหนา้เวบ็ (viewport) ตามความกวา้งของอุปกรณ์ท่ีใชใ้นการเปิดหนา้เวบ็

    คุณสมบัติ ค าอธิบาย

    width ความกวา้งของอุปกรณ์ ระบุค่าเป็นตวัเลข (หน่วย pixel) หรือใชค้ าวา่ "device-width" เพื่อใหใ้ชค้วามกวา้งของหนา้จอจริงๆ (หากไม่บอก Browser จะแสดงเหมือนหนา้จอใหญ่ปกติ)

    height ความสูงของอุปกรณ์ ระบุค่าเป็นตวัเลข (หน่วย pixel) หรือใชค้ าวา่ "device-height" เพื่อใหใ้ชค้วามสูงของหนา้จอจริงๆ

    initial-scale ก าหนดการขยาย (zoom) หนา้จอเม่ือมีการเปิดหนา้เวบ็ ค่า 1.0 หมายถึงไม่ตอ้งขยาย

    minimum-scale ก าหนดขอบเขตต ่าสุดในการขยาย หากมีค่าเป็น 1.0 ผูใ้ชจ้ะไม่สามารถขยายได้

    maximum-scale ก าหนดขอบเขตสูงสุดในการขยาย หากมีค่าเป็น 1.0 ผูใ้ชจ้ะไม่สามารถขยายได้

    user-scalable ก าหนดใหผู้ใ้ชส้ามารถขยายหนา้จอไดห้รือไม่ ซ่ึงมีค่าเป็น yes หรือ no

    พื้นฐานของการสร้างเวบ็ในปัจจุบนั ควรก าหนดค่า meta น้ีเสมอ เพื่อรองรับหนา้จอท่ีมีความแตกต่างกนั

  • การใช้ขนาด Font แบบ Relative• ก าหนดหน่วยของ Font เป็น em แทน px

    74

    body { font-size: 100%; }.topic { font-size: 2em; }.content { font-size: 1em; }

    หัวข้ออยู่ทีน่ี่เน้ือหา เน้ือหา เน้ือหา เน้ือหา เน้ือหา เน้ือหา

    ก าหนดใหท้ั้งเวบ็ใชข้นาดฟอนตมี์ค่าเร่ิมตน้ท่ี 100%

    หากตอ้งการใหฟ้อนตมี์ขนาดเพิ่มจากขนาดเร่ิมตน้ก่ีเท่า ใหใ้ชห้น่วย em แทน px เช่น2 em = 200%1 em = 100%

  • การใช้ขนาดรูปภาพ แบบ Relative• ใช ้max-width เพ่ือก าหนดใหแ้สดงภาพท่ีความกวา้งเตม็ขนาดจอ

    แต่ความกวา้งสูงสุดไม่เกินความกวา้งของไฟลภ์าพจริง โดยระบุขนาดเป็นเปอร์เซ็นต์

    75

    img {max-width: 100%;

    }

    This region represents the main content. In this layout, it uses a fixed width of 330 pixels. Here is some sample text to make it seem more realistic

  • Media Query• Media Query คือ คือ การตรวจสอบรายละเอียดของอุปกรณ์ท่ีผูใ้ช ้ใชใ้น

    การชมเวบ็ไซต ์เช่น ขนาด, resolution, color capabilities เป็นตน้ • ขอ้มูลท่ีไดจ้าก Media query จะช่วยใหน้กัพฒันาก าหนดรูปแบบ CSS ท่ี

    เหมาะกบัการแสดงผลได้

    76

  • Media Query• การก าหนดรูปแบบ CSS ใหก้บัหนา้จอแต่ละขนาด ท าได ้2วธีิ ไดแ้ก่– แยกไฟล ์CSS ส าหรับแต่ละหนา้จอ– รวมไฟล ์CSS ส าหรับทุกหนา้จอในไฟลเ์ดียว

    77

  • การแยกไฟล์ CSS ส าหรับแต่ละหน้าจอ

    • บรรทดัท่ี 1 คือ การก าหนด CSS ใหก้บัอุปกรณ์ท่ีมีความกวา้งสูงสุด 480 pixel หรือนอ้ยกวา่นั้น

    • บรรทดัท่ี 2 คือ การก าหนด CSS ใหก้บัอุปกรณ์ท่ีมีความกวา้งต ่าสุด 481 pixel หรือมากกวา่นั้น

    78

  • การรวมไฟล์ CSS ส าหรับทุกหน้าจอในไฟล์เดยีว

    79

    @media screen and (max-width: 480px) {

    .guarantee {margin-left: 30px;font-size: 2em;color: green;

    }}

    @media screen and (min-width: 481px) {.guarantee {

    margin-left: 250px;color: blue;

    }}

    This region represents the main content. Inthis layout, it uses a fixed width of 330 pixels. Here is some sampletext to make it seem more realistic:

  • การก าหนด Media Query แบบช่วง

    80

    /* ก าหนดรูปแบบของหนา้จอปกติ */

    @media (min-width: 600px) and (max-width: 700px) {/* ก าหนดรูปแบบของหนา้จอ 600-700 pixel */

    }@media (min-width: 400px) and (max-width: 599.99px) {

    /* ก าหนดรูปแบบของหนา้จอ 400-600 pixel */}@media (max-width: 399.99px) {

    /* ก าหนดรูปแบบของหนา้จอท่ีต ่ากวา่ 400 pixel */}

  • การจัด Layout แบบ Responsive Design

    81

  • 82

    .menu {background-color: black;color: white;text-align: center;width: 30%;

    }

    .content {background-color: gainsboro;width: 60%;

    }

    .ads {background-color: cornflowerblue;width: 10%;

    }

    .flex { display: flex; }

    @media (max-width : 480px) {.flex { display: block; }.menu { width: auto; }.content { width: auto; }.ads { width: auto; }

    }

    Menu1
    Menu2
    Menu3
    In publishing, art, and communication, … as speech, writing or any of various arts".

    advertising
    advertising
    advertising

    ผลลพัธ์เม่ือขนาดหน้าจอไม่เกนิ 480 pixel

    ผลลพัธ์เม่ือขนาดหน้าจอมากกว่า 480 pixel