css常見屬性使用
阿新 • • 發佈：2018-12-10
常見屬性
1.顏色屬性
color 屬性定義字型的顏色屬性
{color: brown} (對應英文單詞)或者 {color:#ffffff}(16進位制對應的顏色)
rgb模式: {color:rgb紅(r),綠(g),藍(b)} 各自的取值範圍在0~255之間
紅色 : p{color:rgb(255,0,0)}
綠色 : p{color:rgb(0,255,0)}
藍色 : p{color:rgb(0,0,255)}rgba模式 和之前一樣 a 表示透明度 取值範圍 0-1之間
紅色 : p{color:rgba(255,0,0,0)}
綠色 : p{color:rgba(0,255,0,0.3)}
藍色 : p{color:rgba(0,0,255,0.5)}2.字型屬性
font-size 字型大小
font-size: 100px; 設定固定值
font-size: 100%; 父元素的百分比
font-size: smaller;比父元素更小
font-size: larger;比浮雲蘇更大
font-size: inherit;整合父元素的font-family 定義字型 字型的優先,若果電腦有宋體就顯示宋體,沒有就顯示微軟雅黑,可以搜尋英文代替中文,英文不需要引號
font-family:'宋體','微軟雅黑';font-weight 字型粗細
font-weight:normal; 預設值
font-weight:bold; 粗
font-weight:bolder; 更粗
font-weight:lighter; 更細
或者
font-weight:100~900; 取值是100~900的整百數font-style 字型樣式
font-style:normal 正常
font-style:italic 斜體
font-style:oblique 傾斜
font-style:inherit 整合font-variant 小型大寫字母顯示文字
font-variant:normal; 標準
font-variant:small-caps; 小型小寫字母顯示文字
font-variant:inherit; 繼承背景相關屬性
background-color 背景顏色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
body{
background-color:rgba(0,0,255,0.2)
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">----百度---</a>
</body>
</html>效果:
background-image 背景圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
body{
/* 圖片 */
background-image:url(images/user.png);
/* 重複 */
background-repeat: no-repeat;
/* 位置 */
background-position: center;
}
/* 簡寫方式 和上面效果一樣 */
.body{
background: #f2f2f2 url(images/user.png) no-repeat center
}
</style>
</head>
<body class="body">
<a href="http://www.baidu.com" target="_blank">----百度---</a>
</body>
</html>文字屬性
text-align 橫向排列
text-align:left;
text-align:right;
text-align:center;line-height 文字行高
line-height:xx%; 百分比行高
line-height:xx;固定數值text-indent 首行縮排
text-indent:50%; 縮排父級元素的50
text-indent:50px; 縮排固定制
text-indent:inherit; 繼承letter-soacing 字元間距 文字與文字間距 word-spacing 單詞間距 和字元間距相同
letter-soacing:normal;預設
letter-soacing:20px;自定義大小
letter-soacing:inherit; 繼承direction 文字方向
direction:ltr;從左到右 left to right
direction:rtl;從右邊到左邊 right to left
direction:inherit; 繼承text-transform 文字大小寫
text-transform:capitalize; 每個單詞以大寫字母開頭
text-transform:uppercase; 定義僅有大寫字母
text-transform:lowercase; 定義無大寫字母,僅有小寫字母
text-transform:inherit; 繼承邊框屬性
邊框風格 border-style
border-style:none; 無邊框
border-style:solid; 直線邊框
border-style:dashed; 虛線邊框
border-style:dotted; 點線邊框
border-style:double; 雙線邊框
border-style:groove; 吐槽邊框
border-style:ridge; 壟狀邊框
border-style:inset; inset邊框
border-style:outset; outest邊框
border-style:inherit; 繼承邊框寬度 border-width
border-width:thin;細邊框
border-width:medium;中等邊框
border-width:thick;粗邊框
border-width:2px;固定值邊框
border-width:inherit;繼承邊框顏色
border-color:rgba(0,0,225,0.2) 列表屬性
list-style-type 標記的型別
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
ul{
list-style-type: decimal
}
</style>
</head>
<body>
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</body>
</html>list-style-position 標記的位置
list-style-image 設定影象列表標記
list-style 簡寫方式
