วิธีที่จะสร้าง: สไตล์สไตล์ CSS

เรียนวิธีการใช้ CSS ที่จะสร้างสไตล์สไตล์。

วิธีที่จะสร้างสไตล์สไตล์

ขั้นที่หนึ่ง - เพิ่ม HTML:

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>
<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

ขั้นที่สอง - เพิ่ม CSS:

/* แน่ใจว่าเมื่อใช้ padding มันจะทำงานตามที่คาดหวัง */
* {box-sizing:border-box}
/* ตัวแทนของโครงสร้างสไตล์ที่ใช้สำหรับสไตล์สไตล์ */
.container {
  width: 100%; /* ความกว้างทั้งหมด */
  background-color: #ddd; /* สีเทา */
}
.skills {
  text-align: right; /* จัดวางข้อความด้านขวา */
  padding-top: 10px; /* เพิ่มระยะของด้านบน */
  padding-bottom: 10px; /* เพิ่มระยะของด้านล่าง */
  color: white; /* สีขาว */
}
.html {width: 90%; background-color: #04AA6D;} /* สีเขียว */
.css {width: 80%; background-color: #2196F3;} /* สีสky blue */
.js {width: 65%; background-color: #f44336;} /* สีแดง */
.php {width: 60%; background-color: #808080;} /* สีเข้มอ่อน */

亲自试一试