web前端基础 html5+css3（四.css复合选择器，css的元素显示模式，css背景）

彼岸~流觞

已于 2022-03-23 17:50:58 修改

阅读量294

点赞数

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

于 2020-06-21 11:36:33 首次发布

本文链接：https://blog.csdn.net/weixin_41325924/article/details/106864896

版权

html5+css3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.emmet语法

1.div+tab => <div></div>

2.div*3 生成3个div

3.父子级标签 ul>li => <ul><li></li></ul>

4.兄弟级标签 div * p => <div></div><p></p>

5.生成有类名或者id的 .demo 或 #demo + tab => <div class="demo"></div>/<div class="id"></div>

6.生成的div类名是有顺序的,可以用自增符号 $ => div {$} *2 <div>1</div> <div>2</div>

7.生成的标签内部写内容可以用{}表示 div{内容} + tab => <div>内容</div>

2.css复合选择器

（1）后代选择器

<style>
	ol li {color:#c00;}
	ol li a{color:#888;}
</style>
<ol>
	<li>我是ol的孩子</li>
	<li>我是ol的孩子</li>
	<li>我是ol的孩子</li>
	<li><a>孙子</a></li>
</ol>
<ul>
	<li>我是ul的孩子</li>
	<li>我是ul的孩子</li>
	<li>我是ul的孩子</li>
</ul>

（2）子选择器（亲儿子）

ol li>a{color:#c00;}
.nav >li{color:#999;}
.nav li>a{color:#c00;}
<ol>
	<li>我是ol的孩子</li>
	<li>我是ol的孩子</li>
	<li>我是ol的孩子</li>
	<li><a>孙子</a></li>
</ol>
<ul>
	<li>我是ul的孩子</li>
	<li>我是ul的孩子</li>
	<li>我是ul的孩子<a>孙子</a></li>
</ul>
<ul class="nav">
	<li>我是ul的孩子</li>
	<li>我是ul的孩子</li>
	<li><a>孙子</a></li>
</ul>

（3）并集选择器（用,隔开，任何形式的选择器都可以成为并集选择器的一部分）

div,p,.pig > li{color:skyblue;}
<div>熊大</div>
<p>熊二</p>
<ul class="pig"><li>光头强</li><h2>小猪佩佩</h2></ul>

（4）链接伪类选择器

1.a:link ：选择所有未被访问的链接

2.a:visited ：选择所有已被访问的链接

3.a:hover ：选择鼠标指针位于其上的链接

4.a:active：选择活动链接（鼠标按下未弹起的链接）

多个一起使用时记得按照顺序 LVHA

a:link{text-decoration:none;color:#c00;}
a:visited{color:green;}
a:hover{color:blue;}
a:active{color:yellow;}
<a href="#">小猪姐姐</a>

（5）:focus伪类选择器（用于选取获得焦点的表单元素）<input>

.inp:focus{color:#c00;background-color:skyblue;}
<input class="inp" type="text" />

3.css的元素显示模式

（1）块元素（独占一行）

自己独占一行，可以设置宽高度，宽度默认是父级宽度的100%，是一个盒子或容器，里面可以放行内元素或者块级元素

文字类的元素不能使用块级元素 <h1>~<h6> <p>

div{width:200px;height:200px;background: #c00;}
<div>瑟瑟发抖</div>我在这
<!--这种是不可以的，P里面不能使用块级元素-->
<p><li>O(∩_∩)O哈哈~</li></p>

（2）行内元素

一行可显示多个，高宽直接设置是无效的，默认宽度就是它本身的宽度，只能容纳文本或其他行内元素

特殊：<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

span{width:200px;height:200px;background-color:hotpink;}
<span>淡黄的长裙</span><strong>蓬松的头发</strong>

（3）行内块元素

<img>、<input>、<td>，同时具有块元素和行内元素的特点

一行可以显示多个，默认宽度就是它本身内容的宽度，宽高，行高，外边距和内边距都可以控制

4.css的元素显示模式转换

（1）转为块元素：display：block

（2）转为行内元素：display:inline;

（3）转为行内块元素：display:inline-block

/*1.把行内元素a转为块元素*/
a{width: 50px;height:50px;background: #c00;display: block;text-decoration:none;}
/*2.把块元素div转为行内元素*/
div{width: 100px;height:100px;background: green;display:inline;}
/*3.把行内元素span转为行内块元素*/
span{background-color:skyblue;width:200px;height:100px;display: inline-block;}
<a href="#">胡歌</a>
<div>唐僧洗发用飘柔</div>
<span>帅的被人砍</span>

5.案例：简单小米侧边栏

a{
	display:block;
	width: 230px;
	height: 40px;
	line-height:40px;
	background:rgba(0,0,0,0.3);
	text-decoration:none;
	color: #fff;
	text-indent:2rem;
}
a:hover{background: #ff6700;}
<a href="#">冰箱</a>
<a href="#">洗衣机</a>
<a href="#">电视机</a>
<a href="#">空调</a>
<a href="#">音响</a>

6.css背景

（1）背景颜色（background-color）

transparent：背景颜色透明（默认）

color：颜色（rgb,十六进制,颜色英文,transparent）

div{background-color: #c00;width:1220px;height:600px;}
/*透明*/
div{background-color: transparent;width:1220px;height:600px;}
<div>我是背景颜色</div>

（2）背景图片（background-image）

.logo{background-image:url("images/index.png");width:300px;height:300px;}
<div class="logo"></div>

（3）背景平铺（background-repeat）

repeat：平铺

no-repeat：不平铺

repeat-x：向上平铺（沿着x轴平铺）

repeat-y：向下平铺（沿着y轴平铺）

.logo{
	background-image:url("images/index.png");
	width:300px;height:300px;
	background-repeat: no-repeat;/*不平铺*/
	background-repeat: repeat;/*平铺*/
	background-repeat: repeat-x;/*沿着x轴平铺*/
	background-repeat: repeat-y;/*沿着y轴平铺*/
        background-color:skyblue;/*页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色*/
}
<div class="logo"></div>

（4）背景图片位置（background-position）

两个值都是方位名词，则两个值前后顺序无关

right center 和 right center是等价的，跟顺序没有关系

只有一个参数时，默认第二个参数为center，可不写

.logo{
	background-image:url("images/index.png");
	background-color:skyblue;/*页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色*/
	width:300px;height:300px;
	/*不平铺*/
	background-repeat: no-repeat;
	/*平铺*/
	/*background-repeat: repeat;*/
	/*沿着x轴平铺*/
	/*background-repeat: repeat-x;*/
	/*沿着y轴平铺*/
	/*background-repeat: repeat-y;*/
	background-position:center top;
	background-position:right center;
	background-position:center right;/*right center 和 right center是等价的，跟顺序没有关系*/
	background-position: left;
	background-position: left top ;
}
<div class="logo"></div>

（1）案例1：成长守护平台

.love{
	background-image:url("images/love.png");
	width: 118px;
	height: 40px;
	background-color:blue;
	font-weight: 400;
	font-size:14px;
	line-height: 40px;
	background-repeat:no-repeat;
	background-position:left;
	text-indent:1.5rem;
}
<h3 class="love">成长守护平台</h3>

（2）案例2：body背景图片，大幅

body{
	background-image:url("images/bg.jpg");
	background-repeat: no-repeat;
	background-position:center top;
}

2.精确方位 length

参数值是精确坐标，第一个肯定是x坐标，第二个一定是y坐标

只给一个数值，那该数值一定是x 坐标，另一个默认垂直居中

.logo{
	background-image:url("images/index.png");
	background-color:skyblue;/*页面元素既可以添加背景颜色，也可以添加背景图片，只不过背景图片会压住背景颜色*/
	width:300px;height:300px;
	/*不平铺*/
	background-repeat: no-repeat;
	background-position: 20px 50px;
	background-position: 50px 20px;
	background-position: 20px;/*y轴居中*/
}
<div class="logo"></div>

3.方位名词和精确方位混合使用，第一个值是x坐标，第二个值是y坐标

background-position:right 150px;

（5）背景固定（background-attachment）

scroll：背景图像是随对象内容滚动

fixed：背景图像固定

body{
	background-image:url("images/attachment.jpg");
	background-position: center top;
	/*background-attachment:scroll;/*背景随着内容滚动*/
	/*将背景图片固定住*/
	background-attachment: fixed;
	color: #c00;
	font-size: 50px;
}

（6）背景属性复合写法

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background：background-color background-image:url("") background-repeat background-attachment background-position

body{
	/*background-image:url("images/attachment.jpg");
	background-position: center top;
*/	/*background-attachment:scroll;/*背景随着内容滚动*/
	/*将背景图片固定住*/
	/*background-attachment: fixed;*/
	color: #c00;
	font-size: 50px;
	background:#c00 url("images/attachment.jpg") repeat fixed center top;
}

（7）背景半透明

rgba(0,0,0,3)最后一个参数是alpha透明度，取值范围在0~1之间，值越小透明度越高

最后一个参数0.3可以简写为.3

.rgba{width:200px;height:200px;background-color: rgba(0,0,0,.2)}
<div class="rgba"></div>

7.综合案例（五彩导航）

.nav a{display: inline-block;width:120px;height:58px;background:#c00;text-align:center;line-height:48px;color:#fff;font-weight:700;cursor:pointer;}
.nav .bg1{background:url("images/bg1.png") no-repeat;}
.nav .bg1:hover{background:url("images/bg11.png") no-repeat;}
.nav .bg2{background:url("images/bg2.png") no-repeat;}
.nav .bg3{background:url("images/bg3.png") no-repeat;}
.nav .bg4{background:url("images/bg4.png") no-repeat;}
.nav .bg5{background:url("images/bg5.png") no-repeat;}
.nav .bg5:hover{background:url("images/bg22.png") no-repeat;}
<div class="nav">
	<a class="bg1">五彩导航</a>
	<a class="bg2">五彩导航</a>
	<a class="bg3">五彩导航</a>
	<a class="bg4">五彩导航</a>
	<a class="bg5">五彩导航</a>
</div>

彼岸~流觞

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端基础 html5+css3（四.css复合选择器，css的元素显示模式，css背景）

1.emmet语法1.div+tab => <div></div>2.div*3 生成3个div3.父子级标签 ul>li => <ul><li></li></ul>4.兄弟级标签 div * p => <div></div><p></p>5.生成有类名或者id的 .demo 或 #demo + tab => <div clas...
复制链接

扫一扫