目录
css选择器:
1.基本选择器:
1.1 通配符选择器:*{}
1.2 元素选择器:标签名{}
1.3 类选择器:.类名{}
1.4 id选择器:#id名{}
2.复合选择器:
2.1 后代选择器:选择器1 选择器2{}---中间间隔一个空格
----作用对象:离{}最近的选择2,
----选择器1的作用是:筛选,
2.2 子代选择器:选择器1>选择器2{},中间间隔一个>
2.3 并集选择器:选择器1,选择器2{},中间间隔一个,
2.5 伪类选择器(了解):选择器:伪类名{}
:hover{}---鼠标悬停效果
标签代码:
<span>span标签</span>
<div>
<span>这是 div 的儿子 span</span>
</div>
<div class="title">
标题<a href="">百度<span>百科</span></a>
</div>
<div class="content1">
<span>这是 div 里面的 span</span>
<p>
<span>这是 div 里面的 p 里面的 span</span>
</p>
</div>
<div class="content2">
<span>一个和尚</span>
<p>两个和尚</p>
<a href="">三个和尚</a>
</div>
<p class="box">p 标签,使用了类选择器 box</p>
<a href="#">芒果</a>
样式代码:
<style>
* {
font-size: 30px;
}
span {
color: rgb(255, 0, 0);
}
div span {
color: rgb(0, 162, 255);
}
.title {
color: rgb(162, 0, 255);
}
.title a {
color: rgb(0, 0, 0);
}
.title a span {
color: rgb(255, 0, 0);
}
.content1 > span {
color: rgb(51, 255, 0);
}
.content2 span,
.content2 p,
.content2 a {
color: rgb(255, 0, 179);
}
p.box {
color: rgb(255, 174, 174);
}
a:hover {
color: rgb(195, 0, 255);
text-decoration: none;
}
</style>
效果:
小案例:
标签代码:
<ul>
<li><a href="">文旅部发布优化疫情防控最新安</a></li>
<li><a href="">露营旅游休闲发展指导意见发布</a></li>
<li><a href="">“中意面对面”系列活动启动</a></li>
<li><a href="">#城市巡游记#正式启动</a></li>
</ul>
样式代码:
<style>
li {
color: rgb(255, 136, 0);
}
a {
/* 去除下划线 */
text-decoration: none;
}
a:hover {
color: rgb(255, 136, 0);
text-decoration: underline;
}
</style>
效果:
css三大特性:
1.继承性---子标签会继承父标签的样式---只继承字体样式属性
2.层叠性---当有多个样式作用于同一个标签时,会按照优先级进行覆盖
3.优先级---
3.1 选择优先级:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样 式 < !important
3.2 写入方式的优先级:行内样式 > 内部样式 > 外部样式
就近原则:同一种写入方式,就近原则
标签代码:
<div>
盒子内容
<h1>标题</h1>
<span>标题1</span>
<a href="">1234567</a>
</div>
<div id="content">内容</div>
样式代码:
<style>
div {
color: rgb(255, 0, 0);
font-size: 30px;
/* width: 600px;
height: 100px;(子级默认继承父级的文字控制属性) */
/* 注意:如果标签有默认文字样式会继承失败。
例如:a 标签的颜色、标题的字体大小。 */
}
div {
/* 注意:如果标签有默认文字样式会继承失败。 */
color: rgb(0, 110, 255);
/* 不同的属性会叠加:不同的 CSS 属性都生效 */
font-weight: bold;
}
/* div {
color: rgb(0, 0, 0) !important;
} */
/* 优先级:
规则:选择器优先级高的样式生效。
公式:通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important(选中标
签的范围越大,优先级越低) */
#content {
color: rgb(183, 0, 255);
}
</style>
<link rel="stylesheet" href="./test.css" />
test.css代码:
#content {
color: rgb(0, 247, 255);
}
效果;
背景属性:
background-color:背景颜色
background-image:背景图片
background-repeat:背景图片是否重复
background-position:背景图片位置
background-attachment:背景图片是否随滚动条滚动
background:背景属性的简写形式
background-size:背景图片的大小
标签代码:
<div></div>
样式代码:
<style>
div {
/* width: 1000px; */
/* 背景属性的使用前提:当前盒子必须有一定的高度
*/
height: 600px;
background-color: lavenderblush;
/* 不平铺 */
background-repeat: no-repeat;
/* 平铺 */
/* background-repeat: repeat; */
/* 水平方向平铺 */
/* background-repeat: repeat-x; */
/* 垂直方向平铺 */
/* background-repeat: repeat-y; */
background-image: url(./img/cat2.jpg);
/* 图片居中 */
background-position: center;
/* 等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见 */
/* background-size: cover; */
/* 等比例缩放背景图片以完全装入背景区,可能背景区部分空白 */
/* background-size: contain; */
background-size: 200px;
/* 背景不会随着元素的内容滚动(背景固定) */
background-attachment: fixed;
}
</style>
效果:
小案例(头部列表):
标签代码:
<div>
<div class="title"><a href="">新闻</a></div>
<div class="title"><a href="">视频</a></div>
<div class="title"><a href="">军事</a></div>
<div class="title"><a href="">体育</a></div>
<div class="title"><a href="">NBA</a></div>
</div>
样式代码:
<style>
* {
margin: 0;
padding: 0;
}
div {
padding: 0 20px;
background-color: #1479d7;
line-height: 100px;
height: 100px;
}
a {
font-size: 32px;
color: rgb(255, 255, 255);
text-decoration: none;
}
.title {
width: 100px;
height: 100px;
text-align: center;
display: inline-block;
}
.title:hover {
background-color: #808080;
}
</style>
效果:
显示模式:
1.分类:
块级元素---独占一行,可以设置宽高
行内元素---不独占一行,不可以设置宽高
行内块元素---不独占一行,可以设置宽高
标签代码:
<!-- 块级元素:div,li等 -->
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<!-- 行内元素:span,a -->
<span class="sp1">文本1</span>
<span class="sp2">文本2</span>
<span class="sp3">文本3</span>
<!-- 行内块元素;img -->
<img src="./img/小刘.jpg" alt="" width="150px" />
<img src="./img/小刘.jpg" alt="" width="100px" />
样式代码;
<style>
div.box1 {
width: 100px;
height: 100px;
background-color: aqua;
}
div.box2 {
width: 100px;
height: 100px;
background-color: forestgreen;
}
</style>
效果:
转换显示模式:
<style>
a {
width: 100px;
height: 50px;
background-color: forestgreen;
/* 转换为块级 */
display: block;
/* 转换为行内(不独占一行,并且不可以设置高度) */
/* display: inline; */
/* 转换为行内块 */
/* display: inline-block; */
}
</style>
</head>
<body>
<div>
<a href="" class="title1">标题1</a>
<a href="" class="title2">标题2</a>
<a href="" class="title3">标题3</a>
<a href="" class="title4">标题4</a>
</div>
</body>
效果: