网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的基本语法.pptx

本节介绍CSS的基本语法。CSS3基础CSS的基本语法

目录CSS3基础4.1CSS设计与编写原则4.2在HTML中使用CSS的方法4.3CSS的两个主要特性4.4CSS的基本语法4.5CSS的选择器4.6属性值的写法和单位4.7HTML文档结构与元素类型4.8实训——制作内容详情页习题4

4.4CSS的基本语法4.41基本语法CSS的基本语法由两部分组成，其格式为：selector{property1:value1;property2:value2;...}选择器{属性1:属性的值1;属性2:属性的值2;...}

4.4CSS的基本语法Selector选择器property:value为样式声明

4.4CSS的基本语法例如，下面这行代码的作用是将h3元素内的文字颜色定义为蓝色，同时将字体大小设置为18像素。h3{color:yellow;font-size:18px;}下图的示意图展示了上面这段代码的结构。

4.4CSS的基本语法4.4.2注意事项1.属性名和属性值要正确property（属性）是由官方CSS规范约定的，而不是自定义的。每个属性有一个值value（属性值），属性和值用冒号分开。2.需要加引号如果值为若干单词，单词之间有空格，则要给值加引号。例如下面代码：p{font-family:sansserif;}

4.4CSS的基本语法3.多重声明如果要定义不止一个声明，则需要用分号将每个声明分开。p{text-align:center;color:red;}

4.4CSS的基本语法4.代码的可读性、每行只描述一个属性，属性末尾都需要加上分号。body{font-family:华文中宋;/*设置字体*/font-size:12px;/*设置文字大小为12px*/color:#000;/*设置文字颜色为黑色*/background-color:#fff;/*设置背景颜色为白色*/}对于有一定基础的Web设计人员可以将上述代码改写为如下：/*定义body的样式为12px大小的黑色华文中宋字体，且背景颜色为白色*/body{font-family:华文中宋;font-size:12px;color:#000;background-color:#fff;}

4.4CSS的基本语法5.空格多重声明和空格的使用使得样式表更容易被编辑。body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}空格不会影响CSS样式的效果。

4.4CSS的基本语法6.大小写CSS对大小写不敏感，但在编写样式时，推荐属性名和属性值都用小写。

4.4CSS的基本语法7.选择器的分组具有相同样式的选择器，可以将这一系列的选择器分成一个组，用逗号将每个选择器隔开。例如，定义h1~h6标题的颜色都为蓝色，对所有的标题元素合为一组。h1,h2,h3,h4,h5,h6{color:blue;}

非常棒的你！又开始学习新的内容《网页设计与制作教程Web前端开发第7版》