CSS基础

S1nJa
50 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

CSS

基本分类

标签样式表

/* 标签样式表*/
p{
    color: red;
}

类样式表

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

ID样式表

ID样式 尽量保持唯一不要重复使用

/* ID样式 尽量保持唯一不要重复使用*/
#p4{
    background-color: pink;
    font-size: 24px;
    font-weight: bolder;
    font-style: italic;
    font-family:"华文中宋";
}

位置分类

嵌入式样式表

优先级下边两种样式

<p><span style="font-size: 80px;font-weight: bolder">Hi</span></p>

内部样式表

<p class="f2">这是第三段</p>
<p id="p4">这是第四段</p>

外部样式表

从外部调用样式

<link rel="stylesheet" href="css/1.css">

测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        /*被style标签包裹的范围是CSS代码*/
​
        /* 标签样式表*/
        p{
            color: red;
        }
​
        /*类样式表*/
        .f2{
            font-size: 20px;
        }
​
        /* ID样式 尽量保持唯一不要重复使用*/
        #p4{
            background-color: pink;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family:"华文中宋";
        }
        /* div样式*/
        div p{
            color: blue;
            font-size: 36px;
        }
        div .f23{
            font-size: 32px;
            font-family:"黑体";
            color: green;
        }
    </style>
</head>
<body>
    <p>这是第一段</p>
    <p>这是第二段</p>
    <p class="f2">这是第三段</p>
    <p id="p4">这是第四段</p>
​
    <div>
        <p><span>Hi</span></p>
        <span class="f23">Sentiment</span>
        <p class="f23">!!!!</p>
    </div>
</body>
</html>

也可以用外部样式，将style标签以及包含的内容换成<link rel="stylesheet" href="css/1.css">外部链接即可

盒子模式

属性

border 边框

通过border属性可以对边框各属性进行设置

border-width: 4px;
border-style: solid;
border-color: blue;

可以通过一个border属性设置各属性值

border: 4px solid blue;

若只想对其中一遍设置可以用border-top/left/right//bottom

border-top: 4px solid blue;

margin 间距

通过margin属性可以对各边进行间距设置

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

也可以通过通过一个margin属性完成各边间距设置，默认顺时针方向设置

margin: 100px 100px 100px 100px;

padding 填充

通过padding可进行内部填充

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

body

浏览器左上角会留出一点间距，可以通过下边方式取消掉

body{
    margin: 0;
    padding: 0;
}

测试

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>demo02</title>
    <style type="text/css">
        #div1{
            width: 400px;
            height: 400px;
            background-color: red;
            /* border: 边框样式 */
            border-width: 4px;
            border-style: solid;
            border-color: blue;
            /*border: 5px solid blue;*/
            /*border-top: 5px solid blue;*/
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 75px;
            margin-left: 75px;
            /*margin: 100px 100px 100px 100px;*/
            padding-top: 50px;
            padding-left: 50px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: aqua;
​
            margin-top: 25px;
            margin-left: 25px;
        }
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>
</html>

效果

image-20220929094631459.png

CSS布局

属性

postion

absolute -- 绝对定位，需要配合left，top等使用
​
relative -- 相对定位，一般结合float，margin，padding使用

测试

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>demo03</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        div{
            position: relative;
        }
        #div_top{
            width: 100%;
            height: 20%;
            background-color: pink;
        }
        #div_left{
            width: 15%;
            height: 80%;
            background-color: greenyellow;
            float: left;
        }
        #div_main{
            width: 85%;
            height: 70%;
            background-color: yellow;
            float: left;
        }
        #div_bottom{
            width: 85%;
            height: 10%;
            background-color: blue;
            float: left;
        }
        #div{
            width: 80%;
            height: 100%;
            border: 1px solid black;
            margin-left: 10%;
            float: left;
        }
    </style>
</head>
<body>
<div id="div">
    <div id="div_top">div_top</div>
    <div id="div_left">div_left</div>
    <div id="div_main">div_main</div>
    <div id="div_bottom">div_bottom</div>
</div>
</body>
</html>

结果

image-20220930141902559.png

练习

效果

image-20221001114155377.png

test.html

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/test.css">
​
</head>
<body>
    <div id="div">
        <div id="div_list">
            <table id="tbl_list">
                <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="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>西瓜</td>
                    <td>3</td>
                    <td>20</td>
                    <td>60</td>
                    <td><img src="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>菠萝</td>
                    <td>4</td>
                    <td>25</td>
                    <td>100</td>
                    <td><img src="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>榴莲</td>
                    <td>3</td>
                    <td>30</td>
                    <td>90</td>
                    <td><img src="imgs/1.jpg" class="image"></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">999</td>
​
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

test.css

body{
    margin: 0;
    padding: 0;
    background-color: honeydew;
}
div{
    float: left;
    position: relative;
    background-color: gainsboro;
    border-radius:16px
}
#div{
    border: 0px black solid;
    width: 80%;
    height: 100%;
    margin-left: 10%;
}
#div_list{
    width: 100%;
    height: 20%;
}
#tbl_list tr,#tbl_list th,#tbl_list td{
    border: 1px solid gray;
    height: 45px;
    text-align: center;
    font-family: 黑体;
    font-size: 16px;
    font-weight: lighter;
    color: black;
}
#tbl_list{
    width: 50%;
    border-collapse: collapse;
    margin-left: 25%;
    margin-top: 16%;
}
.image{
    width: 20px;
    height: 20px;
    border-radius:8px
​
}
avatar
文章
阅读
粉丝