javaweb-CSS-《Java学习知识库》

2025-11-02 01:22:00 编程来源：ZONE.CI 全球网 0 阅读模式

<html>
    <head>
        <meta charset="UTF-8">
        <!--内部样式表-->
        <style type="text/css">
            /*被style标签包围的范围是CSS环境，可以写CSS代码*/
            /*标签样式表*/
            p{
                color:red
            }
            /*类样式*/
            .f20{
                font.size:20px;
            }
            /*ID样式*/
            #p4{
                background-color:pink;
                font-size:24px;
                font-weight:bolder;
                font-style:italic;
                font-family:"华文彩云";
            }
            /*组合样式*/
            div p{
                color:blue;
            }
            div .f32{
                font-size:32px;
                font-family:"黑体";
            }
        </style>
        <!--外部样式表-->
        <link rel="stylesheet" href="CSS格式文件的地址">
    </head>
    <body>
        <!--
        <p><font color="red">这里是段落一<font></p>
        <p><font color="red">这里是段落二<font></p>
        -->
        <p>这里是段落一</p>
        <p>这里是段落二</p>
        <p class="f20">这里是段落三</p>
        <p id="p4">这里是段落四</p><!--id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错）-->
        <div>
                    <!--嵌入式样式表-->
            <p><span style="font-size:60px;font-weigth: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从位置上的分类：嵌入式样式表、内部样式表、外部样式表
-->

<html>
    <head>
        <meta charset="UTF-8">
        <!--内部样式表-->
        <style type="text/css">
            #div1{
                width:400px;
                height:400px;
                background-color:greenyellow;
                /*border边框样式*/
                border-width:1px;            /*边框粗细*/
                border-style:solid;        /*边框样式：solid（实线），dotted（点状线）*/
                border-color:blue;            /*边框颜色*/
                /*border:4px double blue;*/
                /*border-top:4px dotted blue;*/
            }
            #div2{
                width:150px;
                height:150px;
                background-color:darkorange;
                margin-top:100px;
                margin-left:100px;
                /*margin:100px 100px 50px 150px;*/ /*一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左*/
                /*padding:填充*/
                padding-top:50px;
                padding-left:50px;
            }
            #div3{
                width:100px;
                height:100px;
                background-color:aquamarine;
                /*
                margin-top:50px;
                margin-left:50px;
                */
            }
            #div4{
                width:200px;
                height:200px;
                margin-left:100px;
                background-color:greenyellow;
            }
            body{
                margin:0;
                padding:0;'p
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">&nbsp;</div>
            </div>
        </div>
        <div id="div4">&nbsp;</div>
    </body>
</html>
<!--
IE浏览器：实际尺寸=width
Chrome浏览器：实际尺寸=width+左右border的width+padding的值
盒子模型：
1、border 边框
2、margin 间距
3、padding 填充
-->

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                margin:0;
                padding:0;
            }
            #div1{
                width:200px;
                height:50px;
                background-color:greenyellow;
                /* 绝对定位 */
                position:absolute;
                left:100px;
                top:100px;
            }
            #div2{
                width:200px;
                height:50px;
                background-color:pink;
                position:relative;
                float:left;
                margin-left:20px;
            }
            #div3{
                height:50px;
                background-color:darkorange;
            }
            #div4{
                width:200px;
                height:50px;
                background-color:aqua;
                float:left;
            }
            #div5{
                width:200px;
                height:50px;
                background-color:olivedrab;
                float:left;
            }
            div{
                position:relative;
            }
        </style>
    </head>
    <body>
        <!--
        <div id="div1">&nbsp;</div>
        <div id="div2">&nbsp;</div>
        -->
        <div id="div3">
            <div id="div4">&nbsp;</div>
            <div id="div5">&nbsp;</div>
        </div>
    </body>
</html>
<!--
position: absolute -- 绝对定位 , 需要配合使用 left , top
          relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用
float 
-->

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body{
                margin:0;
                padding:0;
                background-color:#808080;
            }
            div{
                position:relative;
            }
            #div_top{
                background-color: orange;
                height:20%;
            }
            #div_left{
                background-color: greenyellow;
                height:80%;
                width:15%;
                float:left;
            }
            #div_main{
                background-color: whitesmoke;
                height:70%;
                float:left;
                width:85%;
            }
            #div_bottom{
                background-color: sandybrown;
                height:10%;
                width:85%;
                float:left;
            }
            #div_container{
                width:80%;
                height:100%;
                border:0px solid blue;
                margin-left:10%;
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="div_container">
            <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>

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/demo05.css">
    </head>
    <body>
        <div id="div_container">
            <div id="div_fruit_list">
                <table id="tbl_fruit">
                    <tr>
                        <th class="w20">名称</th>
                        <th class="w20">单价</th>
                        <th class="w20">数量</th>
                        <th class="w20">小计</th>
                        <th>操作</th>
                    </tr>
                    <tr>
                        <td>苹果</td>
                        <td>5</td>
                        <td>20</td>
                        <td>100</td>
                        <td><img src="imgs/del.jpg" class="delImg"/></td>
                    </tr>
                    <tr>
                        <td>西瓜</td>
                        <td>3</td>
                        <td>20</td>
                        <td>60</td>
                        <td><img src="imgs/del.jpg" class="delImg"/></td>
                    </tr>
                    <tr>
                        <td>菠萝</td>
                        <td>4</td>
                        <td>25</td>
                        <td>100</td>
                        <td><img src="imgs/del.jpg" class="delImg"/></td>
                    </tr>
                    <tr>
                        <td>榴莲</td>
                        <td>3</td>
                        <td>30</td>
                        <td>90</td>
                        <td><img src="imgs/del.jpg" class="delImg"/></td>
                    </tr>
                    <tr>
                        <td>总计</td>
                        <td colspan="4">999</td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>
*{
    color: threeddarkshadow;
}
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;
}
#tbl_fruit{
    width:60%;
    line-height:28px;
    margin-top:120px;
    margin-left:20%;
}
#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;
}
.w20{
    width:20%;
}
.delImg{
    width:24px;
    height:24px;
}
.btn{
    border:1px solid lightgray;
    width:80px;
    height:24px;
}