首页 > 其他分享 >CSS篇十五——(1)

CSS篇十五——(1)

时间:2022-10-01 22:31:07浏览次数:45  
标签:行高 color 元素 样式 十五 font 选择器 CSS

一、CSS的三大特性

CSS有三个非常重要的特性:层叠性、继承性、优先级

1.1 层叠性

给相同选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。

1.1.1 使用方式

层叠性原则:

  • 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式。
  • 样式不冲突,不会层叠。

注意: 所谓冲突是给相同选择器的相同属性设置了不同的属性值。

代码示例:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之层叠性</title>
<style>
div {
color: red;
font-size: 18px;
}

div {
color: green;
}
</style>
</head>

<body>
<div>机会只会留给有准备的人!!!</div>
</body>

</html>

CSS篇十五——(1)_权重

1.2 继承性

CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。

1.2.1 使用方式

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之继承特性</title>
<style>
div {
color: red;
font-size: 20px;
}
</style>
</head>

<body>
<div>
<p>龙生龙,凤生凤,老鼠的儿子会打洞!</p>
</div>
</body>

</html>

CSS篇十五——(1)_选择器_02

  • 恰当地使用集成可以简化代码,降低CSS样式的复杂性
  • 子元素可以继承父元素的样式有(text-,font-,line- 这些元素开头的可以继承,以及color属性)

1.2.2 行高的继承

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之继承特性</title>
<style>
/* div {
color: red;
font-size: 20px;
} */
/* 行高的继承性 */
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}

div {
/* 子元素继承了父元素 body 的行高 1.5 */
/* 这个1.5 就是当前元素文字大小 font-size 的 1.5倍, 因此此处也就是 21px */
font-size: 14px;
}
</style>
</head>

<body>
<!-- <div>
<p>龙生龙,凤生凤,老鼠的儿子会打洞!</p>
</div> -->
<div>行高的继承性</div>
<p>行高的继承性</p>
</body>

</html>

CSS篇十五——(1)_html_03

实际开发中也有下面的写法:

body {
font: 12px/1.5 Microsoft YaHei;
}

CSS篇十五——(1)_权重_04

  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高,则会继承父元素的行高为1.5倍的当前元素字体大小即(此时的子元素的行高是:当前元素的文字大小*1.5)
  • body 行高1.5 这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高,实际开发中比较常见!

1.3 优先级

当同一个元素指定多个选择器,就会有优先级的产生:

  • 选择器相同,则执行层叠性
  • 选择器不同,则根据选择器权重执行

1.3.1 使用方式

选择器权重如下表所示:

选择器

选择器权重

继承 或者 *

0,0,0,0

元素选择器

0,0,0,1

类选择器,伪类选择器

0,0,1,0

ID选择器

0,1,0,0

行内样式 style=""

1,0,0,0

!important 重要的

∞ 无穷大

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三大特性之优先级</title>
<style>
div {
color: pink !important;
}

.priority {
color: steelblue;
}

#testID {
color: orange;
}

/* 父亲的权重为100 */
#father {
color: yellow;
}

/* p继承的权重为0 但p本身的权重为1,因为1>0,所以用的p标签自己的样式 */
/* 以后看标签到底执行哪个样式,先看这个标签有没有直接被选出来 */
p {
color: rgb(83, 15, 15);
}

body {
color: wheat;
}

/* a链接浏览器默认指定了一个样式 蓝色的 有下划线的 a {color: blue;} */
/* 所以要修改a 链接的样式要给a 单独指定 */
a {
color: turquoise;
text-decoration: none;
}
</style>
</head>

<body>
<div class="priority" id="testID" style="color: greenyellow">我和我的祖国,一刻也不能分割</div>
<!-- 权重注意点 -->
<div id="father">
<p>权重注意点</p>
</div>
<a href="#">我是单独的样式</a>
</body>

</html>

CSS篇十五——(1)_html_05

优先级注意点:

1.权重是由4组数字组成,但是不会有仅为。

2.可以理解为类选择器远大于元素选择器,id选择器远大于类选择器,以此类推

3.等级判断从左向右,如果某一位数值相同,则判断下一位数值。

4.简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式表为1000,!important为无穷大。

5.继承的权重为0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0.

标签:行高,color,元素,样式,十五,font,选择器,CSS
From: https://blog.51cto.com/u_13354745/5728517

相关文章

  • CSS篇十四
    一、CSS背景综合案例1.练习内容案例:五彩导航练习价值:1.链接属于行内元素,但是此时需要宽度高度,故需要转换模式2.里面的文字需要水平居中和垂直居中,需要单行文字垂直居中代......
  • CSS入门学习笔记
    CSS入门学习笔记一、CSS简介1、什么是CSS?2、为什么使用CSS?3、CSS的作用二、CSS语法1、CSS基础语法2、CSS注释语法3、CSS应用方法三、CSS选择器1、元素选择器2、类选择器3、......
  • CSS入门学习笔记
    CSS入门学习笔记一、CSS简介1、什么是CSS?2、为什么使用CSS?3、CSS的作用二、CSS语法1、CSS基础语法2、CSS注释语法3、CSS应用方法三、CSS选择器1、元素选择器2、类选择器3、......
  • 我如何在没有 CSS 变量的情况下为我的 Angular 应用程序设置主题
    我如何在没有CSS变量的情况下为我的Angular应用程序设置主题您可能认为为任何Web应用程序设置主题很容易。__你__只需要使用CSS变量,对吧?CSS变量很棒。使用......
  • 带有旋转效果的提交按钮 - 仅限 CSS - 一步一步
    带有旋转效果的提交按钮-仅限CSS-一步一步HTML对于HTML,我们需要一个带有文本和“检查”svg元素的按钮。我们将显示文本并隐藏svg。在按钮焦点上,我们将显示sv......
  • css变量的声明和读取
     1、css变量的声明使用--声明变量($被sass用掉了,@被less用掉了)<style>:root{--color:red;}</style>root为根元素,相当于给html设......
  • css filter 的contrast和blur的奇妙组合- 使用场景
    圆角大杀器,使用滤镜构建圆角及波浪效果!Coco国服第一切图仔 16人赞同了该文章本文,将另辟蹊径,介绍一种使用滤镜去构建圆角的独特方式。首先,......
  • CSS篇十——(3)
    一、CSS的背景CSS设置背景颜色、背景图片、背景平铺、背景图片位置见​​CSS篇十——(2)​​5.背景图像固定(背景附着)background-attachment属性设置背景图像是否固定或者随着......
  • CSS篇十——(1)
    一、CSS的背景通过CSS背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。1.背景颜色background-color......
  • threejs-模型点击以及添加CSS2DObject
    模型点击事件网上教程挺多的,官网好像也有demo,这里我就只记录我碰到的问题以及解决方案:首先要清楚一件事,就是模型的展示需要一个容器,当这个容器是body|window和非全屏的......