11.14 CSS样式 | 易学教程

1.设置标签样式

给标签设置长宽：只有块级标签可以设置长宽，行内标签设置了没作用（仅仅只取决于内部文本值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height:200px;
            background-color: aqua;
        }
        span{
            width: 60px;
            height:80px;
            background-color: orange;
        }
    </style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>

2.字体颜色 color后面可以跟多种颜色数据

颜色英文 pink

#06a0de 直接用pycharm提供的取色器即可

rgb(1,1,2) 可以利用截图软件获取三基色数字

rgba(0,128,128,0.9) 最后一个数字只能用来调节颜色的透明度

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       p{
           font-family: "Microsoft New Tai Lue","新宋体","Arial",sans-serif;
           font-size: 24px;
           font-weight: lighter;
           /*color: orange;*/
           /*color: #f1ff78;*/
           /*color:rgb(0,255,0) ;*/
           color:rgb(0,255,0,0.3);
       }
   </style>
</head>
<body>
<p>地王大厦表面上的比赛吃的</p>
</body>

3.文字属性

text-align属性规定元素中的文本的水平对齐方式

text-decoration 属性用来给文字添加特殊效果

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
           /*!*text-align: center;*!    居中对齐*/
            /*!*text-align: left;*!     左对齐，默认的*/
            /*!*text-align: right;*!    右对齐*/
            /*text-align: justify;   两端对齐*/
            /*text-decoration: underline; 文本下划线*/
            /*text-decoration: none;  默认无下划线，标准文本*/
            /*text-decoration: overline;  上划线*/
            /*text-decoration: line-through; 穿过文本的一条线*/
            font-size: 30px;
            text-indent: 50px;  /*首行缩进 将段落的第一行缩进 50像素*/
        }
        a{
            text-decoration: none;  取消a标签默认的下划线
        }
    </style>
</head>
<body>
<p>实际上看见我忘记的你是机动车，肯德基时间等待</p>
<a href="#">考试动物我为进城的技能放，路段我很单纯发不出，</a>
</body>

4.背景属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:400px;
            height:400px;
            /*background-color: red; !*背景颜色*!*/
            /*background-image: url('222.png'); !*背景图片,默认平铺*!*/
            /*!*background-repeat: no-repeat;  !*不平铺*!*!*/
            /*!*background-repeat: repeat-x; !*x轴平铺*!*!*/
            /*background-repeat: repeat-y; !*y轴平铺*!*/
            /*!*background-position: center center;*!*/
            /*background-position: 10px 50px;*/
            background: url("222.png") cyan no-repeat left top ; /*简写*/
        }
    </style>
</head>
<body>
<div></div>
</body>

5.背景图片

<head>
    <meta charset="UTF-8">
    <title>滚动背景图</title>
    <style>
        #d1{
            height:600px;
            background: url("2.jpg");
            background-attachment: fixed; /*固定背景图片*/
        }
    </style>
</head>
<body>
<div style="height: 400px;background-color: cyan"></div>
<div style="height: 400px;background-color: deeppink"></div>
<div id="d1"></div>
<div style="height: 400px;background-color: blue"></div>
</body>

背景图片默认是铺满整个区域

通常一个页面上的一个个小图标并不是单独的

而是一张非常大的图片该图片上有网址所用到的所有小图标

通过控制背景图片的位置来显示不同的图标样式

6.边框

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            /*border-top:3px solid red ; !*上边框厚3像素 实线 红色*!*/
            /*border-left: 1px dotted green; !*点状虚线*!*/
            /*border-right: 5px dashed blue ;*/  /*矩形虚线*/
            /*border-bottom:7px solid yellow; !*乱序没影响*!*/
            /*border: solid 4px palevioletred; !*简写*!*/
            border-style: dot-dash;
            border-color: cyan;
        }
    </style>

</head>
<body>
<p>除了可以统一设置边框外还可以单独为某一个边框设置样式，如下示例</p>
</body>

画圆：border-radius用这个属性能实现圆角边框的效果，将border-radius设置为长或高的一半即可得到一个圆形。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid black;
            background-color: red;
            height: 400px;
            width: 400px;
            /*border-radius: 20px;*/
            border-radius: 50%;
        }
    </style>

</head>
<body>
<div></div>
</body>

7.display属性

用于控制HTML元素的显示效果

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.c1{*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*background-color: yellow;*/
            /*border: 2px solid red;*/
            /*display: inline; !*将块级标签变成行内标签*!*/
        /*}*/
        /*.c2{*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*background-color: green;*/
            /*border: 2px solid red;*/
            /*display: inline; !*将块级标签变成行内标签*!*/
        /*}*/
        /*.c1{*/
            /*border: 5px solid yellow;*/
            /*display: block; !*让行内标签能够设置长宽并且独占一行*!*/
            /*width: 400px;*/
            /*height: 400px;*/
        /*}*/
        /*.c2{*/
            /*border: 5px solid green;*/
            /*display: block; !*让行内标签能够设置长宽并且独占一行*!*/
        .c1{
            display: inline-block; /*既可以设置长宽 也能够全部在一行展示*/
            border: 3px solid red;
            width: 200px;
            height: 100px;
        }
        .c2{
            display: inline-block; /*既可以设置长宽 也能够全部在一行展示*/
            border: 3px solid yellow;
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
<!--<div class="c1">shdhdbbbdd</div>-->
<!--<div class="c2">jdkjddsfhfkkdlskjf</div>-->
<!--<span class="c1">span</span>-->
<!--<span class="c2">span</span>-->
<!--标签既可以设置长宽 也能够全部在一行展示（既有块儿级标签的特点也有行内标签的特点-->
<span class="c1">span</span>
<span class="c2">span</span>
<div style="display: none">1111</div>
<div>222</div>
<div style="visibility: hidden">333</div>
<div>444</div>
</body>

display:
- inline 将块级标签变成行内标签
- block 能够将行内标签设置成长宽独占一行
- inline-block 既可以设置长宽也可以在一行展示
- display:none 隐藏标签并且标签原来占的位置也没有了
- visibility:hidden 隐藏标签但是原来的位置还在

8.盒子模型

margin 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding 用于控制内容与边框之间的距离
border 围绕在内边距和内容外的边框
content 盒子的内容，显示文本和图像

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*margin-top: 0;*/
            /*margin-bottom:0;*/
            /*margin-left:0;*/
            /*margin-right:0;*/
            /*margin: 10px; !*只写一个参数 上下左右全是*!*/
            /*margin: 10px 20px; !*第一个控制的是上下 第二个是左右*!*/
            /*margin:10px 20px 30px;!*第一个控制上 第二个控制左右 第三个是下*!*/
            margin:10px 20px 30px 40px; /*上右下左 顺时针*/
        }
        .c1{
            border:1px solid black;
            margin-bottom: 10px;
            margin-top:20px;

            /*padding-top:10px;*/
            /*padding-left: 20px;*/
            /*padding-bottom: 50px;*/
            /*padding-right: 40px;*/
            /*padding: 40px;*/
            /*padding: 40px 80px;*/
            /*padding:10px 20px 30px;!*第一个控制上 第二个控制左右 第三个是下*!*/
            /*padding:10px 20px 30px 40px;*/
            padding: 0 auto;/*简写规律和margin一样，只能左右居中 不能上下*/
        }
        .c2{
            border: 1px solid red;
        }
        #d1{
            margin: 0 auto;
            padding: 0 auto;
        }
    </style>
</head>
<body>
<div class="c1">
    <div id="d1" style="border: 3px solid red;background-color: yellow;width: 50px;height: 50px"></div>
</div>
<div class="c2">div</div>
</body>

9.浮动float

在CSS中，任何元素都可以浮动
浮动的元素是脱离正常文档流的（原来的位置会让出来）
浏览器会优先展示文本内容
浮动带来的影响：
- 会造成父标签塌陷
- 如何解决父标签塌陷问题

clear 清除浮动带来的影响：clear属性的值可以是left、right、both、none，它表示框的哪些边不应该挨着浮动框

#伪元素清除法
.clearfix:after{
            content: '';
            clear: both;/*左右两边都不能有浮动的元素*/
            display: block;
        }

哪个父标签塌陷了，就给谁加clearfix 这个类属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
           width: 100px;
            height: 100px;
            background-color: red;
            float:left;
        }
        .c2{
            width: 100px;
            height: 100px;
            background-color: darkgreen;
            float:right;
        }
        .c3{
            border: 3px solid blue;
        }
        .c4{
            background-color: yellow;
            height: 100px;
        }
        /*公共样式*/
        .clearfix:after{
            content: '';
            clear: both;/*左右两边都不能有浮动的元素*/
            display: block;
        }
    </style>
</head>
<body>
<div class="c3 clearfix ">
    <div class="c1"></div>
    <div class="c2"></div>

    <!--<div style="clear:left"></div>-->
    <!--::after-->
</div>
<div class="c4"></div>
<div class="c3" style="background-color: cyan;width: 100px;height: 100px">div</div>
</body>

10.溢出overflow

head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            width: 50px;
            border: 3px solid blue;
            /*overflow: hidden; !*溢出的直接隐藏*!*/
            overflow: auto;
        }
    </style>

</head>
<body>
<div>侃大山对于挖好难受的暖色调</div>

visible：默认值，内容不会被修剪，多出的会在元素框外。

hidden：内容会被修剪，并且其余内容是不可见的。

scroll：内容会被修剪，但是浏览器会显示左右上下滚动条，可以查看其他内容。

auto：内容会被修剪，但是浏览器会显示上下滚动条，可以查看其他内容。

圆形头像

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: aquamarine;
        }
        .c1{
            height: 120px;
            width: 120px;
            border: 5px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        img{
            width: 100%;
        }
    </style>

</head>
<body>
<div class="c1">
    <img src="222.png" alt>
</div>
</body>

11.定位position

所有的标签默认都是静态的，无法改变位置 position：static

必须将静态的状态修改成定位之后

相对定位 relative：相对于标签原来的位置移动
绝对定位 absolute：相对于已经定位过的父标签再做定位
固定定位（回到顶部）fixed：相对于浏览器窗口固定在某个位置不动

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            height: 120px;
            width: 120px;
            background-color: yellow;
            position: relative;
            left:30px;
            top:30px
        }
        /*.c2{*/
            /*position: relative;!*将c2从一个不是定位标签变成已经定位过的标签*!*/
            /*height: 100px;*/
            /*width: 200px;*/
            /*background-color: orangered;*/
        /*}*/
        /*.c3{*/
            /*position: absolute;*/
            /*height:200px;*/
            /*width:800px;*/
            /*top:-50px;*/
            /*left:200px;*/
            /*background-color: blue;*/
        /*}*/
        .c2{
            border: 5px solid black;
            background-color: darkmagenta;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }

    </style>

</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2">-->
    <!--<div class="c3"></div>-->
<!--</div>-->
<div style="height: 1000px;background-color: darkgray" class="c1"></div>
<div style="height: 1000px;background-color: hotpink" class="c1"></div>
<div style="height: 1000px;background-color: aqua" class="c1"></div>
<div class="c2">回到顶部</div>
</body>

12.是否脱离文档流

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
           border: 3px solid black;
            position: relative;

        }
        .c2{
            position: fixed;
            height:200px;
            width:200px;
            bottom: 20px;
            right:20px;
            background-color: blue;
        }
        .c3{
            width: 100px;
            height: 100px;
            background-color: darkmagenta;
        }

    </style>

</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2"></div>-->
<div class="c1">
    <div class="c2"></div>
    <div class="c3"></div>
</div>

位置的变动是否脱离文档流

不脱离文档流：相对定位

脱离文档流：浮动的元素、绝对定位、固定定位

13 z-index控制z轴

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover{
            position: fixed;
            z-index:999;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: rgba(128,128,128,0.5);
        }
        .modal{
            width: 400px;
            height: 200px;
            background-color: darkmagenta;
            z-index: 1000;
            position: fixed;
            top:50%;
            left:50%;
            margin-top: -100px;
            margin-left: -200px;
        }

    </style>

</head>
<body>
<div>我是最底下被压着那个</div>
<div class="cover"></div>
<div class="modal">
    <form action>
        <p>username: <input type="text"></p>
        <p>password: <input type="text"></p>
        <input type="submit">
    </form>

</div>
</body>

z-index值表示谁压着谁，数值大的盖住数值小的；只有定位了元素，才有z-index。

14 opacity

用来定义透明效果，取值范围是0~1。既可以调颜色，也可以调字体

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            opacity:0.2;
            background-color: rgba(128,128,128,0.6);
        }
        .c2{
            opacity:0.2;
            background-color: blue;
        }

    </style>

</head>
<body>
<p class="c1">111</p>
<p class="c2">222</p>
</body>

来源：https://www.cnblogs.com/lidandanaa/p/11863565.html

标签

background

绝对定位

border

position