css字体、文本和背景样式
2017-01-21 00:00
253 查看
了解了CSS选择器，我们就想要知道更多设置样式的属性了，让我们一起来看看吧，如果你还不了解选择器，也可以看上篇我的博客哈：css选择器详解
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
注意点：
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。比如font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。可以通过escape()来得到的。
normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
选择器{font:font-style font-weight fong-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
代码举例(直接复制到你的编辑器中查看即可)：
预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。
另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。
left：左对齐（默认值）
right：右对齐
center：居中对齐
normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
normal只在允许的断字点换行（浏览器保持默认处理）。
break-word在长单词或 URL 地址内部进行换行。几乎得到了浏览器的支持。
background-image:设置背景图片
写法：background-image:url(图片的路径);//默认情况下图片如果比容器要小，它会平铺。
background-repeat:设置背景是否平铺：
取值：
no-repeat:不平铺
repeat-x：在水平方向上平铺
repeat-y:在垂直方向上平铺
repeat:平铺
background-position:设置背景图片的位置
用法：
background-postion: x y;
注意：x,y可以是具体的数值
x,y又可以是一些英文单词。
x: left 左 center 中 right 右
y: top 上 center 中 bottom下
textarea中设置不能被拖动大小代码：style=“resize:none;”
一个标签里可以设置多个class名称，且用空格隔开：<p class=”p1 p2”>(同时适用于p1和p2的样式)
背景设置一般图片多大元素宽高就要多大（注意：不想背景缩放出现问题时候使用min-width；设置min-width：1000px防止页面小于1000px的背景位置不对。）
如果文章有什么错误，欢迎评论指正，把您的意见或建议告诉我，我会继续努力的！谢谢您！
CSS字体样式属性
font-size:字号大小
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：| 相对长度单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用 |
| 绝对长度单位 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
font-family:字体
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：p{font-family:"微软雅黑";}可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
注意点：
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。为此，在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。比如font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。可以通过escape()来得到的。
font-weight:字体粗细
font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。font-style:字体风格
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。
font:综合设置字体样式
font属性用于对字体样式进行综合设置，其基本语法格式如下：选择器{font:font-style font-weight fong-size/line-height font-family;}
使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
代码举例(直接复制到你的编辑器中查看即可)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 18px;
font-weight: bold;
font-family: "微软雅黑";
font-style: normal;
color: red;
}
p {
font:normal 700 20px/20px "楷体";
}
</style>
</head>
<body>
<div>请看一下我的css样式代码效果哈</div>
<p>这个是字体属性的连写呢</p>
</body>
</html>CSS文本外观属性
color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
letter-spacing:字间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing:单词间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。
line-height:行间距
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。text-decoration:文本装饰
text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。
另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。
text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。white-space:空白符处理
使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在CSS中，使用white-space属性可设置空白符的处理方式，其属性值如下：normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
pre：预格式化，按文档的书写格式保留空格、空行原样显示。
nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记<br />。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
word-break:自动换行
normal 使用浏览器默认的换行规则。break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
word-wrap
word-wrap属性允许长单词或 URL 地址换行到下一行normalnormal只在允许的断字点换行（浏览器保持默认处理）。
break-word在长单词或 URL 地址内部进行换行。几乎得到了浏览器的支持。
背景
背景相关的属性：
background-color:设置背景颜色background-image:设置背景图片
写法：background-image:url(图片的路径);//默认情况下图片如果比容器要小，它会平铺。
background-repeat:设置背景是否平铺：
取值：
no-repeat:不平铺
repeat-x：在水平方向上平铺
repeat-y:在垂直方向上平铺
repeat:平铺
background-position:设置背景图片的位置
用法：
background-postion: x y;
注意：x,y可以是具体的数值
x,y又可以是一些英文单词。
x: left 左 center 中 right 右
y: top 上 center 中 bottom下
背景的连写方式：
background: background-color background-image background-repeat background-position;注意点：
color样式不在font里，直接写color即可。textarea中设置不能被拖动大小代码：style=“resize:none;”
一个标签里可以设置多个class名称，且用空格隔开：<p class=”p1 p2”>(同时适用于p1和p2的样式)
背景设置一般图片多大元素宽高就要多大（注意：不想背景缩放出现问题时候使用min-width；设置min-width：1000px防止页面小于1000px的背景位置不对。）
如果文章有什么错误，欢迎评论指正，把您的意见或建议告诉我，我会继续努力的！谢谢您！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS字体文本样式
- css 超链接样式，文本下划线，背景颜色
- textarea无边框文本透明背景文本样式
- Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
- CSS3（背景样式，文本立体效果，2d3d转换及动画）第八天
- HTML---CSS字体,文本,背景和边框属性
- HTML基础-样式位置、背景、边框、内外边距、盒模型和结构、文本、常见样式
- Bootstrap-全局样式的文本颜色和背景颜色
- Flex Gumbo中如何通过contentBackgroundColor样式，设置TextInput内文本背景颜色
- CSS温故第二天【样式】-背景 文本 字体
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- css去掉select默认样式 文本超出 固定背景图
- textarea无边框文本透明背景文本样式
- 字体、文本、背景、列表样式和超链接（2）
- css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）
- CSS边框、背景、文本样式
- 3.CSS基本样式：背景、文本、字体、链接、列表、表格、轮廓
- css 背景定位 文字样式及文本溢出隐藏···
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景