前端网页设计的知识点大全,必看
- 格式：doc
- 大小：141.00 KB
- 文档页数：37
文档推荐
-
网页制作知识点页数:11
-
网页制作必懂的基础知识页数:4
-
网页设计与制作在线作业C页数:7
-
TTML网页设计知识点个人总结页数:33
-
网页设计基础知识点页数:5
-
网页制作课程知识点归纳页数:8
下载文档原格式
合集下载
web前端网页设计知识点
web前端网页设计知识点Web前端设计是指通过使用HTML、CSS和JavaScript等技术来开发网站的外观和交互功能。
在进行Web前端网页设计时，我们需要掌握一些基本的知识点。
本文将详细介绍一些常用的Web前端设计知识点，帮助读者更好地理解和应用这些技术。
一、HTML（超文本标记语言）知识点HTML是一种用于创建网页的标记语言，它使用标签和属性来描述网页的结构和内容。
以下是一些常用的HTML知识点：1. DOCTYPE声明：<!DOCTYPE>声明位于HTML文档的最前面，用于声明文档使用的HTML版本。
2. 标题和段落：使用<h1>至<h6>标签定义标题的级别，使用<p>标签定义段落。
3. 链接和图像：使用<a>标签创建链接，使用<img>标签插入图像。
4. 列表和表格：使用<ul>、<ol>和<li>标签创建无序列表、有序列表和列表项，使用<table>、<tr>和<td>标签创建表格。
5. 表单和输入元素：使用<form>标签创建表单，使用<input>标签创建各种输入元素，如文本框、复选框和按钮。
二、CSS（层叠样式表）知识点CSS用于控制网页的布局和样式，使网页更加美观和易于阅读。
以下是一些常用的CSS知识点：1. 选择器：CSS使用选择器来选择要应用样式的HTML元素。
常见的选择器有标签选择器、类选择器、ID选择器和属性选择器。
2. 盒子模型：每个HTML元素都被看作一个矩形的盒子，包括内容区、内边距、边框和外边距。
通过设置这些属性，可以调整元素在网页中的位置和大小。
3. 背景和边框：使用CSS可以设置元素的背景颜色、背景图像和边框样式。
4. 文本样式：可以通过设置字体、颜色、大小、行高和对齐方式等属性来调整文本的样式。
网页设计制作知识点
网页设计制作知识点1. 基础知识1.1 HTML（Hypertext Markup Language）HTML是用于构建网页的标记语言，通过使用各种标签和属性，可以定义网页的结构和内容。
常见的HTML标签包括<head>、<body>、<div>、<p>等。
1.2 CSS（Cascading Style Sheets）CSS用于控制网页的样式和布局，通过将样式属性应用于HTML元素，可以改变它们的颜色、字体、大小等外观特性。
常见的CSS属性包括color、font-family、margin、padding等。
1.3 JavaScriptJavaScript是一种用于增加网页交互性的脚本语言，可以通过在网页中嵌入JavaScript代码来实现动态效果、表单验证等功能。
2. 响应式设计响应式设计是指根据设备的屏幕尺寸和分辨率，自动调整网页的布局和内容，以确保在不同设备上都能正常显示和使用。
常见的响应式设计技术包括媒体查询（Media Queries）、流体布局（Fluid Layout）和弹性图片（Flexible Images）等。
3. 网页导航3.1 导航栏导航栏用于展示网站的主要导航链接，通常位于页面的顶部或侧边。
可以使用HTML和CSS创建导航栏，并为每个链接添加交互效果。
3.2 面包屑导航面包屑导航用于显示当前页面在网站结构中的位置，让用户可以方便地进行导航和返回。
可以使用HTML和CSS创建面包屑导航，并为每个链接添加合适的指向。
4. 网页布局4.1 盒子模型盒子模型是用于布局和定位网页元素的基础概念，每个HTML 元素都可以看作是一个矩形的盒子。
通过设置盒子的宽度、高度、内边距（padding）和外边距（margin），可以精确控制元素在网页中的位置和间距。
4.2 栅格系统栅格系统是一种用于创建响应式网页布局的技术，将页面划分为多个均等的列。
web前端考试知识点总结
web前端考试知识点总结一、HTML知识点总结1. HTML基础知识- HTML的基本结构- HTML的常用标签- HTML的元数据标签- HTML的列表、表格、表单等相关标签2. HTML5新增的语义化标签- header、footer、nav、article、section、aside等3. HTML5新增的表单元素- input的各种类型- 新增的表单元素如datalist、keygen等4. HTML5新增的媒体元素- video、audio等5. HTML5新增的API- 本地存储、离线应用、地理定位等二、CSS知识点总结1. CSS基础知识- CSS的语法- CSS的选择器- CSS的样式属性2. CSS布局- 盒模型- 浮动- 定位- 弹性盒子布局- 栅格布局3. CSS3新增的样式- 边框、背景、文字、渐变、阴影等效果 - 过渡、变换、动画等4. 响应式设计- 媒体查询- 移动优先5. CSS预处理器- SASS、LESS等三、JavaScript知识点总结1. JavaScript基础知识- 数据类型- 运算符- 流程控制语句2. JavaScript函数- 函数的定义- 作用域- 闭包- 高阶函数3. JavaScript对象- 对象的创建- 原型链- 对象的继承4. DOM操作- 节点的增删改查- 事件处理5. AJAX与跨域- XMLHttpRequest对象- 跨域访问的解决方案6. ES6知识点- let、const- 箭头函数- 解构赋值- 模板字符串- Promise等四、Web前端知识点总结1. 前端框架- Vue.js、React、Angular等- 每个框架的基本原理和使用方法2. 前端工程工具- Webpack、Gulp、Grunt等- 理解构建工具的作用和配置3. 前端性能优化- 页面加载速度优化- 代码性能优化4. 前端安全- XSS、CSRF、点击劫持等- 前端安全常见问题和解决方案5. 前端测试- 单元测试- UI测试6. 前端工程化- 模块化开发- 前端构建流程综上所述，Web前端技术知识点之多之杂，要想在考试中取得好成绩，需要对各种知识点进行深入理解和掌握。
网页设计与前端开发入门
网页设计与前端开发入门第一章网页设计的基础知识网页设计是指为网站创建和设计用户界面的过程。
在进行网页设计之前，我们需要对网页设计的一些基础知识有所了解。
1.1 网页设计的目标网页设计的目标是为了提供优良的用户体验，使用户能够轻松地浏览网页内容，同时也要符合网站的整体风格和品牌形象。
1.2 响应式设计响应式设计是指网页能够根据不同设备（如手机、平板、电脑等）的屏幕尺寸自动调整布局和样式，以便用户获得最好的浏览体验。
1.3 色彩和排版色彩和排版是网页设计中非常重要的两个方面。
恰当的色彩搭配和排版能够提升网页的可读性和吸引力，给用户留下良好的印象。
第二章前端开发的基础知识前端开发是指通过使用HTML、CSS和JavaScript等技术来创建和开发网页的过程。
了解前端开发的基础知识对于想要从事网页设计与开发的人来说是非常重要的。
2.1 HTML和CSSHTML和CSS是前端开发中最基本、最重要的两种技术。
HTML用于定义网页的结构和内容，CSS用于控制网页的样式和布局。
2.2 JavaScriptJavaScript是一种用于实现网页交互和动态效果的编程语言。
通过使用JavaScript，我们可以实现一些强大的功能，比如表单验证、动画效果等。
2.3 前端开发工具前端开发工具是辅助开发人员进行前端开发的软件或在线服务。
常用的前端开发工具包括代码编辑器、版本控制系统、包管理器等。
第三章网页设计与前端开发的最佳实践为了能够进行高质量的网页设计与前端开发，我们需要遵循一些最佳实践原则。
3.1 设计原则在进行网页设计时，我们需要考虑一些设计原则，如布局、对比度和一致性等。
合理运用这些原则能够使网页设计更加美观和易于使用。
3.2 前端开发规范编写清晰、可维护的代码是前端开发中的一项重要任务。
遵循前端开发规范能够使代码更易读、易懂，并有助于团队协作和项目维护。
3.3 性能优化优化网页的加载速度和性能是一个不可忽视的因素。
前端适合分享的技术知识点
前端适合分享的技术知识点作为前端开发人员，我们不仅需要具备扎实的编码能力，还需要不断学习和分享最新的前端技术知识。
通过分享，我们可以不仅可以帮助其他开发者解决问题，还可以拓宽自己的视野和思维方式。
本文将介绍一些前端适合分享的技术知识点，并提供一种分步思考的方法，以帮助你准备和分享这些知识。
1.HTML/CSS技巧HTML和CSS是前端开发的基础，通过分享一些HTML和CSS的技巧，可以帮助其他开发人员提升他们的网页设计和布局能力。
比如，你可以分享如何使用Flexbox或Grid进行响应式布局，如何使用CSS动画创建交互效果，如何使用CSS 变量和自定义属性来简化样式管理等等。
步骤一：选择一个具体的HTML/CSS技巧，比如Flexbox布局。
步骤二：解释该技巧的作用和优势，比如Flexbox可以简化网页布局并提供更好的响应性。
步骤三：给出使用该技巧的实际例子，并提供代码示例和解释。
步骤四：指导其他开发者如何应用该技巧到他们自己的项目中，并提供相关资源和参考链接。
2.JavaScript编程技巧JavaScript是前端开发中最重要的编程语言之一。
通过分享一些JavaScript的编程技巧，你可以帮助其他开发者更好地理解和使用JavaScript。
比如，你可以分享如何使用高阶函数和箭头函数来简化代码，如何使用ES6的新特性来提高开发效率，如何使用设计模式来组织和优化代码等等。
步骤一：选择一个具体的JavaScript编程技巧，比如使用高阶函数来处理数组操作。
步骤二：解释该技巧的作用和优势，比如使用高阶函数可以提高代码的可读性和复用性。
步骤三：给出使用该技巧的实际例子，并提供代码示例和解释。
步骤四：指导其他开发者如何应用该技巧到他们自己的项目中，并提供相关资源和参考链接。
3.前端框架和工具前端开发中有许多流行的框架和工具，比如React、Vue、Webpack等等。
通过分享关于这些框架和工具的知识，你可以帮助其他开发者更好地理解和使用它们。
网页设计与制作知识点梳理
网页设计与制作知识点梳理一、概述在当今信息化时代，网页设计与制作成为了一个热门的职业选择。
网页设计与制作是指通过使用HTML、CSS、JavaScript等技术，设计并制作出具有良好用户体验的适应各种设备和浏览器的网页。
本文将从网页设计与制作的基础知识、前端开发技术、用户体验等方面，对相关知识点进行梳理。
二、网页设计与制作基础知识1. HTML基础HTML是网页的核心语言，了解HTML的基本标签、元素和属性是进行网页设计与制作的基础。
常用的HTML标签有`<html>`、`<head>`、`<body>`、`<div>`、`<p>`等，这些标签用于描述网页的结构和内容。
2. CSS基础CSS是用于网页样式设计的语言，通过CSS可以为网页添加背景、颜色、字体等样式。
熟悉CSS的选择器、样式属性和值的设置是进行网页美化的基础。
常见的CSS样式属性包括`color`、`font-size`、`background-color`、`margin`等。
3. JavaScript基础JavaScript是一种用于实现网页交互效果的脚本语言，掌握JavaScript的语法和常用的DOM操作可以实现对网页元素的动态修改和事件响应。
了解JavaScript的基础语法、变量、函数和常用的DOM 操作方法有助于提升网页的交互性和动态效果。
4. 响应式设计响应式设计是指根据不同设备和屏幕尺寸，为网页提供适配的布局和样式。
通过媒体查询、弹性布局等技术，可以使网页在不同设备上获得较好的展示效果。
响应式设计是现代网页设计与制作的常见要求。
三、前端开发技术1. jQueryjQuery是一个快速、简洁的JavaScript库，具有强大的DOM操作和事件处理能力。
掌握jQuery的使用可以简化网页开发过程，并提供丰富的插件和特效。
2. BootstrapBootstrap是一个用于设计和开发响应式网站的前端框架，提供了许多CSS和JavaScript组件，用于实现页面的布局和样式。
网页设计与制作知识点
网页设计与制作知识点一、概述在互联网时代，网页设计与制作成为一门重要的技能。
本文将介绍网页设计与制作的相关知识点，包括设计原则、用户体验、网页布局、色彩搭配等。
二、设计原则1. 简洁明了：网页设计应尽量简洁，突出主题，避免过度装饰，以提高用户的阅读和使用体验。
2. 易于导航：网页导航要清晰明了，让用户能够方便地找到所需信息。
3. 一致性：网页中的设计元素要保持一致，如字体、颜色、按钮样式等。
4. 色彩搭配：选择适合主题和品牌的色彩搭配，让网页更具吸引力。
5. 响应式设计：针对不同设备尺寸进行适配，保证在各种屏幕上显示良好。
三、用户体验1. 页面加载速度：优化网页代码，减少图片和脚本文件的大小，以提高页面加载速度。
2. 用户友好性：设置合适的字体大小、行距和段落间距，以提高用户的阅读体验。
3. 清晰的标识：使用易于理解的图标和标识，帮助用户快速识别和使用功能。
4. 锚点导航：对于长页面，可以设置锚点导航，方便用户快速定位到所需内容。
5. 表单设计：在设计网页表单时，应简化输入项，减少用户的操作步骤。
四、网页布局1. 栅格系统：使用栅格系统进行网页布局，使页面结构清晰，适应不同设备尺寸。
2. 响应式布局：根据设备尺寸调整页面布局，使内容在不同屏幕上显示合理。
3. 色彩与对比度：利用颜色和对比度来区分不同模块和内容，提高页面可读性。
4. 图片与文本搭配：合理搭配图片与文本，以突出主题，吸引用户的注意力。
5. 空白与留白：合理运用空白和留白，使页面整体布局更加舒适和吸引人。
五、色彩搭配1. 色彩心理学：了解色彩在用户心理上的作用，选择适合品牌和主题的色彩搭配。
2. 色彩对比度：确保页面中的文本和背景颜色具有足够的对比度，以提高可读性。
3. 色彩平衡：在设计网页时，考虑色彩的平衡和和谐性，避免使用过多饱和度高的颜色。
六、常用工具与技术1. HTML与CSS：作为网页的基础语言，掌握HTML与CSS的基本语法和用法。
网页设计相关知识点总结
网页设计相关知识点总结一、网页设计的基本原则1. 简洁性：网页设计应追求简洁明了，排版清晰，信息醒目。
文字、图片、视频等元素要有序地排布，不要让用户感到混乱和疲惫。
2. 可读性：文字和图片的大小、颜色要合适，不要影响用户的阅读和观看。
同时，在排版和布局上要考虑到用户习惯的可读性。
3. 一致性：保持网站的设计一致性，包括颜色、字体、风格等方面的一致性，使用户能够更容易地理解和使用网站。
4. 导航性：良好的导航是网页设计的关键，用户可以方便地找到需要的信息，提高网站的可用性。
5. 可访问性：考虑到不同用户的需求，网页设计应保证所有用户都能顺利访问和使用网站，包括残障人士。
二、网页设计中涉及的技术和工具1. HTML/CSS：HTML是网页的骨架，定义了网页的结构，而CSS用于定义网页的外观和样式，如颜色、字体等。
学习和掌握HTML和CSS是成为优秀网页设计师的基础。
2. JavaScript：JavaScript是用于网页交互的脚本语言，能够让网页具有更丰富的动态效果和交互功能。
3. 响应式设计：随着移动设备的普及，网页设计需要考虑到不同屏幕尺寸的适配，响应式设计可以使网页在不同设备上呈现出最佳的效果。
4. UI/UX设计：UI（用户界面）设计是指网页的视觉设计，包括颜色、图标、排版等。
UX （用户体验）设计则是更注重用户操作和交互的设计，包括用户流程、信息架构等。
5. 图形设计软件：如Photoshop、Sketch、Illustrator等，用于设计网页的图标、图片、背景等元素。
6. 网页编辑器：如Dreamweaver、Sublime Text等，用于编写和编辑网页代码。
7. 版面设计工具：如Axure RP、Sketch等，用于设计网页的版面和交互。
三、网页设计中需要考虑的要素1. 网页布局：包括页面的整体结构、栏目的排列、元素的大小和位置等。
2. 图片和图标：选择合适的图片和图标，在不过分增加页面加载时间的情况下使页面更具吸引力。
前端技术开发考试必备知识点
前端技术开发考试必备知识点一、HTML（超文本标记语言）1. 基本结构。
- `<!DOCTYPE html>`：声明文档类型为HTML5。
- `<html>`标签：整个HTML文档的根标签，包含`<head>`和`<body>`。
- `<head>`：包含文档的元数据，如`<title>`（设置网页标题）、`<meta>`（用于描述网页的各种信息，如字符编码`<meta charset = "UTF - 8">`）等。
- `<body>`：包含网页的可见内容，如文本、图像、链接等。
2. 标签类型。
- 块级标签：如`<div>`（用于划分页面区域）、`<p>`（段落）等，默认占据一行，可设置宽度、高度等属性。
- 行内标签：如`<span>`（用于包裹行内元素）、`<a>`（链接）等，在一行内显示，宽度由内容撑开。
3. 常用标签。
- `<img>`：用于插入图像，属性有`src`（图像的源地址）、`alt`（图像的替代文本，当图像无法显示时显示）。
- `<input>`：用于创建表单输入元素，类型有`text`（文本输入）、`password`（密码输入）、`radio`（单选按钮）、`checkbox`（复选框）等。
- `<select>`和`<option>`：用于创建下拉菜单，`<select>`是容器，`<option>`是菜单中的选项。
二、CSS（层叠样式表）1. 引入方式。
- 内联样式：在HTML标签内使用`style`属性，如`<div style = "color: red; font - size: 16px;">`。
前端设计主要知识点总结
前端设计主要知识点总结前端设计是指网页、移动应用等界面的设计与开发工作，主要涵盖了用户体验设计（UI/UX）、网页设计、交互设计、视觉设计以及前端开发等方面。
本文将对前端设计的主要知识点进行总结。
一、用户体验设计用户体验设计（UI/UX）是重要的前端设计领域之一，旨在为用户提供良好的使用体验。
以下是UI/UX设计的主要知识点：1. 用户研究：通过调研和分析用户需求、行为模式等，为设计提供依据。
2. 信息架构设计：确定网站或应用的导航、分类和标签等结构，以便用户快速找到所需信息。
3. 交互设计：通过界面元素的布局、按钮、表单等设计，使用户与产品之间的交互更加流畅自然。
4. 可用性测试：通过模拟用户行为和实际测试，对设计进行验证和改进。
二、网页设计网页设计是指将用户体验设计的理念与技术相结合，实现网页的视觉呈现和用户交互。
以下是网页设计的主要知识点：1. 网页布局：合理的网页布局能够统一网页风格、使页面结构清晰、简洁、易用。
2. 色彩搭配：选择合适的颜色搭配，既能吸引用户注意力，又能呈现良好的视觉效果。
3. 字体选择：选择适合网页内容的字体，使其易读、清晰，统一字体风格，提升网页整体品质。
4. 图片和图标使用：合理使用图片和图标，使网页更具吸引力和表现力。
三、交互设计交互设计是指通过合理的用户交互方式，提升用户体验和网页功能。
以下是交互设计的主要知识点：1. 导航设计：设计清晰的导航结构，使用户能够快速找到所需信息。
2. 表单设计：设计易于填写和提交的表单，减少用户的操作负担。
3. 动效设计：通过动画、过渡等效果，提升用户体验、吸引用户注意力。
4. 响应式设计：设计适应不同终端（如手机、平板、电脑）的网页，提供一致好用的用户体验。
四、视觉设计视觉设计通过合理的布局、色彩、图像等元素，创造吸引力和品牌形象。
以下是视觉设计的主要知识点：1. 布局设计：设计整齐、结构清晰的网页布局，使用户浏览更加舒适。
2. 色彩搭配：选择合适的色彩搭配，使用户感到愉悦、易于识别，符合品牌形象。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<meta charset="utf-8"/><link rel="stylesheet" type="text/css" href="css/main.css"/>head定义文档头部，包含：title, script, style, link, metabody是网页主要内容，包含：h1,h2-h6, p, a, img2. 认识head标签：<head><title>...</title> 网页标题<meta><link><style>...</style><script>...</script></head>4. 认识body标签：<p>段落文本</p> 有三段就放三个<p></p><h1>标题文本</h1> h1-h6共6个标题分级<em>斜体文本（强调）</em> 斜体文本内容<strong>粗体文本</strong> 粗体显示文本内容<span>单独样式文本</span> 没有语义的，它的应用就是为了设置单独的格式用的<q>引用的文本</q> 引用的文本内容，会自动加上双引号<blockquote>大段引用</blockquote> 引用大段的文本内容，文本前后会加上缩进<br/>换行<hr/> 水平横线 空格<address>地址信息</address> 地址信息，通常用于公司地址显示<code>代码内容</code> 代码，通常是一行内<pre>多行代码</pre> 多行代码,你需要在网页中预显示格式时都可以使用它<ul> ul-li 列表信息，以圆点显示<li>信息1</li><li>信息2</li>......</ul><ol> ol-li 列表信息，带上序号<li>信息</li><li>信息</li>......</ol><div>排版内容<div> 排版中使用，相当于一个容器确定逻辑部分：逻辑部分是页面上相互关联的一组元素，如栏目版块<div id="版块名称">…</div>div 带上ID号，使之更清晰<table>表格内容</table> 创建表格<caption>标题文本</caption> 为表格添加标题文本<tbody>...</tbody> 若加此标签后，表格会一次性显示出来（而非网页加载一点显示一点）<tr>表格一行</tr> 表格中的一行<td>表格单元格</td> 表格中的一个单元格<th>表格表头</th> 表格头部的一个单元格，表格表头<table summary="表格摘要">...</table> 为表格添加摘要，但不会被浏览器显示出来<a href="目标网址" title="鼠标滑过时显示文本">链接显示文本</a> 链接标签target="_blank" 网页将在新窗口中打开mailto: 网页中邮件地址，可带多个参数mailto: 邮箱地址cc= 抄送地址bcc= 密抄地址; 多个邮箱地址subject=邮件主题body= 邮件内容完整举例: <a href="mailto:*********?cc=*********&bcc=*********&subject=主题&body=邮件内容">发送邮件</a><img scr="图片地址" alt="下载失败时替换文本" title="提示文本" />5. 与用户交互：语法：<form method="传送方式" action="服务器文件"></form>举例：<form method="post" action="save.php"><label for="username">用户名:</label><input type="text" name="username" /><label for="pass">密码:</label><input type="password" name="pass" /></form>表单控件：文本框、文本域、按钮、单选框、复选框method:post/get1. 文本框（文本/密码）<form><input type="text/password" name="名称" value="文本" /></form>type：有“text”和“password”两种类型name：为文本框命名，方便后台ASP和PHP使用value：文本框默认值，一般起提示作用2. 文本域（多行文本）<textarea rows="行数" cols="列数">默认文本内容</textarea>cols：多行输入域的列数rows：多行输入域的行数3. 单选框、复选框<input type="radio/checkbox" value="值" name="名称" checked="checked"/>type：radio单选，checkbox复选框value：提交数据到服务器的值，后台PHP处理使用name：为控件命名，以备后台程序ASP和PHP使用checked：checked="checked"时，此选项默认被选中注意：同一组的单选按钮，name取值一定要一致4. 下拉列表框<form action="save.php" method="post" ><label>爱好:</label><select multiple="multiple"><label for="book>看书</label><option value="看书" id="book">看书</option><option value="旅游">旅游</option><option value="运动">运动</option><option value="购物">购物</option></select><input type="submit" value="提交"><input type="reset" value="重置" /></form>value：向服务器提交值selected：设置selected="selected"时，默认选中multiple：multiple="multiple"时，可以使用Ctrl多选，但很丑label：为了改进鼠标易用性，鼠标点击文本时，选择上Radio6. 认识CSS样式：CSS：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式语法：选择符{ 属性: 值}举例：p{ color: blue}选择符：又称选择器，指明要应用样式规则的元素，如<html>、<body>、<h1>、<p>、<img>...声明：指的是冒号”:“多条声明：使用分号”;“隔开，最好每行都加上分号注释：CSS使用/**/，HTML注释则使用<!--内容-->7. CSS样式分类：1. 内联式<p style="color:red;font-size:12px">这里文字是红色。
</p>2. 嵌入式较通用的一类，CSS样式放置在<style>标签中，而<style>通常要放置在<head>内<style type="text/css">span{color:blue;font-size:12px;}</style>3. 外部式把CSS代码写到一个单独的外部文件中，以.css扩展名结尾，在<head>内使用<link>标签引入，如：<link href="base.css" rel="stylesheet" type="text/css" />href: .css文件路径rel和type: rel="stylesheet" type="text/css" 是固定写法，不能改三种方法的优先级：内联式> 嵌入式> 外部式就近原则，嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面以上规则适用于相同权值的情况8. CSS 类选择器语法：.类选器名称{css样式代码;}举例：<style type="text/css">.stress{color:red;}</style>注意：前边的小圆点是必须要有的使用：<span class="stress">胆小如鼠</span>9. CSS ID选择器语法：#ID选择器名称{css样式代码}举例：#setGreen{color:green;}<span id="setGreen">胆小如鼠</span>区别：起始于'.' 与'#'调用时class= 与id=ID选择器只能在文档中使用一次，类选择器则可以使用多次一个元素可以使用多个类选择器同时设置多个样式，而ID选择器是不可以的，如<span class="stress bigsize">三年级</span>10.CSS 子选择器还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。