一、设置字体样式
| 属性 | 说明 | 属性 | 说明 |
| font-family | 设置字体类型 | font-weight | 设置字体粗细 |
| font-size | 设置字体大小 | font-style | 设置字体倾斜 |
语法格式：
font-family：字体名称
font-size：绝对尺寸|相对尺寸
font-weight：bold | number | normal | lighter | 100-900
font-style:normol | | italic(斜体) | | oblique（倾斜体）
二、设置文本样式
| 属性 | 说明 |
| text-align | 设置文本的水平对齐方式 |
| line-height | 设置行高 |
| text-decoration | 设置文本修饰效果 |
| text-indent | 设置段落的首行缩进 |
| first-letter | 设置首字下沉 |
| text-overflow | 设置文本截断 |
| color | 设置文本颜色 |
| background-color | 设置文本背景颜色 |
语法格式：
line-height：length | normal
text-decoration:underline | blink | overline | line-through | none
(参数:underline为下划线，blink为闪烁，overline为上划线，line-through为贯穿线)
text-indent:length
(参数：length为百分比数字或浮点数字、单位标识符组成的长度值，允许为负值。说明：设置对象中的文本段落的缩进。本属性只应用于整块的内容)
text-overflow：clip| ellipsis
说明：要实现溢出文本显示省略号的效果，除了使用text-overflow属性以外，还必须配合white-space：nowrap(white-space属性值规定了元素内的空白怎么处理，nowrap属性规定了段落中的文本不进行换行)和overflow:hidden(溢出内容为隐藏)同时使用才能实现
background-color：color| transparent
参数：color指定颜色，tranparent表示透明的意思，也是浏览器的默认值
首字下沉：
<style>
p:first-letter{
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<p>首字体下沉</p>
</body>
</html>
三、设置图像样式
CSS提供了多种方法来设置图像的样式，以下是一些常见的图像样式设置：
- 设置图像大小：
img {
width: 200px;
height: 200px;
}
- 设置图像边框：
img {
border: 1px solid black;
}
- 设置图像圆角边框：
img {
border-radius: 50%;
}
- 设置图像阴影：
img {
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.5);
}
- 设置图像透明度：
img {
opacity: 0.5;
}
- 设置图像背景：
div {
background-image: url("image.jpg");
}
- 设置图像位置：
img {
position: relative;
top: 50px;
left: 50px;
}
这只是一些常见的图像样式设置，还有更多的图像样式可以通过CSS实现。
背景设置列图：
<style>
#footer{
width: 200px;
height: 200px;
border-color: blue;
border-style: dashed;
border-width: 20px;
opacity: 0;
}
h6{
width: 200px;
height: 200px;
background-color: aquamarine;
background-image: url(../橘子.jpg);
background-repeat: no-repeat;
background-size: 50% 50%;
background-position: center ;/*center left right top bottom 可选*/
}
#box{
width: 200px;
height: 200px;
border: 8px dashed blue;
background-image: url(../苹果.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
</style>
</head>
<body>
<img id="footer"src="橘子.jpg">
<img id="box"src="苹果.jpg">
<h6></h6>
</body>
</html>运行结果
CSS背景图像定位可以使用background-position属性来控制图像在背景中的位置。background-position属性接受一对值，第一个值用来控制水平方向的位置，第二个值用来控制垂直方向的位置。
常用的属性值包括：
- 左上角：可以使用"left top"、"0% 0%"或者"0 0"表示
- 居中：可以使用"center"或者"50% 50%"表示
- 右下角：可以使用"right bottom"、"100% 100%"或者"100% 100%"表示
- 其他特定位置：可以使用具体的像素值或者百分比值来表示
- 使用方位关键字：可以使用关键字"top"、"right"、"bottom"、"left"表示图像相对于背景区域的位置
示例代码如下：
body {
background-image: url("background.png");
background-position: center;
background-repeat: no-repeat;
}
上述代码中，背景图像将在页面的中心位置进行显示，并且不会重复。
总结
扫一扫
2816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
