1.border边框
一个边框的设置,需要设置边框的宽度、颜色、边框的样式
border-width 边框宽度(单位:px)
border-color 边框颜色(有三种形式)
- 关键词(英文颜色单词,例如:red)
border-color:red
- RGB(三原色,利用ps工具获取这些数值 CMYK)
border-color:rgb(255,0,0)
- RGBa (( alpha 不透明度 ),取值0~1之间,0 表示全透明)
border-color:rgb(255,0,0,0)
border-color:rgb(255,0,0,0.6)
- 十六进制颜色(0123456789abcdef)
border-color:#ff0000
border-style 边框样式(三种形式)
solid(直线) / dotted(点线) / dashed (虚线)/ double(双线)
border 多值书写

上右下左 顺时针
一个值(上右下左)
两个值(上下 和 左右)
三个值(上 和 左右 和 下)
四个值(上 和 右 和 下 和 左)
border 单边框
border-left:边框宽度 边框样式 边框颜色;
- border-left-width:左边框宽度;
- border-left-color:左边框颜色;
- border-left-style:左边框样式;
border-top / border-right / border-bottom / border-left
border 复合样式
顺序都可
border: width style color;
border-top: width style color;
边框的特性:
- 同一个元素,相交的两条边框,连接处是斜线
- 元素的宽高 = width + 边框 \ height + 边框
层叠样式表:
- 在样式表中,给同一个元素 添加 同一条样式,后面覆盖前面的
2.background 背景属性
background-color 背景颜色
一样的也是三种形式颜色值:关键词、rgb、十六进制颜色值
background-image 背景图片
background-image:url(背景图片地址);
路径问题:绝对路径 / 相对路径
- 无论从哪里出发,通过这个地址都能找到目标:绝对路径
- 你往前走一百米,然后左转再走两百米就到了:相对路径
哪种路径会比较好?
一般用相对路径
但是如果资源过多,需要有专门的资源服务器,这时候为了资源响应优化,推荐使用绝对地址。
如何基于当前的位置,找另一个文件
- 如果在上一层文件夹 ../
如果在上上层文件夹 ../../
如果在上上上层文件夹../../../
….以此类推
- 同级的文件夹里面
先进入文件夹,再找具体文件:文件夹名/文件名
- 如果是同级呢的文件
直接写上文件名字
background-repeat 背景重复
repeat(重复)默认值 / repeat-x (x轴重复)/ repeat-y(y轴重复) / no-repeat(不重复)
background-position 背景定位 控制背景的位置
值的类型:
值的个数:
一个:x center(y默认居中);
两个:x y;
扩展:配合关键词可以更好的指定背景的位置
background-position: right 20px bottom 50px;
可以设置距离右边和底部的位置
扩展:图片精灵css sprite
background-position: 10px 20px;
可以用一张图片集成很多个图标
background-attachment背景滚动
背景是跟随滚动条滚动(scroll)/ 固定当前位置(fixed)
background复合样式
background:背景颜色 背景图 背景重复 背景定位 背景跟随滚动;
3.font 字体
font-weight 字体加粗
normal(默认值。标准的字符)/ lighter(更细的字符)/ bold(粗体字符)/ bolder(更粗的字符)
也可以用数字代替,取值100~900,定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。
font-style 字体样式
normal (正常显示)/ italic(文本斜体)/ oblique (文本倾斜)
font-size 字体大小
font-size:数值px;
谷歌最小显示字体为12px,小于12px的,都按照12px处理
不设置的情况,一般默认为16px的大小
解决方案:截图,作为图片显示
font-family 字体
font-family:字体样式名字 ;
中文常用:微软雅黑、宋体、苹方 (中文必须写在引号内)
英文常用:Arial、Helvetica
首选字体放在前面,备选字体放在后面
英文写在中文的前面,因为英文的字体里面没有中文的,但是因为中文有aoe拼音,所以对于英文也有字体的设计。
line-height 行高
line-height:具体数值;
- 具体数值 px
- 倍数:该倍数是根据字体大小来进行计算的
font复合样式
- 字体大小和字体
font:font-size font-family;
- 这里注意一下,当字体大小和行高一起出现时,记得把他们写在一起,并且用斜杠连起来,字体大小/行高
font:font-size/line-height font-family;
- 除了字体大小和行高要写一起外,其他的书写顺序都可以
font:font-style font-weight font-variant font-size/line-height font-family;
4.text 文本设置
text-color 文本颜色
color:#f00;
三种方式:关键词、rgb、十六进制颜色
text-align 文本对齐方式
left(居左) / right(居右) / center(居中)
扩展:文字两端对齐
text-align:justify
text-align-last: justify
text-indent 首行缩进
text-indent:具体数值;
text-indent:16px;
text-indent:1em;
单位:em
或者 px
em -> 1em = 当前设置的这个元素上的文字大小
text-decoration 文本修饰
none(去除)/ underline(下划线)/ overline(上划线)/ line-through (删除线)
word-spacing:具体数值; 词间距
浏览器怎么知道什么是单词?你要自己用空格间隔开来,这时候才有效果
间隔 = 空格大小+词间距
在宋体的情况下,一个空格 = 字体大小的一半,但是不是所有字体都是
letter-spacing:具体数值; 字间距
空格同样也是字符,所以也会有字间距

数字和英文不会自动换行,只有中文可以自动换行这时候怎么办?
- word-break:break-all; 强制换行
- white-space:nowrap; 强制不换行
white-space: 是否换行
nowrap 不换行 / wrap 换行(默认)
文本溢出处理
white-space:nowrap;
overflow:hidden; /*溢出处理:隐藏*/
text-overflow:ellipsis; /*文本溢出处理:以省略形式显示*/
文本溢出处理(多行处理):
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 出现的行数!*/