CSS样式

最新推荐文章于 2022-07-24 15:29:42 发布

JiangCaifu

最新推荐文章于 2022-07-24 15:29:42 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/JiangCaifu/article/details/95176408

版权

背景

css文件

body{
    background-color:aliceblue;
}
/*body{
    background-image: url("图片名");
    background-repeat:repeat-x;
    background-position:right;
    background-position:100px,100px;
    backgroud-attanchment:fixed;
}*/
p{
    width:150px;
    padding:10px;
    background-color:aqua;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
    <p>测试一下背景是否可以继承</p>
<body>
</body>
</html>

文本

css文件

/*body{
    color:aqua;
}*/
/*p{
    color:red;
    text-align: right;
}*/
h1{
    text-indent: 2em;
}

html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
    <p>jikexueyuan</p>
    <div>
        <h1>静夜思</h1>
        <p>窗前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </div>
<body>
</body>
</html>

字体

css文件

p{
    font-size:40px;
    font-family: "Adobe Caslon Pro";
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
    <p>Hello</p>
<body>
</body>
</html>

链接

css文件

a:link{
    color:#FF0000;
    text-decoration: none;
    background-color: aqua;
}
a:visited{
    color:#00FF00;
}
a:hover{
    color:#0000FF;
}
a:active{
    color:#0000FF;
}

html5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
    <a href="http://www.jikexueyuan.com">极客学院</a>
<body>
</body>
</html>

列表

css文件

/*ul li{
    list-style-type: circle;
}*/
/*ul li{
    list-style-image: url("timg9CPA9YOX.jpg") ;
}*/
ul.ul1{
    list-style-position: inside;
}
ul.ul2{
    list-style-position: outside;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
    <p>看一下效果</p>
    <ul class="ul1">
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
    </ul>
    <p>看一下效果</p>
    <ul class="ul2">
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
        <li>苹果</li>
    </ul>
<body>
</body>
</html>

表格

css文件

/*#tb,tr,th,td{
    border:1px solid blue;
}
#tb{
    width:400px;
    height:400px;
    border-collapse: collapse;
}*/
#tb{
    border-collapse: collapse;
    width: 500px;
}
#tb td,#tb th{
    border:1px solid bisque;
}
#tb th{
    text-align:right;
    background-color: aqua;
    color:#FFFFFF;
}
#tb tr.alt td{
    color:black;
    background-color: aquamarine;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
    <table id="tb">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr class="alt">
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr class="alt">
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>20</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

轮廓

css文件

p{
    outline-width: 20px;
    outline-color: aqua;
    outline-style: groove;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
    <table>
    <p>突出的效果文字</p>
    </table>
</body>
</html>

定位

css文件

#position1{
    width:100px;
    height:100px;
    background-color: aqua;
    position:relative;
    left:20px;
    top:20px;
    z-index: 2;
}
#position2{
    width:100px;
    height:100px;
    background-color: blue;
    position:relative;
    left:50px;
    top:50px;
    z-index:1;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
    <div id="position1"></div>
    <div id="position2"></div>
    <script>
        for(var i=0;i<100;i++){
            document.write(i+"<br/>");
        }
    </script>
</body>
</html>

浮动

css文件

#fd{
    width:100px;
    heoght:100px;
    background-color: red;
    float:left;
}
#sd{
    width:150px;
    height:100px;
    background-color: blue;
    float:left;
}
#td{
    width:100px;
    height:100px;
    background-color: green;
    float:left;
}
#container{
    width:300px;
    height:500px;
    background-color: azure;
}
#text{
    clear:left;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" type="text/css" href="Mycss.css">
</head>
<body>
    <div id="container">
        <div id="fd"></div>
        <div id="sd"></div>
        <div id="td"></div>
        <div id="text">helloworld</div>
    </div>
</body>
</html>

JiangCaifu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

背景css文件body{ background-color:aliceblue;}/*body{ background-image: url("图片名"); background-repeat:repeat-x; background-position:right; background-position:100px,100px; ba...
复制链接

扫一扫