复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 交集选择器 在一个选择器的基础上 在增加一个选择器来增加条件*/
/* 选择器之间不能有**空格**及其他符号 */
div.a1#b1,#b7 {
color: aquamarine;
}
/* 并集选择器 各个选择器通过**逗号**连接而成的 表示同时选择多个标签使用样式 */
.a3,#b7 {
color: blue;
}
/* 后代选择器 使用**空格**分隔 */
/* 是选择所有的子孙后代 */
table .box1 td {
/* 文本居中 */
text-align: center;
}
/* 子元素选择器 使用**>**分割 */
/* 只选亲儿子 */
table>tbody>.box1>td {
text-align: center;
background-color: #456;
}
</style>
</head>
<body>
<div class="a1" id="b1">境内突发暴雨山洪div a1</div>
<div class="a2" id="b3">已搜救发现坠河车辆div a2</div>
<div class="a3" id="b5">陈某曾怕母亲担心暂时离家div a1</div>
<p class="a1" id="b6">感叹环保的同时p a1</p>
<p class="a2" id="b7">第一次见仙侠剧拍男主p a2</p>
<table border="1" width="200" height="100">
<tr class="box1">
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr class="box1">
<td>123</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>456</td>
<td>456</td>
<td>456</td>
</tr>
</table>
</body>
</html>
标签显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
}
span {
width: 100px;
height: 100px;
}
hr {
width: 50px;
height: 100px;
}
input {
width: 9000px;
}
a {
width: 500px;
height: 500px;
}
.box {
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
display: inline-block;
/* 设置标签的显示模式 */
/* block 块级元素 */
/* inline 行内元素 */
/* inline-block 行内块元素 */
/* none 隐藏元素 */
}
</style>
</head>
<body>
<!-- 标签显示模式的区别 -->
<!-- 1.块级元素 div p ul li dt dd dl ol h1 - h6 br hr -->
<!-- 1.1 默认大小都是一整行 占满一整行-->
<!-- 1.2 可以设置宽度 高度 内边距 外边距 -->
<!-- 1.3 块级元素可以容纳任意的内容或标签 -->
<div>123</div>
<div>123</div>
<hr>
<!-- 2.行内元素 span b i s u a -->
<!-- 2.1 默认大小就是内容大小-->
<!-- 2.2 不可以设置宽度 高度 内边距 外边距-->
<!-- 2.3 行内元素只能容纳文本或图片 任意的行内元素 -->
<span>
<span>444</span>
</span>
<span>456</span>
<img src="../images/bd_logo1.png" alt="" width="10">
<input type="text">
<a href="#">百度一下,你就知道</a>
<!-- 3.行内块元素 input img -->
<!-- 3.1 默认大小就是内容大小 -->
<!-- 3.2 可以设置宽度 高度 内边距 外边距 -->
<!-- 3.3 块级元素可以容纳任意的内容或标签 -->
<div class="box">暑期清凉季</div>
<div class="box">京东生鲜</div>
<div class="box">企业会员</div>
<div class="box">京东五金城</div>
<div class="box">大牌奥莱</div>
</body>
</html>
背景、图片样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #0ff;
}
#box {
width: 150px;
height: 300px;
/* 背景颜色 */
background-color: rgba(255, 132, 220);
/* 背景透明 */
background: rgba(0,0,0,0);
/* 背景图片 */
background-image: url(./images/饭团.png);
/* 背景重复方式 repeat xy轴全部重复*/
/* no-repeat 不重复 */
background-repeat: no-repeat;
/* 图片位置
background-position:水平位置、垂直位置; */
/* background: red url(./images/饭团.png) no-repeat scroll 10px 10px; */
/* color image repeat attachment position */
/* 背景缩放 */
background-size: 100px;
/* 可以设置长度单位(px)(img大小一样)或百分比(设置百分比时,参照盒子的宽高 */
/* contain 自适应 保证图片始终完整显示在背景区域 */
/* cover 会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏*/
}
.box_1 {
/* 精灵图 */
/* 背景图片定位 */
/* background-position: 200px 100px; */
/* 背景图随着页面内容滚动 */
background-attachment: scroll;
/* 背景图片固定 附着 */
/* 背景图不会随着页面内容滚动 */
background-attachment: fixed;
/* 精灵图可以有效地减少服务器接受和发送请求的次数,提高页面的加载速度 */
/* css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的 */
/* 1. 精确测量,每个小背景图片的大小和 位置 */
/* 2. 给盒子指定小背景图片时, 背景定位基本都是负值 */
}
.obox {
width: 27px;
height: 240px;
background-image: url(./images/index.jpg);
background-repeat: no-repeat;
/* 图片位置 (水平位置、垂直位置) */
background-position: -155px -108px;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="box_1"></div>
<div class="obox"></div>
</body>
</html>