前端 第二节 CSS样式

一、文字样式

• font-size: 30px; 文字大小
• font-weight: bold;文字加粗
• font-style: italic; 文字倾斜
• font-family: “宋体”; 字体
• font-variant: small-caps;小型大写字母

二、文本样式

• text-shadow: 水平方向位移 竖直方向上位移 模糊度 颜色; 文本阴影
• color:red; 设置文本颜色
• text-decoration: none; 文本样式 去线 text-decoration:underline line-through;叠加线
• text-transform: capitalize;首字母大写
• text-indent: 2em; 文本缩进2个字符 应用于p段落标签上
• text-align: center; 文本居中
• line-height: 100px; 文本行高，一般用来做竖直位置上剧中效果
• word-wrap: break-word; 文本换行
• white-space: nowrap; 文本不换行

三、背景样式

• background-color: aquamarine; 背景颜色
• background-image: url(./img/1.jpg);背景照片
• background-repeat: no-repeat;背景不重复
• background-positio n:center;背景定位
• background-size: cover/100%; 背景覆盖完全，照片可能不完全展示。contain照片宽或高一边完全覆盖，图片展示完全
• background-attachment: fixed;背景固定
• background-origin:content-box; 背景盒模型定位默认从padding开始定位
• background-clip: content-box; 背景裁剪

边框样式

• border: 线宽 线样式 颜色;
• border-top-color: transparent; 上边框
• border-left-color: transparent;左边框
• border-bottom-color: transparent;下边框
• border-right-color:green; 右边框
• border-style: solid;边框类型（solid实线）
• 阴影

.box1:hover{
    box-shadow: 12px 12px 3px gray;
    transition: 0.3s;
}