web实用网页设计方法css-4
web网页开发课程设计
web网页开发课程设计一、课程目标知识目标：1. 让学生理解Web网页开发的基本概念，掌握HTML、CSS和JavaScript的基础知识。
2. 学习并运用网页设计原则，如页面布局、色彩搭配、字体选择等，提高网页审美能力。
3. 了解Web前端框架的作用，学会使用至少一种常见框架，如Bootstrap、Vue.js等。
技能目标：1. 学会使用网页开发工具，如Visual Studio Code、Sublime Text等，编写规范的代码。
2. 培养学生独立完成静态网页设计与开发的能力，实现网页的响应式设计，适应不同设备。
3. 学会利用调试工具，如Chrome开发者工具，调试并优化网页性能。
情感态度价值观目标：1. 培养学生对Web网页开发的兴趣，激发学习积极性，提高创新意识。
2. 培养团队协作精神，学会与他人共同解决问题，分享学习经验。
3. 增强学生的网络安全意识，遵循道德规范，自觉抵制不良信息。
本课程针对初中年级学生，结合学生年龄特点，注重培养学生的学习兴趣和动手能力。
在教学过程中，充分考虑学生的认知水平和接受程度，循序渐进地引导他们掌握Web网页开发知识。
课程目标旨在使学生在掌握基本知识的同时，提高实际操作能力，培养良好的团队协作精神和价值观。
通过具体的学习成果分解，教师可针对性地进行教学设计和评估，确保课程目标的实现。
二、教学内容1. 网页基础知识- HTML基础：学习HTML标签、属性、页面结构等。
- CSS基础：学习选择器、盒模型、布局、样式优先级等。
- JavaScript基础：了解变量、数据类型、运算符、函数等。
2. 网页设计与布局- 学习网页设计原则，如页面布局、色彩搭配、字体选择等。
- 学习并实践响应式设计，掌握媒体查询和移动端布局技巧。
3. 前端框架与库- 了解Bootstrap框架，学习栅格系统、样式组件等。
- 了解Vue.js框架，学习基本概念、指令、生命周期等。
4. 网页开发工具与调试- 学习使用Visual Studio Code、Sublime Text等开发工具。
学会使用HTML和CSS进行网页设计
学会使用HTML和CSS进行网页设计网页设计是当今互联网发展的重要领域之一，学会使用HTML和CSS进行网页设计已成为许多人追求的技能。
HTML和CSS是网页设计的基础，它们可以实现丰富多样的网页布局和样式，给用户呈现出各种精美的界面。
本文将就学会使用HTML和CSS进行网页设计展开讨论，为读者提供一些实用的技巧和建议。
一、概述 HTML和CSSHTML（超文本标记语言）是一种用来创建网页的标准标记语言，它定义了网页的结构和内容。
CSS（层叠样式表）则是一种用来控制网页样式和布局的样式表语言。
HTML可以看作是网页的骨架，而CSS则是为网页赋予美丽外观的工具。
二、构建网页结构在使用HTML进行网页设计时，首要任务是构建网页的结构。
HTML提供了一系列的标签来定义页面的元素，如标题、段落、列表等。
通过合理使用这些标签，可以使网页结构更加清晰有序，提高用户体验。
对于初学者来说，推荐使用语义化标签来构建网页结构。
语义化标签具有可读性强、结构清晰等特点，例如使用<header>标签定义页面的头部，<nav>标签定义导航菜单，<main>标签定义主要内容区等。
除了使用语义化标签，还可以使用DIV标签来划分页面的不同区域。
通过给不同的DIV添加样式，可以实现更灵活的布局效果。
三、优化页面样式CSS是控制网页样式的重要工具，使用CSS可以使网页呈现出更漂亮的外观。
以下是一些优化页面样式的技巧：1. 使用选择器：选择器用于选择要应用样式的HTML元素。
常见的选择器有标签选择器、类选择器、ID选择器等。
合理使用选择器可以提高样式的灵活性和复用性。
2. 理解权重：CSS样式的权重决定了应用的优先级。
一般来说，ID选择器的权重最高，其次是类选择器和属性选择器，最后是标签选择器。
理解权重的规则可以帮助我们更好地控制样式的应用。
3. 使用盒模型：CSS中的盒模型决定了盒子（元素）的尺寸。
网页设计与制作 第3章 CSS技术基础
第3章 CSS技术基础
用户可以在CSS中插入注释来说明用户代码的意思，
3.3 在网页中使用CSS
3.3.1 在标记符中直接嵌套样式信息
在标记符中直接嵌套样式信息又称为“局部引 用”，即将样式直接嵌套在 HTML 标记里使用的。 用这种方法，可以很简单的对某个元素单独定义 样式。 使用style属性可以在HTML标记符中直接嵌入 样式定义，如下所示： <标记符style："property l：value l；property 2： value 2；……">
3.4.2 文本属性
1．文字间隔属性(word-spacing)
文字间隔属性定义一个附加在文字（单词）之 间的间隔数量。该值必须符合长度格式，允许使
用负值。
需要特别说明的是，该属性是针对英文单词的
间隔，而不是中文的文字间隔，中文的文字间隔
应该用下面讲到的letter-spacing。同时在中文版的 IE浏览器中也不支持该属性。
CSS 的主要功能是通过对 HTML 选择器进行设定，
来实现对网页中的字体、字号、颜色、背景、图像记
其他元素的控制，使网页能够完全按照设计者的要求
来显示。
3.2 CSS样式
3.2.1 CSS样式表组成
CSS 的定义由三部分构成：选择符 selector、属性 property和属性值value。其基本格式如下： selector{property l ： value l ； property 2 ： value 2；……} property表示由CSS标准定义的样式属性，value表示 样式属性的值。
网页设计与制作教程(第4版)电子教案
客户端动态技术不需要与服务器进行交互，实现动态功 能的代码往往采用脚本语言形式直接嵌入到网页中。服务器 发送给浏览者后，网页在客户端浏览器上直接响应用户的动 作。常见的客户端动态技术包括JavaScript、ActiveX和 Flash等。
让浏览者访问。上传工具选择合适与否将影响对网站更新维 护的效率。 1．CuteFTP 2．FlashFXP 3．LeapFTP 4．其他上传工具 （1）UploadNow!上传工具 （2）WS-FTP上传工具 Dreamweaver软件自身也具有上传网页的功能。
1.6 常用网页制作软件
1.6.5 网页设计工具的发展动向
从平面设计的角度来看，每个虚拟界面就是一个版面， 可以利用平面设计理念对其进行设计。但是，网页毕竟是计 算机技术和多媒体技术的产物，具有某些一般版面所没有的 特点和性质。为了对虚拟版面进行设计，就必须拓展设计的 范围，丰富设计的手段，如对于版面各种媒介的设计与制作， 要应用一些新的技术。
2.1 基本概念
如果在浏览器的地址栏中输入网站地址，浏览器会自动 连接到这个网址所指向的网络服务器，并出现一个默认的网 页（一般为index.html或default.html），这个最先打开 的默认页面就被称为“主页”或“首页”。
1.1 网页、网站的概念
1.1.2 静态网页和动态网页
静态网页指客户端的浏览器发送URL请求给WWW服务 器，服务器查找需要的超文本文件，不加处理直接下载到客 户端，运行在客户端的页面是已经事先做好并存放在服务器 中的网页。其页面的内容使用的仅仅是标准的HTML代码， 静态网页通常由纯粹的HTML/CSS语言编写。
版面编排的首要任务就是根据网页传达内容的需要，将 不同的文字和图片按照一定的次序用最合理的编排和布局组 成一个有机的整体并展现出来。版面编排应注意以下几点。
web前端课程设计
web前端课程设计一、课程目标知识目标：1. 让学生掌握Web前端开发的基本概念，理解HTML、CSS和JavaScript在网页中的作用和关系。
2. 学会使用HTML构建网页结构，掌握常见标签的使用方法。
3. 掌握CSS基本语法，能实现网页的布局和样式设计。
4. 掌握JavaScript基本语法，实现简单的交互效果。
技能目标：1. 培养学生独立完成静态网页设计与开发的能力。
2. 提高学生利用Web前端技术解决实际问题的能力。
3. 培养学生的团队协作和沟通能力，能与他人共同完成项目。
情感态度价值观目标：1. 培养学生热爱互联网技术，对Web前端开发产生浓厚的兴趣。
2. 培养学生具备良好的编程习惯，注重代码的可读性和可维护性。
3. 培养学生的创新意识和批判性思维，善于发现和解决问题。
课程性质：本课程为实践性较强的课程，注重培养学生的动手能力和实际操作技能。
学生特点：学生具备一定的计算机基础，对Web前端技术有一定了解，但实践经验不足。
教学要求：结合课程性质和学生特点，教学过程中应以案例为主线，引导学生动手实践，注重培养学生的实际操作能力和解决问题的能力。
将课程目标分解为具体的学习成果，以便于教学设计和评估。
二、教学内容1. 网页基础知识- 网页的基本概念- 网页的组成元素2. HTML基础- HTML基本结构- 常见HTML标签及其使用方法- 表格、表单、列表等HTML元素的运用3. CSS样式- CSS基本语法- 选择器、属性和值- 盒子模型与布局- 响应式设计4. JavaScript基础- JavaScript语法基础- 数据类型、变量、运算符- 控制语句、函数- 事件处理、DOM操作5. 综合实战- 静态网页设计与开发- 响应式网页设计- 简单的动态效果实现教学内容安排与进度：第一周：网页基础知识，HTML基础第二周：CSS样式，盒子模型与布局第三周：JavaScript基础，事件处理第四周：综合实战，项目开发与优化教材章节关联：1. 网页基础知识——《Web前端开发基础》第1章2. HTML基础——《Web前端开发基础》第2-3章3. CSS样式——《Web前端开发基础》第4-5章4. JavaScript基础——《Web前端开发基础》第6-7章5. 综合实战——结合整本教材内容进行项目实践教学内容确保科学性和系统性，以教材为基础，结合实际案例，引导学生掌握Web前端技术的基本知识与技能。
CSS3与页面布局学习总结（四）——页面布局的多种方法
CSS3与页⾯布局学习总结（四）——页⾯布局的多种⽅法⼀、负边距与浮动布局1.1、负边距所谓的负边距就是margin取负值的情况，如margin:-100px，margin:-100%。
当⼀个元素与另⼀个元素margin取负值时将拉近距离。
常见的功能如下：1.1.1、向上移动当多个元素同时从标准流中脱离开来时，如果前⼀个元素的宽度为100%宽度，后⾯的元素通过负边距可以实现上移。
当负的边距超过⾃⾝的宽度将上移，只要没有超过⾃⾝宽度就不会上移，⽰例如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>负边距</title><style type="text/css">* {margin: 0;padding: 0;}#div1 {height: 100px;background: lightblue;width: 100%;float: left;}#div2 {height: 100px;background: lightgreen;width: 30%;float: left;margin-left: -100%;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div></body></html>运⾏效果：1.1.2、去除列表右边框开发中常需要在页⾯中展⽰⼀些列表，如商品展⽰列表等，如果我们要实现如下布局：实现代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>负边距</title><style type="text/css">* {margin: 0;padding: 0;}#div1 {width: 780px;height: 380px;margin: 0 auto;border: 3px solid dodgerblue;overflow: hidden;margin-top: 10px;}.box {width: 180px;height: 180px;margin: 0 20px 20px 0;background: orangered;float: left;}#div2{margin-right: -20px;}</style></head><body><div id="div1"><div id="div2"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div></div></body></html>1.1.3、负边距+定位，实现⽔平垂直居中1.1.4、去除列表最后⼀个li元素的border-bottom代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>负边距</title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}#news {width: 200px;border: 2px solid lightblue;margin: 20px 0 0 20px;font-family: 'Heiti SC', 'Microsoft YaHei';color: brown;}#news li{height: 26px;line-height: 26px;border-bottom: 1px dashed lightblue;}.lastLi{margin-bottom:-1px ;/*意思是向上移回1px 跟框框重合了*/}</style></head><body><div id="news"><ul><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li><li class="lastLi">Item E</li></ul></div></body></html>运⾏效果：⽅法⼆：使⽤CSS3中的新增加选择器，选择最后⼀个li，不使⽤类样式，好处是当li的个数不确定时更加⽅便。
HTML5+CSS3 Web前端设计基础教程(第4章)
4.3 控制图像和颜色
此处图片通过横向 平铺实现效果。此 外，同时设置图像 高度，如果不设置， div元素内又没有内 容将容器撑起来， 将无法显示背景图 片 此处图片设置了跟 随滚动条滚动的效 果，即便不设置， 浏览器默认状态就 是滚动效果
图4-15 背景色、背景图预览效果
此 处 为 box 容 器同时设置背 景图和背景色
此处文本溢出，文 字折返到下一行
此列表项内容超出了容器设 置的范围，出现了省略标记
图4-7 文本溢出处理预览效果
4.2 控制超链接
4.2.1 文本链接、邮件链接与锚链接 4.2.2 CSS伪类与超链接 1．什么是CSS伪类 伪类的语法形式为：
选择符：伪类 { 属性: 属性值; }
表4-3 常见的伪类及其含义 伪类 :link、:visited、:hover、:active :focus :not(s)（CSS 3新增） :root（CSS 3新增） :first-child :last-child（CSS 3新增） :nth-child(n) （CSS 3新增） 解释 设置超链接被访问前后的4个状态样式。 设置对象在成为输入焦点时的样式。 匹配不含有s选择符的元素。 匹配某一个元素在文档的根元素。 匹配父元素的第一个子元素。 匹配父元素的最后一个子元素。 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
4.1 控制文本
1．font-family（字体类型） 2．font-size（字号大小）
3．font-style（字体风格）
标题设置固定字号， 字体风格为斜体
此行设置为“宋体” 此行设置为“华文彩云 此行设置为“微软雅黑”
图4-3 字体类型、字号和风格预览效果
此行设置为“黑体”， 字号大小为父级的 80%
CSS网页设计标准教程课程设计
CSS网页设计标准教程课程设计简介随着互联网的普及，越来越多的人学习网页设计。
但是，许多人对CSS的理解都不够深入，只能做出简单的网页，并不能做出恰当的效果。
因此，在本课程设计中，我们将重点讲授CSS的使用，让学生们对CSS 有深入和全面的理解，掌握制作一流网页的技能。
学习目标本课程设计的学习目标如下：1.理解CSS的基本概念，掌握CSS的语法和基本知识点。
2.熟悉盒模型和文本属性等CSS层叠样式的基本属性。
3.掌握定位和浮动等CSS布局的基本方法和技巧。
4.练习使用CSS实现不同的网页设计效果。
5.学习常用的CSS框架和工具，提高工作效率。
课程安排本课程设计共分为7个章节，具体内容如下：第一章：CSS基础•CSS概述•CSS语法和选择器•三种CSS样式表：行内样式、嵌入式样式和外部样式表•CSS样式表的优先级和继承第二章：CSS样式属性•盒模型和文本属性•背景、边框、文本、字体、颜色等CSS属性•overflow、display、visibility、z-index等CSS属性第三章：CSS布局•浮动和清除浮动•定位和层级•相对定位、绝对定位、固定定位•弹性布局和栅格布局第四章：CSS选择器•常用选择器：ID选择器、类选择器、标签选择器、伪类选择器•层次选择器、属性选择器、通用选择器、伪元素选择器•选择器组合和选择器优先级第五章：CSS动画和过渡•CSS过渡的基本使用方法•CSS动画的基本使用方法•CSS动画的关键帧动画第六章：CSS预处理器•Less、Sass、Stylus等CSS预处理器的基本语法•CSS预处理器的变量、嵌套、混合等功能•使用CSS预处理器提高工作效率第七章：CSS框架和工具•Bootstrap框架的使用•jQuery库的基本使用方法•Webpack等前端构建工具的基本使用方法教学方法本课程设计采用“讲授+实践”相结合的教学方法，通过灵活的授课方式帮助学生深度理解CSS知识点的实现。
《CSS布局教程详解》
《CSS布局教程详解》CSS布局教程详解CSS（层叠样式表）是Web开发中不可或缺的一部分。
它不仅可以美化页面，还可以控制HTML元素的布局。
在Web开发中，页面布局是非常重要的一环。
一个好的页面布局可以增加用户体验，提高网站的可用性和可读性。
本篇文章将详细介绍CSS布局的各种方法和技巧。
一、基本布局1.流式布局：流式布局是指页面随着浏览器大小的变化而自适应调整大小。
可以通过设置宽度百分比（如width: 100%）实现。
2.定宽布局：定宽布局是指页面大小固定不变。
可以通过设置固定宽度（如width: 960px）实现。
3.弹性布局：弹性布局是指页面可变宽度、可变高度、可变间距。
可以通过设置flex布局实现。
二、布局技巧1. 圣杯布局：圣杯布局是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果。
2. 双飞翼布局：双飞翼布局也是一种三栏布局，可以实现两边栏固定，中间栏自适应调整大小的效果，同时可以避免圣杯布局的一些负面效果。
3. 瀑布流布局：瀑布流布局是一种流式布局，通过设置每个元素的位置使其自然排列，适用于图片墙等排列不规则的布局。
4. 响应式布局：响应式布局是指页面针对不同设备（如手机、平板、电脑等）自适应调整大小和布局。
可以通过设置Media Query实现。
三、布局优化1. 减少HTTP请求：HTTP请求是影响网站性能的主要因素之一，可以通过合并CSS文件、缓存CSS等方式来减少HTTP请求。
2. 使用辅助工具：CSS布局的实现过程中，可以使用很多辅助工具来简化任务，如CSS预处理器、网格系统、框架等。
3. 确定元素大小：在对元素进行布局时，一定要确定其大小。
如果不确定大小，布局可能会出现问题，影响页面的美观度和用户体验。
四、总结CSS布局是Web开发中非常重要的一环，它可以影响页面的美观度、用户体验、可用性和可读性。
本文介绍了CSS布局的基本方法和各种技巧，并提出了优化布局的建议。
web网页设计知识点总结
web网页设计知识点总结Web网页设计是指将各种元素与技术应用于制作页面，使其具有良好的用户体验和视觉效果。
在网页设计过程中，有许多重要的知识点需要掌握。
本文将对一些常用的Web网页设计知识点进行总结，以帮助读者更好地理解和应用这些知识。
一、网页设计基础知识1. 色彩理论：了解颜色的基本概念，掌握色彩搭配原则，如互补色、类似色等。
同时要考虑色彩对用户心理的影响和传达信息的效果。
2. 网页布局：学习网页布局的基本原则和常用的布局方式，如单栏、双栏、三栏等。
合理的网页布局可以提高用户的浏览体验。
3. 图像处理：熟悉图像的格式、压缩和优化方法，以确保网页的加载速度和图像质量的平衡。
4. 字体选择：了解不同字体在网页上的呈现效果和可读性，选择适合的字体，提高页面的可读性和美观度。
二、网页设计工具1. Adobe Photoshop：掌握基本的Photoshop操作技巧，如图片处理、图层叠加、色彩调整等，用于网页的设计和图像编辑。
2. Adobe Illustrator：熟悉Illustrator的基本操作，用于绘制矢量图形和Logo设计，提高页面的可伸缩性和清晰度。
3. Sketch：了解Sketch的使用方法，它是一种常用的设计工具，特别适用于界面设计和移动端设计。
4. Axure RP：掌握Axure RP的基本原理和使用方法，用于设计网页的交互效果和原型展示。
三、网页交互设计1. 导航设计：合理设计网页导航，使用户能够轻松地找到所需内容。
采用常见的导航结构，如水平导航和垂直导航，并使用合适的字体和图标进行补充。
2. 响应式设计：学习响应式设计原则，使网页能够在不同终端上自适应地展示，提高用户体验和访问适用性。
3. 用户界面设计：关注用户的使用习惯和心理，设计直观、简洁的用户界面，使用户在网页上的操作更加便捷。
4. 交互效果：运用JavaScript和CSS等技术，设计交互效果，如动态导航、轮播图等，增强页面的互动性和吸引力。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web 实用网页设计方法
杨巍
yangwei@ Introduction to
CSS
2
Agenda
z CSS 概述
z CSS 设置方式
z CSS 基本语法
z
CSS 样式属性z CSS 框模型
4
CSS
CSS (Cascading Style sheet)层叠样式表
在W3C 标准中被定义为“一种对Web 页面进行外观控制的机制”
CSS 和HTML 、JavaScript 是并列的3种用于Web 开发的技术
CSS 能够将文档的格式化信息与文档的正文分离开来
5
CSS
样式解决了一个普遍的问题
HTML 标签原来被设计为用来定义文档内容 文档布局由浏览器来完成，而不使用任何的格式化标签
创建文档内容清晰地独立于文档表现层的站点变得越来越困难
新的HTML 标签和属性添加到HTML 规范中 W3C 在HTML 4.0之外创造出样式Style
6
CSS
CSS 的基本概念
CSS 由一定的语法组成，对Web 页面元素的外观进行控制
CSS 通过一定的机制与特定文档相关联，对此文档进行样式控制
能够为每个HTML 元素定义样式，并将之应用于希望的任意多的页面中
可进行全局的更新样式
<html>
<head>css.html
9
Agenda
z CSS 概述
z CSS 设置方式z CSS 基本语法z
CSS 样式属性z CSS 框模型
CSS Style
CSS Style
按CSS代码的位置划分
内联样式Inline Styles
内部样式Internal Style Sheet
Embedding a Style Block
外部样式External Style Sheet
Linking to a Style Sheet
11
12
将样式表加入到HTML 中
将样式表加入到HTML 中
新的HTML 元素和属性已被加入以允许样式表与HTML 文档更简易地组合起来
Inline Styles
Internal Style Sheet
External Style Sheet
导入样式表
15Inline Styles
Inline Styles
看上去很直观
仅针对个别元素进行控制
将外观控制代码散布于整个HTML 文档，和传统的外观控制方式没有本质的不同
一般不推荐使用
<html><head>
<title>internal CSS</title>internalCss.html
<html><head>
<title>internal CSS</title>internalCss.html
<html><head>
<title>internal CSS</title>internalCss.html
20Internal Style Sheet
Internal Style Sheet
将CSS 语句直接写在HTML 文档中，但它做为一个独立的标记块存在，维护和修改都要方便得多
内部样式仅能够针对一个HTML 文档进行设置，无法与多个文档关联，一般用于控制一些针对性强的独立样式
内部样式是HTML 文档的一部分，仍然有需要重复加载的问题，无法利用浏览器的缓存机制
25
External Style Sheet
外部样式
当样式被应用到很多的网页时，一个外部样式表是理想的
网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件
大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟
在实际开发中一般都使用外部样式
28
导入样式表
导入样式表对于模块化CSS 设计很有用处
一个网站可以按照HTML 标签元素的不同类别，将各种样式规则定义语句放置在不同的样式表文件中
simple.css, extra.css, table.css
使用@import 声明与其他的样式表文件组合成一个新的CSS 文件
29
多重样式将层叠为一个
层叠次序
当同一个HTML 元素被不止一个样式定义时，会使用哪个样式呢？
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中
浏览器缺省设置 外部样式表External 内部样式表Internal
内联样式inline
Summary
样式表
内联样式表——style属性
内部样式表——<style>…..</style>
外部样式表——<link rel="" type=""href="" /> 外部样式表可以极大提高工作效率
外部样式表通常存储在CSS 文件中
多个样式定义可层叠为一
31
32
Agenda
z CSS 概述
z CSS 设置方式
z CSS 基本语法
z
CSS 样式属性z CSS 框模型
37
练习——普通选择器
设置页面中一些常用标记的样式 建立一个HTML 文件，其中有h1-h6标签的文字，有p 标签的文字
设置页面总的背景颜色为pink ，页面的总字体颜色为兰色
选取p 标签设置文本，使其居中对齐
38
普通选择器
使用普通选择器
普通选择器便于统一设置结点样式 HTML 选择器的应用范围很大，对页面中的所有这类标记都有效
需要把HTML/XML 文档中同一类型的两个或两个以上的元素设计成不同的样式——类型选择器
<元素名class="CSS
标记名称.CSS类型名{属性：值；}
45
练习——类型选择器
设置页面中一些常用标记的样式 建立一个HTML 文件，其中有h1-h6标签的文字，有p 标签的文字
对h1，h2与h3标签使用类型选择器统一设置样式为字体颜色灰色
对第一个p 标签设置对其方式为左对齐
46
id Selectors
使用id 选择器
用户可以使用id 属性对页面中的标记进行自定义名称
id 是一个标识，在网页中每个id 名称只能使用一次
和类型选择器不同，id 选择器使用"#"代替"."实现标记的定位
标记名称#特征值{属性：值；}
50id Selectors
class 属性用来定义一组有共同功能或格式的HTML 元素
id 属性用来定义某一个特定的HTML 元素
class 和id 属性值都必须以字母开头，而且名称中只能包含字母、数字和下横线。