网页设计与制作教程——Web前端开发(第6版)课件第4章 CSS3基础4.4
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）记得写引号 如果值为若干单词，则要给值加引号。例如下面代码： p {font-family: "sans serif";}
4.4 CSS的基本语法
（3）多重声明 如果要定义不止一个声明，则需要用分号将每个声明分开。 就像这样： p {text-align:center; color:red;} （4）代码的可读性、 一般来说，为了方便阅读样式，应该在每行只描述一个属性，属性末尾都需要加上分 号，这样可以增强样式定义的可读性。 body{ font-family: "华文中宋"; /*设置字体*/
Biblioteka Baidu
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
非常棒的你！又开始学 习新的内容
4.4 CSS的基本语法
1. 基本语法 CSS的基本语法由两部分组成，其格式为： selector{property1: value1; property2: value2; ... } /* 选择符{属性: 属性值} */
selector被称为选择器，选择器决定了样式定义需要改变的HTML元素。 property: value被称为样式声明，由一条或多条样式，并用冒号隔开，以分号结束， 包含在一对大括号“{}”内。每一条样式声明由property（属性）和value（属性的值） 组成。 h3 {color: yellow; font-size: 18px;}
4.4 CSS的基本语法
例如，下面这行代码的作用是将h3元素内的文字颜色定义为蓝色，同时将字体大小 设置为18像素。
h3 {color: yellow; font-size: 18px;}
下图的示意图展示了上面这段代码的结构。
4.4 CSS的基本语法
2. 注意事项 （1）属性名和属性值要正确 property（属性）是由官方CSS规范约定的，而不是自定义的。 每个属性有一个值value（属性值），属性和值用冒号分开。
font-size: 12px; /*设置文字大小为12px*/ color: #000; /*设置文字颜色为黑色*/ background-color: #fff; /*设置背景颜色为白色*/ } 对于有一定基础的Web设计人员可以将上述代码改写为如下： /*定义body的样式为12px大小的黑色华文中宋字体，且背景颜色为白色*/ body{font-family:"华文中宋"; font-size:12px; color:#000; background-color:#fff;}
4.4 CSS的基本语法
（5）空格 多重声明和空格的使用使得样式表更容易被编辑。
（6）大小写 CSS对大小写不敏感，但在编写样式时，推荐属性名和属性值都用小写。
（7）选择器的分组 具有相同样式的选择器，可以将这一系列的选择器分成一个组，用逗号将每 个选择器隔开。 例如，定义h1~h6标题的颜色都为蓝色，对所有的标题元素合为一组。 h1,h2,h3,h4,h5,h6 { color: blue; }
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第4章 CSS3基础
4.4 CSS的基本语法
本节介绍CSS的基本语法。
目录
第4章 CSS3基础
4.1 CSS简介 4.2 在HTML中使用CSS的方法 4.3 CSS的两个主要特性 4.4 CSS的基本语法 4.5 CSS的选择器 4.6 属性值的写法和单位 4.7 HTML文档结构与元素类型 4.8 实训——制作内容详情页 习题4
4.4 CSS的基本语法
（3）多重声明 如果要定义不止一个声明，则需要用分号将每个声明分开。 就像这样： p {text-align:center; color:red;} （4）代码的可读性、 一般来说，为了方便阅读样式，应该在每行只描述一个属性，属性末尾都需要加上分 号，这样可以增强样式定义的可读性。 body{ font-family: "华文中宋"; /*设置字体*/
Biblioteka Baidu
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
非常棒的你！又开始学 习新的内容
4.4 CSS的基本语法
1. 基本语法 CSS的基本语法由两部分组成，其格式为： selector{property1: value1; property2: value2; ... } /* 选择符{属性: 属性值} */
selector被称为选择器，选择器决定了样式定义需要改变的HTML元素。 property: value被称为样式声明，由一条或多条样式，并用冒号隔开，以分号结束， 包含在一对大括号“{}”内。每一条样式声明由property（属性）和value（属性的值） 组成。 h3 {color: yellow; font-size: 18px;}
4.4 CSS的基本语法
例如，下面这行代码的作用是将h3元素内的文字颜色定义为蓝色，同时将字体大小 设置为18像素。
h3 {color: yellow; font-size: 18px;}
下图的示意图展示了上面这段代码的结构。
4.4 CSS的基本语法
2. 注意事项 （1）属性名和属性值要正确 property（属性）是由官方CSS规范约定的，而不是自定义的。 每个属性有一个值value（属性值），属性和值用冒号分开。
font-size: 12px; /*设置文字大小为12px*/ color: #000; /*设置文字颜色为黑色*/ background-color: #fff; /*设置背景颜色为白色*/ } 对于有一定基础的Web设计人员可以将上述代码改写为如下： /*定义body的样式为12px大小的黑色华文中宋字体，且背景颜色为白色*/ body{font-family:"华文中宋"; font-size:12px; color:#000; background-color:#fff;}
4.4 CSS的基本语法
（5）空格 多重声明和空格的使用使得样式表更容易被编辑。
（6）大小写 CSS对大小写不敏感，但在编写样式时，推荐属性名和属性值都用小写。
（7）选择器的分组 具有相同样式的选择器，可以将这一系列的选择器分成一个组，用逗号将每 个选择器隔开。 例如，定义h1~h6标题的颜色都为蓝色，对所有的标题元素合为一组。 h1,h2,h3,h4,h5,h6 { color: blue; }
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第4章 CSS3基础
4.4 CSS的基本语法
本节介绍CSS的基本语法。
目录
第4章 CSS3基础
4.1 CSS简介 4.2 在HTML中使用CSS的方法 4.3 CSS的两个主要特性 4.4 CSS的基本语法 4.5 CSS的选择器 4.6 属性值的写法和单位 4.7 HTML文档结构与元素类型 4.8 实训——制作内容详情页 习题4