CSS笔记

打工人王某

已于 2022-01-30 17:29:23 修改

阅读量401

点赞数

文章标签： css html css3

于 2022-01-30 17:28:28 首次发布

本文链接：https://blog.csdn.net/weixin_45905371/article/details/122754323

版权

CSS

<html>
<meta charset="UTF-8">
<head>
    <style type="text/css">
        /*标签样式表*/
        p{
            color: red;
        }
        /*类样式*/
        .f20{
            font-size: 20px;
        }
        /*id样式*/
        #p4{
            background-color: #1c7bcb;
            font-size: 25px;
            font-weight: bolder;
            font-style: italic;
            font-family: "微软雅黑";
        }
        div p{
            color: #1430e3;
        }
        div .f32{
            font-size: 32px;
            font-family: "黑体";
        }
    </style>
</head>
<body>
    <p><font color="red">这是段落1</font> </p>
    <p>这是段落2</p>
    <p class="f20">这是段落3 </p>
    <p id="p4">这是段落4 </p> <!--id 属性在整个html中保持唯一-->
    <div>
        <p><span style="font-size: 60px;color: red">hello</span></p>
        <span class="f32">word</span>
        <p class="f32">!!!</p>
    </div>
</body>
</html>

为什么需要css
css的分类：标签样式表、类样式表、ID样式表可以查样式表中文手册
CSS从位置上的分类：嵌入式样式表，内部样式表，外部样式表

外部css的内容 css-demo01.css

/*id样式*/
#p4{
    background-color: #1c7bcb;
    font-size: 25px;
    font-weight: bolder;
    font-style: italic;
    font-family: "微软雅黑";
}
div p{
    color: #1430e3;
}
div .f32{
    font-size: 32px;
    font-family: "黑体";
}

引用外部的css样式

<link rel="stylesheet" href="css-demo01.css">

盒子模型

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

            /*border 边框样式*/
            border-width: 4px; /*边框粗细*/
            border-style: solid;/*边框样式:solid实线,*/
            border-color: blue;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: #8e3d82;
            /*margin-top: 100px;*/
            /*margin-left: 100px;*/
            margin: 100px;
        }
    </style>

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

CSS布局

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

            /*绝对定位*/
            position: absolute;
            left:100px;
            top: 100px;
        }
        #div2{
            width: 200px;
            height: 50px;
            background-color: #cb327f;

            /*相对定位*/
            position: relative;
            float: right;
            margin-right: 20px;
        }
        #div3{
            height: 50px;
            background-color: #325dcb;
        }
    </style>
</head>
<body>
    <div id="div1">&nbsp;</div>
    <div id="div2">&nbsp;</div>
    <div id="div3">&nbsp;</div>
</body>
</html>

水果库存静态页面

css-demo02.css

body{
  margin: 0;
  padding: 0;
  background-color: #808080;
}
div{
    position: relative;
    float: left;
}

#div_container{
    width: 80%;
    height: 800px;
    border: 1px solid blue;
    margin-left: 10%;
    float: left;
    background-color: #9ab291;
}
#tbl_fruit{
    width: 1200px;
    /*设置行高*/
    line-height: 28px;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_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%;
}

html

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css-demo02.css">
</head>
<body>
    <div id="div_container">
        <div id="div_fruit_list">
            <table id="tbl_fruit">
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>香蕉</td>
                    <td>100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>鸭梨</td>
                    <td>100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>西瓜</td>
                    <td>100</td>
                    <td>5</td>
                    <td>500</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">2500</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

名称	单价	数量	小计
苹果	100	5	500
香蕉	100	5	500
鸭梨	100	5	500
西瓜	100	5	500
总计	2500

打工人王某

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

CSS<html><meta charset="UTF-8"><head> <style type="text/css"> /*标签样式表*/ p{ color: red; } /*类样式*/ .f20{ font-size: 20px; } /*id样式*/ #p4{
复制链接

扫一扫