1 /* 2 格式： 3 父元素名 子元素名{ 4 ...... 5 } 6 */ 7 8 9 #elixirs h2{ 10 color:black; //指定elixirs <div> 中的所有 <h2> 的颜色为黑色 11 }
1 <div id="elixirs"> 2 <h2>孩子</h2> 3 <h3>Lemon Breeze</h3> 4 <p> 5 <div id="a"> 6 <h2>孙子1</h2> 7 <div id="aa"> 8 <h2>曾孙1</h2> 9 </div> 10 </div> 11 12 <blockquote> //在这里， <blockquote> 中的 <h2>与 <div> 中的 <h2>有同样的效果 13 <h2>孙子2</h2> 14 <blockquote> 15 <h2>曾孙2</h2> 16 </blockquote> 17 </blockquote> 18 </p> 19 </div>
1 #elixirs>h2{ 2 color:black; 3 }
1 #elixirs blockquote h2{ 2 color:black; 3 }
| 普通写法 | 简写 |
|
padding/margin-top: 0px; padding/margin-right: 20px; padding/margin-bottom: 30px; padding/margin-left: 10px; |
padding/margin: 0px 20px 30px 10px; (按照上、右、下、左的顺序) |
|
padding/margin-top: 20px; padding/margin-right: 20px; padding/margin-bottom: 20px; padding/margin-left: 20px; |
padding/margin: 20px; |
|
padding/margin-top: 0px; padding/margin-right: 20px; padding/margin-bottom: 0px; padding/margin-left: 20px; |
padding/margin: 0px 20px; （针对上和下、左和右相同的情况） |
1 a:link{ 2 color:green; //处于未访问状态的链接 3 } 4 5 a:visited{ 6 color:red; //已访问过的链接 7 } 8 9 a:hover{ 10 color:yellow; //鼠标悬停时的链接 11 } 12 13 a:focus{ 14 color:blue; //按下Tab键将交点放在链接上时的链接 15 } 16 17 a:active{ 18 color:black; //第一次单击一个链接时的链接 19 }
1 blockquote:first-child{ 2 ...... //选择 <blockquote> 中的第一个段落 3 } 4 5 blockquote:last-child{ 6 ...... //选择 <blockquote> 中的最后一个段落 7 }
1 h1{ 2 font-size:200% 3 !important; //这会覆盖作者的样式 4 }
1 #sidebar{ 2 position:absolute; 3 top:100px; 4 right:100px; 5 width:400px 6 }
1 <div id="tableContainer"> //整个表格 2 <div id="tableRow"> //表格的一行 3 <div id="main"> //表格的一行中的第一列 4 ...... //单元格内容 5 </div> 6 <div id="sidebar"> //表格的一行中的第二列 7 ...... //单元格内容 8 </div> 9 </div> 10 </div>
1 div#tableContainer{ 2 display: table; //像表格一样摆放 tableContainer <div> 3 border-spacing: 10px; //单元格边框间距，可取代元素的外边距 4 ...... 5 } 6 div#tableRow{ 7 display: table-row; //显示为表格的行 8 ...... 9 } 10 #main{ 11 display: table-cell; //显示为单元格 12 vertical-align: top; //单元格中的内容相对于单元格上边对齐 13 ...... 14 } 15 #sidebar{ 16 display: table-cell; 17 vertical-align: top; 18 ...... 19 }
1 ...... 2 3 4 <time datetime = "2021-8-10">Tuesday</time> 5 <!-- 指定日期的官方 Internet 格式，包括年、月、日、24小时制表示的时间，也可只指定其中的几项，可以指定如上所示 6 元素内容可以是日期时间或与之相关的文本--> 7 8 9 ......
1 <video controls autoplay width="" height=""> 2 <source src = "xxxxx.mp4"> 3 <source src = "xxxxx.webm"> 4 <source src = "xxxxx.ogv"> 5 <p>Sorry, your brower doesn‘t support the video element.</p> 6 </video> 7 8 9 <!--浏览器会从上往下查找，直到找到它能播放的格式-->
1 <source src = "xxxx.ogv" type = ‘video/ogg;codecs = "theora,vorbis"‘> 2 3 //注意： type属性两边是单引号
1 <table> //<table> 标记开始整个表格 2 <tr> //<tr>指定一个行 3 <th>City</th> 4 <th>Date</th> 5 <th>Temperature</th> //<th>指定表头中的单元格 6 <th>Altitude</th> 7 <th>Population</th> 8 <th>Diner Rating</th> 9 </tr> 10 <tr> 11 <td>Walla Walla,WA</td> //<td>是表格中的一个数据单元格 12 <td>June 15th</td> 13 <td>75</td> 14 <td>1,204ft</td> 15 <td>29,686</td> 16 <td>4/5</td> 17 </tr> 18 <tr> 19 <td>Magic City,ID</td> 20 <td>June 25th</td> 21 <td>74</td> 22 <td>5,312ft</td> 23 <td>50</td> 24 <td>3/5</td> 25 </tr> 26 </table>
td:nth-child(even){
background-color:red; //偶数行为红色
}
td:nth-child(odd){
background-color:green; //奇数行为绿色
}
//还可使用数字n指定简单的表达式
td:nth-child(2n){
background-color:yello;
}
td:nth-child(2n+1){
background-color:black;
}
1 /*首先为元素增加 id 属性*/ 2 <input type="text" name="hotornot" value="hot" id="hot"> 3 4 /*然后增加一个<label>，设置其 for 属性为相应的 id*/ 5 <label for="not">not</label>
1 <fieldset id=""> 2 <legend>Condiments</legend> 3 <input type="checkbox" name="spice" id="salt" value="salt"/> 4 <label for="salt">Salt</label><br> 5 <input type="checkbox" name="spice" id="pepper" value="pepper"/> 6 <label for="pepper">Pepper</label><br> 7 <input type="checkbox" name="spice" id="garlic" value="garlic"/> 8 <label for="garlic">Garlic</label><br> 9 </fieldset>
《Head First HTML与CSS》草稿（11~14）
原文：https://www.cnblogs.com/zk-blog-2021-6-11/p/15109630.html