Web前端开发基础 课件 项目三 CSS基础知识.pptx

项目三CSS基础知识

【知识点】1.掌握CSS基础选择器，能够运用CSS选择器定义标记样式。2.熟悉CSS文本、边框、列表、表格、图片、背景样式、超链接样式属性。3.掌握盒子的相关属性，能够制作常见的盒子模型效果4.理解元素的浮动，能够为元素设置浮动样式。5.掌握元素的定位，能够为元素设置常见的定位模式。6.掌握弹性盒子的基本概念、原理和常用属性。【技能点】1.能使用CSS选择器获取网页元素2.能使用CSS单位、字体样式、文本样式、颜色、背景等美化页面样式3.能使用CSS盒模型、区块、浮动、定位等设计网页布局课程目标【素质目标】1．激发学生探索求真的精神，形成追求完美的品质2．培养吃苦耐劳、精益求精的工匠精神3．培养科技强国的家国情怀和担当精神

·1.目录ContentsCSS概述CSS选择器文本格式背景样式盒模型浮动定位元素的显示与隐藏弹性布局

3.1CSS概述【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。·CSS指层叠样式表(Cascading?Style?Sheets)，通常单独存放在.css文件中，W3C（万维网联盟）推出的CSS标准旨在使HTML文档结构和样式分离。目前所有的主流浏览器均支持层叠样式表。·CSS样式结合HTML一起使用，起到美化网页的作用。有三种方式：3.1.1行内样式在标签体内使用style属性来指定css代码。标签style=”属性1:属性值1;属性2:属性值2…”/标签基本语法格式：

技能训练3-1行内样式【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。1、新建项目chapter3，新建html文件ex3-1.html2、编写代码在上述代码中设置了h2标签的字体为20像素，红色显示。3、运行效果如下：1.!DOCTYPEhtml2.html3. head4. metacharset=UTF-85. title行内样式/title6. /head7. body8. h2style=font-size:20px;color:red;Web前端开发工程师/h29. /body10./html

3.1CSS概述【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。·CSS指层叠样式表(Cascading?Style?Sheets)，通常单独存放在.css文件中，W3C（万维网联盟）推出的CSS标准旨在使HTML文档结构和样式分离。目前所有的主流浏览器均支持层叠样式表。·CSS样式结合HTML一起使用，起到美化网页的作用。有三种方式：3.1.2内部样式在head标签内，定义style标签，style标签体内的内容就是css代码。style标签{属性1:属性值1;属性2:属性值2;…}/style基本语法格式：

技能训练3-2内部样式【目标要求】建立站点、效果图分析、页面布局、定义公共样式【实践步骤】（参见视频）1、建立站点（1）创建网站根目录在D盘新建一个文件夹作为网站的根目录，将文件夹命名为Example（2）在根目录下新建文件打开Example，在根目录下新建css文件夹、images文件夹、video文件夹、audio文件夹、fonts文件夹，分别用于存放网页制作中所用到的css样式、图片、视频文件、音频文件、字体文件。1、新建项目chapter3，新建html文件ex3-2.html2、编写代码在上述代码中使用了内部样式，