选择器进阶+背景属性+元素显示模式+三大特性
<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. 优先级