Quest Academy

Basic CSS

Introduction to Basic CSS

Cascading Style sheets (CSS) บอก Browser ว่าจะแสดงข้อมูลเนื้อหาอื่น ๆ ที่คุณเขียนด้วย HTML ได้อย่างไร

โปรดทราบว่า CSS นั้นคำนึงถึงตัวพิมพ์เล็กและพิมพ์ใหญ่ ดังนั้น โปรดระมัดระวังการใช้อักษรตัวพิมพ์ใหญ CSS จะถูกนำมาใช้โดย Browser หลัก ๆ ทั้งหมดและช่วยให้คุณควมคุม :

  • color
  • fonts
  • positioning
  • spacing
  • sizing
  • decorations
  • transitions

มีสามวิธีหลักในการใช้ Styling CSS คุณสามารถนำ Styles inline ไปใช้กับองค์ประกอบ HTML ได้โดยตรงด้วย คุณสมบัติ styleหรือคุณสามารถวางกฏ CSS ภายใน styleแท็กในเอกสาร HTML สุดท้ายคุณสามารถเขียนกฏได้ภายใน Style sheet ภายนอก จากนั้นอ้างอิงไฟล์นั้นในเอกสาร HTML แม้ว่าสองตัวเลือกแรกจะมีกรณีใช้งาน แต่นักพัฒนาส่วนใหญ่ก็ชอบ Style sheet ภายนอกเพราะแยก Style ออกจากองค์ประกอบ HTML ซึ่งจะช่วยเพิ่มความสามารถในการอ่านและการนำกลับมาใช้ใหม่ขอ Code ของคุณ แนวคิดเบื้องหลัง CSS คือคุณสามารถใช้ตัวเลือกเพื่อกำหนดเป้าหมายองค์ประกอบ HTML ใน DOM (Document Object Model) จากนั้นใช้คุณสมบัติที่หลากหลายกับองค์ประกอบนั้นเพื่อเปลี่ยวิธีการแสดงบน Page

ในส่วนี้คุณจะเห็นว่าการเพิ่ม Style Sheet ให้องค์ประกอบ CatPhotoApp ของคุณสามารถเเปลี่ยนจากข้อความธรรมดาไปเป็นอย่างอื่นได้อย่างไร

Basic CSS

Change the Color of Text

Use CSS Selectors to Style Elements

Use a CSS Class to Style an Element

Style Multiple Elements with a CSS Class

Change the Font Size of an Element

Set the Font Family of an Element

Import a Google Font

Specify How Fonts Should Degrade

Size Your Images

Add Borders Around Your Elements

Add Rounded Corners with border-radius

Make Circular Images with a border-radius

Give a Background Color to a div Element

Set the id of an Element

Use an id Attribute to Style an Element

Adjust the Padding of an Element

Adjust the Margin of an Element

Add a Negative Margin to an Element

Add Different Padding to Each Side of an Element

Add Different Margins to Each Side of an Element

Use Clockwise Notation to Specify the Padding of an Element

Use Clockwise Notation to Specify the Margin of an Element

Use Attribute Selectors to Style Elements

Understand Absolute versus Relative Units

Style the HTML Body Element

Inherit Styles from the Body Element

Prioritize One Style Over Another

Override Styles in Subsequent CSS

Override Class Declarations by Styling ID Attributes

Override Class Declarations with Inline Styles

Override All Other Styles by using Important

Use Hex Code for Specific Colors

Use Hex Code to Mix Colors

Use Abbreviated Hex Code

Use RGB values to Color Elements

Use RGB to Mix Colors

Use CSS Variables to change several elements at once

Create a custom CSS Variable

Use a custom CSS Variable

Attach a Fallback value to a CSS Variable

Cascading CSS variables

Change a variable for a specific area

Use a media query to change a variable

Be the first to add a review.

Please, login to leave a review
Add to Wishlist

Archive