11.21 CSS学习-上午
font-family:设置文本的字体序列，应当多设置几个，作为后备机制，如果浏览器不支持第一种字体，它将尝试下一种字体。
字体序列的名字超过一个字需要使用引号，多个字体序列用逗号分隔指明：
{font-family:'Times New Roman',SansSerif;}
font-style字体样式：指定斜体文字的字体样式
1）正常：normal;2）斜体：italic;3）倾斜的文字：oblique
{font-style: italic;}
font-size设置文本的字体大小：严格把控字体的大小才能够是页面开起来美观
{font-size: 30px;}
font-weight进行字体加粗：bold,bolder,normal,
{font-weight: bold;}
link链接：不同的链接有不同的样式，有四种链接状态
a:link -正常，未访问过的链接
a:visited -用户已经访问过的链接
a:hover -当用户鼠标放在链接上时
a:active -链接被点击的那一刻
background-color:链接背景色
text-decoration:链接修饰，主要是下划线
a:link{
color: burlywood;
text-decoration: none;
}
a:visited{
color: #FF0000;
text-decoration: none;
}
a:hover{
color: blueviolet;
text-decoration: underline;
}
a:active{
color: darkmagenta;
}
列表：有序列表、无序列表
list-style-type:指定列表项标记的类型（ul：无序；ol：有序）
ul.animal{
list-style-type: square;
}
ul.trans{
list-style-type: circle;
}
表格填充：padding,如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性。设置内边距，按照顺时针的方式走，上右下左
td
{
padding:15px;
}
表格边框：border
table, th, td
{
border: 1px solid black;
}
表格折叠：collapse，指定表格的边框是否被折叠成一个单一的边框，border-collapse:collapse
table
{
border-collapse:collapse;
}
表格的宽度和高度：100%的宽度，50像素的高度
table
{
width:100%;
}
th
{
height:50px;
}
表格中的文本对齐
td
{
text-align:left;
}
指定边框的颜色，th元素的文本和背景色
table, td, th{
border: 1px solid green;
border-collapse: collapse;
}
th{
background-color: green;
color: white;
// width：占屏幕宽度的20%
width: 20%;
height: 30px;
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" content="This is a meta data" name="yexun"> 5 <title>Title</title> 6 <link rel="stylesheet" type="text/css" href="home.html"> 7 <style> 8 body { 9 10 } 11 a:link{ 12 color: burlywood; 13 text-decoration: none; 14 } 15 a:visited{ 16 color: #FF0000; 17 text-decoration: none; 18 } 19 a:hover{ 20 color: blueviolet; 21 text-decoration: underline; 22 } 23 a:active{ 24 color: darkmagenta; 25 } 26 p { 27 font-family: SansSerif, 'Times New Roman'; 28 font-size: 30px; 29 font-style: italic; 30 font-weight: bold; 31 } 32 {# h1 {#} 33 {# color: cornflowerblue;#} 34 {# text-align: center;#} 35 {# }#} 36 #hcolor { 37 color: aquamarine; 38 letter-spacing: 2px; 39 text-align: center; 40 text-shadow: 2px 2px #FF0000; 41 } 42 #getIn { 43 height: 20px; 44 width: 100px; 45 background-color: burlywood; 46 } 47 ul.animal{ 48 list-style-type: square; 49 } 50 ul.trans{ 51 list-style-type: circle; 52 } 53 #info{ 54 font-family: SansSerif; 55 width: 40%; 56 border-collapse: collapse; 57 } 58 #info td, #info th{ 59 font-size: 1em; 60 border: 1px solid #98bf21; 61 padding: 3px 7px 2px 7px; 62 } 63 #info th{ 64 font-size: 1.1em; 65 text-align: left; 66 padding-top: 5px; 67 padding-bottom:4px; 68 background-color: #a7c942; 69 color: #ffffff; 70 } 71 #info tr.alt td{ 72 color: #000000; 73 background-color: #eaf2d3; 74 } 75 </style> 76 </head> 77 <body> 78 <input id="getIn" type="text" name="one"/> 79 <script> 80 document.write('hello!') 81 </script> 82 <ul class="animal"> 83 <li>cat</li> 84 <li>dog</li> 85 <li>pig</li> 86 </ul> 87 <ul class="trans"> 88 <li>bike</li> 89 <li>car</li> 90 <li>plane</li> 91 </ul> 92 <table> 93 <tr> 94 <th>list_01</th> 95 <th>list_02</th> 96 <th>list_03</th> 97 </tr> 98 <tr> 99 <td>dog</td> 100 <td>cat</td> 101 <td>bird</td> 102 </tr> 103 <tr> 104 <td>flower</td> 105 <td>green</td> 106 <td>blue</td> 107 </tr> 108 </table> 109 <br> 110 111 <table id="info"> 112 <tr> 113 <th>name</th> 114 <th>age</th> 115 <th>sex</th> 116 </tr> 117 <tr class="alt"> 118 <td>Brown</td> 119 <td>23</td> 120 <td>male</td> 121 </tr> 122 <tr> 123 <td>Alice</td> 124 <td>18</td> 125 <td>female</td> 126 </tr> 127 <tr class="alt"> 128 <td>Bob</td> 129 <td>33</td> 130 <td>male</td> 131 </tr> 132 <tr> 133 <td>Tom</td> 134 <td>17</td> 135 <td>male</td> 136 </tr> 137 <tr class="alt"> 138 <td>Jerry</td> 139 <td>18</td> 140 <td>female</td> 141 </tr> 142 <tr> 143 <td>King</td> 144 <td>5</td> 145 <td>male</td> 146 </tr> 147 </table> 148 </body> 149 </html>
页面显示
