常见属性
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 简写方式
