[Java web编程]第2章 HTML与css网页开发基础（初试CSS3）

一、css的简介
1、什么是css

层叠样式表，css是对html进行样式修饰语言。cascading style sheet

层叠：就是层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的部分应用优先级高的，不冲突的部分共同作用

样式表：就是css属性样式的集合

2、css的作用

(1)修饰html的 使其html样式更加好看

(2)提高样式代码的复用性

(3)html的内容与样式相分离 便于后期维护

3、css的引入方式和书写规范

(1)行内样式

内嵌样式是把css的代码嵌入到html标签中

你好啊 小朋友

语法：

(1)使用style属性将样式嵌入到html标签中

(2)属性的写法：属性：属性值

(3)多个属性之间使用分号;隔开

不建议使用

(2)内部样式

在head标签中使用style标签进行css的引入

语法：

(1)使用style标签进行css的引入

link与@import方式的区别：

(1)link所有浏览器都支持 import部分低版本IE不支持

(2)import方式是等待html加载完毕之后在加载

(3)import方式不支持js的动态修改

CSS样式优先级

行内样式>内部样式表>外部样式表

就近原则

二、css选择器（选择器不止这几种，但是熟悉了解这几种之后你在看其他选择器就很容易去理解了）

选择器的命名不能数字打头

选择器命名规则

2.1 字符采用

实际项目中，建议只采用字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）。避免使用中文。

2.2 慎用数字

以字母开头，避免纯数字，避免数字开头，以保证兼容。以数字开始的类名、ID名仅在IE6/IE7/IE8下被识别，而其它浏览器下则不识别（忽略该规则）。

2.3 区分ID和class

一个ID名在文档中只使用一次，class类名可在文档中多次使用。

2.4 语义化标签

语义化标签是个很大的话题，简单点说，语义化标签就是让css选择器的命名能够反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然，另外一个好处是提高网页对一些特殊浏览设备的友好性。

1、基本选择器

(1)标签选择器

语法：html标签名{css属性}

示例：

hello css!!!

---》这个不能区分相同标签不同样式（引出下边的选择器）

(2)id选择器 id唯一性 —》就好像每个人都有身份证一样，可以识别每个人，你今天穿这个衣服，她穿别的衣服，每个人衣服都不一样，看起来绚丽多彩，有姿有色的，对不对

语法：#id的值{css属性}

示例：

hello css1!!! hello css2!!!

缺点：这样想一下，没有复用性，一个元素对应一个id，一个id对应一个css样式，物以类聚人以群分，想把一样的样式放在一堆儿，不一样的区分开来。（引出下边的选择器）

(3)class选择器 美工大都用class，有时候看到id的是给我们程序员使用的，在js的时候根据id可以获取这个值做相应逻辑处理

语法：.class的值{css属性}

示例：

div1 div2 div3

***选择器的优先级：id>class>元素

基本选择器小结

标签选择器直接应用于HTML标签

类选择器可在页面中多次使用

ID选择器在同一个页面中只能使用一次

基本选择器的优先级

ID选择器>类选择器>标签选择器

标签选择器是否也遵循“就近原则”？

不遵循，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级

父级 子级 分支方面的介绍 画一个图放这里

CSS的高级选择器
层次选择器

选择器

类型

功能描述

E F

后代选择器

祖父和后代的关系

E>F

子选择器

父亲和儿子的关系

E+F

相邻兄弟选择器

哥哥和弟弟的关系（同辈平级）

E~F

通用兄弟选择器

大哥和弟弟妹妹们的关系（同辈平级）

结构伪类选择器

选择器

功能描述

odd奇数行 even偶数行

E:first-child

所有E元素下的第一个子元素（所有的第一个,如果第一个元素不是E元素的话样式是不起作用的）选中需要标识的子元素

E:last-child

所有E元素下的最后一个子元素（所有的第一个，如果最后一个元素不是E元素的话样式是不起作用的）选中需要标识的子元素

E F:nth-child(n)

E元素下的第n个元素是F元素为true，不是F元素为false

E:first-of-type

指定E元素类型的第一个元素

E:last-of-type

指定E元素类型的最后一个元素

E F:nth-of-type(n)

E元素下的第n个F元素，存在true，不存在false

属性选择器

属性选择器

功能描述

E[attr]

具有attr属性的E元素

E[attr=val]

具有attr属性的E元素，并且属性值为val

E[attr^=val]

具有attr属性，并且属性值以val开头的所有E元素

E[attr$=val]

具有attr属性，并且属性值以val结尾的所有E元素

E[attr*=val]

具有attr属性，并且属性值中包含val字符串的E元素

伪元素选择器

a标签的伪元素选择器

语法：

静止状态 a:link{css属性}

悬浮状态 a:hover{css属性}

触发状态 a:active{css属性}

完成状态 a:visited{css属性}

示例一：

点击我吧

实例二：

the afternoon slid

• 点赞
• 收藏
• 分享
• 文章举报

站内首发文章 陈哥哥^ 发布了10 篇原创文章 · 获赞 1 · 访问量 406 私信 关注