CSS基础

最新推荐文章于 2025-07-27 18:06:30 发布

何处望天明CS

最新推荐文章于 2025-07-27 18:06:30 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

分类专栏： Javaweb 文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/weixin_43752912/article/details/124405286

Javaweb 专栏收录该内容

9 篇文章

订阅专栏

这篇博客详细介绍了CSS的基础知识，包括内部样式表、外部样式表和嵌入式样式的用法，以及标签样式表、类样式表和ID样式表的分类。此外，还讲解了CSS的盒子模型，阐述了边框、内边距和外边距的概念。最后，通过一个布局实例展示了CSS的绝对定位特性。内容适合前端开发者学习和巩固CSS基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    内部样式表-->
    <style>
        /*标签样式表*/
        p{
            color: red;
        }

        /*类样式*/
        .f20{
            font-size: 20px;
        }


        /*组合样式表*/
        div p{
            color: blue;
        }

        div .f32{
            font-size: 32px;
            font-family: "黑体";
        }

    </style>
    <!--  引用外部的CSS样式表文件  -->
    <link rel="stylesheet" href="css/css01.css">

</head>
<body>
    <p>这是段落一</p>
    <p>这是段落二</p>
    <p class="f20">这是段落三</p>
    <p id="p4">这是段落四</p>    <!--id属性在整个html中尽量保持唯一-->

    <div>
        <p><span style="font-size: 60px; font-weight: bolder; color: yellow">HELLO</span></p>   <!--嵌套表样式-->
        <span class="f32">World</span>
        <p CLASS="f32">!!!</p>
    </div>
</body>
</html>

<!--
1.为什么需要CSs
2. CSS的最基本的分类:标签样式表、类样式表、ID样式表
3. CSS从位置上的分类:嵌入式样式表、内部样式表、外部样式表
-->

在这里插入图片描述

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            width: 400px;
            height: 400px;
            background-color: greenyellow;

            /*  border边框样式  */
            border-width: 1px;
            border-style: solid;
            border-color: blue;

            /*border-top: 4px dotted blue;*/
        }

        #div2 {
            width: 150px;
            height: 150px;
            background-color: darkorange;

            margin-top: 100px;
            margin-left: 100px;

            /*mangin:100px 100px 50px 150px;   一个值，四个方向统一;两个值:上下、左右，三个值:上、左右、下，四个值:上右下坐*/

            padding-top: 50px;
            padding-left: 50px;
        }

        #div3{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }

        body{
            margin: 0;
            padding: 0;
        }


</style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">&nbsp;</div>
        </div>
    </div>
</body>
</html>

<!--
IE浏览器:实际尺寸= width
chrome浏览器:实际尺寸= width+左右borderwidth+padding

cSS盒子模型:
1.border边框
2.margin间距
3.padding填充
-->

在这里插入图片描述

CSS布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height: 50px;
            background-color: greenyellow;

            /*绝对定位*/
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">&nbsp;</div>
</body>
</html>

<!--
position:
    absolute --绝对定位，需要配合使用left , top
    relative --相对定位，一般会和 float , margin , padding ....一起使用
-->

练习—水果库存静态页面

html

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/css04.css">
</head>
<body>
    <div id="div_container">
        <div id="div_fruit_list">
            <table id="tb1_fruit">
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="img/删除.jpeg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>香蕉</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="img/删除.jpeg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">5</td>
                </tr>
            </table>
        </div>
    </div>

</body>
</html>

CSS

body{
    margin: 0;
    padding: 0;
    background-color: #808080;
}
div{
    position: relative;
    float: left;
}
#div_container{
    width: 80%;
    height: 100%;
    border: 0px solid blue;
    margin-left: 10%;
    float: left;
    background-color: honeydew;
    border-radius: 8px;
}
#div_fruit_list{
    width: 100%;
    border: 0px solid red;
}
#tb1_fruit{
    width: 100%;
    line-height: 28px;
    margin-top: 120px;
}
#tb1_fruit, #tb1_fruit tr, #tb1_fruit th, #tb1_fruit td{
    border: 1px solid gray;
    border-collapse: collapse;
    text-align: center;
    font-size: 16px;
    font-family: "黑体";
    font-weight: lighter;
    color: threeddarkshadow;

}
.w20{
    width: 20%;
}
.delImg{
    width: 24px;
    height: 24px;
}