CSS字体，文本属性及元素显示

字体属性

1.字体系列
p {font-family: "微软雅黑"}

2.字体大小
p {font-size: 20px;}

3.字体粗细
p {font-weight: 700;}
700后面不要跟单位
400=normal(粗体变细，默认值)

4.文字样式
p {font-style: normal;}

5.字体的复合属性

body   {
font: font-style font-weight font-size font-family
}

• 使用font属性时，必须按上面语法格式中的顺序书写，不能换顺序，并用空格隔开
• 不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则不起作用

CSS文本属性

1.文本颜色

表示	属性值
预定义的颜色	red，green，blue
十六进制	#FF0000,#FF6600
RGB代码	rgb(255,0,0)

2.对齐文本

text-align: center;
}

3.装饰文本

div {
text-decoratuin: underline;
}

属性值	描述
none	默认（最常用）
underline	下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.文本缩进

div {
text-indent: 10px;
}

p {
text-indent: 2em;
}

• em是一个相对单位，就是当前元素一个文字的大小

5.行间距

p {
line-height: 26px;
}

样式表

1.行内样式表

• 适合修改简单样式
• <div style="color: red; font-size=12px;">青春不常在</div>
• 控制当前标签设置样式
• 不推荐大量使用
• 通常也被称为行内式引入`

2.内部样式表

• < style>标签理论上可以放在HTML文档的任何地方，但一般放在文档的标签中
• 通过此种方式，可以方便控制当前整个页面的元素样式设置
• 结构清晰，但并没有实现结构与央视完全分离

3.外部样式表

• 引入外部样式表分为两步：

  • 1.新建一个后缀名为.css的样式文件，把所有css代码写进去

  • 2.在HTML页面中，使用标签引入这个文件

    • < link rel="stylesheet" href="css文件路径"

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里被指定为stylesheet，表示被链接的文档是一个样式表文件
href	定义所链接外部样式表文件的URL，可以是相对路径，也可是绝对路径

调试工具

• ctrl + 0 复原浏览器大小
• 如果点击元素，发现右侧没有样式引入，则可能是类名或样式引入错误
• 如果有样式，但是样式前面是黄色感叹号提示，则是样式属性书写错误
• F12打开调式工具

Emmet语法

1.快速生成HTMl标签

• 生成标签直接输入标签按tab键
• 生成多个相同的标签加上如div3就可以生成三个div
• 如果有父子级关系的标签，可以用>比如ul>li
• 如果有兄弟关系的标签用+，如div+p
• 如果生成带有类名或者id名字的，直接写.demo或者#two tab键
• 如果生成的div类名是有顺序的，可以用自增符号￥
• 如果想要在生成的标签内部写内容可以用{}表示

2.快速生成CSS样式语法

• 比如w200 按tab 可以生成 width：200px；
• 比如lh26 按tab 可以生成 line-height：26px；

3.格式化代码

• 设置中搜format

• 勾选formatontype and formatonsave

元素显示模式

1.什么事元素显示模式

• 以什么方式进行显示，比如
  自己占一行

2.分类

• 块元素

  • 自己独占一行
  • 高度，宽度，外边距以及内边距都可以控制
  • 宽度默认是容器的100%
  • 是一个容器及盒子，里面可以放行内或块级元素

• 行内元素

  • 相邻行内元素在一行上，一行可以显示多个
  • 高、宽直接设置是无效的
  • 默认宽度就是本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素
  • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

• 行内块元素

  • 和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个
  • 默认宽度就是内容本身的宽度
  • 高度，宽度，外边距以及内边距都可以控

3.元素显示模式转换

• 转换为块元素 display:block

• 转换为行内元素 display:inline

• 转换为行内块: display:inline-block

小工具snipaste

1.F1可以截图，同时测量大小
2.F3在桌面置顶显示
3.点击图片，alt可以取色，按shift可以切换取色模式
4.按esc取消图片显示

一个小技巧 单行文字垂直居中
line-height = height