0
点赞
收藏
分享

微信扫一扫

JavaWeb——CSS

三维控件研究 2022-05-04 阅读 76
java-ee

1.CSS导入方式

p{
    color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--内部样式-->
    <style>
        span{
            color: blue;
        }
    </style>

    <!--外部样式-->
    <link href="../CSS/demo.css" rel="stylesheet">

</head>
<body>

    <!--内联样式-->
    <div style="color: pink">Hello CSS</div>

    <!--内部样式-->
    <span>Hello CSS</span>

    <!--外部样式-->
    <p>Hello CSS</p>

</body>
</html>

 

 


2.CSS选择器

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        color: red;
    }
    #name{
      color: orange;
    }
    .class{
        color: blue;
    }
</style>
<body>

<div id="name">div1</div>
<div class="class">div2</div>
<div>div3</div>
<div>div4</div>

<span class="class">span1</span>
<span class="class">span2</span>
<span>span3</span>

</body>
</html>

 


3.CSS属性

CSS 参考手册 (w3school.com.cn)icon-default.png?t=M3K6https://www.w3school.com.cn/cssref/index.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        color: deeppink;
        background-color: pink;

    }
    #name{
        color: orange;
        background-color:red;
        box-shadow: 6px 3px 3px black;
    }
    .class{
        color: blue;
        border-style:solid;
        border-width:2px;
        background-color:lightblue;
    }
</style>
<body>

<div id="name">div1</div><br>
<div>div2</div>
<div>div3</div>
<div>div4</div>

<span class="class">span1</span>
<span class="class">span2</span>
<br>
<span>span3</span>

</body>
</html>

 

 

举报

相关推荐

0 条评论