HTML小白入门基础_4

最新推荐文章于 2024-07-10 01:10:22 发布

有点东西：）

最新推荐文章于 2024-07-10 01:10:22 发布

阅读量100

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/weixin_52612800/article/details/116096322

版权

写在前面

本篇所有内容是对上一篇CSS基础总结的延续，CSS基础部分将于本篇结束。

正文

上一篇设置边距的内容还有一个剩余没有提到，就是应用属性选择器来进行设计。属性选择器的应用格式如下
[属性名=‘属性’]{}

<style>
	[type='radio']{
	margin:20px 10px 10px 20px;
	}
	.yellow-box{
	background-color:yellow;
  padding:20px;
	}
</style>
<div class="yellow-box">
	<input type="radio" name="单选">单选1
  <br>
	<input type="radio" name="单选">单选2
  <br>
	<input type="checkbox" name="多选">多选1
  <br>
	<input type="checkbox" name="多选">多选2
</div>

在这里插入图片描述
长度单位有很多种，上面用的px是像素，还有nm em rem font-size等等，它们分为绝对长度单位和相对长度单位，绝对长度就和现实中长度相差无几，会根据分辨率的不同产生一些误差，相对长度就是根据另一个长度来获得值。

下面让我们先给 body 标签创建一个黑色背景，以便下一步进行操作。

<style>
	body{
	background-color:black;
	}
</style>
<body>
</body>

在这里插入图片描述
这样就得到了一个纯黑色的页面。

下面让我们在给 body 添加一些属性，给他添加上颜色属性，和字体样式属性，这样 body 标签里面的所有标签都会继承这些属性。

<style>
  body {
    background-color: black;
    color:blue;
    font-family:monospace;
  }
</style>
<body>
  <h1>我应该是蓝色的</h1>
</body>

在这里插入图片描述
之前我们通过标签选择器指定标签的格式，我们给 h1 标签创建一个新的格式，让我们看看产生冲突之后是怎么处理的。

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink{
    color:pink;
  }
</style>
<h1 class="pink">Hello World!</h1>

在这里插入图片描述
可以看到类属性的优先级高于继承的属性。

接下来让我们给标签添加第二个颜色类，看看会发生什么。

<style>
	body{
	background-color:black;
	color:blue;
	font-family:monospace;
	}
	.pink{
	color:pink;
	}
	.red{
	color:red;
	}
</style>
<h1 class="pink red">我是什么颜色的</h1>

在这里插入图片描述
产生的颜色是最后一个声明的类的属性，与 class 属性属性里面的顺序无关。

之前还可以通过 id 选择器给指定 id 的标签创建属性，让我们试试再添加一个新的样式，看看会发生什么。

<style>
	body{
	background-color:black;
	color:blue;
	font-family:monospace;
	}
	.pink{
	color:pink;
	}
	.red{
	color:red;
	}
	#hone{
	color:orange;
	}
</style>
<h1 class="pink red" id="hone">我是什么颜色的</h1>

在这里插入图片描述
直接通过 id 赋值优先级更高。

我要是想让它变回粉色那应该怎么办呢，也是有办法的，只要给属性添加 !important 标记就行。

<style>
	body{
	background-color:black;
	color:blue;
	font-family:monospace;
	}
	.pink{
	color:pink !important;
	}
	.red{
	color:red;
	}
	#hone{
	color:orange;
	}
</style>
<h1 class="pink red" id="hone">我是什么颜色的</h1>

在这里插入图片描述
又变回粉色的了，我们是不是看起来很闲。

下面来了解一些颜色的知识。颜色可用过使用#加六个十六进制来表示。

<style>
	body{
	background-color:#000000;
	}
</style>
<body></body>

在这里插入图片描述
和之前一样，产生了一个黑色的背景。还有一些其他的颜色，就不做实例了。

六个十六进制的数字是这样解释的，前两位表示红色的含量，中间两位表示绿色的含量，后两位表示蓝色的含量。也就是RGB。

当两个数字完全相同时可以简化为一个并且能够表示相同的信息。

<style>
	.red_1{
	color:#FF0000;
	}
	.red_2{
	color:#F00;
	}
</style>
<h1 class="red_1">红一
<br>
<h1 class="red_2">红二

在这里插入图片描述
颜色也可以通过其他方式表示，下面我们用RGB方式表示一个颜色。格式如下 rgb（255,255,255）第一个表示红色的含量，第二个表示绿色的含量，第三个表示蓝色的含量。

<style>
	.co{
	color:rgb(255,0,0);
	}
</style>
<h1 class="co">我是什么颜色的</h1>

在这里插入图片描述
在编写c++或者java程序的时候可以定义变量，通过修改变量的值就可以把所有和这个变量有关的值都修改，在网页中也可以设置这样的值，格式如下
–变量名：变量值；

<style>
  .box{
    --co:yellow;
    background:red;
  }
  .box-yellow{
    background:var(--co);
  }
</style>
<div class="box"> 
  红条
  <br>
  <div class="box-yellow">
  黄条
  </div>
</div>

在这里插入图片描述
通过更改 --co 的值就可以更改所有使用它的格式的内容。使用变量的格式如下 var(–变量名)，这样就可以将变量的属性应用。

在之前我们在字体设置时提到过设置回退值，当第一个属性并不能够正产工作时，备用属性就会发挥作用，变量也可以设置回退值，格式如下
var(–变量名,属性)

<style>
	.redfont{
	--co:red;
	color:var(--co,red);
	}
</style>
<h1 class="redfont">我是什么颜色的</h1>

在这里插入图片描述
回退还有另一种方式，在使用变量的属性前通过正常方式设置一遍。

<style>
	:root{
	--co:red;
	}
	.red-box{
	background:red;
	background:var(--co);
	height: 200px;
    width:200px;
	}
</style>
<div class="red-box"></div>

在这里插入图片描述
这样在浏览器不支持CSS变量的时候仍可以正常工作。

上面使用的 :root，里面的变量是在整个页面范围内通用的。

变量也可以被覆盖，只要在需要修改的类中再重新定义一次，就可以实现覆盖。

<style>
  :root{
    --co:red;
  }
  .box-blue{
    --co:blue;
    background:var(--co);
    height: 200px;
    width:200px;
  }
  .box-red{
    background:var(--co);
    height: 200px;
    width:200px;
  }
</style>
<div class="box-blue">
  </div>
<div class="box-red">
  </div>

在这里插入图片描述
被更改的变量的作用域只在被更改的类之中。

结语

本期内容到这里就结束了，觉得有用的话记得点个赞，笔者也是第一次学习相关知识，如若出现错误，还望批评指正，那么我们下个模块再见。

有点东西：）

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML小白入门基础_4

写在前面正文上一篇设置边距的内容还有一个剩余没有提到，就是应用属性选择器来进行设计。属性选择器的应用格式如下[属性名=‘属性’]{}<style> [type='radio']{ margin:20px 10px 10px 20px; } .yellow-box{ background-color:yellow; padding:20px; }</style><div class="yellow-box"> <input type="r
复制链接

扫一扫