CSS基础样式

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：图片的短边撑满盒子，等比例缩放