1.选择器以及优先级
<style>
/* 后代选择器 */
body #three{
color:blue
}
/* 兄弟选择器 */
#one ~ li{
font-size: 40px;
}
/* 相邻兄弟选择器 */
#one + li{
text-decoration: line-through;
}
</style>
</head>
<body>
<ul>
<li id='one'>菜浇饭</li>
<li>冒菜</li>
<li id='two'>抄手</li>
<li id='three'>面条</li>
</ul>
<ol>
<li id='three'>123</li>
<li>上面</li>
<li></li>
</ol>
</body>
样式优先级问题:
优先级和选择器相关
第1级: 属性后面添加!important
第2级: 内联样式
其他的任何样式都小于这两级,优先级看权重,权重越大,优先级越高
*---- 1
标签选择器 ------ 1
class选择器 ----- 2
id选择器 ------ 4
父子、后代、兄弟、相邻兄弟 ------ 看符号之间各个选择器的权重和,但是先看符号前边的,如果前边的相等,再比较后边
如何权重相等,最后写的谁,就实现谁
但是,权重不一样,但是都是修改的一个标签,不重叠的样式都能够实现。
<style>
/* .p1{
color: blue;
text-decoration: underline;
}
#p1{
color: red;
} */
div > .s1 > p{
color: aqua;
}
div > span > p{
color: blueviolet;
}
</style>
</head>
<body>
<div class="d1">
<span class="s1">
<!-- <p id="p1" class="p1" style="color: pink;">我是段落1</p> -->
<p id="p1" class="p1">我是段落1</p>
</span>
</div>
</body>
2.伪类选择器
CSS常用的背景属性
background-color:背景颜色
background:url(图片的地址) 是否平铺 x方向位置 y方向位置 背景颜色
是否平铺:no-repeat、repeat
x方向位置:left/right/center、x坐标值
y方向位置:top、bottom、center、y坐标值
<style>
a{
color: blue;
}
/* 设置超链接鼠标悬停时的状态 */
a:hover{
color: rgba(0, 255,255, 0.5);
}
span:hover{
/* 让光标变为手指 */
cursor: pointer;
}
/* 超链接访问后的状态 */
a:link{
color: lightgray;
}
a:visited{
color: red;
}
/* 鼠标悬停,一张图片消失,另一张显示 */
/* 图片消失实现 */
div:hover{
width: 100px;
height: 100px;
display: none;
background: url(1.jpg) no-repeat rgba(0, 255,255, 0.1);
}
/* 图片显示 */
</style>
</head>
<body>
<span>请点击<a href="https://www.baidu.com/">百度一下</a></span>
<div><img src="2.jpg" alt=""></div>
</body>
3.标准流布局
1.标准流布局:没有设置任何的布局样式,使用标签自己的特性。
a.块级布局标签:一个标签占一行:h1~h6、p等
b.行内标签:一行可以显示多个标签,设置宽高无效:a、span
c.行内块标签:一行可以显示多个标签,设置宽高有效:img、input
2.display-让图片隐藏
block-块级
inline-行内
none-隐藏标签
inline-block-行内块
3.脱流(脱离标准流布局)
(1)脱硫使用的是浮动、定位两种方式
(2)所有标签脱流以后,布局都是以行内块样式布局
<body>
<!-- 块级布局标签 -->
<p>第一段</p>
<p>第二段</p>
<!-- 行内标签 -->
<span style="width: 100px;height: 100px;">京东</span>
<span>淘宝</span>
<!-- 行内块标签 -->
<input type="submit" value="登录" style="width: 500px;height: 50px;">
<input type="text">
</body>
4.浮动基本用法以及应用
right(右浮动)
<style>
div{
width: 100px;
height: 100px;
background-color: brown;
}
#d1{
float: left;
}
#d2{
float: left;
}
</style>
</head>
<body>
<div id='d1'></div>
<div id='d2'></div>
</body>
<style>
/* 将所有标签内外边距取消 */
*{
margin: 0;
padding: 0;
}
/* 网页有宽度,但是没有高度 */
.d1,.d2,.d3{
width: 100%;
border: 2px solid red;
}
.d1{
height: 20px;
}
.d2{
height: 120px;
}
.d3{
height: 360px;
}
.left,.middle,.right{
height: 100%;
border: 2px solid blue;
}
.left{
width: 13%;
float: left;
/* 修改左外边距 */
margin-left: 12%;
}
.middle{
width: 50%;
float: left;
}
.right{
width: 13%;
float: left;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="d1"></div>
<!-- 搜索栏 -->
<div class="d2"></div>
<!-- 分类、广告 -->
<div class="d3">
<!-- 分类 -->
<div class='left'></div>
<!-- 广告 -->
<div class='middle'></div>
<!-- 黄页 -->
<div class='right'></div>
</div>
</body>
5.定位
定位:
定位就是设置一个标签到参考对象上、下、左、右的间距。
定位对应的属性:left、right、top、bottom
定位的前提:选好参考对象
position属性 - 专门用于选定参考对象的属性
absolute:绝对定位 – 在盒子中还存在一个真实的元素,但是这个元素不占据任何空间。
relative:相对定位 – 在盒子中存在真实元素,此元素可以任意移动位置,但是其原位置不能被其它元素占用。
fixed:固定定位 – 盒子中存在真实元素,此元素也不占据任何空间,此元素位置不受盒子大小影响
固定定位一般用于返回顶部、某些培训网站右下角等。
<style>
div:nth-child(1){
width: 120px;
height: 50px;
background-color: red;
position: absolute;
}
div:nth-child(2){
width: 100px;
height: 1000px;
background-color: green;
position: relative;
margin-left: 500px;
}
div:nth-child(3){
width: 50px;
height: 50px;
background-color: black;
position: fixed;
/* 修改此元素距离有边框下、边框的距离 */
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<p>封娃子</p>
</body>
6.盒子模型
所有的标签都是一个盒子模型
一个盒子模型包含:外边距、 内边距、 边框、 内容