通用选择器和id选择器以及背景

不想当码农的辉

已于 2023-02-18 20:20:14 修改

阅读量311

点赞数 1

文章标签： css html css3

于 2023-02-18 19:56:58 首次发布

本文链接：https://blog.csdn.net/m0_73980534/article/details/129102522

版权

学习、生活感悟及下周学习计划

一学习、生活感悟
- 二、下周学习计划
一、通用选择器
- 二、id选择器
- - 三、背景（background属性）

一学习、生活感悟

本周开学，就三个感悟。一个是累，一个是感觉自己像井底之蛙，还有就是学了很多。每天上课、下课、还有去小组，都要走很长的路，每天都要走几万步，面临考核，每天都要学到23：30。然后就是做界面，天天找博客看，感觉自己什么都不会，考核前两天梦里都在写代码。但是也学到了很多东西，也知道怎么写页面，怎么弄背景图，怎么写按钮。

二、下周学习计划

下一次的学习任务还没有出，那我就写一下个人安排。css里的知识点记得迷迷糊糊，有必要从头过一遍。那么下面就来看一下css的一些避雷，以及背景图的设置吧。

一、通用选择器

通用选择器的语法形式为：*{属性：属性值}。它的作用是匹配 html 中的所有元素标签，一般用于在创建一个盒子，包含所有子类，使其他盒子都居于其中，效果是做网页时放大和缩小后网页内容都集中在一起。例如如果不加通用选择器或得到如下图片：
在这里插入图片描述

加通用选择器会显示这样：
在这里插入图片描述
代码如下

<style>
*{color:red;}
</style>

<body>
<h1>红色</h1>
<p>也为红色</p>
</body>

二、id选择器

id选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{…}（S为选择器名）。一般用于链接，点击后会跳转。例如定义一个导航a：
<li><a href="#链接">a</a><li>
在想要跳转到到的地方里加上

<div id="链接">滑倒这里</div>

点击导航a后页面来到”滑倒这里“。

三、背景（background属性）

background定义的效果有：

background-color
background-image
background-repeat
background-attachment
background-position

在css中颜色的定义：
十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

1、background-colo设置元素的背景颜色。属性值：
a、color ：指定背景颜色。
b、transparent ：指定背景颜色应该是透明的。默认。
c、inherit ：指定背景颜色，从父元素继承。

2、background-image可以设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。background-image的一些常用属性值:
a、url('URL') 图像的URL。
b、none 无图像背景会显示。默认。
c、inherit 指定背景图像从父元素继承。
3、background-repeat设置背景图像是否及如何重复。属性值：
a、repeat 背景图像将向垂直和水平方向重复。这是默认。
b、repeat-x 只有水平位置会重复背景图像。
c、repeat-y只有垂直位置会重复背景图像。
d、no-repeat background-image 不会重复。
e、inherit 指定 background-repeat 属性设置从父元素继承。
4、background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。属性值：
a、scroll 背景图片随着页面的滚动而滚动，这是默认的。
b、fixed 背景图片不会随着页面的滚动而滚动。
c、local 背景图片会随着元素内容的滚动而滚动。
d、initial 设置该属性的默认值。
e、inherit 指定 background-attachment 的设置从父元素继承。
background-position 属性设置背景图像位置。如果指定的位置是没有任何背景，图像总是放在元素的左上角。
5、background-position属性设置背景图像的起始位置。属性值：
a、（left top 、left center 、left bottom ）、（right top 、right center 、right bottom）、（center top 、center center 、center bottom）如果仅指定一个关键字，其他值将会是"center"。
b、x% y% 第一个值是水平位置，第二个值是垂直。默认值为：0％0％,左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。
c、xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将50％。
e、inherit 指定background-position属性设置应该从父元素继承。