CSS字体-font
- CSS字体属性
| 属性名 | 含义 | 举例 |
| font-family | 设置字体类型 | {font-family:“宋体”;} |
| font-size | 设置字体大小 | {font-size:12px;} |
| font-style | 设置字体风格 | {font-style:italic;} |
| font-weight | 设置字体粗细 | {font-weight:bold;} |
| font | 设置所有字体属性 | {font:italic bold 36px "宋体";} |
- CSS字体类型：font-family:“xxx”
<html>
…
<style type="text/css">
.first { font-family: "Arial"; }
.second { font-family: "宋体"; }
</style> <body>
<h3 class="first">CSS文本(Arial)</h3>
<h3 class="second">CSS文本(宋体)</h3>
</body>
</html>
- CSS字体大小：font-size:xxx
.first {
font-size: 16px; }
.second {
font-size: 24px; }
- CSS字体风格：font-style:normal(正常) / italic（斜体）
.first {
font-style: normal; }
.second {
font-style: italic; }
- CSS字体粗细：font-weight:normal(默认) / bold（粗体）/ 100~900
<style type="text/css">
.first {
font-weight: normal; /* bold */ }
.second {
font-weight: 700; /* 400=normal 700=bold */ }
</style>
- CSS字体简化设置
简化前：
<style type="text/css">
.title {
font-style: italic;
font-weight: bold;
font-size: 20px;
font-family: "Arial"; }
</style>
简化后：
<style type="text/css">
.title {
font: italic bold 20px "Arial";
}
</style>
CSS超链接-a
- CSS超链接样式设置
CSS中可以根据超链接元素的状态，设置不同的样式属性
下面为4种超链接状态：
a:link - 正常状态，未访问过的超链接状态
a:visited - 已访问过状态，用户已访问过的超链接状态
a:hover - 鼠标放上状态，当用户鼠标放在超链接上时状态
a:active - 点击状态，超链接被点击的那一刻状态
超链接颜色、背景、字体....
<html> <meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.title {
color: #FFFFFF; /* 白色字体 */
background-color: blue; /* 蓝色背景 */
font-size: 34px; /* 34px 字体 */
text-decoration: none;/* 去掉链接文字的下划线 */
cursor:wait; /* 改变鼠标形状 */
}
</style>
<body>
<a href="#">CSS</a>
<a href="#" class="title">CSS超链接</a>
</body>
</html>
CSS鼠标指针
CSS 设置超链接状态样式
<style type="text/css">
.title:link {
color: blue;
}
.title:visited {
color: green;
}
.title:hover {
color: white; /*字体白色*/
font-size: 150%;
background: #000000; /*背景黑色*/
text-decoration: none; /*去掉文字下划线*/
}
</style> <a href="#" class="title">CSS超链接</a>
1263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
