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
{
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%
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>

页面显示