写点什么

CSS 学习笔记(七)

作者:lxmoe
  • 2022-11-13
    辽宁
  • 本文字数:999 字

    阅读完需:约 3 分钟

CSS 的三大特性

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

层叠性

我们如果给相同的选择器设置相同的样式,那么一个样式就会覆盖另一个冲突的样式。那么层叠性主要就是解决样式的冲突问题。


层叠性对应着有一些原则:


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

  • 样式不冲突,就不会层叠


举个简单的例子:


<style>div{    color:red;    font-size:15px;}div{    color:pink;}</style><div>它是什么颜色的呢</div>
复制代码


知道了层叠性对应的原则后,我们就可以知道“它是什么颜色的呢”的文字是粉色的啦!再仔细看看,第一个样式我们还给它设置了字体属性,由于第二个样式并没有给它设置,即没有发生冲突,所以就不会发生层叠。

继承性

CSS 中的继承是指子标签会继承父标签的某些样式,比如 text-,font-,line-这些元素开头的可以继承,以及 color 属性。 比如说:


<style>body{    12px/1.5;}div{    font-size:14px;}</style>
复制代码


div 标签是 body 的子标签,因此 div 标签就会继承父标签行高 1.5,这个 1.5 就是说当前元素文字大小 font-size 的 1.5 倍,即 14*1.5。

优先级

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


  • 选择器相同时,就会根据层叠性的原则执行层叠性。

  • 选择器不同时,就会根据选择器的权重执行。


具体的选择器权重如下:


继承或者* < 元素选择器 <类选择器或伪类选择器 < id 选择器 < 行内样式 style="" < !important 重要的


举一个例子简单理解一下:


<style>.test{    color:red;}div{    color:pink;}#demo{    color:purple;}</style><body>    <div class="test" id="demo" style="color:blue">你真好看</div></body>
复制代码


那么我们就思考下,“你真好看”到底是什么颜色的呢?根据优先级,我们可以知道最终的颜色为蓝色,如果我们在元素选择器中添加!important则会先执行这个,最后的颜色就会成为粉色。

CSS 文本属性

除了字体,文本也是修饰文字段落的重要属性,比如为了搭配不同的背景颜色,我们常常使用文本属性修改文字的颜色,除此之外还有文本的颜色、对齐文本、装饰文本、文本缩进、行间距等,有了这些我们就可以轻松让我们的段落变得更好看!

文本颜色

在前文有提到过,color 属性用于定义文本的颜色,基本格式如下:


div{    color:blue;}
复制代码


我们有三种方法来表示颜色分别是:


1.预定义的颜色值


属性值为 pink,blue 等


2.十六进制


属性值为 #FF0000,#29D794 等


3.RGB 代码


rgb(255,0,0)或 rgb(100%,0%,0%)

发布于: 刚刚阅读数: 5
用户头像

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

评论

发布
暂无评论
CSS学习笔记(七)_CSS_lxmoe_InfoQ写作社区