前端-part3-基础css样式

原创

少年包青菜

修改于 2020-07-29 11:27:48

4820

修改于 2020-07-29 11:27:48

1.字体的背景属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>今日的css</title>
    <style>
        * {
    font-family: ".PingFang SC", "微软雅黑", "Microsoft YaHei", "Arial";
    font-size: 18px;
}


a:link {
    color: cadetblue;
    text-decoration: none;
}
/*连接文字问点击之前的颜色，这里设定的是绿色*/
/*text-decoration:取消下划线*/
a:visited {
    color: darkmagenta;
}

/*连接文字点击之后的颜色，这里设定的是深紫色*/

.c1{
    font-size: 28px;
    font-weight: 900;
    color: crimson;
    text-decoration: underline ;
}
/*font-size:字体的大小*/
/*font-weight:设定字体粗细*/
/*text-description:设定下划线*/
.c2:first-letter{
    color: darkmagenta;
    font-weight: 900;
    font-size: 28px;
}
/*对第一个字左渲染*/

.c3_1{
    text-align: center;
}
.c3_2{
    text-align: right;
}
.c3_3{
    text-align: left;
}
/*text-align:文字居中，居左，居右*/

    </style>
</head>
<body>
<p>
    <a href="https://www.baidu.com/">百度</a>
</p>
<p>
    <a href="https://wwww.baidu.com/">百度</a>
</p>
<p class="c1">
    海燕
</p>
<p class="c2">
    窗前明月光，<br>
    疑是地上霜。<br>
    举头望明月，<br>
    低头思故乡。
</p>
<p class="c3_1">我是一段居中的文字</p>
<p class="c3_2">我是一段居右的文字</p>
<p class="c3_3">我是一段居左的文字</p>
</body>
</html>

2.关于背景设定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的背景</title>
    <style>
        .c1 {
            background-color: #00da88;
        }

        /*背景颜色*/

        .c2 {
            width: 600px; /*给图片抠出一个宽度*/
            height: 600px; /*给图片抠出一个高度*/
            /*border: 1px solid black; !*外框的像素，实线，黑色*!*/
            background-image: url("食屎.png"); /*图片的地址*/
            background-size: 30% 100%;/*设置图片大小百分比*/
            background-repeat: no-repeat; /*图片是否设置重复*/
            background-position: 200px 200px; /*设置的图片的位置*/
        }

        /*背景图片*/
    </style>
</head>
<body>
<div class="c1">这是一个div</div>
<div class="c2">这是一个div2</div>

</body>
</html>

3.如何固定背景

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景不动效果示例</title>
    <style>
        .c1 {
            height: 500px;
            background: red;

        }

        .c2 {
            height: 500px;
            width: 1000px;
            background-image: url("static/叼毛.png 或者 网上图片的url");
            background-repeat: no-repeat;
            background-attachment: fixed;/*把背景图固定*/
            background-position: center;/*设置背景位置*/
        }

        .c3 {
            height: 500px;
            background-color: green;
        }
    </style>
</head>
<body>


<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

4.如何操作边框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>如何操作边框</title>
    <style>
        div{
            height: 200px;
            width: 300px;
            background-color: #8e939a;
            border-style: solid; /*实线*/
            border-color: #00da88;/*边框颜色*/
            border-width: 1px; /*边框线宽*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

5.元素的display属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的display</title>
    <style>
        .c1 {
            background-color: red;
            /*display: none;*/ /*display设置为隐蔽，在页面上不再展示*/
            visibility: hidden; /*hidden设置为隐蔽不见，但是页面上依然占据一行*/
            height: 100px;
        }

        .c2 {
            background-color: green;
            display: block; /*设置为块级标签，但是一般不用*/
            width: 200px; /*这样就可以设置宽度*/
        }

        ul {
            list-style-type: none; /*取消无需列表的前面的小点点*/
        }

        li {
            display: inline; /*设置为行内标签，这样就可以把竖着的列表排列成一排了*/
        }

        li.last {
            border-right: none; /*取消最列表右边的边框线*/
        }

        li > a {
            border-right: 1px solid red; /*设置右边框的高度，实线，红色*/
            padding: 0 15px; /*移动15像素*/
        }
    </style>
</head>
<body>
<div class="c1">div</div>
<span class="c2">span</span>
<span class="c2">span</span>
<ul>
    <li><a href="">玉米商城</a></li>
    <li><a href="">电脑</a></li>
    <li><a href="">手机</a></li>
    <li class="last"><a href="">爆米花</a></li>
</ul>

</body>
</html>

6.盒子模型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的盒子模型</title>
    <style>
        * {
            margin: 0; /*margin，外边框，相当于初始化，取消浏览器默认样式*/
            padding: 0; /*padding，标签边框大小，内填充和内边距*/
        }
        /*初始化浏览器的数据*/

        .c1 {
            height: 200px;
            width: 300px;
            padding: 20px 20px 20px 20px;
            border: red solid 5px; /*接受三个参数，颜色，线宽，和线的类型*/
            margin: 50px; /*padding，标签边框大小，一般用于单元标签和单元标签之间的距离设定*/

        }

    </style>
</head>
<body>
<div class="c1">这是一段文字</div>
<div class="c2"></div>
</body>
</html>

7+8.页面浮动+固定页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的页面浮动实例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*初始化浏览器*/
        .c1 {
            height: 100px;
            width: 20%;
            float: left; /*往左边浮动，对于块级标签，设置浮动，自动变成行内标签*/
            background-color: green;
        }

        .c2 {
            height: 150px;
            width: 50%;
            float: right; /*往右边浮动，对于块级标签，设置浮动，自动变成行内标签*/
            background-color: red;
        }

        .father {
            margin: 10px;
            border: solid 2px;
        }

        .father:after { /*在此处的after后面增加以下三项，即可完成边框线的固定*/
            content: ""; /*构建一个虚假的元素*/
            display: block; /*设置为块的属性*/
            clear: both; /*两边全部没有挨到*/
        }
    </style>
</head>
<body>

<div class="father">
    <div class="c1">我是class-c1</div>
    <div class="c2">我是class-c2</div>
</div>
</body>
</html>

9.overflow溢出边框的操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>overflow实例</title>
    <style>
        div.c1 {
            height: 100px;
            width: 80px;
            border: black 2px solid; /*给这段文字加上一个外边框的*/
            overflow: auto; /*在外边框上加上一个滚动条*/
        }

        div.c2 {
            width: 250px;
            height: 185px;
            border: 2px solid red;
            border-radius: 100%; /*设置为一个圆，用来框图片*/
            overflow: hidden; /*超出边框的做隐藏处理*/
        }

        div>img {
            max-width: 100%;  /*设置图片的大小自适应图框，按照实际来调节*/
        }
    </style>
</head>
<body>
<div class="c1">这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长
    很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
    很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
    的文字哟
</div>
<div class="c2">
    <img src="http://img2.imgtn.bdimg.com/it/u=3425147609,3791526853&fm=26&gp=0.jpg" alt="">
</div>
</body>
</html>

10.position实现元素的固定

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的position定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c1,
        .c2,
        .c3,
        .c4,
        .c4-father {
            height: 100px;
            width: 100px;
        }

        .c1 {
            background-color: red;
        }

        .c2 {
            background-color: green;
            top: 150px; /*距离浏览器顶部150*/
            position: absolute; /*绝对于浏览器最顶部150*/

        }

        .c3_father {
            top: 200px;
            position: absolute; /*定义父标签时候，用absolute*/
        }

        .c3 {
            background-color: gray;
            top: 100px; /*这里相对于父标签的位置挪动了100，父标签不定义位置的时候，相对于浏览器位置*/
            position: relative;
        }

        .c5_buddy {
            top: 1000px;
            background: antiquewhite;
            position: absolute;
        }

        .c5 {
            top: 25px;
            left: 300px;
            background-color: #838A9D;
            height: 100px;
            width: 200px;
            position: fixed; /*不管李兰器怎么滑动，他都相对于浏览器是固定位置*/
        }
    </style>
</head>
<body>
<div class="c1">我是c1</div>
<div class="c2">我是c2，绝对于浏览器顶部</div>
<div class="c3_father">
    <div class="c3">我是c3，相对于父标签定义的位置，父标签位置变，我也变</div>
</div>
<div class="c5_buddy">我是为了配合c5而存在的</div>
<div class="c5">我是c5，始终相对于浏览器的相对位置</div>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

display