css详细解释2

1。伪类选择器

1.1。 LoVe Hate 标签的爱恨标准。冒号连接

1.2，标签示例

给a标​​签设置一个颜色，就生效了

"en">

<元字符集="UTF-8">



百度一下

为身体设置颜色。 body中的a标签会继承这个颜色吗？

没有继承，a标签内部有自己的默认样式

所以：对于a标签来说，如果要设置a标签的样式，就必须应用到a标签上。对于继承来说，a标签不起作用

1.3。伪类选择器用例

"en">

<元字符集="UTF-8">



"#1">百度一下
"#2">360点击
"#3">搜狗点击
"#4">过河一会儿

1.4 其他人也可以使用伪类选择器悬停。如果您将鼠标放在上面并希望其发生变化，请使用悬停

"en">

<元字符集="UTF-8">

1.5、栗子

"en">

<元字符集="UTF-8">




<p>魔鬼降临现场

效果，黑框。当鼠标悬停在其上时，它会变成红色并显示黑色文本。

1.6，悬停栗子

"en">

<元字符集="UTF-8">



"box">
魔鬼征服风暴

未放置鼠标时：

放置鼠标时：

目前的需求是，当鼠标放在盒子上时，子元素的p标签的内容被覆盖：

用伪类选择器选择div，然后选择其下面的子元素显示为none。

未放置鼠标时：

当鼠标放在上面时：

注释掉这一行，红色就没有了：

未放置鼠标时：

鼠标悬停后：

CSS还可以做旋转、3D动画、悬浮离子等。还可以玩游戏，比如跑酷、愤怒的小鸟等

以下是上面的子选项卡。点击后它会发生变化。还有悬停吗？ ：

从底部可以看到，电视有一个span标签，而且是一个a标签。它也是无序列表中的一个 li 元素。这个li下面还包裹着一个div标签。 li 标签是一个块级标签，占据自己的行。这是单行显示。如果采用块到行的方式，也会出现空白折叠现象（换行），不好调整。每个li标签之间

还有显示无

2。属性选择器

您需要为每个输入指定一个名称。如果输入很多，命名起来就很麻烦。这时候就用属性选择器，键值key value，值可以加引号也可以不加引号。

"en">
<元字符集="UTF-8">



<表单动作="">
 
<输入类型="密码">
<输入类型="收音机">
<输入类型="复选框">

3。伪元素选择器

3.1。为第一个单词添加属性

"en">

<元字符集="UTF-8">



我是降临在事态上的魔鬼

与伪类选择器类似。您可以添加一个或两个冒号。为第一个角色添加属性

3.2。在某个标签内容前面添加内容

3.3 在某个标签内容后添加内容

在前面添加内容和在末尾添加内容都是行内元素，因为它们与p标签在同一行。通过伪元素添加的元素是内联元素。 p::after是解决浮动布局常用的方法

比如这些地方：

这里使用了伪元素选择器。宽高、内容为空、顶部等

4，字体

4.1

"en">

<元字符集="UTF-8">



我是降临在局势中的魔鬼

点击去掉调试复选框，但没有任何变化。微软雅黑这里要找的是我电脑上的字体。电脑一般默认都有这种字体。

我将字体更改为斜体：

已更改。

还有很多其他网站

将正文字体大小设置为 14px

 body{字体系列: '楷体',"微软雅黑 ";字体大小：14px}

将p标签字体大小设置为1em而不改变大小

点击鼠标调整尺寸，按向上箭头增加主体。 p标签的字数也增加了

也就是说，这里的56px就是1em对应的尺寸。 p标签字体的大小是相对于当前盒子（这里是body）调整的

如下：

"en">

<元字符集="UTF-8">



"盒子">
我是坠入风暴的恶魔

当前字体大小为20px

我希望p标签中的字体是body标签的14px，

然后应用到这个标签上并设置字体大小

这种情况下，box类中的20就不起作用了。

如果我将p标签中的14px更改为1em，

如果我不改变p标签中的14px，而将p标签的高度改为1em，那么：

4.2

普通盒子：

"en">

<元字符集="UTF-8">



"box">

1em等于p标签中的30px字体大小，

这是一个盒子。现在我们需要调整框中 p 标签的高度。之前，我们每次都需要调整p标签的高度。现在我们只需要调整font-size，高度就会随之改变

如果我把右边p标签显示的高度从1em改为60px，那么height的黄色部分的高度就不能随着font-size的改变而改变了。

也就是说，如果使用em的话，它是一个相对单位，相对于当前盒子p的大小。如果我将高度更改为 1em，则黄色高度可以再次随字体大小而变化。

目前高度的大小是通过手动调节font-size的大小来控制的。如果以后有自动控制font-size的大小，也可以自动控制height的大小。

假设我PC上设置的尺寸是1200，1em是50px，那么手机版网页如果达到500px就可以自动按照比例调整尺寸，这样手机版和其他设置不一致像素大小也可以正常使用网页。如果不设置相对大小，那么只要一个客户端的大小不同，像素大小就必须修改一次才能适应其大小，这显然是不合理的。

5.px、ex、rex的区别

5.1

"en">

<元字符集="UTF-8">

如果我从右侧缩小浏览器，红色div的大小不会改变。一般网页可以根据浏览器的显示尺寸来调整网页内容的大小，但这里没有实现这个功能。

也就是我们现在设置的是400px。即使浏览器尺寸发生变化，它仍然是400px。这是固定尺寸，无法适应屏幕尺寸。这个盒子在 PC 上以 400px 看起来非常好。如果还是400px在手机上看起来会更好吗？ 400比手机屏幕还小

一点点。 px是固定单位，也是绝对单位。无论屏幕尺寸是多少，始终是当前尺寸

这样的网页即使在手机上也能正常查看

输入以下代码：

　现在将 font-size 设置为 20px，并使用 em 表示 400px 的宽度和高度。然后还有一个转换单位，即：1em=20px。所以都是20em，所以尺寸没有变化

现在只需要动态修改font-size大小，盒子的大小就会随之改变

这个em是相对于当前的box，也就是当前的区块区域。整个网站的布局中有很多这样的盒子，因此很多盒子之间存在很多相对大小关系。然后是根元素 rem。

5.2、rem示意图

　　　我们最初的最外层标签是html标签，其中包含head标签和body标签。 head 标签还包含元、标题、脚本、样式和链接标签。 body下面有div、p、ul、ol标签。 div标签还有一个a标签，a标签下面可能还有一个span标签。 p标签内有一个input标签。 ul标签下面还有一个li标签。 li下面可能有div标签等，上面的包下面还有很多标签。这就形成了一棵树，像 head 和 body 这样的标签是它的分叉点。树的根是html。有了这张图，写起来就容易多了。 rem的r是root，也就是html的树根。设置 html 的字体大小

为什么需要雷姆？这样编写的网页可以适应不同终端的屏幕尺寸。不需要总是修改html大小来适应不同的终端。有了rem，就可以动态控制了

5.3。 rem使用案例分析

在使用 rem 之前是：

 .box{
字体-大小：20px；
宽度：400px；
高度：400px；
背景-颜色：红色；
}

使用rem后（转换单位为20px=1rem，从中可以得到子div的相对宽高）：

"en">

<元字符集="UTF-8">



class=》盒子》>恶魔征服风暴

为html根设置一个大小，盒子继承html大小。

我现在刚刚写了一个样式。以后只要我修改HTML的font-size，我的子元素div就可以相应改变大小。

即使我使用移动设备，我也只需要修改 HTML 的字体大小。

如果我可以使用js脚本动态修改html的font-size。当这个值重复时，与div的转换关系发生变化，div也发生变化。

假设我的html的font-size从20变成40，那么20rem会变大还是变小？如果20rem没有变化，那么div会随着HTML的font-size按比例增大，但是它们之间的换算关系会变小，而1rem代表的px个数会变大。

如果要保持div不变，而html的font-size变大，那么div的宽度和高度就会变小，这样单位rem和宽度和高度的乘积保持不变， div 的大小保持不变。

 html{字体-尺寸：20px}
。盒子{
字体-大小：12px；
宽度：20rem；
高度：20rem；
背景-颜色：红色；
}

6。详细的字体属性和文本属性。来自副本。

https://www.sychzs.cn/details/351/

6.1 字体属性

字体

在日常工作中，我们会使用word来书写内容。比如我们可以对我们需要设置的内容进行字体、字号、颜色等设置。如图所示。

那么我们在网页中使用css样式时，同样也能做相关的设置。

看个栗子，为网页中的文字设置字体为微软雅黑。

1. body{font-family:'微软雅黑'}

这里要注意不要设置不常用的字体，比如你给我来个’圆体-简’,因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。也就是说，用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。

现在一般网页中喜欢设置”微软雅黑”，如下代码：

1. body{font-family:"Microsoft Yahei"}

因为这种字体既美观又可以在客户端完全的显示出来(用户本地一般都是默认安装的)

备选字体

备选字体是为了防止用户电脑上没有”微软雅黑“这个字体。

语法：

1. body{font-family:'Microsoft Yahei','宋体','黑体'}

备选字体可以有无数个，那么浏览器在去解析这个代码的时候，是从左往右解析的，如果没有微软雅黑，再去找宋体，最后黑体。

字体大小

可以为网页中的文本设置字体大小，那么一般浏览器的字体大小默认为为16px。

最常用的像素单位：px、em、rem，这里咱们先介绍一种单位，px。

px:像素是指由图像的小方格组成的，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。看下图。

​

比如之前我们小时候玩的超级玛丽，这些动图的尺寸就是用像素单位来表示的。

字体颜色

颜色分为三原色：红、绿、蓝，如图所示，三原色进行混合能呈现出不同的颜色

比如红色+绿色=黄色。

颜色表示方法在css中有三种方式：

• 英文单词表示法，比如red、green、blue
• rgb表示法
• 十六进制表示法

对于rgb表示法和十六进制表示法，我们可以通过编辑器中辅助工具（颜色取色器）来取到对应的颜色。这里就不一一赘述了。

字体样式

网站中的字体分为了普通字体和斜体字体，我们可以使用font-style属性来设置对应的字体样式。

代码演示：

4. charset="UTF-8"/>
6. type="text/css">
7. p{
8. font-style: italic;
9. }
10. i{
11. font-style: normal;
12. }

16. 普通字体样式

17. 斜体样式

效果展示：

因为i标签本身具有倾斜的含义，所以可以对已有的倾斜的字体来按照需求进行相应的设置。

字体粗细

网站中我们可以通过font-weight来设置文字的粗体大小。这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细。

6.2文本属性

文本修饰

在网页中有些时候我们需要对文本设置下划线，或者删除线。如图所示：

如果想实现下划线或者删除线，使用text-decoration属性。

文本缩进

比如我们通常写文章的时候，首字母要空两格。那么我们需要使用text-indent属性来实现。它的属性值是像素(px、em、rem)单位。

代码如下：

1. 在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！

效果显示：

我们希望整段文章描述，首行空两格，那么首先要知道字体大小是多少。比如字体大小默认是16px，那么我需要给它设置text-indent:32px;才能实现效果。

代码如下：

4. charset="UTF-8"/>
6. type="text/css">
7. p{
8. text-indent: 32px;
9. }

13. 在人类漫长的历史长河中，推动社会向前的从不会是那些甘于平凡的多数人，相反，他们往往都是一群特立独行桀骜不驯的疯子！这一群疯子中有位传奇的人物，他颠覆性地将人文与科技完美融合，极大地改变了人类计算机领域，改变了人们的生活方式，其一手创建的计算机公司到如今仍是手机行业的传奇，没错！他就是乔布斯！

那么问题来了，如果我更改了p标签的字体大小呢？比如，

1. p{
2. text-indent: 32px;
3. font-size:20px;
4. }

​ 必须再重新的计算text-indent的值来合适。那么这样的话，使得让我们的开发效率降低，后期不宜维护。如何解决这一问题呢？

我们可以设置另一个单位em，它是一个相对单位，相对于p标签的字体大小来进行设置。

如果p标签的字体是16px,那么1em=16px。如果我后期设置了字体大小为20px,那么2em就自动变为40px。

正确设置方式：

1. p{
2. text-indent:2em;
3. font-size:30px;
4. }

行间距

行间距，也叫行高，表示行与行之间的距离。

上个案例的呈现效果会发现，行与行之间的距离有点近，那么为了使文本显示更加美观，我们可以使用line-height属性来进行设置行间距，它的单位为像素。举个例子，我们在word文档中对段落设置。如图所示

在css中设置代码如下：

1. p{
2. font-size: 20px;
3. text-indent: 2em;
4. line-height:2em;
5. }

line-height:2em;表示2倍行间距。

效果展示：

中文字间距、字母间距

我们在使用word文档时，通常会对文字之间的间隔进行设置，如图所示。

如果想在网页排版中设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。

代码如下：

1. p{
2. /*文字之间的距离*/
3. letter-spacing:5px;
4. /*调整英文单词之间的距离*/
5. word-spacing: 10px;
6. }

效果显示：

文本对齐

在word文档中，我们通常都知道对文本甚至图片可以设置对齐方式，比如让文本或者图片居中显示。那么在网页排版中我们可以使用text-align属性来进行设置。

代码如下:

4. charset="UTF-8"/>
6. type="text/css">
7. div{
8. /*给父级标签设置一个边框，表示这是一行，让p段落标签中的内容实现文本对齐的方式，这是文本中心对齐*/
9. border: 1px solid red;
10. text-align: center;
11. }

16. 这是了不起的乔布斯