2021-03-31

最新推荐文章于 2024-09-12 19:13:21 发布

qq_50825351

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量174

点赞数

分类专栏： CSSj基础知识文章标签： css3 html

本文链接：https://blog.csdn.net/qq_50825351/article/details/115364189

版权

CSSj基础知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

3.为什么要美化网页

为什么呢？

有效传递网页信息
美化网页，页面敞亮，才能吸引用户
凸显页面主题
提高用户体验

span标签：重点突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span学习</title>

    <style>
        
        #title1{
          font-size: 50px;
        }
    </style>
</head>
<body>

欢迎学习<span id="title1">java</span>

</body>
</html>

3.2字体样式

<!--   font-family字体
font-size字体大小
font-weight字体粗细
color字体颜色
 -->
    <style>
        body{
            font-family:楷体;
            color:blueviolet;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
            font:  oblique bold 10px/10px Arial;
        }
    </style>

3.3文本样式

颜色 color rgb rgba
文本对齐的方式 text-align: center;
首行缩进 text-indent:2em;
行高 line-height: 100px; 单行文字上下居中！
下划线（装饰） text-decoration: underline;
文本图片水平对齐：vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式学习</title>
</head>
<!--颜色：
单词
RGB 0-F
RGBA
 text-align 排版
 text-indent:2em 段落首行缩进

  height: 100px;
  line-height: 100px;
 行高，和 块的高度一致，就可以上下居中
-->
<style>
h1{
    color: rgb(0,255,255);
    text-align: center;
}
    h1{
        text-indent:2em;
    }
    .p3{
        background: pink;
        height: 100px;
        line-height: 100px;
    }
    /*下划线*/
    .l1{
        text-decoration: underline;
    }
/*中划线*/
    .l2{
        text-decoration: line-through;
    }
/*上划线*/
    .l3{
        text-decoration: overline;
    }
    img,span{
        vertical-align: middle;
    }
    a{
        text-decoration: none;
    }
</style>
<body>
<a href="">123</a>
<p class="z1">
    <img src="../images/1.jpg" alt="">
<span>aasdghjk</span>
</p>
<p class="l1">1234</p>
<p class="l2">321</p>
<p class="l3">123</p>
<h1>个人先进事迹</h1>
<p class="p1">邹兴容，女，苗族，大数据与软件学院计算机科学与技术06班，</p>
<p>担任职务有志愿服务专项支队支队长、辅导员助理，在2019-2020学年综合成绩专业排名第一，</p>
<p>荣获“国家励志奖学金”、“三好学生”、校“绿色离校·绿色感恩”微视频大赛二等奖、院“优秀志愿者”等称号。</p>
<p>俗话说，态度决定一切。作为一名青年大学生来说，认真的学习态度和对工作踏实、刻苦，重视广泛、深入学习，</p>
<p>全面完善自我都离不开端正的态度。关于学习方面，踏实的态度决定了我的期末成果，</p>
<p>在2019-2020学年综合成绩得分64.4专业第一；同时也荣获“国家励志奖学金”、“三好学生”等荣誉称号。</p>
<p>在学习之余，我也没忘提升自我，目前担任的职务有志愿服务专项支队长和辅导员助理。</p>
<p>前者，我主要负责每一次活动的策划撰写和任务安排以及后期的资料收集与整理；</p>
<p class="p3">而后者，我主要协助辅导员关于学院学风板块的建设和完善，其中还包括对接班级学委和一些资料的整理。</p>

</body>
</html>

3.4阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径 */
#price{
    text-shadow: blueviolet 10px 2px 2px;
}

3.5超链接伪类

正常情况下，a, a:ahover

 /*鼠标悬浮的状态(重点)*/
        a:hover{
            color: pink;
            font-size: 50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color: lawngreen;
        }
        a:visited{
            color: red;
        }

a{
    text-decoration: none;
    font-size: 20px;
    color: black;
}
a:hover{
    color: pink;
    text-decoration: underline;
}

3.6 列表(重点)

/*ul li
list-style:
none去掉圆点
circle:空心圆
decimal:数字
square：正方形
*/
ul{
    background: gray;
}
ul li{
    height:30px;
    /*去圆点： list-style: none;*/
    list-style: none;
    text-indent: 1em;

}

3.7背景

背景颜色

背景图片

div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("image/1.jpg");
        /*    默认是全部平铺的*/
        }
        .div1{
             background-repeat: repeat-x;
         }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat:no-repeat;
        }

3.8渐变

4盒子模型

4.1什么是盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4IQtTtBx-1617205272572)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210322201646201.png)]

margin:外边距

border:边框

padding:内边距

4.2边框

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        body{
            /*body总有一个默认值margin*/
            margin: 0px;
            padding: 0px;
        }
    #box{
    width: 300px;
    /*    border:粗细 样式（实体，虚线） 颜色*/
    border:1px solid red;

}
    h2{
        font-size: 16px;
        background: #FFCC70;
        line-height: 30px;
        margin: 0px;
        padding: 0px;
        color: pink;
    }
        form{
            background: gray;
        }
        /*div:nth-of-type(1)input{*/
        /*    border: 10px solid red;*/
        /*}*/
        /*div:nth-of-type(2)input{*/
        /*    border: 4px dashed blue;*/
        /*}*/
        .s1,.s3{
            border: 3px solid blue;
        }
        .s2{
            border: 3px dashed red;
        }

    </style>

4.3内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
<!--    外边框的妙用，居中元素
 margin: 0px auto;
-->
    <style>

    #box{
    width: 300px;
    /*    border:粗细 样式（实体，虚线） 颜色*/
    border:1px solid red;
        margin: 0px auto;
    }
    /*
    margin: 0px；上下左右
    margin: 0px 1px;上下 左右
    margin: 0px 1px 2px 3px; 上 右 下 左
    margin: 0px 1px 3px; 上 左右 下
    */
    h2{
        font-size: 20px;
        background: white;
        line-height: 30px;
        margin: 0px 1px;
        padding: 0px;
        color: pink;
    }
        form{
            background: gray;
        }
        input{
            border: 1px solid yellow;
        }
        div:nth-of-type(1){
          padding: 10px;
        }

    </style>

</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
        <span>用户名</span>
        <input type="text" class="s1">
    </div>
        <div>
            <span>密码</span>
            <input type="text" class="s2">
        </div>
        <div>
            <span>邮箱</span>
            <input type="text" class="s3">
        </div>
    </form>

</div>


</body>
</html>

盒子的计算方式：你这个元素到底有多大呢？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSAiTJD4-1617205272578)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210322201646201.png)]

margin+border+padding+内容宽度

4.4圆角边框

4个角

1.水平半圆形

div{
    width: 100px;
    height: 50px;
    margin: 30px;
   background: red;
    border-radius: 50px 50px 0px 0px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uskgFMHA-1617205272583)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210323202151162.png)]

2.竖直园

   <style>
div{
    width: 50px;
    height: 100px;
    margin: 30px;
   background: red;
    border-radius: 50px 0px 0px 50px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LOk7pp0-1617205272589)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210323202404033.png)]3.四分之一圆

  <style>
div{
    width: 50px;
    height: 50px;
    margin: 30px;
   background: red;
    border-radius: 50px 0px 0px 0px;
}
    </style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oCxwuIbW-1617205272594)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210323202804297.png)]

4.5盒子阴影

怎样让盒子内容居中呢？

display:block; text-align:center ;让内容实现居中

<div style="width: 500px;display: block;text-align: center">
   <img src="images/bg.gif">
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Dj8OQJg-1617205272596)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210323211747105.png)]

5.浮动

5.1标准文档流

块级元素：独占一行

1.h1~h6 
2.p标签
3.div
4.ul li等等

行内元素：不独占一行

1.span
2.a标签
3.img
4.strong...

##行内元素可以包含在块级元素中，反之，则不可以~

5.2display

行内元素与块元素通过display可以实现相互转换

<!--    block块元素
inline 行内元素
inline-block,是块元素，但是可以内联，在一行！
none:消失
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

这个也是实现行内元素排列的方式，但是我们很多情况都是用float

5.3左右浮动

div{
    padding: 0px;
    margin: 0px;
}
#father{
    border: 1px solid red;
}
.layer01{
    border: 1px dashed pink;
    display: inline-block;
float: left;
}
.layer02{
    border: 1px dashed cyan;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px dashed gray;
    display: inline-block;
    float: left;

}
.layer04{
    font-size: 12px;
    line-height: 23px;
    border: 1px dashed pink;
    display: inline-block;
float: left;
}

5.4 父类边框塌陷的问题

clear:

/*clear：right;右侧不允许浮动元素
clear：left;左侧不允许浮动元素
clear:both;两侧不允许浮动元素
clear:none;
*/

1.clear both 浮动清除掉

浮动的时候边框会塌陷，怎么解决这个问题呢？

解决方案：

增加父级元素的高度（不建议）

#father{
    border: 1px solid red;
    height: 500px;
}

增加一个空的div标签，清除浮动
```
<div class="clear"></div>
```

.clear{
    clear: both;
    margin: 0px;
    padding: 0px;
}

overflow

在父级元素中增加一个overflow:hidden;(内容可能会被修剪)

父类增加1个伪类：after
```
#father:after{
    content: '';
    display: block;
    clear: both;
}
```
小结
1. 浮动元素后面增加空的div标签，这样虽然简单，但代码中尽量避免空的div.
2. 设置父类的高度，这样也比较简单，如果元素没有固定的高度，就会被限制
3. overflow，简单，但overflow: scroll;下拉的一些场景避免使用。
4. 在父类增加1个伪类：after（推荐使用）,写法稍微复杂一点，但没有副作用，推荐使用。

5.5、对比

display

缺点：方向不可控制

优点：不用担心父级边框塌陷问题
float

优点：方向可以控制

缺点：浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题。

6、定位

6.1.相对定位

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

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="last">第三个盒子</div>

</div>
</body>
</html>

body{
    padding: 20px;
}
div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;
}
#father{
    border: 1px solid red;
    padding: 0;
}
#first{
    border: 1px dashed pink;
    background-color: cyan;
    position: relative;/*相对定位：上 下 左 右*/
    top: -20px;
    left: 20px;
}
#second{
    border: 1px dashed gray;
    background-color: #4158D0;
}
#last{
    border: 1px dashed yellow;
    background-color: #FFCC70;
    position: relative;
    bottom: -10px;
    right: 20px;
}

相对定位： position: relative; 相对于原来的位置，进行指定的偏移，相对定位，它仍然在我们的标准文件流中，原来的位置会保留。

上： 	top: -20px;
下：	bottom: -10px;

左：	left: 20px;

右： 	right: 20px;

练习：链接卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>

<div id="father">
    <div id="first"><a href="">按钮1</a></div>
    <div id="second"><a href="">按钮2</a></div>
    <div id="third"><a href="">按钮3</a></div>
    <div id="four" ><a href="">按钮4</a></div>
    <div id="five"><a href="">按钮5</a></div>
</div>
</body>
</html>

div{
    margin: 0 auto;
}
#father{
    width: 300px;
    height: 300px;
    padding: 10px;
    border: 1px solid #ff5427;
}
#second,#four{
    position: relative;
    left: 200px;
    top: -100px;
}
#five{
    position: relative;
   top: -300px;
    left: 100px;
}
a{
    width: 100px;
    height: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 100px;
    background: #ff38ae;
    color: white;
    display: block;
}
a:hover{
   background: #2ca1ff;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3wvYjKD9-1617205272599)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20210325231939549.png)]

6.2绝对定位

基于XXX定位，上下左右-
1. 没有父级元素定位的前提下，相对于浏览器定位
2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移-
3. 在父级元素范围内移动：相对于父级或浏览器的位置，进行指定的偏移，绝对定位，它不止在标准文件流中，原来的位置不会保留。

body{
    padding: 20px;
}
div{
    margin: 10px;
    padding: 5px;
    font-size: 12px;
    line-height: 25px;
}
#father{
    border: 1px solid red;
    padding: 0;
    position: relative;
}
#first{
    border: 1px dashed pink;
    background-color: cyan;
    position: relative;/*相对定位：上 下 左 右*/
    top: -20px;
    left: 20px;
}
#second{
    border: 1px dashed gray;
    background-color: #12d014;
    position: absolute;
    left: 10px;
    top: -10px;
}
#last{
    border: 1px dashed yellow;
    background-color: gray;
    position: relative;
    bottom: -10px;
    right: 20px;
}

6.3固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位，相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed：固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>

</body>
</html>

6.4 z-Index

z-index(图层):默认是0，最高无限大（一般情况我们写999）

/背景透明度/
opacity: 0.5%;

#content{
    width: 350px;
    margin: 0;
   padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000000 solid;
}
ul,li{
   padding: 0;
   margin: 0;
   list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 300px;
    height: 25px;
    top: 110px;

}
.tipText{
    color: red;
    z-index: 999;
}
.tipBg{
    background: black;
    /*背景透明度*/
    opacity: 0.5%;
}

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

<div id="content">
    <ul>
        <li><img src="images/bg.gif" alt=""></li>
        <li class="tipText">学习服务,找狂神</li>
        <li class="tipBg"></li>
        <li>2021.03.26</li>
        <li>地点，月球一号基地</li>
    </ul>
</div>
</body>
</html>