CSS样式属性介绍（字体、外观、行高、背景、标签显示模式）

CSS样式属性介绍

1. 字体

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，我们尽量给一个明确值，一般给body指定整个页面文字的大小；谷歌浏览器的默认文字大小为16px
font-family	字体	实际工作中按照团队约定来写字体（默认字体为电脑的默认字体）
font-weight	字体粗细	记住加粗是 700 或者 bold ，不加粗 是 normal 或者 400（默认值） ，记住数字不要跟单位，我们更喜欢用数字来表示加粗和不加粗
font-style	字体样式	记住倾斜是 italic， 不倾斜 是 normal ， 工作中我们最常用 normal（默认值）
font	字体连写	选择器 { font: font-style font-weight font-size/line-height font-family;} 1. 字体连写是有顺序的 ，不能随意换位置，各属性以空格隔开 2. 不需要设置的属性可以省略（取默认值），其中字号 （font-size）和 字体(font-family) 必须同时出现

注意：1.font-family字体补充如下
常用技巧：

1. 各种字体之间必须使用英文状态下的逗号隔开。
2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体：

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

我们尽量只使用宋体和微软雅黑中文字体。

2. CSS外观

属性	表示	注意点
color	定义文本颜色	可以用red英语单词表示，但常用十六进制表示 如#FF6600， 这种可以简写为#F60
line-height	行高（也称行间距）	控制行与行之间的距离，一般称为行高；一般情况下，行距比字号大7，8像素左右就可以了。
text-align	文本水平对齐	left：左对齐（默认值）；right：右对齐；center：居中对齐；注意这里是让盒子里面的内容水平居中，而不是让盒子居中对齐
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;建议使用em作为设置单位，1em就是一个字的宽度
text-decoration	文本修饰	text-decoration 通常我们用于给链接修改装饰效果；none：默认，定义标准的文本，取消下划线；underline:定义文本下的一条线，下划线也是链接自带的；overline：定义文本上的一条线；line-through:定义文本下的一条线。

补充：
1.颜色半透明 rgba
color：rgba（r, g, b, a）a是alpha透明的意思，取值为0到1。
例如：color: rgba(0, 0, 0, 0.3)
2.文字阴影（text-shadow）
text-shadow： 水平位置 垂直位置 模糊距离 阴影颜色
例如 text-shadow：1px 2px 3px rgba(0, 0, 0, 0.3)
3.行高补充（line-height）
文本中各类线的定义：

行高的测量方法：

行高的定义：
行高 = 上距离 + 内容高度 + 下距离
行高中我们使用的最多的一个地方就是让单行文本在盒子中垂直居中对齐。
方法：文字的行高等于盒子的高度。
上距离和下距离总是相等的，因此文字看上去是垂直居中的。

3. 背景

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码，默认值是transparent 透明的
background-image	背景图片	none（默认无背景图）或url (图片路径，使用时不需要加引号)
background-repeat	是否平铺	repeat（背景图像在纵向和横向上平铺【默认】）/no-repeat（背景图像不平铺）/repeat-x（背景图像在横向上平铺）/repeat-y（背景图像在纵向上平铺）
background-position	背景位置	length（精确长度）/position（方位名词） 分别是x 和 y坐标， 切记 如果有 精确数值单位，则必须按照先X 后Y 的写法
background-attachment	背景固定还是滚动	scroll（背景随对象内容滚动）/fixed（背景图像固定）
背景简写	简写	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; 他们没有顺序；background: transparent url(image.jpg) repeat-y scroll center top ;
背景透明	让盒子半透明	background: rgba(0,0,0,0.3); 后面必须是 4个值 与颜色半透明使用方法一致 ；注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响

背景位置具体使用方法补充：
1.background-position: x坐标 y坐标;
2.指定的两个值都是方位名词，两个值前后顺序无关
background-position: right top; 右上角
background-position: top right; 右上角
3.如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
4.如果只指定了一个方位名词，另一个值默认居中对齐。
background-position: 10px;
5.position后面是精确坐标，那么第一个一定是x坐标，第二个一定是y坐标。
background-position: 50px 10px;
6. 如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
background-position: 10px center;
注意：实际工作用得最多的就是背景图片居中对齐。

4. 标签显示模式

标签是以什么方式显示，比如div自己占一行，比如span一行可以放很多个；网页的标签非常多，不同的地方用到不同类型的标签，可以帮我们更好的完成我们的网页。

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或则其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

4.1 块级元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

- 块级元素的特点

（1）比较霸道，自己独占一行

（2）高度，宽度、外边距以及内边距都可以控制。

（3）宽度默认是容器（父级宽度）的100%

（4）是一个容器及盒子，里面可以放行内或者块级元素。
注意：p标签里面不能放块级元素，特别是p中不能放div，同理同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

4.2 行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的地方也成内联元素

- 行内元素的特点：

（1）相邻行内元素在一行上，一行可以显示多个。

（2）高、宽直接设置是无效的。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。
注意：链接里面不能再放链接，特殊a里面可以放块级元素，但是给a转换一下块级模式最安全。

4.3 行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

- 行内块元素的特点：

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。一行可以显示多个
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

4.4 标签显示模式转换

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;