Web网页设计之css_2. css 核心基础知识1

一、css 组成

css 主要是由两个东西组成，一个是选择器，还有一个就是声明

1. 选择器

选择器就是需要改变样式的 HTML 元素，好比我们想给 p 标签增加一些层叠样式，那么我们就可以定义一个 p 选择器，这样的话，我们就可以让 HTML 中的 p 标签进行改变了

2. 声明

声明呢也是由两个东西组成，一个是属性，一个是值，其实就和我们 Java 中的 Map 集合一样，一个 key ，一个 value

当然啊，这个声明可以是一个，可以是多个。

二、css 实例

知道了组成，在来说说这个 css 如何去写

css 的 选择器要写在前面，后面 使用 {} ，然后在这个 {} 里面去写声明，当然，每一个声明需要使用 ； 结尾，大概上个图：

这个是我从菜鸟找到的一个图

三、css 中选择器种类

css 中选择器有三种啊，我们来看一下

1. 标签选择器

标签选择器就是以我们的 HTML 标签开头的一个选择器，常见的有 a 标签、p 标签等等

2. class 选择器

class 选择器 就是通过标签中 class 属性后的值进行编写的

3. id 选择器

id 选择器同 class 选择器类似，不过他是看的是 HTML 中标签的 id，只要标有这个 id ，就可以使用这个相对于的样式

四、实际操作

废话不多说，直接上例子

我们弄个 css2 的目录，然后弄个 class1，再弄3个 p 标签，先来看一下标签选择器

标签选择器

然后我们给这个 p 标签上一些样式

我们刚刚说过，标签选择器就是以这个标签为开头，然后用这个括号扩住，里面加样式，这里我加了一个颜色，和文字大小，当然啊，这个为啥写在 <style> 中，这个我们下一讲去说，这个先见一见就好。

我们来看一下这个页面会是啥样

然后我们换一下颜色，我们换成红色

可以看到啊，所有的颜色都变了，不相信的话，我们再写一个 a 标签就知道了

可以看到啊，只对这个 p 标签生效

class 选择器

再来弄一个 HTML，我们再来看看 class 选择器

写法和这个上面的类似，就是改一下，class 选择器定义需要在定义的名字前面加一个点，然后再去写

我们可以看到啊，虽然写了，但是没有生效，原因就是因为我们没有引入，我们现在让第二个 p 标签和最后的 a 标签进行引入

是吧，第一个和第三个 p 标签是没有任何变化，只有这个二、四标签发生了变化，但是为啥变化的不一样，原因是因为标签不同，导致了体现不同，好比一个苹果一个梨，我们都给他削皮，但是味道还是没有变。

id 选择器

再来说最后一个 id 选择器，这个和 class 选择器类似，但是定义的方式不一样，这个需要使用 # 去开头，然后加名字，我们再来看

这样就定义好了一个 id 选择器的 css 样式，但是我们同样需要引入，我们使用 id 就好，我们让第一、四标签的 id 属性等于 id666

是吧，就变了，但是，细心的朋友可能发现了，这个有小红线，这个原因是因为我们这两个标签的 id 相同了才导致的，至于为啥会有这样的提示，当我们学了这个 jQuery 你就明白了

五、注释

这个注释很简单，将你不要的使用 /*  */ 括起来就可以了，我们来看一下

可以看到啊，这个颜色没有了，因为我使用这个东西注释了

 

大家自己练习一下，尤其是 class 选择器和标签选择器，我们以后会常用这两个，最后一个我是不常用~

有问题加我 QQ：2100363119