【前端基础--3】

文字样式

1.文字颜色 color

取值方式：

1. 英文单词  red  green blue
2. 十六进制的颜色值   #000000  也可以写为#000（如aabbcc可以简写为abc）
3. 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)

6.背景固定显示   background-attachment

默认为网页高度

html,body{height: 100%;}

背景图片默认跟随滚动条滚动

background-attachment:scroll;

设为固定背景，不会跟随滚动条滚动

background-attachment: fixed;

---

css精灵图 

由很多个图标组合而成的一张图片

存在意义：让网页运行速度变快 缓存少 请求快

在线生成精灵图：https://www.toptal.com/developers/css/sprite-generator/

---

背景图片和img标签的区别：

• 背景图片不会占用内容部分，img标签会
• 背景图片大于盒子不会超出，img标签会

背景样式复合写法：（容易写错，不建议这样写）

background: color  url()  repeat  position/size  attachment;

背景：颜色  背景图片  背景平铺  背景位置/背景大小  背景显示

---

浮动  float

float: right;    使盒子向右浮动，可以理解成右对齐

float: left;    使盒子向左浮动，可以理解成左对齐

1.div块级元素使用了浮动后可以达到重合效果，也可以解决div盒子的基线对齐和空格问题。

2.图片和文字也可以使用浮动达到文字环绕图片的效果（给图片设置浮动）。

3.可以使行内元素支持高宽，自定义上下外边距。

4.可以按照自己设置的方向进行移动。

除了这些也可以在其他地方发挥作用

---

清除浮动属性

父级高度坍塌：父级盒子若不设置高度就是由子级盒子/内容高宽决定的，但如果子级元素设置了浮动属性，那么就看不到父级盒子了。

解决方式：

1. 给父级盒子设置高度
2. 在父级元素的最下边设置一个清除浮动的属性
3. 在父级元素里面设置overflow: hidden; 

clear: both;   (左右浮动同时清除）   

clear: left;  (清除左浮动)

clear: right;   (清除右浮动)  

overflow: hidden;可以理解为一个封闭的盒子将父级盒子包裹起来，里面的元素浮动不会影响外面的。