มูลนิธิ - สไตล์สากล
ในบทนี้เราจะศึกษาเกี่ยวกับรูปแบบทั่วโลก เฟรมเวิร์ก CSS of Foundation ทั่วโลกมีการรีเซ็ตที่มีประโยชน์ซึ่งทำให้การกำหนดสไตล์สอดคล้องกันในเบราว์เซอร์
ขนาดตัวอักษร
ขนาดแบบอักษรของสไตล์ชีตของเบราว์เซอร์ถูกตั้งค่าเป็น 100% ตามค่าเริ่มต้น ขนาดตัวอักษรเริ่มต้นตั้งไว้ที่ 16 พิกเซล ขึ้นอยู่กับขนาดตัวอักษรขนาดตารางจะถูกคำนวณ หากต้องการมีขนาดตัวอักษรพื้นฐานที่แตกต่างกันและจุดพักกริดที่ไม่ได้รับผลกระทบให้ตั้งค่า$ rem-baseเป็น$ global-font-size value ซึ่งต้องเป็นพิกเซล
สี
องค์ประกอบโต้ตอบเช่นการเชื่อมโยงและปุ่มใช้เฉดสีเริ่มต้นของสีฟ้าซึ่งมาจาก SASS ตัวแปร$ หลักสี ส่วนประกอบยังสามารถมีสีเช่น: รองแจ้งเตือนความสำเร็จและการเตือน สำหรับการตรวจสอบข้อมูลเพิ่มเติมได้ที่นี่
การอ้างอิง SASS
ตัวแปร
ตารางต่อไปนี้แสดงรายการตัวแปร SASS ซึ่งใช้ในการปรับแต่งรูปแบบเริ่มต้นของส่วนประกอบในโปรเจ็กต์ _settings.scss ของคุณ
| ซีเนียร์ | ชื่อและคำอธิบาย | ประเภท | ค่าเริ่มต้น |
|---|---|---|---|
| 1 |
$global-width แสดงถึงความกว้างทั่วโลกของไซต์ ใช้เพื่อกำหนดความกว้างของแถวของกริด |
จำนวน | รี - แคล (1200) |
| 2 |
$global-font-size เพราะมันหมายถึงขนาดตัวอักษรที่ใช้กับ<html>และ<body> ตั้งค่าเป็น 100% โดยค่าเริ่มต้นและค่าการตั้งค่าเบราว์เซอร์ของผู้ใช้จะได้รับการสืบทอด |
จำนวน | 100% |
| 3 |
$global-lineheight แสดงถึงความสูงของบรรทัดเริ่มต้นทุกประเภท $ global-lineheightคือ 24px ในขณะที่$ global-font-sizeตั้งค่าเป็น 16px |
จำนวน | 1.5 |
| 4 |
$primary-color ให้สีสันกับส่วนประกอบแบบโต้ตอบเช่นลิงก์และปุ่ม |
สี | # 2199e8 |
| 5 |
$secondary-color มันจะใช้กับชิ้นส่วนที่สนับสนุน.secondaryระดับ |
สี | # 777 |
| 6 |
$success-color เพราะมันหมายถึงสถานะในเชิงบวกหรือการกระทำเมื่อใช้กับ.successระดับ |
สี | # 3adb76 |
| 7 |
$warning-color แสดงถึงสถานะคำเตือนหรือการดำเนินการเมื่อใช้กับคลาส. คำเตือน |
สี | # ffae00 |
| 8 |
$alert-color แสดงสถานะหรือการกระทำเชิงลบเมื่อใช้กับคลาส . alert |
สี | # ec5840 |
| 9 |
$light-gray ใช้สำหรับรายการ UI สีเทาอ่อน |
สี | # e6e6e6 |
| 10 |
$medium-gray ใช้สำหรับรายการ UI สีเทากลาง |
สี | # คาคากา |
| 11 |
$dark-gray ใช้สำหรับรายการ UI สีเทาเข้ม |
สี | # 8a8a8a |
| 12 |
$black ใช้สำหรับรายการ UI สีดำ |
สี | # 0a0a0a |
| 13 |
$white ใช้สำหรับรายการ UI สีขาว |
สี | #fefefe |
| 14 |
$body-background แสดงถึงสีพื้นหลังของร่างกาย |
สี | สีขาว |
| 15 |
$body-font-color แสดงถึงสีข้อความของเนื้อหา |
สี | $ ดำ |
| 16 |
$body-font-family แสดงรายการฟอนต์ของเนื้อหา |
รายการ | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antialiased ประเภท antialiased ถูกเปิดใช้งานโดยการตั้งค่าแอตทริบิวต์นี้จะเป็นจริงโดยใช้คุณสมบัติของ CSS -webkit-ตัวอักษรให้เรียบและ-moz-OSX-ตัวอักษรให้เรียบ |
บูลีน | จริง |
| 18 |
$global-margin แสดงถึงค่าขอบส่วนกลางของส่วนประกอบ |
จำนวน | 1rem |
| 19 |
$global-padding ซึ่งแสดงถึงค่าการขยายทั่วโลกในส่วนประกอบ |
จำนวน | 1rem |
| 20 |
$global-margin แสดงถึงค่ามาร์จิ้นสากลที่ใช้ระหว่างส่วนประกอบ |
จำนวน | 1rem |
| 21 |
$global-weight-normal แสดงน้ำหนักตัวอักษรส่วนกลางสำหรับประเภทปกติ |
คีย์เวิร์ดหรือตัวเลข | ปกติ |
| 22 |
$global-weight-bold แสดงถึงน้ำหนักตัวอักษรส่วนกลางสำหรับตัวหนา |
คีย์เวิร์ดหรือตัวเลข | ตัวหนา |
| 23 |
$global-radius แสดงถึงค่าส่วนกลางขององค์ประกอบทั้งหมดที่มีรัศมีขอบ |
จำนวน | 0 |
| 24 |
$global-text-direction กำหนดทิศทางข้อความของ CSS เป็นltrหรือrtl |
ltr |