CSS学习笔记二

最新推荐文章于 2024-10-11 19:10:16 发布

会变强的小魔女

最新推荐文章于 2024-10-11 19:10:16 发布

阅读量174

点赞数

文章标签： css

本文链接：https://blog.csdn.net/CSDN_09/article/details/104298465

版权

对应[星月教你做网站]视频P13

13、css控制边框和背景

1、定义简单边框

border-width
border-style 设置边框样式类型
border-color

2、border简写属性
3、定义简单背景

background-color
background-image
background-size
background-attachment：背景固定方式
4、background简写属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建边框和背景</title>
    <style type="text/css">
        .class1{
            /*border-width: 5px;*/
            /*border-color: #ba0bff;*/
            /*border-style: solid;*/
            /*border-top-color: #ff7b59;*/
            /*border-bottom-style: dashed; */

            /*简写属性 即把上面的合成一句*/
            /*width: 1024px;*/
            /*height: 768px;*/
            /*border: 5px solid red;*/
            /*border-top: 10px dashed yellow;*/
            /*background-color: aquamarine;*/

             /*background-image介绍*/
            background-attachment: fixed;/*设置图片不随滚动条滚动*/
            background-repeat: no-repeat;/*设置图片不重复*/
            background-image: url("新叶.jpg");
            background-size: cover;/*设置图片覆盖整个网页*/

        }
    </style>
</head>
<body class="class1">
<!--边框不只是出现在表格里，所有文本语义级别的元素都有边框元素-->
<!--<p class="class1">魔法学院</p>-->
<br><br><!--增加了很多换行符，使得页面可以滚动-->
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>