<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>
<link rel="stylesheet" href="static/css/style01.css">
</head>
<body>
<!-- 演示基本选择器 -->
<ul>
<li>1</li>
<li id="bg-blue">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 -->
<div>
<p>猪哥</p>
<li>朱老师</li>
<p>西门大官人</p>
</div>
<div>
<p>灭绝师太</p>
<li>韦小宝</li>
</div>
<!-- 演示表单选择器 -->
<form action="">
<label for="email">邮箱:</label>
<input type="email">
<label for="password">密码:</label>
<input type="password">
<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
<button>登录</button>
</form>
</body>
</html>
/* dome01.html 引用的外部样式文件 */
/* 标签选择器 */
ul {
border: 1px dashed red;
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
overflow: hidden;
padding: 10px;
}
/* 层级选择器 */
ul li {
list-style-type:none;
width: 40px;
height: 40px;
background-color:wheat;
border-radius: 50%;
text-align: center;
line-height: 40px;
float:left;
margin-left: 10px;
box-shadow: 2px 2px 1px #888;
}
/* id选择器 */
#bg-blue {
/* 注意: id也可以给多个元素添加样式,但不要这样做 */
background-color: lightblue;
}
/* 类选择器 */
.bg-green {
background-color: lightgreen;
}
/* 属性选择器 */
li[id="bg-blue"] {
border: 2px solid red;
}
/* 群组选择器 */
#bg-blue, .bg-green {
border: 2px solid blue;
}
/* 相邻选择器 */
/* 第2个小球相邻的是第3个小球,可以用li,也可以用* */
#bg-blue + * {
background-color: yellow;
}
/* 兄弟选择器 */
/* 第2个小球后面的所有同级兄弟元素全部选中 */
#bg-blue ~ * {
background-color: -yellow; /* 值前加-,令其失效 */
}
/* 伪类: 子元素选择器 */
ul :first-child {
background-color: coral; /* 第一个子元素 */
}
ul :last-child {
/* 因优先级问题,需要把前面的兄弟选择器注释掉 */
background-color: coral; /* 最后一个子元素 */
}
ul :nth-child(6) {
background-color: coral; /* 第6个子元素 */
}
ul :nth-last-child(3) {
background-color: coral; /* 倒数第3个子元素 */
}
/* 伪类: 类型选择器 */
ul li:first-of-type {
background-color: darkorchid; /* 第一个li类型的元素 */
}
ul li:last-of-type {
background-color: darkorchid; /* 最后一个li类型的元素 */
}
ul li:nth-of-type(6) {
background-color: darkorchid; /* 选择第6个li类型的元素 */
}
/* 我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? */
/* 这二类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/* 下面再通过一个案例,就可以看出区别了, html代码在 "demo02.html" 中 */
/* 选中每个div中的第二个子元素 */
div :nth-child(2) {
background-color: lightgreen;
}
/* 如果只想选中"西门大官人",应该如何选择呢? */
/* 分析: "西门大官人"是第一个div中的第三个子元素,常规思维应该是这样获取 */
div:first-of-type :nth-child(3){
background-color: -lightblue;
}
/* 还可以进一步简化(先让前面的选择失效) */
/* 选择页面中的第二个p元素 */
p:nth-of-type(2) {
background-color: yellow;
}
/* 思考: 为什么第二个div中的p没有选中? 因为当前div 下面只有一个p */
/* 如果我在第二个div中再添加一个:<p>aaaaa</p>,你会发现也会被选中的 */
/* 注意: 类型伪类选择器应该是我们的首选,尽可能优先使用它 */
/* 如果我要选择只有一个子元素且子元素为p,应该如何做? */
p:only-of-type {
background-color: pink;
}
/* 伪类: 表单控件 */
form :enabled {
background-color: wheat;
}
/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
form :checked + * {
color: red;
}
/* 当在控件中输入无效值文本自动变成红色 */
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}
/* 掌握以上的选择器, 对于常规的开发项目已经够用了, 更多选择器,大家可参考开发手册 */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="static/css/style02.css">
<title>有趣又神奇的背景(background)</title>
</head>
<body>
<!--
1. 基本设置:
(1). background-color: 背景色
(2). background-image: 背景图片
(3). background-repeat: 重复方向
(4). background-positon: 背景定位
(5). background-attachment: 滚动方式
简写顺序:背景色 背景图片 重复方向 背景定位 滚动方式
2. css3背景新特征
(1). background-img: 多背景图设置
(2). background-size: 设置背景图尺寸
(3). backgruond-clip: 设置背景的绘制区域
-->
<div></div>
</body>
</html>
.box {
width: 300px;
height: 300px;
padding: 10px;
border: 5px dashed black;
/* 设置背景色 */
background-color: cyan;
/* 设置背景图片 */
background-image: url(static/images/bg.jpg);
/* 设置重复 */
background-repeat: no-repeat;
/* 背景定位 */
/* 默认:0% 0%,支持像素,百分比,单词 */
/* 水平:left/center/right; 垂直:top/center/bottom */
background-position: left center;
background-position: 10% 20%;
background-position: 30px 50px;
/* 滚动方式 */
/* 把盒高度改成3000px测试 */
background-attachment:fixed;
/* 简写 */
background: yellow url(static/images/bg1.jpg) no-repeat left center scroll;
/* css3背景新属性 */
/* 1.同时设置多个背景图片,对应的声明要与图片一一对应 */
background-image: url(static/images/bg.jpg),url(static/images/bg1.jpg);
/* 第一张左下,第二张右上 */
background-position: left bottom, right top;
/* 第一张不重复,第二张重复 */
background-repeat: no-repeat, repeat;
/* 也可以简写到一行 */
background: url(static/images/bg.jpg) left bottom no-repeat,url(static/images/bg1.jpg) right top repeat;
/* 2.设置背景图片尺寸 */
background-image: url(static/images/bg.jpg);
background-size: 120px 80px;
/* 等比缩放完全显示,如果背景与容器比例不同,会留白 */
background-size: contain;
/* 等比铺满容器,多余部分被裁切 */
background-size: cover;
/* 100%拉伸 */
background-size: 100% 100%;
/* 3.设置背景的绘制区域 */
/* 关闭背景图片 */
background-image: none;
/* 重置边框使观察更明显 */
border: 10px dashed red;
/* 重置背景色 */
background-color: lightblue;
/* 默认是从边框开始绘制 */
background-clip: border-box;
/* 设置为从内边距padding区开始绘制 */
background-clip: padding-box;
/* 设置为从内容区开始绘制 */
background-clip: content-box;
/* 复位 */
background-clip:initial;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="static/css/style03.css">
<title>调皮捣蛋的内边距(padding)</title>
</head>
<body>
<!-- 将图片在容器中居中显示 -->
<div>
<div>
<img src="static/images/girl.jpg" alt="" width="200">
</div>
</div>
</body>
</html>
.box1 {
width: 300px;
height: 300px;
background-color: lightgreen;
/* 容器300*300,图片200*200,最直观的想法是添加50px的内边距 */
padding: 50px;
/* 会发现,内边距会增加盒子填充厚度,将盒子撑大 */
}
/* 解决方案1.只需要将盒子的大小,根据padding值进行调整 */
/* 现在宽/高 = 原来宽/高 - padding * 2 */
.box1 {
width: 200px;
height: 200px;
}
/* 解决方案2. 改变DOM结构,将盒子的宽高与内边距设置分离 */
/* 先将盒子大小复位,内边距清零 */
.box1 {
width: 300px;
height: 300px;
padding: 0;
}
/* 将盒子的padding内边距设置在内部容器上,实现宽度分离 */
.box2 {
padding: 50px;
}
/*分析:
* 第一种方案DOM结构简单,但是要修改原盒子大小
* 第二种方案不需要修改原盒子大小,但需要在盒子与内容之间增加一个容器
* 增加了一个纯属结构性的DOM元素
* 所以, 各有利弊, 在开发中,根据实际情况进行斟酌
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style04.css">
<title>捉摸不定的外边距(margin)</title>
</head>
<body>
<!--
1.同级塌陷
2.嵌套传递
3.自动挤压
-->
<div></div>
<div></div>
<hr>
<div>
<div></div>
</div>
<hr>
<div></div>
</body>
</html>
/********** 同级塌陷 **********/
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
/* 添加下外边距 */
margin-bottom: 30px;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightcoral;
/* 添加上外边距 */
margin-top: 30px;
}
/*按正常思维,现在二个盒子上下应该有60px外边距,但是页面却未发生变化 */
/* 说明二个盒子之间的外边距仍是30,肯定有一个外边距没有生效,究竟是哪一个呢? */
/* 现在将box1的margin-bottom改为50px */
.box1 {
margin-bottom: 50px;
}
/* 发现变宽了, 看样子是box1生效了, box2无效 */
/* 再把box2的margin改为80px */
.box2 {
margin-top: 80px;
}
/* 发现上下间距又变宽了,再次检查发现box2的margin生效了,box1的margin失效了 */
/* 从而得出一个结论: 当二个盒子上下排列时,外边距会出现塌陷现象,小的会陷到大的里面去,简称:"同级塌陷" */
/* 下面演示当二个盒子相互潜逃,为父子关系时,设置了margin会出现哪些问题? */
/********** 嵌套传递 **********/
.box3 {
width: 200px;
height: 200px;
background-color: lightblue;
}
.box4 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
/* 我们的任务是:使box4离box3顶部之间有50px的间距,通过margin-top来实现 */
.box4 {
margin-top: 50px;
}
/* 结果发现不对, 外边距跑到了外部盒子box3上面去了,这就是外边距的"嵌套传递"现象 */
/* 当给一个子盒子添加margin时,这个margin会自动传递到父级盒子上 */
/* 所以,正确的做法是,给父级盒子添加内边距来实现 */
/* 先复位 */
.box4 {
margin-top: 0;
}
.box3 {
padding-top: 50px;
/* 修改盒子高度,将撑开的50px的高度去掉 */
height: 150px;
}
/* 下面演示margin的自动挤压,这是布局中使用非常广泛 */
/********** 自动挤压 **********/
.box5 {
width: 100px;
height: 100px;
background-color: lightcoral;
}
.box5 {
/* 设置左外边距100px会向右移动盒子 */
margin-left: 100px;
/* 设置负值-50px, 会向相反的方向移动,有一部分已移出了可视区*/
margin-left: -50px;
/* 如果想让浏览自动水平摆放这个盒子,可以设置为auto */
margin-left: auto;
/* 为什么会跑到最右边?因为浏览器会将左边尽可能多的空间分配给这个盒子当外边距 */
/* 同理,如果想让这个盒子移到最左边,只需要设置右外边距为自动即可 */
/* 先重置左外边距 */
margin: 0;
margin-right: auto;
/* 现在盒子移动到了最左边, 也是符合我们的猜测和预期的 */
/* 如果给这个盒子的左右外边距,都设置为自动,会出现什么情况呢? */
margin: 0;
margin-left: auto;
margin-right: auto;
/* 盒子居然居中显示了, 惊不惊奇,意不意外?因为左右相互挤压,互不相让,最后达到了恐怖平衡 */
/* 可以简写: 假定盒子上下外边距都是0 */
margin: 0 auto;
/* 这个简写规则与我们之前学习过的border是完全一致的, 这里不再多说 */
/* 这个"自动挤压"使盒子居中对齐的特征,在页面布局中应用非常多,非常重要,好好理解 */
}