前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

Posted 2020-11-23 ludingchao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度相关的知识，希望对你有一定的参考价值。

选择器的优先级问题

　　1.选择器相同就近原则

　　2.选择器不同
　　　　行内 > id选择器 > 类选择器 > 标签选择器

　　除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

　　万不得已可以使用!important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <style>-->
<!--        p {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
<!--    <link rel="stylesheet" href="mycss.css">-->
    <style>
        /*.c1 {*/
        /*    color: blue;*/
        /*}*/
        /*p {*/
        /*    color: deeppink;*/
        /*}*/
        #d1 {
            color: red;
        }
    </style>
</head>
<body>
<!--<p style="color: aqua">今天周五啦 马上就要放假了</p>-->
<!--1.选择器相同  引入方式不同    就近原则-->
<p id="d1" class="c1" style="color: yellow">今天周五啦 马上就要放假了</p>
<!--2.选择器不同  引入方式相同-->
</body>
</html>

View Code

以下为mycss.css

/*p {*/
/*    color: green;*/
/*}*/
#d1 {
    color: red;
}

View Code

如何调节标签样式
宽和高

　　长宽只能给块儿级标签设置
　　行内标签是无法设置长宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height:400px;
        }
        span{       /*行标签无法修改长宽*/
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
<div>
    效率第一
</div>
<span>
    坚持就是胜利
</span>
</body>
</html>

View Code

字体属性

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-family: ‘Consolas‘, ‘Monaco‘, ‘Bitstream Vera Sans Mono‘, monospace;   /*字体*/
            font-size: 48px;    /*大小*/
            font-weight:bold;   /*加粗*/
            color: rgba(255,103,0,0.4);
        }
    </style>
</head>
<body>
<p>how are you I am fine thankyou</p>
</body>
</html>

View Code

文字属性

缩进与水平对齐方式对行标签无效

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*text-align: center;*/
            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
            font-size: 16px;    /*字体大小*/
            text-indent: 32px;
        }
        a{
            text-decoration: none;  /*取消下划线*/
            color: green;
        }
    </style>
</head>
<body>
<p>今天天气真的不错</p>
<a href="">点我</a>
</body>
</html>

View Code

背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
        /*    background-color: black;    !*背景*!*/
        /*    color: white;   !*字体颜色*!*/
        /*}*/
        .c1{
            width:400px;
            height: 400px;
            /*background-color: grey;*/
            /*background-image: url("宝马i6.jpeg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: 100px 10px; !*第一个调节左右  第二个调节上下*!*/
            /*支持简写*/
            background: center center url("宝马i6.jpeg") yellow no-repeat;

        }
    </style>
</head>
<body>
    <div>
        今天是周五
    </div>
<div class="c1"></div>
</body>
</html>

View Code

技术图片

背景图片应用案例(类似小米浏览器的广告显示...页面滚动，广告不动，在最下面)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-image: url("宝马i6.jpeg");
            background-attachment: fixed;   /*固定图片,页面移动，图片不动*/
        }
    </style>
</head>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: gray"></div>
<div style="height: 500px;" id="d1"></div>
<div style="height: 500px;background-color: yellow" ></div>
</body>
</html>

View Code

技术图片

边框

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*border-style: dotted;*/
            /*border-color: red;*/
            /*border-width:10px;*/
            /*border-left: solid; !*左面设置为实线*!*/
            /*border-right: dashed;   !*左面设置为矩形虚线*!*/
            /*border-top: dotted; !*左面设置为点状虚线*!*/
            /*border-bottom: solid;*/
            /*border-left-color: deeppink;*/
            /*!*边框有四边 每一边都可以设置独有的样式 颜色 粗细*!*/

            /*简写*/
            border:solid 3px red;   /*只要把参数写进去就可以  不需要考虑顺序*/
        }
        div {
            height: 500px;
            width: 500px;
            border: 3px solid red;
        }
        span {
            height: 200px;
            width: 200px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
<p>圣诞节过完了</p>
<div>接下来就是元旦</div>
<span>然后就是春节</span>
</body>
</html>

View Code

画圆

将border-radius设置为长或高的一半即可得到一个圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:200px;
            width:200px;
            border-radius:50%;  /*半径*/
            background-image: url("111.png");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

View Code

display属性

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height:50px;width:50px;background-color: red;display: inline">aaa</div>
<div style="height: 50px;width:50px;background-color: green;display: inline">bbb</div>
<span style="background-color: red;height: 100px;width: 100px;display: inline-block">span</span>
<span style="background-color: green;height: 100px;width: 100px;display: inline-block">span</span>
<!--inline-block能够让一个标签即有快二级标签可以设置长宽的特点 又有行内标签在一行展示的特点-->
<div>div1</div>
<div style="display: none">div2</div>
<!--<div style="visibility: hidden">div2</div>-->
<div>div3</div>

<!--display: none隐藏标签 并且标签所占的位置也要让出来-->
</body>
</html>

View Code

技术图片

盒子模型

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;  /*取消body标签自带的8px的外边距*/
        }
        /*div {*/
        /*    border: 5px solid red;*/
        /*}*/
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            /*margin-bottom: 50px;*/
            /*margin-left: 100px;*/
            /*margin: 20px;  !*上下左右*!*/
            /*margin: 20px 40px;  !*第一个是上下   第二个是左右*!*/
            /*margin: 20px 40px 60px;  !*上   左右   下*!*/
            /*margin: 20px 40px 60px 80px;  !*上  右 下 左  顺时针*!*/
            /*margin: 0 auto;  !*水平居中*!*/


        }
        .c2 {
            margin-top: 20px;
            height: 100px;
            width: 100px;
            background-color: green;
        }
        .c3 {
            border: 3px solid black;
            height: 400px;
            width: 400px;
            /*padding-top: 20px;*/
            /*padding-left: 40px;*/
            /*padding: 20px;*/
            padding: 20px  40px;
            /*padding: 20px;*/
            /*padding: 20px;*/
            /*padding跟margin简写规律一致*/‘

        }
        p {
            margin: 0;
        }
        ul {
            padding-left: 0;
        }
    </style>

</head>
<body>
<!--<div>啥都卡死的十大科技打卡</div>-->
<!--<div class="c3">-->
<!--   <div class="c1" id="d1"></div>-->
<!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
<!--</div>-->


<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>


<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

</body>
</html>

View Code

浮动

浮动的元素是脱离正常文档流的自身多大就会占多大不再有独占一行的概念
浮动多用于页面的前期布局(!!!!!!!)

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .c1{
            height:100px;
            width: 100px;
            background-color: red;
            float:left;
        }
        .c2{
            height: 100px;
            width: 100px;
            background-color: green;
            float: right;   /*浮动到上方没有标签，或只有浮动标签行*/
        }

    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

View Code

浮动简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .left-menu{
            background-color: #4e4e4e;
            width: 20%;
            height: 1000px;
            float: left;
        }
        .right-menu{
            background-color: wheat;
            width: 80%;
            height: 2000px;
            float: right;
        }
    </style>
</head>
<body>
<div class="left-menu"></div>
<div class="right-menu"></div>
</body>
</html>

View Code

技术图片

浮动带来的影响

浮动会造成父标签塌陷的问题

clear属性
专门用来清除浮动所带来的负面影响父标签塌陷的问题

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        #d1{
            border: 3px solid black;
        }
        .c1{
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2{
            height: 100px;
            width: 100px;
            background-color: green;
            float: left;
        }
        /*.c3{*/             /*方法一：通过c3来撑起外面的黑框*/
        /*    height: 150px;*/
        /*    width:100px;*/
        /*    background-color: orange;*/
        /*}*/
        .clearfix:after{    /*方法二(推荐)：通过查找没有浮动标签，插入，来撑起外面黑框*/
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
<!--    <div class="c3">我是C3</div>-->
</div>
</body>
</html>

View Code

结论:谁塌陷了就给谁加上clearfix样式类

溢出属性

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 50px;
            width: 50px;
            border: 1px solid black;
            overflow: auto;
        }
    </style>
</head>
<body>
<div class="c1">
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
    今天周五了 可惜明天不放假
</div>
</body>
</html>

View Code

技术图片

圆形头像示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            background-color: antiquewhite;
        }
        .c1{
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border:5px solid white;
            overflow: hidden;
        }
        img{
            max-width: 100%; /*显示的最大宽度*/
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="111.png" alt="">
</div>
</body>
</html>

View Code

技术图片

定位

所有的标签默认情况下都是静态的(static) 无法做位置的修改
如果你想要修改标签位置你需要先将静态改为可以修改的状态

技术图片

相对定位 relative
相当于标签原有的位置做偏移

技术图片

绝对定位 absolute
相当于已经定位过的(static>>>relative)父标签做偏移
例:小米购物车

技术图片

相当于浏览器窗口固定在某个位置始终不变
例:回到顶部

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            height: 100px;
            width: 100px;
            background-color: red;
             /*position: static;  !*默认值*!*/
            position: relative; /*相对定位*/
            left: 100px;
            top:100px;
        }
        .c2{
            height: 50px;
            width: 100px;
            background: green;
            position: relative;
        }
        .c3{    /*相对于c2左上角进行定位*/
            position: absolute;
            height: 200px;
            width: 200px;
            background-color: orange;
            left: 100px;
            top: 50px;
        }
        .cc{
            height: 50px;
            width: 100px;
            background-color: #4e4e4e;
            color: white;   /*字体颜色*/
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
    <div class="c3">空空的 什么都没有...</div>
</div>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: orange"></div>
<div class="cc">回到顶部</div>
</body>
</html>

View Code

技术图片

是否脱离文件流

脱离文档流：

　　绝对定位

　　固定定位

不脱离文档流：

　　相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
            width: 50px;
            /*position: relative;*/
        }
        .c2 {
            background-color: green;
            height: 50px;
            width: 50px;
            /*position: absolute;*/
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .c3 {
            background-color: orange;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

View Code

z-index
控制z轴的距离

设置对象的层叠顺序。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            background-color: #808080;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
            opacity: 0.4;
        }
        .form{
            background-color: white;
            height: 200px;
            width: 100px;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top:-100px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
<div>我是最底下的那个</div>
<div class="modal"></div>
<div class="form"></div>
</body>
</html>

View Code

技术图片

透明度

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

optacity既可以该颜色也可以改文本
rgba只能该颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .c1{
            background-color: rgba(128,128,128,0.4);
        }
        .c2{
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div class="c1">阿萨德撒大家都</div>
<div class="c2">阿萨德撒大家都</div>
</body>
</html>

View Code

技术图片

以上是关于前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度的主要内容，如果未能解决你的问题，请参考以下文章

web前端篇：CSS使用，样式表特征，选择器

Python3 爬虫U11_BeautifulSoup4之select和CCS选择器提取元素