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>页面显示
11.21 CSS学习-上午
原文地址：http://www.cnblogs.com/demo-deng/p/7872337.html