学习HTMLCSS第五天

一、常见属性分

1. 字体

在 CSS 中，font - *是字体相关的属性，这一类属性具有继承性，即给父元素设置了，子元素或后代元素也会生效。例如：

.box - 1 {
    font - size: 20px;
    font - style: italic;
    font - weight: bold;
    font - family: 宋体;
}

2. 文本

text - *是文本相关的属性，同样具有继承性。

• 修饰文本线：可以使用text - decoration属性，其值可以是line - through（删除线）、underline（下划线）、overline（上划线）等。
• 文本水平对齐方式：通过text - align属性来设置，可取值为left、center、right。
• 字体颜色：color属性用于设置字体颜色，且该属性具有继承性。示例如下：

.box - 2 {
    text - decoration: line - through;
    text - align: center;
    color: deeppink;
}

3. 背景

background - *是背景相关的属性，这一系列的属性不具有继承性。

• 背景颜色：使用background - color属性来设置。
• 背景图片：通过background - image属性添加，如background - image: url(./images/sanguo.jpeg)。
• 背景图片是否平铺：background - repeat属性控制，no - repeat表示不平铺。
• 背景图片的位置：background - position属性可设置背景图片在元素中的位置，比如background - position: center center，也可以使用具体的像素值如background - position: 100px 50px。
• 背景图片的尺寸：background - size属性有cover（把图片自动填充满整个标签）和contain（根据原图片的尺寸决定填充方向）等取值。示例：

 .box-3 {
            width: 400px;
            height: 400px;
            /* background-* ,背景这一系列的属性不具有继承性 */
            /* 背景颜色 */
            background-color: skyblue;
            /* 背景图片 */
            /* 240 * 320 */
            background-image: url(./images/sanguo.jpeg);

            /* 457 * 250  */
            /* background-image: url(./images/3.png); */
            /* 背景图片是否平铺 no-repeat 不平铺*/
            background-repeat: no-repeat;
            /* 背景图片的位置 
            background-position: x  y ;
             x为负数，背景图片水平向左移动，为正数，水平向右移动
             y为负数，背景图片垂直向上移动，为正数，垂直向下移动

             top  right left bottom center
            */
            /* background-position: 100px 50px; */
            background-position: center center;

            /* 背景图片的尺寸 
            (cover 把图片自动填充满整合标签)*/
            /* background-size: 100% 100%; */
            /* contain 这个属性由原图片的尺寸（宽度 * 高度）来决定。
             如果宽度大于高度，就是以横向填充标签(水平方向)
             如果高度大于宽度，就是以纵向填充标签（垂直方向）
            */
            background-size: contain;
        }

4. 盒子模型

盒子模型是由外边距、边框、内边距和内容四部分组成的思维模型，它可以直观地展示标签的尺寸和间距。

• 外边距：margin属性用于设置外边距，元素与浏览器或其他元素之间的间距就是外边距。可以单独设置margin - left、margin - top、margin - bottom、margin - right，也可以使用缩写形式，如margin: 50px 100px 100px 50px。外边距不会撑开盒子大小。

.box-1 {
            /* 
            外边距。不会撑开盒子大小。
            元素作用于浏览器或其他元素之间的间距。
            元素与元素之间的间距，我们可以理解为外边距。

             margin-left 正数往右边移动，负数往左边移动
             margin-top 正数往下边移动，负数往上边移动

            */

            /* margin-top: 50px; */
            /* margin-right: 100px; */
            /* margin-bottom: 100px; */
            /* margin-left: 50px; */

            /*上  右    下    左 */
            margin: 50px 100px 100px 50px;
        }

        .box-2 {
            /* 上下为0，左右自动居中，这种写法是允许。*/
            margin: 0 auto;
            /* margin: auto 0; 这种写法是不起作用的。 */
        }

• 边框：一个标签有四个边，每个边由大小（border - width）、样式（border - style，如实线、虚线、点线等）和颜色（border - color）组成。可以分别设置上边框、右边框、下边框和左边框，例如：

/* 边框。可以撑开盒子大小。
        一个标签有四个边，每个边可以有大小、样式、颜色组成。
        border-width
        border-style: solid (实线 、虚线、点线)
        border-color
        */
        .box-3 {
            /* border-width: 10px; */
            /* border-style: solid; */
            /* border-color: green; */

            /* border: 10px solid green; */


            /* 上边框 */
            border-top: 30px solid purple;
            /* 右边框 */
            border-right: 30px solid orange;
            /* 下边框 */
            border-bottom: 30px solid blue;
            /* 左边框 */
            border-left: 30px solid green;
        }
        .box-4 {
            /* transparent: 透明 */
            background-color: transparent;
            /* 上边框 */
            border-top: 100px solid transparent;
            /* 右边框 */
            border-right: 100px solid transparent;
            /* 下边框 */
            border-bottom: 100px solid blue;
            /* 左边框 */
            border-left: 100px solid transparent;

            width: 0px;
            height: 0px;
        }

• 内边距：内边距是指边框与内容之间的间距，使用padding属性设置，可以撑开盒子大小。例如：

 

  /* 
        内边距： 是指边框与内容之间的间距。可以撑开盒子大小。
        
        */
        .box-5 {
            border: 5px solid #000;
            /* padding-left: 50px;
            padding-top: 80px;
            padding-right: 40px;
            padding-bottom: 30px; */

                    /* 上  右   下   左 */
            padding: 80px 40px 30px 50px;
        }

盒子的实际大小：边框（border）+ 内边距（padding）+ 内容（文本 /width/height）。

二、学习技巧

在学习 HTML CSS 课程时：

• 重复练习：重复练习的次数多了，自然就熟练了。
• 词汇量积累：需要有一定的词汇量积累。

关注盒子模型主要是为了控制元素的位置和尺寸，希望大家在学习过程中能够熟练掌握这些常见属性的使用。

补充：

它包括外边距，边框，内边距，内容四部分。

关注盒子模型主要是为了控制元素的位置，尺寸。