初识CSS

最新推荐文章于 2024-09-21 21:10:14 发布

点点稻花香

最新推荐文章于 2024-09-21 21:10:14 发布

阅读量393

点赞数

文章标签： css class html java前端 web前端

本文链接：https://blog.csdn.net/tuzhiaichitang/article/details/76577669

版权

前一篇文章我大致的介绍了一下属性和属性值，相信同学们对这2个东西也有了一定的概念。我这里给大家重新复习一下，
这里写图片描述
Class 是属性名， ruirui 是属性值，这个相信大家很容易理解。注意一点，属性是固定的，不可以随便篡改。属性值可以自己定义，但是最好和变量的命名规则一致。属性=”属性值” 这个双引号一定要加，并且双引号必须是英文输入法下的双引号。
在这里我提一下命名的规则：
1.属性值不允许定义成数字。
2.以字母开头，尽量全部用英文字母
3.命名一定要有含义，不能取aaa,bbb,ccc这种毫无意义的命名。

常用的属性：
id : 就是代表网页元素里的唯一标识符，一个元素的id 相当于一个人的身份证，是整个网页里唯一存在的。
这里写图片描述
注意，这些id在整个网页里仅此一份，在我们的css和jsjq里，id将会被非常频繁的用到。获取id就等同于获取了id所在的这个元素.
class : 代表的是网页元素里的样式标识符，一个元素的class可以和其他元素的 class相同。
这里写图片描述
我解释一下这段代码，在这里，3个div都被赋予了相同的class，即firstclass,同时，他们又拥有自己不同的class命名，一个class属性中可以赋予多个class属性值，中间以空格分隔开。例如，以上代码上第一个div的class就同时拥有3个class属性值，即firstclass、fc和newclass。具体有什么作用，我们以后会讲到。

那么class和id有什么用呢，我们的css和JS在寻找一个元素的时候，90%都是根据id或者class来寻找元素，所以，只要编写html代码，id和class就会无时无刻的伴随着你们。

那么css如何跟id和class结合在一起呢？css又有什么用呢，我举个例子：
这里写图片描述
比如我定义了这么多的div，我要给每个div加入相同的样式，最后我实现了这样的一个效果：

效果虽然实现了，但是这样写的可读性非常的差。容易让人眼花缭乱，如果有一天，需求变了，比如说要将黑色的背景换成黄色的。那么，按照这个写法，我们还要一个个的去将style里的background变过来，非常的麻烦。那么如果把代码变的简洁一些，一步到位呢？

这个时候，就需要用到css了，css是网页中的样式，定义在<head></head>之间，css也有自己的元素标签<style></style>，我们所有的样式都包含在这个<style>标签中。如图：
这里写图片描述
我们将<div>标签中的所有style全部删掉，换上class

之后，我们在style中定义class，我先上代码和效果：

效果如图：

大家可以看一下更改之后整个代码的直观感受：

是不是比之前定义了一堆的style的感觉清晰了很多。这就是css的作用所在。同时，如果这个时候我们需要更改div的样式，只需要更改style里的css样式即可，所有定义了这个class的元素都会同时发生改变。

那么id 如何用呢？比如说我想对其中的某一个div 进行单独的改变。这个时候，我们就要对需要改变的这个DIV增加一个id 唯一标识符,如图
这里写图片描述
之后在css中定义该div的样式

最后效果如下图：

这样，我们对同一类div(class),唯一的一个DIV(id),都能在style css样式中进行很好很方便的定义。

不知道大家发现了没有，在style 中，获取class 和 id 的方式并不是相同的，细心的同学可能注意到了这点：
这里写图片描述
我们在定义class的时候是用 . + class的名称进行定义，定义id 的时候是用 # + id的名称进行定义。
比如，<div class=”aaaaa” id=”bbb”></div> 那么在style中的定义就是

<style>

.aaaaa{
属性名:属性值;
属性名:属性值;
属性名:属性值;
属性名:属性值;
}

bbb{

属性名:属性值;
属性名:属性值;
属性名:属性值;
属性名:属性值
}

</style>

注意，这里的aaaa bbb 仅做展示使用为方便理解，实际开发中千万别用这样毫无意义的名称，我已经在上面提到过了。

但是，这个时候如果有这样的一个场景，我有10个div,我要给其中5个div增加一些别的东西。那按照我们目前所学到的知识，是不是要给这5个div分别增加一个id，然后在style中分别将这些id定义相同的css呢？实际上，这样的做法又会显得冗余和复杂，前面我提到过，一个class 可以有多个class属性值，中间以空格分割。这多个class属性值在这里就体现出了作用，我们先给需要特殊改变的div定义多个class属性值，如图：
这里写图片描述
之后我们在style中定义：

效果如图：

那么，被我们定义了3个class = “change” 的div发生了改变。这就是class和id的作用。

但是注意一点，如果一个元素同时定义了id和class,我们又在style中同时对该id 和class增加了样式，那么，id的优先级是大于class的，
这里写图片描述
这个div 同时定义了class 和 id ,又同时在style中被定义了width 和backgroud,那么，在取值的时候，html只会取id所定义的width和background,而不会取class中所定义的width和background。同理，如果多个class之间定义了相同的css,那么，按照阅读顺序，后面定义的class的css会覆盖前面class的css。

最后，针对今天的教学内容，其中有一些地方，比如属性值的命名，理论上来讲，并不是不可以定义成纯数字，width = 640 也可以不加双引号，定义多个相同的id页面也不会报错，也可以运行，但是千万不要这样去做。在今后的开发甚至以后的工作中，这样的做法会给别的开发人员造成很大的困扰而导致工作进度拖延甚至无法进行。这里就要每一位学java的同学自觉的去遵守这些规则，方便自己，方便他人。