CSS基础选择器进阶+背景属性+元素显示模式+三大特性

最新推荐文章于 2024-08-12 22:06:26 发布

认真学习的宋小姐

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量110

点赞数

分类专栏：笔记文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_51946936/article/details/120516892

版权

笔记专栏收录该内容

30 篇文章 2 订阅

订阅专栏

选择器进阶+背景属性+元素显示模式+三大特性

在这里插入图片描述

<style>
        .father p {
            color: red;
        }
    </style>
</head>
<body>
    <div class="father"> 
        <p>小姐姐</p>
        <div>
            <p>
                小帅哥
            </p>
        </div>
    </div>
    <p>小可爱</p>
</body>

效果图：
在这里插入图片描述

 <style>
        /* 在子代中找p标签> */
        .father > p {
            color: red;
        }
    </style>

<body>
    <div class="father"> 
        <p>小姐姐</p>
        <div>
            <p>
                小帅哥
            </p>
        </div>
    </div>
    <p>小可爱</p>
</body>

在这里插入图片描述

div,
.father,
.p{
            color: red;
        }

在这里插入图片描述

 <style>
       p.father{
           color: red;
       }
    </style>
<body>
    <div class="father"> 
        小姐姐
    </div>
    <p class="father">小帅哥</p>
    <p>小可爱</p>
</body>

在这里插入图片描述

写下后按下tap键，快速写代码

<style>
      a{
          text-decoration: none;
      }
      a:hover{
        color: orange;
        text-decoration: underline;
      }
    </style>
    <body>
   <a href="#">认真学习的宋小姐</a>
</body>

在这里插入图片描述
鼠标碰到汉字后，颜色发生变化，有下划线

背景相关属性

在这里插入图片描述

			background-color: red;
            background-color: rgba(0,0,0,0) ;
            background-color: transparent;

背景颜色属性的属性名是？
• background-color
背景颜色属性的属性值默认是？
• 透明：rgba(0,0,0,0)、transparent
在这里插入图片描述

 div{
            width:500px;
            height:700px;
            background-color: red;
            background-image: url(./2.webp);
        }
    </style>
</head>
<body>
    <div></div>
</body>

图片平铺
在这里插入图片描述

 div{
            width:500px;
            height:700px;
            background-color: red;
            background-image: url(./2.webp);
            background-repeat: no-repeat;
        }

在这里插入图片描述

 background-position: center;

在这里插入图片描述

 background-position:200px 200px;
  background-position: center 100px;

在这里插入图片描述

 div{
            width:800px;
            height:700px;
            background: red url(./2.webp) no-repeat left;
        }

背景相关属性连写的取值的写法是？
• 单个属性值的合写，取值之间以空格隔开
• 推荐：background：color image repeat position
在这里插入图片描述

元素显示模式

在这里插入图片描述

CSS 三大特性

继承性 2. 层叠性 3. 优先级

在这里插入图片描述

认真学习的宋小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础选择器进阶+背景属性+元素显示模式+三大特性

选择器进阶+背景属性+元素显示模式+三大特性<style> .father p { color: red; } </style></head><body> <div class="father"> <p>小姐姐</p> <div> <p>
复制链接

扫一扫