【前端基础--3】

文字样式

1.文字颜色 color

取值方式：

英文单词 red green blue
十六进制的颜色值 #000000 也可以写为#000（如aabbcc可以简写为abc）
rgb三原色取值 color：rgb(220,32,215) 取值范围都在0~255之间

2.文字大小 font-size

一般网页默认16像素最小是0，没有文字的

单位：px em（1em=16px）等

3.文字粗细 font-weight

正常不加粗的标签默认值是：normal （除了h1~h6 strong等）

加粗的文字：bold

更粗的文字：bolder

更细的文字：lighter

自定义的值取整百位数：100，200，300....900

4.字体类型 font-family

写法：font-family:'宋体';

常用：宋体，楷体，微软雅黑，黑体等。

引入外部字体方式：

        @font-face {font-family: ;/* 放入外部字体种类文件地址 */src: url();}

文字效果

文字在盒子居中：

line-height: 100px; 行高等于盒子高度(100px)时

字体倾斜：

font-style: italic;

强制倾斜：

font-style: oblique;

文字复合写法：

font: 斜体粗细字体大小/行高字体类型;

font: normal 900 12px/100px '宋体';

文本样式

1.文本对齐方式 text-align

居中对齐

text-align: center;

左对齐

text-align: left;

右对齐

text-align: right;

2.文本缩进 text-indent

缩进10像素

text-indent: 10px;

关于a标签： (不止a标签可以这样用）

清除下划线

text-decoration: none;

下划线

text-decoration: underline;

上划线

text-decoration: overline;

中横线

text-decoration: line-through;

文本线颜色

text-decoration-color: red;

3. 文本间距 letter-spacing

设置每一个文字/字符之间的距离

letter-spacing: 5px;

设置英文单词之间的间隔

word-spacing: 5px;

4.文本溢出 white-space/overflow

文本超出宽度会默认换行显示

white-space: normal;

文本不换行显示

white-space: nowrap;

溢出隐藏

overflow: hidden;

控制文本溢出为省略号显示

text-overflow: ellipsis;

数字换行显示，强制数字换行

word-wrap: break-word;

多行文本变成省略号（下面是显示在第二行有省略号）

        .text{/* 文字间距 */letter-spacing: 2px;display: -webkit-box;/* 超出宽度自动换行 */white-space: normal;/* 文本显示方向 */-webkit-box-orient: vertical;/* 文本显示行数 */-webkit-line-clamp: 2;overflow: hidden;font: normal 400 15px/30px '宋体';}

5.文本基线

可以使图片与文本文字对齐

与顶部基线对齐

vertical-align: top;

对齐文本基线中间

vertical-align: middle;

背景样式

1.背景颜色 background-color

background-color

2.背景图片 background-image

background-image: url(图片路径)

3.背景平铺 background-repeat

当图片小于盒子的时候，默认平铺

background-repeat: no-repeat; (不平铺图片)

background-repeat: repeat-x; (水平方向平铺图片)

background-repeat: repeat-y; (垂直方向平铺图片)

但图片大于盒子时，超出的部分会被隐藏

background-size: 100% 100%; (图片适应盒子大小）

background-size:cover; (等比例铺满盒子)

4.背景大小 background-size: x y

调整时注意大小，当背景图片大于盒子时，超出的会被隐藏。

5.背景显示位置 background-position: x y

background-position: 0px 0px; (默认左上角显示)

background-position: right top; (右上角显示)

background-position: center; (在中间显示）

background-position: 0px 10px; （x轴0，图片沿y轴向下移动10px)