基本标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本标签选择器</title>
</head>
<body>
<h2>基本标签选择器</h2>
<!--把写在标签开始标签内部style属性中的样式，称为一个标签的行间样式-->
<div style="width:100px;height:100px;background-color:red">
行内样式定义，任何一个标签都可以通过style属性定义这个标签独有的显示效果
</div>
<h3>内部样式表</h3>
<!--
内部样式表，将写在行间的样式提取出来，写在一对style标签中，并且用花括号括起来。
如何让浏览器知道，这个三个样式是给哪个标签设置的呢？
这就需要在第一个{}前加一个“特殊标识”来告诉浏览器，花括号中的样式是给哪个标签设置的。
特殊标识的作用：就是在样式表中，选中标签，设置样式。因此将这个特殊标识称为 “选择器”
<style>
特殊标识{
width:100px;
height:100px;
background:red;
}
</style>
-->
<div style="background-color: aquamarine;">显示内容</div>
<!--如果同时使用行间和内部两种定义方法，则效果为两者的叠加，如果重复定义则就近原则-->
<h3>基础标签选择器的分类</h3>
<p>
标签选择器、类型选择器、id选择器
</p>
<h3>标签选择器</h3>
<p>
以标签名称作为选择器选中标签 “标签名{样式}”<br />
标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式
<!--
例如：
div{
color:red;
}
-->
</p>
<h3>类型选择器</h3>
<p class="p1 c1">
在标签内部通过class属性，给标签设置类型名在样式表中通过<span class="d1">【.类型名{样式}】</span> 的方式给标签盒子设置样式
<!--
例如：
.p1{
border: 1px solid red;
}
-->
<ul><i class="d1">类型选择器特点：</i>
<li>相当于给标签起了一个别名</li>
<li>不同盒子可以有相同的class属性名，因此类型选择器可以给多个标签同
时设置相同样式</li>
<li>同一盒子可以有多个class属性名，在文档中以空格隔开，因此同一个盒
子的样式是多个选择器叠加的结果</li>
</ul>
</p>
<h3>id选择器</h3>
<p id="c2">
id选择器是通过给标签设置id属性，进行定位选择<br />
在样式表中通过 #id{样式}对标签设置样式,相当于一个人的身份证号
<ul><span id="c2">id选择器特点</span>
<li>有且只能有一个，不能重名，不能有多个。事实上在一个页面针对
不同标签多次使用相同id没有问题【浏览器最大程度容错】</li>
<li>一般不使用id选择器设置样式</li>
</ul>
</p>
<h3>使用三个基本选择器的优先问题</h3>
<p>
同时针对一个标签使用三种定义，如果显示属性配置冲突则id选择器>类型选择器>标签选择器；
如果不冲突则叠加<br/>
<strong>总结：越精确越优先</strong>
</p>
<p id="c2" class="c3">
ps:其他选择器都将是三大基本选择器的一个组合
</p>
</body>
<style>
<!--
p{
color:red;
}
.c3{
background-color:yellow;
}
#c21 {
color: blue;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
background: red;
}
.p1 {
border: 1px solid red;
}
.c1 {
color: red
}
.d1 {
font-weight: bold;
}
-->
</style>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器</title>
</head>
<body>
<h3>分组选择器</h3>
<div>将多个选择器通过逗号分割，同时设置一组样式。每个选择器都是独立的选择器，
最后选择结果为所有选择器的和</div>
<p>p1</p>
<p id="id1">p2</p>
<span class="span1">span1</span>
<style>
/*在这个组合选择器中，使用了3种不同的选择方法，第一个div采用标签选择器，
第二个p#id1采用的是id选择器，选择id=id1的p标签，第三个采用的是类选择器*/
/*
div,p#id1,.span1{
color:red
}
*/
</style>
<h3>后代选择器</h3>
<p>
选择元素内部所有指定元素，不在乎的层次深度。当然，
后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器<br/>
标准语法： 选择器1 选择器2 {样式定义}
<span>div1</span>
<span id="div2">div2</span>
<span class="div3">div3和<span id="span2">div4</span></span>
</p>
<span>span3</span>
<style>
/*选择包含span的p标签种span标签*/
p span {
color:orange;
}
/*选择包含id=span2的p标签中的span id=span2标签*/
p #span2{
color:blue
}
/*选择包含span标签的class=div3标签中的span标签*/
.div3 span{
background-color: blueviolet;
}
</style>
<h3>子选择器</h3>
<p>
子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向
下一级的元素，不可以再往下选择
</p>
<div>
<p>
<a href="">aaaa</a>
<a href="">bbbb</a>
</p>
<a href="">dd<span>eee</span>dd</a>
</div>
<style>
/*后代选择器,所有的div中的热点文字显示为红色*/
div a{
color:red
}
/*儿子选择，所以aaaa和bbbb不会出现边框，而dddd则显示边框*/
div > a{
border: 1px solid blue;
}
/* div的儿子a中的儿子span*/
div > a > span{
color:beige;
}
</style>
<h3>相邻兄弟选择器</h3>
<p>
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。注意是相邻下一个元素，不能查找上一个元素。<br/>
例如li id="bb1"和下一个li中间插入一个span元素则#bb1 + li则不能查找到元素
</p>
<ul>
<li>我是儿子1
<ol>
<li>我是孙子11</li>
<li>我是孙子12</li>
</ol>
</li>
<li id="bb1">我是儿子2</li>
<!--
<span>abcde</span>
-->
<li>我是儿子3</li>
</ul>
<style>
#bb1 + li{
color:red;
}
</style>
<h3>普通兄弟选择器</h3>
<p>
普通兄弟选择器匹配和第一个元素后面的所有元素
</p>
<ul>
<li id="bb2">我是儿子1</li>
<span>span_span</span>
<li>我是儿子2</li>
<li>我是儿子3</li>
</ul>
<style>
/*查找id=bb2后面的所有同级的li标签*/
#bb2 ~ li{
color:blue;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin外边距设置</title>
</head>
<body>
<div>111</div>
<div id="div2">222</div>
<div id="div3">333</div>
<div id="div4">444</div>
<br/>
<br/>
<br/>
<br/>
<style>
*{
border: 1px dotted green;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
background-color: bisque;
}
#div2{
/*
margin的作用：通过margin来移动盒子。
默认布局情况下，页面的盒子排列是按照从左到右，从上到下的
水平方向：
- margin-left:将盒子自身向右推
- margin-right:盒子自身不动，将水平方向上的相邻盒子向右推
垂直方向：
- margin-top:将盒子自身向下推
- margin-bottom:盒子自身不动，将垂直方向上的相邻盒子向下推
*/
margin: 50px;
}
#div3{
/* 水平居中，距离顶部10px，左右相等则为居中显示*/
margin:10px auto;
}
#div4{
/*由于高度不确定，所以垂直居中不能通过auto实现 */
margin: auto;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套情况下margin</title>
</head>
<body>
<div id="fa" style="width:600px;height:600px;background-color: blanchedalmond;">
<div id="son" style="width: 200px;height: 200px;background-color: burlywood;">
具体内容
</div>
</div>
<!--
嵌套情况下子级盒子的margin特点
- 移动方式与平级盒子一样
- 移动的起点是从父级内容区域开始的，与父级的padding，border没有关系
-->
<style>
#fa{
padding: 10px;
}
#son{
margin-left: 100px;
}
</style>
<!--
嵌套情况的margin外边距坍塌问题 [面试题]
- 在垂直方向上，当父级没有明确的边界时
border-top,padding-top,border-bottom,padding-bottom，
父级中的第一个子级的margin-top会传递给父级，导致父级跟子级
一起向下移动。
父级中的最后一个子级的margin-bottom会传递给父级，导致无法撑开父级高度
-
- 外边界坍塌问题出现在chrome firefox opera safari IE9以上浏览器中
- 解决办法：给父级添加边界（border padding）
-->
<div style="border: 1px solid orange;">
<div style="height: 100px;margin-top: 10px; background-color: chartreuse; border: 1px solid yellow;">
具体显示内容
</div>
<div style="border: 1px solid blue;">
具体显示内容2
</div>
<div style="margin-bottom: 10px;border: 1px solid red;">
具体显示内容3
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他选择器</title>
</head>
<body>
<h3>通用选择器</h3>
<p>
*号选择器是通用选择器，这是元素选择器的扩展，功能是匹配所有html元素的选择器<br/>
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就
是将不必要的元素也配置了。<br/>
目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用
</p>
<h3>属性选择器</h3>
<p>
属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。
</p>
<a href="https://www.baidu.com">test1</a><br/>
<a href="indu.html">test2</a><br/>
<span href="bb.html">bbbbbb</span>
<style>
/*匹配所有具有href属性的元素,这里的属性允许是自定义的*/
[href] {
color:red;
}
/*匹配具有href属性，同时href的属性值以https开头*/
[href^="https"] {
background-color: yellow;
}
/*匹配具有href属性，同时href属性值以.com收尾*/
[href$=".com"]{
border: 1px dotted blue;
}
/*匹配具有href属性，同时href属性值中包含.字符*/
[href*="."]{
border: 1px dotted blue;
border-radius: 20px;
}
</style>
</body>
<style>
/*
*{
border: 1px dashed red;
}
*/
</style>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position定位方法的类型</title>
</head>
<body>
<h3>position定位方法的类型</h3>
<p>
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型
<ul>取值为：
<li>static默认值。没有定位，元素出现在正常的流中。如果父组件没有定义大小，则子组件会撑开父组件</li>
<li>absoult生成绝对定位的元素，相对于 static 定位以外的第一个父元素
进行定位；元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。如果父组件没有定义大小，则父组件可能会坍塌</li>
<li>relative生成相对定位的元素，相对于其正常位置进行定位。 因此，
"left:20" 会向元素的 LEFT 位置添加 20 像素</li>
</ul>
</p>
<div style="border: 1px solid red;height: 200px;">
<!--具体位置是相对于父组件进行移动得到的，top和left设置-->
<div style="position:absolute;height:200px;width:100px;right:50px;top:-50px;border: orange 1px solid;margin-bottom: 10px;">
具体内容
</div>
</div>
<hr/>
<div style="border: 1px solid red;height: 200px;">
<div style="position:relative;height:200px;width:100px;left:50px;top:-50px;border: orange 1px solid;margin-bottom: 10px;">
具体内容
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素分布关系</title>
</head>
<body>
<h3>标签与标签平级</h3>
<p>
兄弟标签
</p>
<div style="width: 100px;height: 100px;border:1px solid red">1</div>
<div style="width: 100px;height: 100px;border:1px solid red">2</div>
<h3>标签与标签嵌套</h3>
<p>
父子或者后代标签
</p>
<div style="width: 200px;height: 200px;border:1px solid red">1
<div style="width: 100px;height: 100px;border:1px solid red">2</div>
</div>
<h3>盒子平级且同行排列</h3>
<!-- 标签与标签平级 -->
<div style="width: 100px;height: 100px;border:1px solid red">1</div>
<div style="width: 100px;height: 100px;border:1px solid red">2</div>
</body>
<style>
div{
/*html文档中的标签，不能通过回车符来实现换行或者不换行。只能通过css代码控制其换行状态，
css代码让两个叫div的盒子同行排列 */
display: inline-block;
}
</style>
<!--
1、标签的本质：所有的标签在页面都是一个矩形盒子
2、页面上盒子与盒子之间的结构关系，只有两种
- 盒子与盒子平级，对应就是标签与标签平级
- 盒子与盒子嵌套，对应就是标签与标签嵌套
3、页面上的盒子按照从左到右，从上到下的方式排列盒子
对应的在文档中:
- 上面的盒子先写
- 左边的盒子先写
-->
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body bgcolor="#eee">
<div style="width: 200px;height: 200px;background-color: blanchedalmond;">
div布局
</div>
</body>
<style>
div{
position: absolute; /* 采用绝对位置定位 */
top:50%; /*距离父组件上边距为50%*父组件的高度 */
margin-top: -100px; /*将当前组件上移100px，因为当前组件height为200px */
/*水平居中*/
left: 50%;
margin-left:-100px;
}
</style>
</html>
扫一扫
9182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
