超全的css样式总结 第十四天

一、背景样式

background-color

背景颜色 后面直接跟颜色的值

background-img:url()

背景图 url后面跟的是图片地址，可以是本地地址，也可以是网络地址

background-repeat:

1.repeat 背景图全部覆盖
2.repeat-x 背景图沿x轴横向一排
3.repeat-y 背景图沿y轴纵向一排
4.no-repeat 不重复 只显示一个图

background-size:

1. 100% 水平铺满
2. contain 长边铺满
3. cover 短边铺满

background-position:

1.固定位置 center left right top bottom
2.像素位置 50px 50px

background-origin:

1.content-box 背景图显示在width heigh内部
2.border-box 背景图显示在border内部
3.padding-box(默认) 背景图显示在padding内部 默认

二、文本样式

text-transform:

capitalize 手字母大写
uppercase 全大写
lowercase 全小写

text-decoration:

none 去除下划线
line-through 中划线
overline 上划线
underline 下划线

text-align:

center 居中 一定要是行块元素
right 居右
left 居左默认

其他:

line-height：行高 竖直间距
line-height=height
verticle-align：middle
text-indent:2em   文本缩进
word-spacing: 单词间距
letter-spacing：字母间距

三、字体样式

font-family:

‘Courier New’, 宋体;

多个字体使用逗号隔开 如果字体名字中有空格则需要使用引号

font-size:

字体大小 后面值可是像素或者em，正常情况下1em=16px

font-style:

normal 正常
italic 斜体

font-weight:

normal 正常
bold 粗体

font-weight的值是100-900

自定义字体:

格式：

  @font-face {
            /* 自定义字体名字 */
            font-family: "名字";
            /* 字体路径 */
            src: url(./fonts/Blueberry\ Days.ttf);
        }