Html-滤镜的使用，css初识

最新推荐文章于 2022-12-01 11:06:10 发布

可可鸭~

最新推荐文章于 2022-12-01 11:06:10 发布

阅读量512

点赞数

分类专栏： html 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43547255/article/details/121235011

版权

html 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

HTML零基础入门笔记day_1

一、滤镜

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      img:hover {
           /* transform: all 5s; */
            /* -webkit-filter: none; */
      }
      .img {
        /* 设置滤镜效果 1是全灰*/
        -webkit-filter: grayscale(1);
       
      }
      .img_2 {
        /* 亮度 */
        -webkit-filter: brightness(0);
      }
      .img_3{
        /* 老旧黄   */
          -webkit-filter: sepia(1);
      }
      .img_4{
          /* 模糊度 */
          -webkit-filter: blur(50px);
      }
      .img_5{
          /* 对比度，如果调成0就没有任何对比度，变成灰色 */
          -webkit-filter: contrast(0);
      }
      .img_6{
          /* 饱和度 */
          -webkit-filter: saturate(2);
      }
      .img_7{
          /* 胶片底色 */
          -webkit-filter: invert(1);
      }
      .img_8{
          /* 整体色相旋转 */
          -webkit-filter: hue-rotate(90deg);
    }
    .img_9{
        -webkit-filter: brightness(100) grayscale(1);
        transition: all 15s;
    }
    .img_9:hover{
        -webkit-filter: brightness(1) grayscale(1);
    }
    </style>
  </head>
  <body>
      <img src="../imag/魔女.jpg" alt="" class="img_9">
  </body>
</html>

二、css初识

1.通过style标签设置样式
2.通过style属性设置样式
3.通过css文件使用

<link rel="stylesheet" href="./css/teststyle.css">

.content{
    color: aquamarine;
}

 <div class="content"  style="color: pink">Hello 可可</div>

注意：

1.直接在style写的内容优先级最高，同样的选择器，谁在后面谁的优先级要高。
2.选择器的优先级在其余他情况相同下，继承的样式<浏览器的默认样式<标签样式<class样式<id样式<style属性样式

第一种情况图示：
在这里插入图片描述

第二种情况图示：
当前显示粉色，右侧显示优先级从高底的顺序

或

3.这样看上去就很麻烦，如何将某个优先级提升到最高呢
后边加上 !important（如果都是important还是按照原来的优先级）
4. 越具体越复杂的选择器优先级越高

.content{
    color: aquamarine !important;
}

在这里插入图片描述

三、选择和伪元素

属性选择器
[属性名称]：单独原则某个元素
[属性名称=“属性值”]:选择这个属性具体的某个值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link rel="stylesheet" href="./css/teststyle.css">
</head>
<style>
    /* 属性选择器：
    [属性名称]：单独原则某个元素
    [属性名称="属性值"]:选择这个属性具体的某个值的元素
    */
[data-src]{
    width: 200px;
    height: 100px;
    background-color: skyblue;
}
[data-src = "abc"]{
    border: 10px solid pink;
}
</style>
<body>
    <div  data-src="abc">Hello 可可</div>
</body>
</html>

在这里插入图片描述

子元素选择器：
第几个子元素语法
元素：nth-child(1)
最后一个子元素语法：
元素：last-child

直接选择
1.选择某元素的子元素

<style>
.father>div{
}
</style>
<div class="father">
    <div class="son"></div>
</div>

2.选某元素后面元素

<style>
 .control+div{
  }
</style>
<div></div>
<div class="control"></div>
<div></div>

3.选择某元素后的多个元素

<style>
 .control~div{
  }
</style>
<div></div>
<div class="control"></div>
<div></div>
<div></div>

伪元素
通过css可以创建假元素

<style>
div{
    width: 100px;
    height: 100px;
    background-color: red;
    border-top: 20px solid pink;
    border-right: 20px solid rgb(150, 240, 150);
    border-left: 20px solid yellowgreen;
    border-bottom: 20px solid rgb(163, 177, 240);
}
</style>

在这里插入图片描述改变正方型的宽和高变成0
把三个方向的边框设置为透明

div{
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 20px solid rgb(163, 177, 240);
}

在这里插入图片描述

创建伪元素
:before，在元素内部创建1个最前面的子元素
:after,在元素内部创建1个最后面的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link rel="stylesheet" href="./css/teststyle.css">
</head>
<style>
    div{
        width: 100px;
        height:90px;
        background-color: #424242;
        position: relative;
        border-radius: 20px;
    }
    div::before{
        /* 必须要写content */
        content: "";
        display: block;
        width: 0px;
        height: 0px;
        border-top: 20px solid transparent;
        border-right: 20px solid  #424242;
        border-left: 20px solid transparent;
        border-bottom: 20px solid transparent;
        position: absolute;
        left:-40px;
        top:24px;
    }
</style>
<body>
<div class="content"></div>
</body>
</html>

在这里插入图片描述

可可鸭~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html-滤镜的使用，css初识

HTML零基础入门笔记day_1一、滤镜<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=ed
复制链接

扫一扫