字体font
# 字体font
# 1. 字体系列font-family
font-family
font-family:"Microsoft YaHei", Arial, "微软雅黑";
# 2. 字体大小font-size
font-size 默认16px
font-size:20px;
# 3. 字体粗细font-weight
font-weight
font-weight:bold;
font-weight:700;
font-weight:normal;
font-weight:400;
# 4. 文字样式font-style
font-style
font-style:normal;
font-style:italic; (斜体)
# 5. 复合属性font
font:font-style font-weight font-size/line-height font-family;
font-style:italic;
font-weight:700;
font-size:16px;
font-family:"Microsoft YaHei";
不能更换顺序，最后两个是必须指定的
font:italic 700 16px/line-height "Microsoft YaHei";
# 6. 总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 通常单位px |
| font-family | 字体 | 按团队要求 |
| font-weight | 字体粗细 | 加粗bold：700；正常normal：400 |
| font-style | 字体样式 | 倾斜italic；不倾斜normal |
| font | 字体连写 | 1.有顺序2.字号字体必须同时出现 |
# 文本text
# 1.文本颜色color
color
| 表示 | 属性值 |
|---|---|
| 预定义 | red，green，blue |
| 十六机制 | #FF0000,#FF6600,#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
# 2.对齐文本text-align
text-align 水平对齐方式
text-align:left;
text-align:center;
text-align:right;
# 3. 装饰文本text-decoration
text-decoration: none; /*删除下划线*/
| 属性值 | 描述 |
|---|---|
| none | 默认 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
# 4. 文本缩进text-indent
text-indent段落的首行缩进
16px
em 相对当前一个文字距离
# 5. 行间距/行高line-height
line-height
行间距与盒子高度一致，可以使文字垂直居中
# 元素显示
# 1. 什么是元素显示模式
元素以什么方式进行显示
- 块元素
- 行内元素
# 2. 块元素
h1-h6、p、div、ul、ol、li
div是最典型的块元素
- 自己独占一行
- 高度、宽度、外边距、内边距都可以设置
- 宽度默认是容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或者块级元素
注意
- 文字类的元素不能使用块级元素 （p，h里面不能放div）
# 3. 行内元素
a、strong、em、del、ins、span
span是典型的的行内元素 （内联元素）
- 相邻行内元素在一行上，一行可以显示多个
- 高度、宽度直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意
- 链接里面不能再放链接
- 特殊情况a里面可以放块级元素，但是给a转换一个块级模式最安全
# 4. 行内块元素
img/、input/、td
同时具有块元素和行内元素的特点
- 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度、行高、内边距、外边距都可以控制（块级元素特点）
# 5. 元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽度、高度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度、高度 | 本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度、高度 | 本身内容的宽度 |
# 6. 元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解就是一个模式的元素需要另一种模式的特性
比如想要增加链接a的触发范围
dispaly:block; /*转换成块元素*/
dispaly:inline; /*转换成行内元素*/
dispaly:inline-block; /*转换成行内块元素*/
# 7. 小技巧 单行文字垂直居中的代码
让文字的行高等于盒子的高度
# 元素隐藏
- 类似网站广告，当我们点击关闭就不见了，但是重新刷新页面，会重新出现
- 本质：让一个元素在页面中隐藏或者显示出来
# 1. dispaly 属性 （重点）
用于设置一个元素应如何显示
display: none; /*隐藏对象 隐藏元素后，不再占有原来的位置*/
display: block; /*除了转换为块级元素外，同时还有显示元素的意思*/
# 2. visibility 可见性 属性
用于指定一个元素应可见还是隐藏
visibility: visible; /*元素可视*/
visibility: hidden; /*元素隐藏，继续占有原来位置 */
# 3. overflow 溢出 属性
指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么
overflow: visible; /*不剪切内容也不添加滚动条*/
overflow: hidden; /*不显示超过对象尺寸的内容，超出的部分隐藏掉*/
overflow: scroll; /*不管超出内容否，总是显示滚动条*/
overflow: auto; /*超出自动显示滚动条，不超出不显示滚动条*/
- 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
- 但是如果有定位的盒子，请慎用overflow:hidden，因为它会隐藏多余的部分
# 4. 总结
- display 显示隐藏元素，但是不保留位置
- visibility 显示隐藏元素，到那时保留原来位置
- overflow 溢出显示隐藏，但是只是对于溢出的部分处理
# 背景设置background
# 1. 背景颜色background-color
background-color:transparent;/*默认：透明色*/
background-color:颜色值;
# 2. 背景图片background-image
background-image:none; /*默认：无图*/
background-image:url(url地址);
# 3. 背景平铺background-repeat
background-repeat:repeat; /*默认：纵横都平铺*/
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
# 4. 背景图片位置backgroud-position
backgroud-position:x y;
| 参数值 | 说明 |
|---|---|
| length | 百分数、由浮点数字和单位标识符组成的长度值 |
| position | top、center、bottom、center、right 方位名词 |
可以混合，有x、y顺序
# 5. 背景图像固定backgroud-attachment
backgroud-attachment:scroll; /* 默认：随对象内容滚动 */
backgroud-attachment:fixed; /*背景图像固定*/
# 6. 背景属性复合写法backgroud
backgroud: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
backgroud: transparent url(image.jpg) repeat-y fixed top;
# 7. 背景颜色半透明rgba
backgroud: rgba(0, 0, 0, 0.3);
- a:alpha 透明度，取值0-1
- CSS3新特性 IE9+版本浏览器才支持
# 8. 总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 颜色 | 预定义值、十六进制、RGG代码 |
| background-image | 图片 | url(图片路径) |
| background-repeat | 是否平铺 | repeat、no-repeat、repeat-x、repeat-y |
| backgroud-position | 位置 | length、position |
| backgroud-attachment | 附着 | scroll、fixed |
| backgroud | 简写 | 颜色 图片地址 平铺 滚动 位置 |
| backgroud: rgba() | 颜色半透明 | (0,0,0,0.3) |