JavaEE——CSS3样式表

Posted 2020-10-09

声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

CSS3简介：

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3完全向后兼容，所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。

样式在html中的书写方式： 样式有三种书写方式，第一种是直接在style属性上写，style里有很多的样式子属性，不同的字属性使用分号分开，示例：

运行结果：

这种写法适合用于个别标签需要单独样式的情况下，如果好几个标签都需要同样的样式的话，使用这种写法就会导致很多重复的代码，不利于网页的优化，所以第二种写法就是在< style >标签里声明样式属性，之后只要是该样式里定义的标签就会统一使用< style >里声明的样式，示例：

运行结果：

第三种写法是在css文件里声明样式，这种方式好处是可以共享更多的网页，因为只需要使用< link >标签引用这个文件就可以使用文件里声明的样式了。示例：
创建一个后缀为. css的文件，将样式属性的声明写在文件里：

然后在HTML文件里使用< link >标签引用这个文件：

运行结果：

思维导图：

样式选择器：
并不是所有的标签都需要使用同一个样式，而且不是全部标签都得使用样式，那么同样的标签要使用不同的样式就需要使用到样式选择器了。
在这里介绍几种较为常用的样式选择器：

1. element选择器，直接写标签的名称，也就是上面使用的那种方式，示例：

运行结果：

2.. class选择器，要使用这个选择器的标签需要使用class属性引用这个选择器的名称，也叫做类样式，示例：

运行结果，只有使用class属性引用了选择器的标签才会使用这个选择器里的样式，这些选择器都可以写在css文件里：

3.# id选择器，要使用这个选择器的标签需要使用id属性来引用这个选择器的名称，示例：

运行结果：

在这里要说明一下. class选择器与# id选择器的区别：id是唯一的是不可重复的，一个页面只可以使用一次，class则可以多次引用，一个页面内可以使用多次。虽然你重复地使用# id选择器浏览器也可以正常解析，有些IDE也不会报语法错误，但是当你需要用javascript通过id来控制div时就会出现错误。
id相当于是一个唯一的标识，用于区分不同的结构和内容，就象身份证或名字，如果一个屋子有2个人同名，就会出现混淆。class则是一个样式，可以套在任何结构和内容上，就象一件衣服。
所以从概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
当我们使用# id选择器时，应当遵循规范的语法不重复地去使用，要明白这两个选择器的区别。

错误写法示例：

运行结果：

4.*选择器，这个选择器表示给所有的标签都加上这个选择器里的样式：

运行结果：

1. element,element选择器，使用逗号隔开可以给多个标签定义样式，示例：

运行结果：

1. element element选择器，例如div p，选择给div内部所有的p标签定义样式，示例：

运行结果：

1. element+element选择器，例如div+p，选择紧接着在div标签后的那个p标签（仅第一个有效），示例：

运行结果：

7.[attribute]选择器，[]里写属性名称，例如[title]，只要写有括号里定义的属性名称就会使用此选择器的样式，示例：

运行结果：

这个选择器也可以自己定义属性的名称，不一定要使用html里的属性名称，只要标签里的属性名称和选择器上定义的属性名称相同就可以了，示例：

运行结果：

8.[attribute=value]选择器，只要标签里属性的名称与值和选择器里定义的属性名称和值相同，就会使用这个选择器里的样式，示例：

运行结果：

思维导图：

CSS3选择器参考：