前端-CSS-9-⽂本和字体-背景颜⾊
字体属性
div{
width: 300px;
height: 100px;
/*background-color: red;*/
border:  1px solid red;
/*设置字体⼤⼩  px：像素  rem  em %*/
font-size: 20px;
font-weight: 700;
font-family: "Microsoft Yahei", "微软雅⿊", "Arial", sans-serif;
text-align: center;
text-decoration: none;
color: blue;
cursor: pointer;
/*line-height: 100px;*/
/*1em = 20px*/
/*设置⾸字缩进单位：em为准*/
text-indent: 2em;
}
font-family
<!--
使⽤font-family注意⼏点：
1.⽹页中不是所有字体都能⽤哦，因为这个字体要看⽤户的电脑⾥⾯装没装，
⽐如你设置： font-family: "华⽂彩云"; 如果⽤户电脑⾥⾯没有这个字体，
那么就会变成宋体
页⾯中，中⽂我们只使⽤：微软雅⿊、宋体、⿊体。
如果页⾯中，需要其他的字体，那么需要切图。英语：Arial 、 Times New Roman
2.为了防⽌⽤户电脑⾥⾯，没有微软雅⿊这个字体。
就要⽤英语的逗号，隔开备选字体，就是说如果⽤户电脑⾥⾯，
没有安装微软雅⿊字体，那么就是宋体：
font-family: "微软雅⿊","宋体"; 备选字体可以有⽆数个，⽤逗号隔开。
3.我们要将英语字体，放在最前⾯，这样所有的中⽂，就不能匹配英语字体，
就⾃动的变为后⾯的中⽂字体：
font-family: "Times New Roman","微软雅⿊","宋体";
4.所有的中⽂字体，都有英语别名，
我们也要知道：微软雅⿊的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为⼀： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.⾏⾼可以⽤百分⽐，表⽰字号的百分之多少。
⼀般来说，都是⼤于100%的，因为⾏⾼⼀定要⼤于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，⽐如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
---------------------------------------------------------------------
字体系列。
font-family可以把多个字体名称作为⼀个“回退”系统来保存。如果浏览器不⽀持第⼀个字体，则会尝试下⼀个。浏览器会使⽤它可识别的第⼀个值。简单实例：
body {
font-family: "Microsoft Yahei", "微软雅⿊", "Arial", sans-serif
}
如果设置成inherit，则表⽰继承⽗元素的字体。
font-weight
字重（字体粗细）。
取值范围：
font-size
字体⼤⼩。
p {
font-size: 14px;
}
如果设置成inherit表⽰继承⽗元素的字体⼤⼩值。
color
设置内容的字体颜⾊。
⽀持三种颜⾊值：
⼗六进制值如: ＃FF0000
⼀个RGB值如: RGB(255,0,0)
颜⾊的名称如: red
p {
color: red;
}
⽂字属性
text-align ⽂本对齐
text-align 属性规定元素中的⽂本的⽔平对齐⽅式。
line-height ⾏⾼
/*⾏⾼的意思: 公式 :⾏⾼=盒⼦的⾼度，让⽂本垂直居中但是只适应与单⾏⽂本*/ text-decoration⽂字装饰。
单⾏⽂本垂直居中
多⾏⽂本垂直居中
div{
width: 300px;
height: 175px;
border:  1px solid red;
padding-top: 25px;
/*⾏⾼的意思: 公式 :⾏⾼=盒⼦的⾼度，让⽂本垂直居中但是只适应与单⾏⽂本*/
line-height: 30px;
/* line-height 要⽐ font-size */
font-size: 17px;
}
border:5px(粗细)  solid(线性样式) red(颜⾊)
边框有三个要素：粗细线性样式颜⾊
超链接美化导航案例
背景属性
div{
width: 200px;
height: 200px;
/
*background-color: rgb(0,0,0);*/
background-color: rgb(0,0,0);
/* 颜⾊表⽰⽅法有哪些？
⼀共有三种：单词、rgb表⽰法、⼗六进制表⽰法
rgb：红⾊绿⾊蓝⾊三原⾊
光学显⽰器，每个像素都是由三原⾊的发光原件组成的，靠明亮度不同调成不同的颜⾊的。
⽤逗号隔开，r、g、b的值，每个值的取值范围0~255，⼀共256个值。
如果此项的值，是255，那么就说明是纯⾊：
⿊⾊：
background-color: rgb(0,0,0);
光学显⽰器，每个元件都不发光，⿊⾊的。
⽩⾊：
background-color: rgb(255,255,255);
颜⾊可以叠加，⽐如黄⾊就是红⾊和绿⾊的叠加：
background-color: rgb(255,255,0);
再⽐如：
background-color: rgb(111,222,123);
就是红、绿、蓝三种颜⾊的不同⽐例叠加。
16进制表⽰法
红⾊：
background-color: #ff0000;
所有⽤#开头的值，都是16进制的。
#ff0000：红⾊
16进制表⽰法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的？我们介绍⼀下
我们现在看⼀下10进制中的基本数字（⼀共10个）:
0、1、2、3、4、5、6、7、8、9
16进制中的基本数字（⼀共16个）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f
16进制对应表：
⼗进制数⼗六进制数
0                0
1                1
2                2
3                3
……
10                a
11                b
12                c
13                d
14                e
15                f
16                10
17                11
18                12
19                13
……
43                2b
……
255                ff
⼗六进制中，13 这个数字表⽰什么？
表⽰1个16和3个1。那就是19。这就是位权的概念，开头这位表⽰多少个16，末尾这位表⽰多少个1。
⼩练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。
16进制中的2b等于10进制多少？
答：2*16+11 = 43。
16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175
16进制中的ff等于10进制多少？
css设置文字垂直居中答：15*16 + 15 = 255
所以，#ff0000就等于rgb(255,0,0)
background-color: #123456;
等价于：
background-color: rgb(18,52,86);
所以，任何⼀种⼗六进制表⽰法，都能够换算成为rgb表⽰法。也就是说，两个表⽰法的颜⾊数量，⼀样。
⼗六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;
⽐如：
background-color:#ff0000;
等价于
background-color:#f00;
⽐如：
background-color:#112233;
等价于
background-color:#123;
只能上⾯的⽅法简化，⽐如
background-color:#222333;
⽆法简化！
再⽐如
background-color:#123123;
⽆法简化！
要记住：
#000  ⿊
#fff    ⽩
#f00  红
#333  灰
#222  深灰
#ccc  浅灰
*/
}
常⽤背景相关属性
-----------------------------------------
backgroud-repeat
---------------------------------------
-------------------------------------------
background-position
/*正值第⼀个值表⽰往右偏移第⼆个值表⽰往下负值则相反*/ background-position: -100px -100px;
background-position:center center;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。