目录
1 选择器进阶 (找到标签)
2 背景相关属性
3 元素显示模式
4 CSS样式
5 综合案例
一: 选择器进阶
1 复合选择器
<head>
<style>
/* 找到div的儿子p设置文字颜色是红色 */
/* 父选择器 后代选择器 {} */
div p {
color: red;
}
</style>
</head>
<body>
<!-- 后代: 儿子, 孙子, 重孙子..... -->
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
<head>
<style>
/* 只想选中儿子a */
/* div的儿子a文字颜色是红色 */
div>a {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
2 并集选择器
<style>
/* p div span h1 文字颜色是红色 */
/* 选择器1, 选择器2 {} */
p,
div,
span,
h1 {
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2> /* 这个不设置颜色 */
</body>
3 交集选择器
<head>
<style>
/* p {
color: red;
} */
/* .box {
color: red;
} */
/* #dilireba {
color: red;
} */
/* 必须是p标签,而且添加了box类 */
p.box {
color: green;
}
</style>
</head>
<body>
<!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->
<p class="box1" id="dilireba">这是p标签:box</p>
<p class="box">这是p标签:box</p>
<p>pppppp</p>
<div class="box">这是div标签:box</div>
</body>
4 hover伪类选择器
原图
光标在超链接
光标在div
<head>
<style>
/* 悬停的时候文字颜色是红色 */
a:hover {
color: red;
background-color: green;
}
/* 用户鼠标悬停到div的时候, 文字是绿色 */
div:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->
<div>div</div>
</body>
5 emmet语法
二: 背景相关属性
1 背景颜色
<head>
<style>
div {
width: 400px;
height: 400px;
/* background-color: pink; */
/* background-color: #ccc; */
/* 红绿蓝三原色, a是透明度0-1 */
/* background-color: rgba(0, 0, 0, 0.5); */
background-color: rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<div>div</div>
</body>
2 背景图片
<head>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
}
</style>
</head>
<body>
<div>文字</div>
/* 背景图片太大, 图片太小了,所以平铺了*/
</body>
3 背景平铺
<head>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
/* background-repeat: repeat; */
/* 不平铺: 图片只显示一个 */
background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
</style>
</head>
<body>
<div>文字</div>
4 背景图相关位置
<head>
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-position: right 0; */
/* background-position: right bottom; */
/* background-position: center center; */
/* background-position: center; */
/* background-position: 50px 0; */
/* background-position: 50px 100px; */
background-position: -50px -100px;
/* 正数: 向右向下移动; 负数:向左向上移动 */
/* 注意: 背景色和背景图只显示在盒子里面 */
}
</style>
</head>
<body>
<div>文字</div>
</body>
5 背景图相关属性连写
<head>
<style>
div {
width: 400px;
height: 400px;
/* 不分先后顺序 背景色 背景图 背景图平铺 背景图位置 */
/* background: pink url(./images/1.jpg) no-repeat center bottom; */
/* 背景图位置如果是英文单词可以颠倒顺序 */
background: pink url(./images/1.jpg) no-repeat bottom center ;
/* 测试背景图位置如果是数值 不要颠倒顺序 */
/* 水平50px, 垂直100px */
/* background: pink url(./images/1.jpg) no-repeat 50px 100px; */
background: pink url(./images/1.jpg) no-repeat 100px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
三: 元素显示模式
1 块级元素
原图
行内块
行内
<head>
<style>
/* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */
div {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 行内 */
display: inline;
}
</style>
</head>
<body>
<div>11111</div>
<div>22222</div>
</body>
2 行内元素
默认行内
行内的块
块
<head>
<style>
/* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
span {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 块 ~ 换行的块*/
/* display: block; */
}
</style>
</head>
<body>
<!-- 默认是行内-->
<span>span</span>
<span>span</span>
</body>
3 行内块元素
原图
设置宽高后的图
<head>
<style>
/* 行内块: 一行显示多个; 加宽高生效 */
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="./images/1.jpg" alt="">
<img src="./images/1.jpg" alt="">
</body>
4 元素显示模式转换
代码上图
5 拓展
四: CSS样式
s
1 继承性
继承性
<head>
<style>
/* 控制文字的属性都能继承; 不是控制文字的都不能继承 */
div {
color: red;
font-size: 30px;
height: 300px;
}
</style>
</head>
<body>
/* span作为div子类 集成了父类的颜色 */
<div>
这是div标签里面的文字
<span>这是div里面的span</span>
</div>
</body>
2 层叠性
<head>
<style>
div {
color: red;
color: green; // 这个生效
}
.box {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
五: 综合案例
选中导航5
<head>
<style>
a {
width: 80px;
height: 40px;
color: white;
background-color: red;
display: inline-block;
text-align: center;
line-height: 40px;
text-decoration: none;
font-size: 14px;
}
a:hover {
background-color: orange;
}
</style>
</head>
<body>
<!-- 选中多行option + shift + 光标 -->
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
原图
选中一图
<head>
<style>
a {
color: white;
text-decoration: none;
width: 120px;
height: 58px;
display: inline-block;
text-align: center;
line-height: 58px;
}
.v1 {
background-image: url(./lib/bg1.png);
}
.v2 {
background-image: url(./lib/bg2.png);
}
.v3 {
background-image: url(./lib/bg3.png);
}
.v4 {
background-image: url(./lib/bg4.png);
}
/*这么写有点多余, 子集选中*/
a.v1:hover {
background-image: url(./lib/bg5.png);
}
a.v2:hover {
background-image: url(./lib/bg6.png);
}
a.v3:hover {
background-image: url(./lib/bg7.png);
}
a.v4:hover {
background-image: url(./lib/bg8.png);
}
</style>
</head>
<body>
<a class="v1" href="#">五彩导航</a>
<a class="v2" href="#">五彩导航</a>
<a class="v3" href="#">五彩导航</a>
<a class="v4" href="#">五彩导航</a>
</body>
