标签:Java
声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3完全向后兼容,所以没有必要修改的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性,这些会允许实现新的设计效果(譬如动态和渐变),而且可以很简单的设计出现在的设计效果(比如说使用分栏)。
样式在HTML中的书写方式: 样式有三种书写方式,第一种是直接在style属性上写,style里有很多的样式子属性,不同的字属性使用分号分开,示例:
运行结果:
这种写法适合用于个别标签需要单独样式的情况下,如果好几个标签都需要同样的样式的话,使用这种写法就会导致很多重复的代码,不利于网页的优化,所以第二种写法就是在< style >标签里声明样式属性,之后只要是该样式里定义的标签就会统一使用< style >里声明的样式,示例:
运行结果:
第三种写法是在css文件里声明样式,这种方式好处是可以共享更多的网页,因为只需要使用< link >标签引用这个文件就可以使用文件里声明的样式了。示例:
创建一个后缀为. css的文件,将样式属性的声明写在文件里:
然后在HTML文件里使用< link >标签引用这个文件:
运行结果:
思维导图:
样式选择器:
并不是所有的标签都需要使用同一个样式,而且不是全部标签都得使用样式,那么同样的标签要使用不同的样式就需要使用到样式选择器了。
在这里介绍几种较为常用的样式选择器:
运行结果:
2.. class选择器,要使用这个选择器的标签需要使用class属性引用这个选择器的名称,也叫做类样式,示例:
运行结果,只有使用class属性引用了选择器的标签才会使用这个选择器里的样式,这些选择器都可以写在css文件里:
3.# id选择器,要使用这个选择器的标签需要使用id属性来引用这个选择器的名称,示例:
运行结果:
在这里要说明一下. class选择器与# id选择器的区别:id是唯一的是不可重复的,一个页面只可以使用一次,class则可以多次引用,一个页面内可以使用多次。虽然你重复地使用# id选择器浏览器也可以正常解析,有些IDE也不会报语法错误,但是当你需要用JavaScript通过id来控制div时就会出现错误。
id相当于是一个唯一的标识,用于区分不同的结构和内容,就象身份证或名字,如果一个屋子有2个人同名,就会出现混淆。class则是一个样式,可以套在任何结构和内容上,就象一件衣服。
所以从概念上说就是不一样的:id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。
当我们使用# id选择器时,应当遵循规范的语法不重复地去使用,要明白这两个选择器的区别。
错误写法示例:
运行结果:
4.*选择器,这个选择器表示给所有的标签都加上这个选择器里的样式:
运行结果:
运行结果:
运行结果:
运行结果:
7.[attribute]选择器,[]里写属性名称,例如[title],只要写有括号里定义的属性名称就会使用此选择器的样式,示例:
运行结果:
这个选择器也可以自己定义属性的名称,不一定要使用html里的属性名称,只要标签里的属性名称和选择器上定义的属性名称相同就可以了,示例:
运行结果:
8.[attribute=value]选择器,只要标签里属性的名称与值和选择器里定义的属性名称和值相同,就会使用这个选择器里的样式,示例:
运行结果:
思维导图:
CSS3选择器参考:
标签:Java