1.颜色属性
color属性定义文本的颜色
color:green
color:#ff6600
color:#f60 简写式
color:rgb(255,255,255) 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
color:rgba(255,255,255,1) RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的(色彩空间)透明度
2.字体属性
1.font-size 字体大小 固定大小 font-size:14px
父元素百分比 %
比父元素更大 larger
比父元素更小 smaller
继承父元素 inherit
2.font-family 定义字体 font-family:微软雅黑,serif; 可以使用“,”隔开,以确保当字体不存在的时候直接使用下一个
3.font-weight 字体加粗 normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)
100、200、300~900 400 = normal,而 700 = bold
4、font-style 字体样式 normal 正常
italic 斜体
oblique 倾斜
inherit 继承
5、font-variant 小型大写字母显示文本 normal 正常
small-caps 小型大写字母显示文本
inherit 继承
父元素百分比:
3.背景属性
1.背景颜色 background-color
2.背景图片 background-image background-image:url(图片路径) background-image:none
3.背景重复 background-repeat repeat 重复平铺满
repeat-x 向Y轴重复
repeat-y 向Y轴重复
no-repeat 不重复
4.背景位置 background-position 横向(left,center,right)
纵向(top,center,bottom)
5.简写方式 background:背景颜色 url(图像) 重复 位置
background:#f60 url(images/bg,jpg) no-repeat top center
简写方式
4.文本属性
1.text-align 横向排列 left,center,right
2.line-height 文本行高 1.%基于字体大小的百分比行高
2.数值 来设置固定值
3.text-indent 首行缩进 % 父元素的百分比
px 固定值 默认为0
inherit 继承
4.letter-spacing 字符间距 normal 默认值
length 设置具体的值(可以为复数)
inherit 继承
5、word-spacing 单词间距 normal 标准值
px 固定值(可以为复数)
inherit 继承
6、direction 文本方向 ltr从左到右 默认值
rtl 从右到左
inhrtit 继承
7.text-transform 文本大小写 none 默认
capitalize 每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义 无大写字母仅有小写字母
inherit 继承
5.边框属性
1.边框风格 border-style
统一风格(简写风格) border-style
单独定义某一方向的边框样式 border-bottom-style 下边边框样式
border-top-style 上边边框样式
border-left-style 左边边框样式
border-right-style 右边边框样式
边框风格样式的属性值 1、none 无边框
2、solid 直线边框
3、dashed 虚线边框
4、dotted 点状边框
5、double 双线边框
6、groove 凸槽边框
7、ridge 垄状边框
8、inset inset边框
9、outset outset边框
10、inherit继承
6-9 依托border-color的属性值
2.边框宽度 border-width 统一风格 border-width:
单独风格 border-top-width 上边边框宽度
border-bottom-width 下边边框宽度
border-left-width 左边边框宽度
border-right-width 右边边框宽度
边框宽度的属性值: 1、thin 细边框
2、medium 中等边框
3、thick 粗边框
4、px 固定值的边框
5、inherit继承
3.边框颜色 border-color 统一风格 border-color
单独风格 border-top-color 上边边框颜色
border-bottom-color 下边边框颜色
border-left-color 左边边框颜色
border-right-color 右边边框颜色
属性值 1、颜色值的名称 red、green、 RGBrgb(255,255,0)、RGBArgba(255,255,0,0.1)、十六位进制#ff0、#ff0000、继承inherit
属性值的四种情况 一个值:border-color:(上、下、左、右);
两个值:border-color:(上下) (左右);
三个值:border-color:(上) (左、右) (下);
四个值:border-color:(上)(右)(下)(左);
简写方式 border:solid 2px #f60
简写方式:
6.列表属性
1.标记的类型 list-style-type none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
2.标记的位置 list-style-position inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。
3.设置图像列表标记 list-style-image URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。
4.简写方式 list-style list-style:square inside url('/i/arrow.jpg');
![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20190626173722505.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYyMDUwNQ==,size_16,color_FFFFFF,t_70)![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20190626173736564.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTYyMDUwNQ==,size_16,color_FFFFFF,t_70) `在这里插入代码片`
![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20190626174542117.png)![在这里插入代码片](https://www.icode9.com/i/ll/?i=20190626174549127.png)