วันพุธที่ 22 กุมภาพันธ์ พ.ศ. 2560

การใช้ CSS File.

CSS ไฟล์คืออะไร?

    CSS ย่อมาจาก Cascading Style Sheets   เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML    ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น


ได้ทำการแก้ไข ให้เมื่อเข้าลิงค์ของ server แล้ว รันโปรแกรมของเราขึ้นมาทันที


ก่อนหน้านี้คเยเป็น r'^account/' เช่นเดียวกับ admin แต่ได้ทำการเปลี่ยนเป็น r'^' กล่าวคือ เมื่อไม่พบอักษรใดๆ ให้รันไปที่โปรแกรม account ของเรา


ได้ผลดังภาพ เมื่อเราเข้า 127.0.0.1:8000 เว็บจะ render หน้า index ของโปรแกรม account ขึ้นมาทันที

การใช้งาน CSS


การทำ hyper-link ให้เป็นสีที่เราต้องการ


ใส่การกำหนดไปว่าให้ลิงค์ที่เชื่อมไปหน้าอื่นเป็นสีอะไร ในที่นี้คือสีแดง โดยปกติแล้วจะเป็นสีน้ำเงินให้ตอนเริ่มต้น


หน้า detail.html ในปัจจุบัน


ในส่วนนี้คือการประกาศ class ชื่อ button และใส่รายละเอียดต่างๆ กล่าวคือ สีพื้นหลังเป็นสีชมพู ความหนาไม่ระบุ สีตัวหนังสือคือสีขาว ขนาด 15px 32px ตำแหน่งตัวหนังสือคือตรงกลาง รูปร่างเป็นกล่องสี่เหลี่ยม และฟอนต์ขนาด 16px


จากนั้นตรงโค้ดสร้างปุ่ม ให้ประกาศการใช้งาน class นั้นๆ ลงไป


ผลที่ได้

การใช้งาน CSS File


สร้างไฟล์ .css ขึ้นมาในโฟลเดอร์ static ของเรา


ใส่รายละเอียดที่เราต้องการลงไป


ในไฟล์ templates ให้เราทำการ load static ลงไป และใส่คำสั่ง <link rel="stylesheet" href="{% static 'ชื่อไฟล์.css' %}"> ลงไปใน head


นี้คือผลลัพธ์ที่ได้


commit โค้ดล่าสุด ขึ้นไปบน git hub เรียบร้อยแล้ว










ไม่มีความคิดเห็น:

แสดงความคิดเห็น

Link Video Presentation Resort Managemant System Project.

Video Presentation Resort Managemant System Project. จัดทำโดย พากษ์เสียง: คุณาสิน  ทองมณี  5801012620011 ลำดับภาพ: สุพิชชา  ศรีศิริ...