【前端基础--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)
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.可以按照自己设置的方向进行移动。
除了这些也可以在其他地方发挥作用
清除浮动属性
父级高度坍塌：父级盒子若不设置高度就是由子级盒子/内容高宽决定的，但如果子级元素设置了浮动属性，那么就看不到父级盒子了。
解决方式：
- 给父级盒子设置高度
- 在父级元素的最下边设置一个清除浮动的属性
- 在父级元素里面设置overflow: hidden;
clear: both; (左右浮动同时清除）
clear: left; (清除左浮动)
clear: right; (清除右浮动)
overflow: hidden;可以理解为一个封闭的盒子将父级盒子包裹起来，里面的元素浮动不会影响外面的。