CSS之字體屬性
- font-family 設置字體,比如微軟雅黑,宋體
- font-size: 1cm; 設置字的大小
- font-style: italic; 設置斜體
- font-weight: 800; 設置字體加粗,400相當于normal,700等價于bold
- 這些屬性可以給一個屬性使用,也可以同時使用,div4就是同時使用這些屬性
演示代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div0{
font-family:"宋體"}
#div1{
font-size: 1cm;
}
#div2{
font-weight:900;
}
#div3{
font-style: italic;
}
#div4{
font-weight:900;
font-style: italic;
font-size: 1cm;
font-family:"宋體"
}
</style>
</head>
<body>
<div>我是原始字體</div>
<div id="div0">我變宋體了</div>
<div id="div1">我變大了</div>
<div id="div2">我變粗了</div>
<div id="div3">我變斜了 </div>
<div id="div4">我全變了</div>
</body>
</html>
- 在瀏覽器中演示的結果如下:
字體屬性
CSS之文本屬性
color: #cb0000 設置顏色,可以用取色器獲取16進制的顏色值
-
text-align 設置文本的對齊方式
- text-align: center; 表示居中
- text-align: right; 表示居右
- text-align: left; 表示居左
-
line-height 設置當前行與其相鄰的上下兩行的間距
- 例如 : line-height: 100px;表示當前行與上下兩行間距100像素
-
text-decoration 向文本添加裝飾
- 賦值為none 用來取消超鏈接的下劃線
演示代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div0{
color: #cb0000;
}
#div1{
text-align: right;
}
#div2{
line-height: 100px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div>我是原始樣式</div>
<div id="div0">我變色了 </div>
<div id="div1"> 我置右了 </div>
<div id="div2">我有行間距了</div>
<a >百度一下,你就知道</a>
</body>
</html>
運行結果如下:
文本屬性
