码迷,mamicode.com
首页 > 编程语言 > 详细

JavaEE——CSS3样式表

时间:2017-10-08 15:04:56      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:Java

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

CSS3简介:

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

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

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

image

运行结果:

image

思维导图:

image

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

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

image

运行结果:

image

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

image

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

image

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

image

运行结果:

image

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

错误写法示例:

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

  1. element+element选择器,例如div+p,选择紧接着在div标签后的那个p标签(仅第一个有效),示例:

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

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

image

运行结果:

image

思维导图:

image

CSS3选择器参考:

image

image

JavaEE——CSS3样式表

标签:Java

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
凯哥学堂
加入时间:2016-10-07
  关注此人  发短消息
java学习视频下载:www.kaige123.com
凯哥学堂”关注的人------(0
凯哥学堂”的粉丝们------(1
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!