前端基础（三.CSS 基本样式）

CSS基本样式

背景

css的背景样式(background)拥有复合属性，即可以把多个属性写在background:后，以space分隔不同属性。

*注：[复合属性中的子属性会覆盖父属性，如background-color：red；会覆盖background：blue；结果显示为红色。]

background常见属性：

• background-color 背景颜色
• background-position 背景图像位置
• background-size 背景图片尺寸
• background-repeat 背景图片重复方式
• background-attachment 背景图像是否固定或者随着页面的其余部分滚动
• background-image 设置背景图片

div{
            width: 700px;
            height: 700px;
            /* 背景  复合属性 */
            /* background: #f00; */
            background-color: #f00;
            background-image: url(../image/img01.jpg);
            background-repeat: no-repeat;
            /* 水平(left center right)  垂直(top center bottom) */
            background-position: -100px -100px;
            background-position: center center;
            background-attachment:fixed;
            /*scroll(默认值)* fixed inherit(继承父元素)/
        }

字体

font 为复合属性
常见的字体属性：

• font-family:文本的字体系列
• font-size:文本的字体尺寸
• font-weight:字体的粗细
• font-style:文本的字体样式
• color：字体颜色

#div1{
         font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
         /* 浏览器默认字体大小16像素 */
         font-size: 24px;
         font-weight: bold; 
         font-style: italic;
         color:lightblue;
     }
}

文本

常用的修饰文本的属性：

• text-indent: 首行缩进
• text-align：文本对齐方式
• line-height：单行文本行高
• text-align: 文本的水平对齐方式
• text-shadow: 添加到文本的阴影效果
• white-space: 如何处理元素中的空白
  当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换行符
  当white-space属性设置为 nowrap时，会将文本设置成单行文本
• word-spacing: 单词间距
• text-outline: 文本轮廓
• text-overflow: 当文本溢出包含元素时发生的事情
• text-wrap: 文本的换行规则
• text-decoration: 添加到文本的装饰效果

#div1{
            width: 200px;
            height: 200px;
            background: #ff0000;
            /* 首行缩进 */
            text-indent: 30px;
        }
        #div2{
            width: 200px;
            height: 200px;
            background: lightblue;
            /* 文本水平对齐方式 left|center|right */
            text-align: center;
            /* 单行文本垂直对齐 行高=高 */
            line-height: 200px;
            
        }
        a{
            text-decoration: none;
        }
        #div3{
            /* 文本装饰  none underline line-through*/
            text-decoration: line-through;
        }

<div id="div1">hello</div>
<div id="div2">world</div>
<a href="http://www.baidu.com">baidu</a>
<div id="div3">baidu</div>

CSS框模型

CSS 框模型规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

边框

border 为复合属性
常用的边框属性：

• border-color: 边框颜色
• border-top(right|bottom|left): 上(右|下|左)边框属性
• border-style:边框样式
• border-width:边框宽度
• border-top-color:上边框颜色
• border-top-style:上边框样式
• border-top-width:上边框宽度
• border-radius: 设置边框四角的弧度
• border-top-left-radius: 设置边框左上角的形状。

div{
            width: 300px;
            height: 300px;
            border: lightseagreen 5px solid;
            border-color:rgb(79, 119, 240);
            border-top-color:lightsalmon;
            border-top-style:dotted;
            border-radius: 50%;
            border-top-left-radius: 20%;
    }

边距

外边距 margin为复合属性

外边距常用属性：

• margin-top: 设置元素上外边距
• margin-right: 设置元素右外边距
• margin-bottom: 设置元素下外边距
• margin-left: 设置元素左外边距

内边距 padding为复合属性

外边距常用属性：

• padding-top: 设置元素上内边距
• padding-right: 设置元素右内边距
• padding-bottom: 设置元素下内边距
• padding-left: 设置元素左内边距

        #div1{
            border: mediumturquoise 2px solid ;
            width: 300px;
            height: 300px;
            background-color: lightskyblue;
        }
        #div2{
            border: mediumslateblue 2px solid;
            width: 200px;
            height: 200px;
            background-color: lightpink;
            margin: 10px 20px 30px 40px;
            padding: 5px;
        }
        #div3{
            background-color: mediumvioletred;
            width: 100px;
            height: 100px;
        }

<div id="div1">
        <div id="div2">
            <div id="div3">
                css测试边距
            </div>
        </div>
    </div>

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.1.28