目录
一、文本
1.1.1、字体样式的常用属性
| 属性 | 说明 |
| font-family | 设置字体的类型 |
| font-weight | 设置字体的粗细 |
| font-size | 设置字体的大小 |
| font-style | 设置字体的倾斜 |
1.1.2、语法格式
①font-family：字体名称1，字体名称2，...
说明：用font-family属性可控制显示字体。font-family可以把多个字体名称作为个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个字体。
②font-size：绝对尺寸 | 相对尺寸
绝对字体尺寸是根据对象字体进行调节的,包括xx-small、x-smmal、small.medium、large、x-large和xx-large7种字体尺寸,这些尺寸都没有精确定义,只是相对面言的,在不同的设备下,这些关键字可能会显示不同的字号。
相对尺寸是利用百分比或者em,以相对父元素大小的方式来设置字体尺寸。
③font-weight：bold | number | normal | lighter | 100~900
bold 表示粗体(bolder 表示粗体再加粗),normal表示默认字体,lighter 表示比默认字体还细,100~900共分为9个层次(100、200…900),数字越小字体越细、数字越大字体越粗,数字值 400 相当于关键字 normal,700 等价于 bold。
④font-style：normal | italic | oblique
normal为“正常”(默认值), italic 为“斜体”, oblique 为“倾斜体”。
1.2.1、文本样式
| 属性 | 说明 |
| text-align | 设置文本的水平对齐方式 |
| line-height | 设置行高 |
| text-decoration | 设置文本修饰效果 |
| text-indent | 设置段落的首行缩进 |
| color | 设置文本的颜色 |
| background-color | 设置文本的背景颜色 |
1. 2.2、语法格式
①text-align：left | right | center | justify
文本水平对齐方式：left为左对齐,right为右对齐,center为居中,justiy 为两端对齐。
②line-height：length | normal
length为由百分比数字或由数值、单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。normal为默认行高。
③text-decoration：underline l blink l overline l line-through | none
underline为下划线,blink为闪烁,overline为上划线,line-through为贯穿线none为无装饰。
④text-indent：length
length为由百分比数字或由浮点数字、单位标识符组成的长度值,允许为负值。
⑤color：颜色值 {例：red / #000000 / rgb(0,0,255) / rgb(0%,0%,80%)}
⑥background-color：color | transparent
color指定颜色,transparent表示透明的意思,也是浏览器的默认值。background-color不能继承,默认值是 transparent,如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才能看见。
举个栗子：
<head>
<style>
#font2{
width:480px ;
height: 60px;
background-color: gray;
/* 前面三行设置背景 */
color:green;
font-size: 30px;
font-family: 楷体;
font-weight: 2px;
font-style: italic;
/* 这个水平对齐方式是指相对于元素容器来说的位置 */
text-align: center;
/* 文字修饰线： */
text-decoration: underline; }
</style>
<body>
<p id="font2"> 测试字体属性</p>
</body>运行结果：
二、图像
2.1.1、图像控制的常用属性
| 属性 | 说明 |
| width,height | 设置图像的缩放 |
| border | 设置图像边框样式 |
| opacity | 设置图像的不透明度 |
| background-image | 设置背景图像 |
| background-position | 设置背景图像定位 |
| background-attachment | 设置背景图像固定 |
2.1.2、语法格式
①width、height：当width和height两个属性的取值使用百分比数值时,它是相对于父元素而言的。如果将这两个属性设置为相对于body的宽度或高度,就可以实现当浏览器窗口改变时图像大小也发生相应变化的效果。例：
<head>
<style>
#img1{width: 300px; height: 300px;}
#img2{width: 100px; height: 200px;}
</style>
</head>
<body>
<img id="img1" src="./抖音标志.jpeg">
<img id="img2" src="./抖音标志.jpeg">
</body>
②border： border-color：颜色；border-width： 边框粗细； border-style：边的线形（solid、dotted、dashed、double ；依次为实线、点画线、虚线、双线边框）
可以对三个属性合并写，例 border: pink 30px dashed;
<head>
<style>
#img1{width: 300px; height: 300px;
border: rgb(213, 199, 48) 10px dotted;
}
</style>
</head>
<body>
<img id="img1" src="./抖音标志.jpeg">
</body>
③opacity：opacityValue
opacityValue表示不透明度的值,是一个介于0~1的浮点数值。其中,0表示完全透明,1表示完全不透明,而0.5表示半透明。例：
<style>
#img1{opacity: 0.5;}
</style>
④ background-image ：url | none
url 表示要插入背景图像的路径，none 表示不加载图像。
说明:设置对象的背景图像。若把图像添加到整个浏览器窗口,可以将其添加到<body>标签。
如果网页中某元素同时具有background-image属性和 background-color 属性那么 background-image属性优先于background-color属性,也就是说背景图像永远覆盖于背景色之上。
⑤background-position：(length | length ) / (position / position)
position可取 top、center、bottom、left、right 之一。
利用百分比和长度来设置图像位置时,都要指定两个值,并且这两个值都要用空格隔开。一个代表水平位置,一个代表垂直位置。水平位置的参考点是网页页面的左边,垂直位置的参考点是网页页面的上边。用于定义水平或垂直位置的特定名词就是关键字,关键字在水平方向的主要有 left、center、right,关键字在垂直方向的主要有 top、center、bottom。水平方向和垂直方向相互搭配使用。
| top | 将背景图像同元素的顶部对齐 |
| bottom | 将背景图像同元素的底部对齐 |
| left | 将背景图像同元素的左边对齐 |
| right | 将背景图像同元素的右边对齐 |
| center | 将背景图像相对于元素水平居中或垂直居中 |
设置背景定位有以下三种办法：
1.关键词定位、2.长度进行定位、 3.百分比进行定位。例：
<head>
<style>
footer{
width: 800px;
height: 300px;
background-color: rgb(248, 247, 195);
background-image: url(./result.png);
/* 设置背景图不重复 */
background-repeat: no-repeat;
/* 背景图适配容器大小 */
background-size: 25% 25%;
/* 背景图的位置 */
/* 1.关键词定位 */
background-position:top center;
/* 2.长度进行定位 */
background-position:150px 70px;
/* 3.百分比进行定位 */
background-position:100% 50%;
}
</style>
</head>
<body>
<footer></footer>
</body>三种方式效果图：
⑥background-attachment ：scroll （图像随页面元素一起滚动）| fixed （图像固定在屏幕上，不随页面元素滚动）
标签：font,设置,Day8,color,字体,background,图像,文本,CSS From： https://blog.csdn.net/As977_/article/details/143056377