CSS复合选择器/标签显示模式/行高/背景/三大特性

最新推荐文章于 2023-05-20 21:57:12 发布

Ctrl_CV攻城狮

最新推荐文章于 2023-05-20 21:57:12 发布

阅读量436

点赞数 1

分类专栏：前端基础文章标签：前端

前端基础专栏收录该内容

27 篇文章 2 订阅

订阅专栏

一. CSS复合选择器

1. 后代选择器(重点)

2. 子元素选择器

3. 交集选择器

4. 并集选择器（重点)

测试题

<!--主导航栏-->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!--侧导航栏-->
<div class="sitenav">
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录<la></div>
</div>

在不修改以上结构代码的前提下，完成以下任务:

1.链接登录的颜色为红色

2.主导航栏里面的所有的链接改为橙色

3.主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。

5. 链接伪类选择器(重点)

a {
/*a是标签选择器所有的链接*/
font-weight: 780;
font-size: 16px;
color: gray;
}
/*:hover是链接伪类选择器鼠标经过*/
a:hover {
/*鼠标经过的时候，由原来的灰色变成了红色*/
color: red;
}

6. 复合选择器总结

二. 标签显示模式(display)重点

1. 什么是标签显示模式

2. 块级元素(block-level)

例:

块级元素的特点

(1）比较霸道，自己独占一行

(2）高度、宽度、外边距以及内边距都可以控制

(3）宽度默认是容器（父级宽度）的100%

(4）是一个容器及盒子，里面可以放行内或者块级元素。

注意:

只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div

同理还有这些标签 h1 , h2 , h , h4 , h5 , h6 , dt ，他们都是文字类块级标签，里面不能放其他块级元素。

3. 行内元素(inline-level)

4. 行内块元素(inline-block)

5. 三种模式总结区别

6. 标签显示模式转换display

三. 行高

1. 单行文本垂直居中

2. 行高和高度的三种关系

如果行高等高度文字会垂直居中

如果行高大于高度文字会偏下

如果行高小于高度文字会偏上

四. CSS背景

1. 背景颜色(color)

2. 背景图片(image)

3. 背景平铺(repeat)

4. 背景位置(position)重点

注意:

必须先指定background-image属性

position后面是x坐标和y坐标。可以使用方位名词或者精确单位

如果只指定了一个方位名词，另一个值默认居中，为50%。

如果只指定一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中

如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left,top和top,left效果一致。

如果指定两个值，精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标 实际工作用的最多的，就是背景图片居中对齐了。

5.背景附着

6. 背景简写

7. 背景透明(CSS3)

8. 背景缩放(background-size)

9. 背景总结

五. CSS三大特性

1. 层叠性

2. CSS继承性

3. CSS优先级(重点)

1).权重计算公式

2).权重叠加

3).继承的权重是0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第1题</title>
<style type="text/css">
div div {
color: red;
}
div {
color: green;
}
</style>
</head>
<body>
<div>
<div>
<div>猜猜这行字体是什么颜色</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第2题</title>
<style type="text/css">
#father {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div id="father">
<p>猜猜这行字体是什么颜色</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第3题</title>
<style>
div div div div div div div div div div {
color: blue;
}
.me {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">猜猜这行字体是什么
颜色</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第4题</title>
<style type="text/css">
div p {
color: red;
}
#father {
color: green;
}
p.two {
color: pink;
}
</style>
</head>
<body>
<div id="father" class="one">
<p class="two">
猜猜这行字体是什么颜色
</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第5题</title>
<style>
.c1 .c2 div {
color: red;
}
div #box3 {
color: green;
}
#box1 div {
color: pink;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
猜猜这行字体是什么颜色
</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第6题</title>
<style type="text/css">
#father #son {
color: red;
}
#father p.c2 {
color: green;
}
div.c1 p.c2 {
color: blue;
}
#father {
color: pink !important;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
猜猜这行字体是什么颜色
</p>
</div>
</body>
</html>

Ctrl_CV攻城狮

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS复合选择器/标签显示模式/行高/背景/三大特性

一. CSS复合选择器1. 后代选择器(重点)2. 子元素选择器3. 交集选择器4. 并集选择器（重点)测试题<div class="nav"><ul><li><a href="#">公司首页</a></li><li><a href="#">公司简介</a></li><li&...
复制链接

扫一扫