JAVA--CSS_java生成css代码-CSDN博客

本文链接：https://blog.csdn.net/caoshiminYQS/article/details/86547548

Web代码：

测试1(css选择器)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS各种选择器</title>
    <style type="text/css">

        #zhangSan .big{
            /*
                在id选择器找到的那个标签中,所有的class属性为big的后代标签

                都会选择并赋予样式

                后代选择器
             */
            font-size:40px;
            color: red;
        }
        #zhangSan>span{
            /*
                这是一个子代选择器
                    会选择id为zhangSan的标签的子标签
                    大于号后面是一个标签选择器
                    也就是说会选择span子标签
            */
            font-size: 10px;
            color: yellow;
        }
        /*
            子标签会继承父标签的样式
            只不过优先级很低

            选择器的优先级,与我们书写的顺序无关
            临近原则
            哪个离标签近,哪个的优先级就高
        */
        *{
            /*
                通用选择器
                    所有标签都会被选择
                    优先级低
            */
            line-height: 80px;
            word-spacing: 40px;
            background-color: green;
        }
        .small,.middle,#liSi{
            /*
                组合选择器
            */
            font-family: "Arial Black";
        }
        #zhangSan+div{
            /*
                紧跟着id为张三的标签后面的div标签
                会被选择并赋予样式
            */
        }
        #zhangSan~.show{
            /*
                在zhangSan下面的所有的div
                都会被选择并赋予样式
            */
        }
    </style>
</head>
<body>
    <div id="zhangSan" style="background-color: blue">

        我是div的文本内容
        <h1>我是一级标题的文本内容<span class="big">我不是</span></h1>
        <p class="big">我是一个段落</p>
        <span>我是div的子标签span</span>
        <p><span>我是div的子标签p的子标签span</span></p>
    </div>

    <div class="show">
        <p id="liSi">那又咋样?谁在乎?</p>
        <q class="small">谢谢谢谢谢谢谢谢</q>
        <span class="middle">么么么么么么么么们</span>
    </div>

    <div>
        我不是紧跟着zhangSan的div
    </div>
</body>
</html>

测试2（属性选择器）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        [name]{
            /*
                选择所有被赋值name属性的标签
            */
            color: #f00;

            /*
                FFF:白(FFFFFF)
                000:黑(000000)
                FF0000:红
                00FF00:绿
                0000FF:蓝
                前面都得加上#
            */
        }
        [name='username']{
            /*
                选中name属性为username的元素
            */
            color: darkseagreen;
        }
        /*
            选择器优先级总结:
                1.范围小的优先级更高
                2.如果范围相同,就近原则
                        (因为先写的会被后写的覆盖)

                对于组合选择器:
                    div>ul>li span,div div>table>tr span{}
                权值:
                    用来区分优先级的
                行内:1000
                id选择器:100
                类选择器:10
                标签选择器:1
        */
    </style>
</head>
<body>
    给了name属性的:username
    <input type="text" name="username">
    <br>
    没给name属性的
    <input type="text">
    <br>
    给了name属性的:password
    <input type="text" name="password">

</body>
</html>

测试3（盒子模型）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .outer{
            background-color: darkblue;
            padding: 20px;
            margin: 20px;
            border:dashed 10px blue;
            width: 300px;
            height: 200px;
            /*
                上下左右的内间距都是20px
            */
        }
        .inner{
            background-color: darkcyan;
            margin: 20px 20px;
            /*
                上下是20px
                左右是20px
            */
        }
        span{
            /*
                因为span是内联元素
                所以对它设置宽高是无效的
            */
            width: 200px;
            height: 50px;
            font-size: 30px;
            color: burlywood;
            background-color: darkred;

            margin: 30px;
            padding: 30px;
        }
        img{
            width: 200px;
            height: 200px;
            background-color: darkslategray;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div class="outer">1

        <div class="inner">
            儿子,儿子,我是你爸爸
        </div>1
    </div>
    <div class="outer">
        1
    </div>
    <!--
    元素的类型（分类）
        对于块级元素:
            什么是块级元素?
            独占一行
            可以设置宽高属性
        块级元素之间的margin属性
        相遇时,会取较大的值
        div,h1~h6,table,form,p

        内联元素/行内元素
                可以与其他元素共处一行
                不可以设置宽高属性,上下外间距
        span,input,em,strong,mark

        内联块状元素
                可以与其他元素共处一行
                可以设置宽高属性,上下外边距
        img
    -->
    <span>我是span</span>
    <img src="http://pic.ffpic.com/files/2013/0817/sj0831wy02.jpg" alt="厉害了">
</body>
</html>

测试4（背景颜色）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style type="text/css">
        body{
            background: url("http://pic29.photophoto.cn/20131214/0036036827285686_b.jpg") no-repeat;
        }
    </style>
</head>
<body>




</body>
</html>

测试5（浮动与伪类选择器）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a:hover{
            /*伪类选择器*/
            color: red;
            font-size: 40px;
            text-decoration-line: none;
        }
        div{
            height: 200px;
            background-color: aqua;
        }
        .float{
            width: 200px;
            height: 150px;
            background-color: red;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
    </style>
</head>
<body>
    <a href="1_CSS选择器.html">去111111</a>


    <!--
        顺序文档流:
            HTML文档的加载,是从上到下的
            在浏览器中显示时,也是从上到下依次显式的
            这个正常顺序,就是正常的文档流

            浮动:
                将标签,从正常的文档流中悬浮起来.
                也就是在浏览器中显示时.
                不在按照从上到下,从左到右的顺序了.
    -->
    <div>
        <div class="float left">1</div>
        <div class="float right">2</div>

    </div>



</body>
</html>

测试6（定位）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
            /*定位:*/
        /*  绝对定位
                如果父标签也指定了绝对定位
                则相对于父标签
                否则相对body移动
            相对定位
                相对标签原有的位置移动
                并且,该标签原来的位置依然不能放置元素
            固定定位
                相对浏览器
        */
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            /*绝对定位*/
            /*position: absolute;*/
            /*相对定位*/
            /*position: relative;*/
            /*固定定位*/
            position: fixed;
            right: 100px;
            top: 100px;

        }
        p{
            background-color: green;
            width: 50px;
            height: 50px;
            position: absolute;
            right: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div>
        <!--<p></p>-->
    </div>
</body>
</html>

测试7（JS）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript">
        // window是js中,从浏览器抽象出来的对象
        // window是内置对象,是不需要我们自己创建的
        var alert = window.alert("hello js, i hate you so much~");
        window.alert(alert)


    </script>
</head>
<body>

    <!--
        IDE/vim
        JavaScript：是一个脚本语言
                    是一个弱类型语言
                    是一种解释型语言
        什么是脚本？
                什么是剧本？
    -->
</body>
</html>