购物商城网站的运营,vs设置网站开发环境,建筑安装公司,网站建设服务便宜背景样式
背景样式用于设置网页元素的背景#xff0c;包括颜色、图片等。
背景颜色
使用 background-color 属性设置背景颜色#xff0c;支持多种格式#xff08;颜色英文、十六进制、RGB等#xff09;。
div {background-color: lightblue;
}格式示例十六进制#ff5733R…背景样式
背景样式用于设置网页元素的背景包括颜色、图片等。
背景颜色
使用 background-color 属性设置背景颜色支持多种格式颜色英文、十六进制、RGB等。
div {background-color: lightblue;
}格式示例十六进制#ff5733RGBrgb(255, 87, 51)颜色英文lightblue
背景图片
通过 background-image 属性为元素添加背景图片。
div {background-image: url(background.jpg);background-repeat: no-repeat;background-size: cover;
}属性描述background-repeat控制图片是否重复background-size设置图片尺寸cover, contain, 或具体数值background-position设置图片的位置center, top, 等
多重背景
使用逗号分隔多个背景值为元素添加多层背景。
div {background-image: url(layer1.png), url(layer2.png);background-size: contain, cover;
}盒子模型
CSS 的盒子模型是网页布局的核心它描述了每个元素由哪些部分组成。
盒子模型结构
部分描述内容Content元素的实际内容区域内边距Padding内容与边框之间的间距边框Border围绕内边距和内容的边线外边距Margin元素与其他元素之间的距离
设置盒子模型属性
div {width: 200px;height: 100px;padding: 10px;border: 2px solid black;margin: 20px;
}属性描述padding设置内边距可以分别指定上下左右的值border定义边框的宽度、样式和颜色margin设置外边距可使用 auto 实现居中对齐
盒子模型类型
标准盒模型width 和 height 只包括内容区域。替代盒模型通过 box-sizing: border-boxwidth 和 height 包括内容、内边距和边框。
div {box-sizing: border-box;
}文本样式
文本样式定义了文字的外观和排列方式。
字体样式
属性描述font-family设置字体族如 Arial, serif 等font-size设置字体大小单位px, %, em 等font-style设置字体样式normal, italic, obliquefont-weight设置字体粗细normal, bold, 或数值 100-900
p {font-family: Arial, sans-serif;font-size: 16px;font-style: italic;font-weight: bold;
}文本对齐与修饰
属性描述text-align对齐方式left, right, center, justifytext-decoration设置文字装饰none, underline, line-throughline-height设置行高调整行间距letter-spacing设置字母间距word-spacing设置单词间距
p {text-align: justify;text-decoration: underline;line-height: 1.5;letter-spacing: 2px;
}文本阴影
text-shadow 属性用于为文字添加阴影效果。
h1 {text-shadow: 2px 2px 4px gray;
}属性描述偏移值x, y控制阴影在水平方向和垂直方向的偏移模糊半径控制阴影的模糊程度阴影颜色设置阴影的颜色 凡是过去皆为序章凡是未来皆有可期。
