复习第二天

最新推荐文章于 2024-10-18 17:23:02 发布

LilKevinRay

最新推荐文章于 2024-10-18 17:23:02 发布

阅读量134

点赞数

分类专栏：复习文章标签： html

本文链接：https://blog.csdn.net/weixin_51325964/article/details/118527711

版权

复习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的三大基本元素——块级元素、行内元素和行内块元素，以及如何通过display属性转换元素显示方式。此外，还探讨了CSS选择器的种类，包括通配符、标签、类、ID、子选择器、后代选择器等，并解释了它们的权重和应用场景。文章还涵盖了CSS中文字样式、居中对齐和伪类选择器的使用，特别是a标签的四种状态。

摘要由CSDN通过智能技术生成

H5假期自主复习

复习第二天

复习第二天

复习三大基本元素，CSS的基本语句，以及几类选择器。

三大基本元素

块级元素

在网页中独占一行
设置的宽、高、margin(外边距)、padding(内边距)都可以起作用
排列方式：从上到下
不设置宽度的情况下会直接撑满整个父级元素
代表标签有：h1-h6、div、p、ul、ol、li、dl、dt、dd

行内元素

共占一行
大小由自身内容决定，设置的宽高和内外边距不会起作用。
排列方式：从左至右
代表标签：a、span、b、strong、em、i、del、big、small

行内块元素

以上两种元素的属性都有一些
共占一行
设置的宽高起作用
排列方式：从左至右
代表标签：img

下面我们看一下什么是独占一行，什么是共占一行：
独占一行
可以看到这里你好这个块级元素的区域是占满他所在的一整行的。

独占一行
共占一行
而共占一行就很好理解，这是一个行内元素，大小由自身大小决定，所以几个行内元素从左到右在同一行并列排布。

CSS基本语句

display的几个值

display是css中的一个属性，他有很多的值供我们使用，可以实现很多不同的效果，例如

inline ：转换成行内元素
block：转换成块级元素
inline-block: 转换成行内块
none：消失

网页链接：CSS display属性
这里强调一点让元素消失的几种办法中，只有dispaly="none"才是是元素完全消失，其他两个都只是让该元素看不见，而本身所占有的位置并不会消失。具体效果如下（我使用行内块元素做展示）：
原图：

display=“none”
可以看到绿色方块直接消失，红色方块移动到了绿色方块的位置。
display="none"
visibility=“hidden”
如果是这种方式让元素消失，那么它仍然占有面积。
在这里插入图片描述
opacity:0 (控制透明度)
这种方式和visibility效果一样。

关于字体(风格，大小，颜色)
文字大小：font-size
文字颜色：font-color
文字粗细：font-weight（这个可以是英文的bold、bolder，也可以是数字100px等）
文字样式：font-sytle（可以在这里修改文字是否倾斜等）
两个居中
1. 让块级元素水平居中：margin:0 auto;
2. 让文字垂直居中：height等于line_height

选择器

这里需要注意：每种选择器都有自己不同的权重，在不同的选择器下，并不是所有的元素都会继承父级元素的所有属性。

通配符选择器（*的意思为所有的，在没有其他选择器的情况下可以用它来调整全部标签的属性）
权重:0
符号：*
标签选择器
权重：1
例子：标签名+{}，这一类标签都能起作用
属性选择器
权重：10
起名字：在开始标签里面 class=“名字”
选取：.+”name”
类选择器（常用）
权重：10;
用法：
[属性]{},把具有这个属性的所有标签选中
[属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中
id选择器
权重：100
用法:
在开始标签里面 id=”name1”
使用的时候：#name1{}
注意id选择器和class选择器不同，例如在页面中写了一个id=“name1”，那么这个页面中不允许出现第二个相同的，这个是规定。id=“name1” 是唯一的，就是说有了name1那么其他的元素就不可以再次使用name1.
子选择器
权重：组合的选择器之和
连接符：> （权重0）
意思：结合生活中群代关系，“子”可以理解成“儿子”，例如下面的div>h1 代表选中div里面的儿子元素，并且是h1的这一类标签
后代选择器
权重：组合的选择器权重之和
连接符：空格
意思：结合生活中的裙带关系，这个后代就是不论是儿子还是孙子还是…只要是后代就符合
分组选择器
权重：组合选择器之和
连接符：逗号，
意义：将相同的代码提取出来，减少冗余
交集选择器
权重：组合的选择器之和
符号：没有
意思：有多个选择器组成
例子：

<style>
  .box1.current{
      background:green;
  }
</style>
<div class="box1 current" >box1</div>
<div class="box1">box1</div>
<p class="current">p1</p>

相邻兄弟选择器
权重：组合选择器之和
连接符号：+
代表的意思：以下面为例，h1+p 代表的是选中与h1相邻的p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

<style>
      h1+p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

11. 通用兄弟选择器
权重：组合选择器之和
连接符号：~
代表的意思：以下面为例，h1~p 代表的是选中h1下面所有的兄弟p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

<style>
  h1~p{
      background:green;
  }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

伪类选择器
a标签的四种状态，它这四种状态有一定的顺序，在网络上被称为“爱恨原则”。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}
div:hover {
  background-color: blue;
}
</style>
</head>
<body>
<p>请把鼠标移到下面的 div 元素上来改变其背景色：</p>
<div>把鼠标移到我上面</div>
</body>
</html>