CSS基础样式
宽高
width: 宽度
height: 高度
- “宽高”的属性值:
px像素为单位
百分比为单位
边框
border: 边框的粗细 边框的样式 边框的颜色
- 粗细:以px为单位,例如:5px
- 样式:
solid:实线
dashed:虚线
dotted:点线
double:双边线 - 颜色:英文单词、16进制颜色的、rgb色
字体样式
/* 设置文字字号大小 */
font-size: 30px;
/* 设置字体的类型 */
font-family: "微软雅黑";
/* 设置字体的粗细 */
font-weight: bold;
/* 设置字体风格,italic代表斜体字 */
font-style: italic;
文本样式
/* 设置文本的对齐方式,只对文本和行级元素有效 */
text-align: center;
text-align: left;
/* 设置文本的整体效果 */
/* 下划线 */
text-decoration: underline;
/* 上划线 */
text-decoration: overline;
/* 贯穿线 */
text-decoration: line-through;
/* 设置文本的颜色 */
color: #ff00ff;
/* 设置行高
使用技巧:实现文本垂直居中(只对一行的文本有效)
*/
line-height: 300px;
输入框修改提示文字的样式
/* 修改输入框里的提示文字 */
.user-box input::placeholder{
/* color: red; */
font-size:14px;
}
背景样式
/* 背景颜色 */
background-color: pink;
background-image: url(./image/logo.png);
/* 取消背景的重复铺设 */
background-repeat: no-repeat;
/* 设置背景图的定位 */
background-position: 50% 50%;
/* 设置背景图的大小 */
/* background-size: 100px 100px; */
background-size: contain;
-
background-position:
-
可以设置英文单词:left right center top bottom
-
第一个值是x轴的位置,第二个值是y轴的位置
-
background-size:
-
可以使px像素,也可以使百分比
-
contain:图片的长边撑满盒子,等比例缩放
-
cover:图片的短边撑满盒子,等比例缩放