css字体、背景设置
css字体、背景设置
字体设置
- font 属性,是复合型属性(font:style weight size family;)
注意,其中后两个属性必须有,style 和 weight 不是必须写入的内容,如果要简写 !必须要有font-size和font-family即
font:size family;
-
font-style 设置字体的样式,它的值:
italic 设置字体为斜体
normal 字体正常
-
font-weight 设置字体是否加粗,它的值:
normal 默认
bold 加粗
bolder 相对bold加粗(比较级)
它的值也可以是具体的整百数字,范围是 100-900 400 ->normal 700 ->bold 900 ->bolder
-
font-size 设置所修饰字体的大小 (它是可以通过 父级 传递)
.目前浏览器默认字体是 16px
.PC端浏览器的最小字体大小可以设置为 12px
-
font-family 设置文字字体(可多个字体)
形如:font-family: ‘A’,‘B’,‘C’······;
含义是 在客户端的设备上,匹配 A 字体,如果没有 A 字体,则继续匹配 B 字体,依次进行匹配,直到匹配成功即可显示匹配到的字体
通用字体如:
1.serif 有衬线(类似锐化)
2.sans-serif 无衬线
.txt5 {
color: #04be02;
font-size: 40px;
font: normal bold 30px '楷体','微软雅黑';
}
背景设置
- background 属性,是复合型属性(backgroung:color image repeat position attachment)设置标签元素的背景
其中,可以单独写 backgorund:color; 和
background:image;
- background-color 设置标签元素的背景色,它的的值是:
a. 英文单词
b. 16进制表示颜色
c. rgb( ) 表示颜色
- background-image 设置背景图片,格式如下
background-image:url(背景图片的地址)
- background-repeat 背景图的平铺方式,它的值:
repeat 默认,x轴y轴都平铺
repeat-x 沿x轴方向平铺
repeat-y 沿y轴方向平铺
no-repeat不平铺
- background-position 设置背景图定位(在笛卡尔坐标中),格式如下
background-position :x轴方向的值 y轴方向的值;
值可以是:
1.具体的数值
2.方位名词组合
left right top bottom center
- background-attachment 设置背景图的 固定定位,它的值:
scroll :默认值,背景图跟着页面一起滚动
fixed固定 : 根据浏览器可视区域,固定在具体的位置
(他的定位参考点是 !!!浏览器可视区域)
.wp {
width: 400px;
height: 400px;
border: 1px #f00 solid;
/* background: #ccc; */
/* 设置背景色 */
background-color: #40be02;
/* 设置背景图 */
background-image: url('./images/b.jpg');
/* 设置背景图的 平铺方式 */
background-repeat: no-repeat;
/* 设置背景图的 定位方式 笛卡尔坐标系,左上角为原点位置,水平 垂直 */
background-position: left bottom;
/*设置背景图的 固定定位*/
/* background-attachment: fixed; */
}