CSS笔记

最新推荐文章于 2024-09-12 19:55:46 发布

身伤易逝lk

最新推荐文章于 2024-09-12 19:55:46 发布

阅读量339

点赞数

分类专栏：（狂神说）CSS学习笔记文章标签： css

本文链接：https://blog.csdn.net/qq_51143149/article/details/120511878

版权

（狂神说）CSS学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的作用、发展历史、使用方式、导入方式、选择器、美化网页的技巧以及网页布局技术，如浮动、定位、盒子模型和网页动画。通过实例展示了如何使用CSS进行网页设计，包括标签选择器、类选择器、ID选择器、层次选择器、属性选择器、字体样式、文本样式、超链接伪类、背景、渐变、浮动、定位、Z轴层级和透明度等。此外，还讨论了CSS在网页内容呈现、用户体验提升和SEO优化中的重要性。

摘要由CSDN通过智能技术生成

1、CSS是什么

1.1、作用

Cascading Style Sheet(层叠级联样式表)
CSS: 表现(美化网页)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动

1.2、发展史

CSS1.0
CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想, 网页变得简单, SEO
CSS2.1 浮动、定位
CSS3.0 圆角、阴影、动画…… 浏览器兼容性

2、CSS怎么用(快速入门)

2.1、css的优势

①内容与表现分离
②网页结构表现统一, 可以实现复用
③样式十分丰富
④建议使用独立于HTML的CSS文件
⑤利用SEO, 容易被引擎收录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个CSS程序</title>
    <!--规范.<style>可以写css的代码, 每一个声明最好用分号结尾
        语法:
        选择器{
        声明1;
        声明2;
        声明3;
        ……
        }
    -->

    <!--法一: 直接写在head标签里(内联式)-->
<style>
    h1{
    color: #ff3010;
    }
</style>


    <!--法二(推荐方式): 外联式,单独写一个css文件在连起来-->
    <link rel="stylesheet" href="css/style1.css">


</head>
<body>
<h1>身伤易逝</h1>
</body>
</html>

h1{
    color: #ff19f1;
}

2.2、CSS的3种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>

    <!--一、内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>

    <!--三、外联式-->
    <!--link式: -->
    <link rel="stylesheet" href="css/style2.css">

    <!--导入式:
    CSS2.1特有 @import url();

    -->
    <style>
        @import url("css/style2.css");
    </style>
</head>
<body>

<!--优先级:就近原则!!!-->

<!--二、行内样式: 在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: aquamarine">身伤易逝</h1>
<!---->

</body>
</html>

h1{
    color: indianred;
}

3、CSS选择器(重难点)

作用: 选择页面上的某一个或者某一类元素

3.1、基本选择器(重点)

3.1.1、标签选择器

选择一类标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        /*标签选择器,会选择到页面上所有的这个标签的元素*/
        h1{
            color: #39ff27;
            background: #ffe852;
            border-radius: 24px;
        }

        p{
            font-size: 80px;
        }
    </style>
</head>
<body>

<h1>身伤易逝</h1>
<h1>情伤难合</h1>

<p>身伤易愈</p>

</body>
</html>

3.1.2、类选择器 class

选择所有class属性一致的标签, 跨标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>

    <style>
        /*类选择器的格式: .class的名称{}
          好处, 可以多个标签归类, 是同一个class, 可以复用
          */
        .ssys {
            color: #388ad1;
        }

        .qsnh {
            color: chocolate;
        }
    </style>

</head>
<body>

<h1 class="ssys">身伤易逝</h1>

<h1 class="qsnh">情伤难合</h1>

<h1 class="ssys">身伤易愈</h1>

<h1 class="qsnh">心伤难合</h1>

</body>
</html>

3.1.3、ID选择器

全局唯一!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>

    <style>
        /*id选择器格式: id必须全局唯一
            #id名称{}
            优先级:不遵循就近原则, 固定的
            id选择器>class选择器>标签选择器
        */
        #ssys{
            color: #9a007c;
        }
        .s1{
            color: #ff19f1;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1 id="ssys" class="s1">身伤易逝</h1>
<h1 class="s1">情伤难合</h1>
<h1>身伤易愈</h1>
<h1>心伤难合</h1>

</body>
</html>

3.2、层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*p{
            background: #39ff27;
        }*/

        /*后代选择器*/
        body p {
            background: red;
        }  /*body中p标签背景全部为红色(包括内嵌标签)*/

        /*子选择器*/
        body > p {
            background: #39ff27;
        }  /*body中p标签背景全部为红色(不包括内嵌标签)*/

        /*相邻弟选择器 :只有一个, 向下相邻*/
        .active + p {
            background: chocolate;
        }

        /*通用选择器(相邻兄弟选择器): 向下全部相邻, 不包括内嵌到标签*/
        .active ~ p {
            background: #388ad1;
        }
    </style>
</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>

<ul>
    <li>
        <p class="active">p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

<hr/>
<p>p7</p>
<p>p8</p>
<p>p9</p>

</body>
</html>

3.3、属性选择器(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        .demo a {
            float: left; /*向左浮动*/
            display: block; /*块级元素*/
            height: 50px;
            width: 50px;
            border-radius: 10px; /*边框角度*/
            background: red; /*背景颜色*/
            text-align: center; /*对齐方式: 居中*/
            color: black; /*文字颜色*/
            margin-right: 5px; /*右外边框间距*/
            font: bold 20px/50px Arial; /*字体: 粗体 大小20px/行高50px*/
        }

        /*属性选择器 格式:标签[属性]{}*/

        a[id] { /*a标签中存在id属性的元素*/
            background: #39ff27;
        }

        a[id="123"] { /*a标签中存在id=123的元素*/
            background: #388ad1;
        }
        /*[]里面可以用正则表达式*/
                /*
                 =: 绝对等于这个元素
                *=: 包含这个元素
                ^=: 以这个开头的元素
                $=: 以这个结尾的元素
                */

        a[class*="links"]{/*a标签中是links类的元素*/
            background: #ffe852;
        }

        a[href^=http]{/*href属性中以http开头的元素*/
            background: #7bff37;
        }

        a[href$=pdf]{/*href属性中以pdf结尾的元素*/
            background: #ff88ed;
        }
    </style>
</head>
<body>
<p class=demo>
    <a href="https://www.bilibili.com/" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item" id="123">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

4、美化网页(文字、阴影、超链接、列表、渐变)

4.1、为什么要美化网页

①有效的传递页面信息
②美化页面, 页面漂亮, 才能吸引用户
③凸显页面的主题
④提高用户体验

4.2、字体

span标签: 重点要突出的字, 使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <!--    
        font-family: 字体
        font-size: 字体大小
        font-weight: 字体粗细
    -->
    <style>
        body {
            font-family: 楷体, serif;
            color: red;
        }

        h4 {
            font-size: 25px;
        }

        p {
            font-weight: lighter;
        }

        /*字体风格*/
        p{
            font:oblique bolder 12px "华文楷体" ;/*斜体、粗细、大小、字体样式*/
        }

    </style>
</head>
<body>

<h4>长<span>恨</span>歌</h4>
<p>汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。</p>
<p>天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。</p>

<p class="c1">love</p>
</body>
</html>

4.3、文本样式

①颜色 color、RGB、RGBA
②文本对齐方式 text-align: center;
③首行缩进 text-indent: 2em
④行高 line-height: 行高与块元素高度一致,就可以上下居中
⑤装饰 text-decoration:
⑥文本图片水平对齐 vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <!--
        颜色:
        单词
        RGB 0~F
        RGBA  A:0~1


        text-indent: 2em;/*首行缩进两个字符*/
        text-align: center;/*设置排版格式, 居中*/
        height: 30px;/*该块元素高度*/
        line-height: 30px;/*单列行高*/
        行高与块元素高度一致,就可以上下居中
        text-decoration: underline;/*下划线*/
        text-decoration: line-through;/*中划线*/
        text-decoration: overline;/*上划线*/
        vertical-align: middle;/*图片文字居中对齐*/
        text-decoration: none;/*a标签(超链接)去下划线*/
        -->

    <style>
        body{
            font: bold 25px "楷体";
        }

        h1{
            color: chocolate;
            text-align: center;/*设置排版格式, 居中*/
        }

        p{
            text-indent: 2em;/*首行缩进两个字符*/
        }

        .p1{
            background: #388ad1;
            height: 180px;/*该块元素高度*/
            line-height: 30px;/*单列行高*/
        }

        .l1{
            text-decoration: underline;/*下划线*/
        }
        .l2{
            text-decoration: line-through;/*中划线*/
        }
        .l3{
            text-decoration: overline;/*上划线*/
        }

        img{
            vertical-align: middle;/*上下居中(块级元素)*/
        }

        /*a标签(超链接)去下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123546</p>
<h1>长恨歌</h1>
<p>春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。</p>
<p>云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。</p>
<p>承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。</p>
<p>金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列土，可怜光彩生门户。</p>

<p class="p1">
    As I began to love myself I found that anguish and emotional suffering are only warning signs that I was living against my own truth. Today, I know, this is “AUTHENTICITY”.

    As I began to love myself I understood how much it can offend somebody if I try to force my desires on this person, even though I knew the time was not right and the person was not ready for it, and even though this person was me. Today I call it “RESPECT”.

    As I began to love myself I stopped craving for a different life, and I could see that everything that surrounded me was inviting me to grow. Today I call it “MATURITY”.

    </p>

<p class="l4">
    <img src="/resources/image/趴在桌子的动漫美女2340x1080超清4k壁纸_彼岸图网.jpg" width="234" height="108">
    趴在桌子的动漫美女
</p>
</body>
</html>

4.4、超链接伪类

正常情况下: a、a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接伪类</title>

    <style>
        /*默认的颜色*/
        a {
            text-decoration: none;
            color: black;
        }

        /*鼠标悬浮时(重点)*/
        a:hover {
            color: orange;
        }

        /*鼠标按住未释放时*/
        a:active {
            color: #9a007c;
        }

        /*阴影效果
        text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径;
        */
        #price{
           text-shadow: red 5px 5px 5px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="/resources/image/趴在桌子的动漫美女2340x1080超清4k壁纸_彼岸图网.jpg" width="234" height="108">
</a>

<p>
    <a href="#">码出高效: Java开发手册</a>
</p>

<p>
    <a href="">作者: 孤尽</a>
</p>

<p id="price">
    ￥99.9
</p>
</body>
</html>

4.5、背景

背景颜色
背景图片


        div {
            width: 1000px;
            height: 700px;
            border: 1px solid red; /*边框:粗细、实现、颜色*/
            background-image: url("/resources/image/img.png");
            /*背景图片: 默认平铺 repeat*/
        }

        .d1{
            background-repeat: repeat-x;/*水平铺一行*/
        }

        .d2{
            background-repeat: repeat-y;/*垂直铺一行*/
        }

        .d3{
            background-repeat: no-repeat;/*只放一张*/
        }

background: #9a007c url("/resources/image/img.png") 20px 1px no-repeat;
/* 颜色、图片、图片位置、平铺方式*/

4.6、渐变

渐变方法网站: https://www.grabient.com/

 <style>
    body{
        background-color: #4158D0;
        background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    }

  </style>

5、盒子模型

5.1、什么是盒子模型?

margin: 外边距
padding: 内边距
border: 边框

5.2、边框

①边框的粗细
②边框的样式
③边框的颜色


        /*总有一个外边距margin: 0, 常规操作*/
        h2,ul,li,a,body,div{
            margin: 0;
        }

        #box {

            width: 300px;
            border: 1px solid red;
            /*border(边界): 粗细、样式、颜色*/
        }

        h2{
            font-size: 16px;
            background-color: #ffc633
        }

        form{
            background: #90fcff;
        }

        div:nth-of-type(1)>input{
            border: 3px solid black;
        }
        div:nth-of-type(2)>input{
            border: 3px dashed #4158D0;
        }
        div:nth-of-type(3)>input{
            border: 2px solid #39ff27;
        }

5.3、内外边距

盒子的计算方式:
margin + border + padding + 内容宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
    <style>
        #box {
            width: 300px;
            border: 1px solid red;
            /*border(边界): 粗细、样式、颜色*/
            padding: 0 0 0 0;
            /*边距:上 下 左 右*/
            margin: 0 auto;
            /*外边距自动居中
            条件:
            块元素
            该块元素有固定的宽度
            */
        }

        /*
        盒子的计算方式
        margin + border + padding + 内容宽度
        */

        h2 {
            margin: 0 auto;
        }

        form {
            background: #39ff27;
        }

    </style>
</head>
<body>
<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div>
            <span>用户名: </span>
            <input type="text">
        </div>
        <div>
            <span>密码: </span>
            <input type="password">
        </div>
        <div>
            <span>邮箱: </span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

5.4、圆角边框

4个脚

div{
            width: 500px;
            height: 250px;
            border: 3px solid red;
            border-radius: 500px 500px 0 0 ;
        /*border-radius(边界半径): 左上 右上 右下 左下  (顺时针)*/
        }

5.5、盒子阴影

 div {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            border: 3px solid red;
            border-radius: 500px;
            box-shadow: 100px 100px 100px yellowgreen ;
            /*盒子阴影 */

        }

6、浮动

6.1、标准文档流: 自上而下

块级元素: 独占一行、可以包含行内元素
行内元素: 不独占一行

6.2、display

实现行内元素排列的一种方式但是最多还是用float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <!--
    块级元素: 独占一行、可以包含行内元素
    行内元素: 不独占一行

    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>
</head>
<body>
<div>
    div块
</div>
<span>
    span行内元素
</span>
</body>
</html>

6.3、float

左右浮动

div,image,body{
    margin: 0;
    padding: 0 0 0 0;
}

div{
    margin: 0;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.l1{
    border: 1px red dashed;
    display: inline-block;
    float: right;
}
.l2{
    border: 1px blue dashed;
    display: inline-block;
    float: right;
}
.l3{
    border: 1px green dashed;
    display: inline-block;
    float: right;
}
.l4{
    border: 1px brown dashed;
    display: inline-block;
    float: right;
}

6.4、父级边框塌陷问题

解决方法:
1、增加父级元素高度
简单, 元素有了固定高度就会被限制
2、①父级元素中增加一个空div标签
②清除该空标签的浮动
简单, 但代码中一个尽量避免空div
3、overflow
在父级元素中加一个 overflow: hidden(auto)
简单, 下拉滚动条在一些场景一个避免使用
4、添加伪类: after
实际上就是2方法, 但清除了空div问题
略微复杂, 无副作用推荐使用

div,image,body{
    margin: 0;
    padding: 0 0 0 0;
}

div{
    margin: 0;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
    /* 3、overflow*/
    overflow: hidden;
}

/*4、添加伪类*/
#father:after{
    content: '';
    display: block;
    clear: both;
}
.l1{
    border: 1px red dashed;
    display: inline-block;
    float: right;
}
.l2{
    border: 1px blue dashed;
    display: inline-block;
    float: right;
}
.l3{
    border: 1px green dashed;
    display: inline-block;
    float: right;
}
/*
clear:  right; 右侧不允许浮动元素, 如果原有就另起一行
clear:  left; 左侧不允许浮动元素, 如果原有就另起一行
clear:  both; 两侧不允许浮动元素, 如果原有就另起一行
clear:  none; 默认情况
*/

/*2、②清除该空标签的浮动*/
.clear{
    margin: 0;
    padding: 0;
    clear: both;
}

/*
    overflow:
    scroll  滚动条
    hidden  隐藏溢出部分
*/
#content{
    margin: 50px;
    width: 150px;
    height: 300px;
    overflow: scroll;
}

6.5、对比

dispaly: 方向不可控
float: 浮动起来会脱离标准文档流, 所以要解决父级边框

7、定位

7.1、相对定位

相对定位:
相对于自己原来的位置(默认情况)上进行偏移

position: relative;
        /*上、下、左、右*/
    top: -20px; 向上移动20px
    bottom: -20px;  向下移动20px
    right: -20px;   向右移动20px
    left: -20px;    向下移动20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <!--
    相对定位:
    相对于自己原来的位置(默认情况)上进行偏移

    position: relative;
            /*上、下、左、右*/
        top: -20px; 向上移动20px
        bottom: -20px;  向下移动20px
        right: -20px;   向右移动20px
        left: -20px;    向下移动20px

    -->
    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid #000000;
        }

        #l1 {
            background-color: red;
            border: 1px dashed red;
            position: relative;
            /*上、下、左、右*/
            top: -20px;

        }

        #l2 {
            background-color: yellowgreen;
            border: 1px dashed yellowgreen;
            position: relative;
            /*上、下、左、右*/
            bottom: -20px;
        }

        #l3 {
            background-color: purple;
            border: 1px dashed purple;
            position: relative;
            /*上、下、左、右*/
            right: -20px;
            bottom: -20px;
        }

    </style>
</head>
<body>
<div id="father">
    <div id="l1">一号盒子</div>
    <div id="l2">二号盒子</div>
    <div id="l3">三号盒子</div>
</div>
</body>
</html>

7.2、绝对定位

定位: 基于xxx定位上下左右
1、父级无定位时, 相对于浏览器定位
2、若父级元素存在定位, 通常会相对于父级元素定位
3、只在父级元素范围内移动
4、一旦绝对定位, 就不在标准文档流中, 原来的位置不在保留

position: absolute;
/上、下、左、右/
top: 20px; 距离边框顶部20px
bottom: 20px; 距离边框底部20px
right: 20px; 距离右边框20px
left: 20px; 距离左边框20px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <!--
    position: absolute;
    /*上、下、左、右*/
    top: 20px; 距离边框顶部20px
    bottom: 20px;  距离边框底部20px
    right: 20px;   距离右边框20px
    left: 20px;    距离左边框20px

    -->
    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father {
            border: 1px solid #000000;
        }

        #l1 {
            background-color: red;
            border: 1px dashed red;
            position: absolute;
            bottom: 20px;
            /*距离边框底部20px*/
        }

        #l2 {
            background-color: yellowgreen;
            border: 1px dashed yellowgreen;
            position: absolute;
            top: 20px;
            /*距离边框顶部20px*/
        }


    </style>
</head>
<body>
<div id="father">
    <div id="l1">一号盒子</div>
    <div id="l2">二号盒子</div>
</div>
</body>
</html>

7.3、固定定位

固定定位: 不会根据浏览器上下滑而移动类似与"回到顶部"
绝对定位: 相对于浏览器, 会根据浏览器上下滑而移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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){/*固定定位: 不会根据浏览器上下滑而移动  类似与"回到顶部"*/
            width: 50px;
            height: 50px;
            background: yellowgreen;

            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>盒子1</div>
<div>盒子2</div>
</body>
</html>

7.4、z-index(层级)

z-index决定两个元素重叠在一起时谁显示在上面
素重叠在一起时谁显示在上面
0是最底层(默认), 一般认定999是最高层

#content {
    width: 225px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px red solid;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

#content u1{
    position: relative;

}

.tipText, .tipBg{
    position: absolute;
    width: 225px;
    height: 25px;
    top: 216px;
}

.tipText{
    color: white;
    z-index: 1;
    /*z-index决定两个元素重叠在一起时 谁显示在上面*/
    /*0是最底层, 999是最高层*/
}

.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度!!*/
}

7.5、背景透明度(opacity)

opacity:
范围0~1

filter: alphe(opacity=)
范围0~100

.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度!!*/
  	filter: alphe(opacity=50)
}

8、网页动画(特效效果)

略

身伤易逝lk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

1、CSS是什么1.1、作用Cascading Style Sheet(层叠级联样式表)CSS: 表现(美化网页)字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动1.2、发展史CSS1.0CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想, 网页变得简单, SEOCSS2.1 浮动、定位CSS3.0 圆角、阴影、动画…… 浏览器兼容性2、CSS怎么用(快速入门)2.1、css的优势①内容与表现分离②网页结构表现统一, 可以实现复用③样式十分
复制链接

扫一扫

专栏目录