通過代碼來學習其中的屬性
1 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> 2 <style> 3 .red-text { 4 color: red; 5 } 6 7 h2 { 8 font-family: Lobster, Monospace; //當某種字體不可用時，瀏覽器將其 “降級” 為后面一種字體。 9 } 10 11 p { 12 font-size: 16px; //字體大小 13 font-family: Monospace; //字體類型 14 } 15 16 .thick-green-border { 17 border-color: green; 18 border-width: 10px; 19 border-style: solid; 20 border-radius: 50%; //給圖像設置圓角邊框 21 } 22 23 .smaller-image { 24 width: 100px; 25 } 26 27 .gray-background { //class屬性都是. 28 background-color: gray; //灰色背景 29 } 30 31 #cat-photo-form { //id屬性都用# 32 background-color: green; //綠色背景 33 </style> 34 35 <h2 class="red-text">CatPhotoApp</h2> 36 37 <p>Click here for <a href="#">cat photos</a>.</p> 38 39 <a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg"></a> 40 //通過把href屬性設置為"#"，你的a元素應該是一個固定鏈接。 41 //alt 屬性 是當圖片無法顯示時的替代文本。alt 屬性對於盲人或視覺障礙的用戶理解圖片中的內容非常重要，搜索引擎也會搜索alt 屬性來了解圖片的內容。 42 43 <div class="gray-background"> 44 <p>Things cats love:</p> 45 <ul> // 無序列表 46 <li>cat nip</li> 47 <li>laser pointers</li> 48 <li>lasagna</li> 49 </ul> 50 <p>Top 3 things cats hate:</p> 51 <ol> // 有序列表 52 <li>flea treatment</li> 53 <li>thunder</li> 54 <li>other cats</li> 55 </ol> 56 </div> 57 58 <form action="/submit-cat-photo" id="cat-photo-form"> 59 <label><input type="radio" name="indoor-outdoor" checked> Indoor</label> //使用 checked 屬性，你可以設置一個單選框和復選框默認被選中。 60 <label><input type="radio" name="indoor-outdoor"> Outdoor</label> 61 <label><input type="checkbox" name="personality" checked> Loving</label> //radio是單選框，checkbox是復選框 62 <label><input type="checkbox" name="personality"> Lazy</label> 63 <label><input type="checkbox" name="personality"> Energetic</label> 64 <input type="text" placeholder="cat photo URL" required> //required（必填項），只有當用戶填寫了該選項后，用戶才能夠提交表單。 65 <button type="submit">Submit</button> 66 </form>
顯示效果如圖
