下载文档原格式
HTML基础知识一、什么HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
二、HTML能干什么您可以使用HTML 来建立自己的WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
三、HTML长什么样子•<!DOCTYPE html>声明为HTML5 文档•<html>元素是HTML 页面的根元素•<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
•<title>元素描述了文档的标题•<body>元素包含了可见的页面内容•<h1>元素定义一个大标题•<p>元素定义一个段落四、HTML都包含那些标签五、HTML实例1)我的第一个网页2)注释标签：对代码进行说明<!--单行注释,也可以对多行文字进行注释-->3)常用格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换行<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调文本</strong> 4)标题标签5)列表标签6)超链接:7)分隔窗口8)块级元素和行内元素块级元素：凡是默认自动占满网页整行的元素（自动换行），称为块级元素<hr> <p> <h1>-<h6> <div> <ul> <li> <dl> <dt> <dd> <table> <pre> <tr> ...行内元素：不能占满网页整行的元素<font> <img> <span> <a> <b> <br> <buttom> <i> <span> <sub> <sup> <select> ...9)表格标签tr:行；td：单元格10)表单元素：11)多行文本域。
前端知识点总结文档前端开发是指构建Web站点或Web应用程序的过程。
在前端开发中，开发者主要负责设计和构建用户能够在浏览器中看到和交互的内容。
由于前端开发需要掌握多种技术，包括HTML、CSS、JavaScript等，因此需要不断学习和总结相关知识。
本文将总结前端开发中的一些重要知识点，希望对前端开发者有所帮助。
一、HTML（超文本标记语言）HTML是一种标记语言，用于创建Web页面。
开发者可以使用HTML来定义页面的结构和内容。
HTML由一系列标签组成，每个标签用来描述页面上的不同元素，如标题、段落、列表等。
在HTML中，也可以使用属性来为元素添加一些额外的信息，比如样式和链接地址。
以下是一些HTML中常用的标签：1. <div>：定义文档中的一个区域，通常用来组织代码和样式2. <p>：定义一个段落3. <a>：定义一个超链接4. <img>：定义图像5. <ul>：定义一个无序列表6. <li>：定义列表中的每一项二、CSS（层叠样式表）CSS用于为HTML文档添加样式，比如颜色、字体、布局等。
通过CSS，开发者可以控制页面元素的显示效果，从而让页面更加美观和易于阅读。
以下是一些CSS中常用的属性：1. color：定义文本的颜色2. font-size：定义文本的大小3. background-color：定义元素的背景颜色4. margin：定义元素的外边距5. padding：定义元素的内边距6. display：定义元素的显示方式三、JavaScriptJavaScript是一种动态脚本语言，用于为Web页面添加交互功能。
通过JavaScript，开发者可以操作页面的元素，响应用户的操作，以及与服务器进行数据交互等。
以下是一些JavaScript中常用的功能：1. DOM操作：通过JavaScript可以获取和修改页面上的元素，从而实现页面的动态效果2. 事件处理：通过JavaScript可以为页面上的元素绑定各种事件，比如点击、鼠标移入等3. AJAX：通过JavaScript可以向服务器发送请求并获取数据，用于实现页面的异步更新4. 前端框架：前端开发中常用的框架有React、Vue、Angular等，它们提供了一些组件和工具，用于简化开发流程四、响应式设计响应式设计是指设计和开发能够适应不同设备和屏幕尺寸的网站和应用程序。
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前端技术知识点之多之杂，要想在考试中取得好成绩，需要对各种知识点进行深入理解和掌握。
一、引言随着互联网技术的飞速发展，网页设计已成为当今社会最热门的行业之一。
为了提高自身技能，我参加了为期一个月的网页设计实训课程。
在此期间，我学习了大量的网页设计知识，现将实训过程中的知识点总结如下。
一、HTML基础知识1. HTML文档结构：了解HTML文档的基本结构，包括文档声明、头部、主体等部分。
2. 基本标签：掌握常用标签的语法和用法，如标题、段落、列表、链接、图片等。
3. 表单元素：了解表单元素的使用方法，如输入框、下拉菜单、单选框、复选框等。
4. HTML5新特性：学习HTML5新标签和特性，如canvas、video、audio等。
二、CSS样式设计1. CSS基础语法：掌握CSS的语法规则，包括选择器、属性、值等。
2. 布局技术：学习常用的布局技术，如浮动、定位、网格布局等。
3. 响应式设计：了解响应式设计的原理和实现方法，以适应不同设备。
4. 常用CSS框架：学习常用的CSS框架，如Bootstrap、Foundation等。
三、JavaScript编程1. 基本语法：掌握JavaScript的基本语法，包括变量、数据类型、运算符、函数等。
2. DOM操作：学习如何操作网页文档对象模型（DOM），如获取元素、修改属性、添加事件等。
3. 事件处理：了解事件处理机制，掌握常用事件，如鼠标事件、键盘事件等。
4. 常用库和框架：学习常用的JavaScript库和框架，如jQuery、Angular、React等。
四、网页设计工具1. Dreamweaver：掌握Dreamweaver的基本操作，如创建网站、编辑HTML、CSS、JavaScript等。
2. Photoshop：学习Photoshop的基本操作，如图像处理、切图、设计等。
3. Sublime Text：了解Sublime Text的编辑功能和快捷键。
4. Git：学习使用Git进行版本控制，提高代码管理能力。
五、网页设计规范1. 界面布局：了解网页界面布局的规范，如页面宽度、高度、间距等。
网页设计期末知识点总结一、HTML基础知识1. HTML是什么，它的作用和用途2. HTML元素的基本语法和结构3. HTML标签的分类和用法4. HTML实体字符的表示和使用5. HTML的注释和注释的写法6. HTML文档的基本结构和布局7. HTML中常用的元素和属性二、CSS基础知识1. CSS是什么，它的作用和用途2. CSS的基本语法和结构3. CSS的选择器和选择器的种类4. CSS的样式和样式的应用5. CSS的盒模型和盒模型的属性6. CSS的浮动和定位7. CSS的布局和布局的种类8. CSS的颜色和背景9. CSS的文本和字体10. CSS的边框和边框的样式11. CSS的过渡和动画12. CSS的响应式设计三、JavaScript基础知识1. JavaScript是什么，它的作用和用途2. JavaScript的基本语法和结构3. JavaScript的变量和数据类型4. JavaScript的运算符和表达式5. JavaScript的流程控制和条件语句6. JavaScript的数组和对象7. JavaScript的函数和作用域8. JavaScript的事件和事件的处理9. JavaScript的DOM操作和DOM的结构10. JavaScript的定时器和动画四、响应式设计1. 什么是响应式设计，它的作用和用途2. 响应式设计的基本原理和实现方式3. 媒体查询和媒体查询的语法4. 移动端设计和移动端适配5. 响应式图片和响应式视频五、网页优化1. 什么是网页优化，它的作用和用途2. 网页加载速度的优化和优化的方法3. 图片和视频的优化和优化的技巧4. 脚本和样式的加载优化和优化的策略六、网页安全1. 网页安全的基本概念和作用2. XSS攻击和防范3. CSRF攻击和防范4. SQL注入和防范5. 网络劫持和防范以上就是网页设计期末考试的基本知识点总结，希望对大家有所帮助。
HTML超文本标记语言，一种规范预定义,已经定义好的各种标记，只需要我们把对应的标记放到合适的位置一. HTML基本语法与基本结构(重点）标记的使用1、标记一般成对出现，包含开始标记和结束标记2、标记可以嵌套使用，但是不能交叉使用3、标记不区分大小写属性的使用（属性控制内容的格式,额外的格式）1、书写位置在开始标记中2、格式：属性名=“属性值",多个属性之间使用空格分割3、不同的标记属性可能相同也可能不同4、属性使用的标记中,只能对本标中的内容记产生影响5、属性不冲突时，效果叠加，属性冲突时，就近原则html的基本结构〈html>-—--声明网页〈head〉———-网页的头部信息<title〉标题〈/title〉—---网页的标题</head><body〉—---网页的主体，网页内容主要展示的部分网页的主要内容</body>〈/html〉二. 文本格式的应用1、标题标记<hn>,n的取值1-6,1级标题最大效果:加粗显示，带有自动换行属性:align控制标题的对齐方式，取值left（左对齐，默认值）|center(居中）｜right （右对齐）2、段落标记<p〉效果:把内容分段展示，自动换行属性:align，控制段落内容的对齐方式,取值left（左对齐，默认值）|center（居中）｜right(右对齐）3、换行符〈br /〉，单标记，不需要结束标记，换行但不分段空格符号: 表示一个空格强制换行符：<br /〉4、水平线标记<HR />，单标记效果：水平线,默认是一个粗细为2px（像素）的线条属性：size 控制水平线的粗细，取值为整数，单位为像素（px）width 控制水平线的长度,取值可以是像素单位,也可以是百分数（相对于浏览器窗口百分比)noshade设置水平线不带有阴影，该属性不需要取值color 设置水平线的颜色，取值可以是英文的颜色值，也可以是十六进制的颜色代码align 控制水平线的对齐方式，取值left(左对齐）｜center(居中，默认值）|right(右对齐）5、分节标记<div〉效果：把内容设置为一节，前后带有自动换行属性：align控制div中内容的对齐方式,取值left（左对齐，默认值）｜center（居中）|right（右对齐）6、居中标记符<center>效果：把center标记中的内容居中显示7、文本控制标记<font>效果:控制字体的各种显示样式属性：size 控制字体的大小，取值为绝对值时，1--7，数字越大字体越大，取相对值时,参考的是默认字体（3号），取值在-2-—+4之间color 控制字体的颜色face 控制字体的字体，取值可以是多个值，多个值之间使用逗号分割,取值时从左往右依次取值，找到合适的值为止，假如都不支持，使用默认格式显示8、字体的物理样式加粗：<b>斜体：〈i>下划线:〈u〉删除线：<s〉上标:<sup〉下标：〈sub>1、常用逻辑字符〈ADDRESS〉网页设计者或维护者的信息,通常显示为斜体<CITE> 表示文本属于引用,通常显示为斜体<CODE〉• 表示程序代码,通常显示为固定宽度字体<DFN> • 表示定义了的术语，通常显示为黑体或斜体〈EM> 强调某些字词，通常显示为斜体〈KBD〉表用户的键盘输入,通常显示为固定宽度字体〈SAMP> 表示文本样本,通常显示为固定宽度字体〈STRONG〉特别强调某些字词，通常显示为粗体<VAR> 表示变量，通常显示为斜体2、列表标记1、有序列表,〈ol〉，需要配合〈li>标记使用一个<li>标记对应一个选项ol的属性：type 控制列表的符号样式，取值1|A|a｜i|I，默认是1start 控制列表的起始值，取值为任意的整数li的属性:type控制选项自身的符号样式，取值1|A｜a|i|Ivalue控制选项本身的起始值，取值为任意整数，但是修改自身起始值之后,会对同一个列表中本选项之后的同级<li〉标记产生影响2、无序列表，<ul>，配合<li>标记使用一个<li>标记对应一个选项ul的属性:type 控制所有选项的符号样式，取值disc(实心圆，默认值）｜circle（空心圆）｜square（方块）li的属性：type控制选项本身的符号样式li标记用在ol中，type属性的取值跟ol的type属性取值走，用在ul中，跟着ul的type属性取值走3、定义列表，<dl〉，完成对定义列表的声明<dt>，术语标记，可以理解为类似于列表选项的标题使用〈dd>,描述标记，可以理解为类似于列表的选项使用三. 在网页中使用图片标记：〈img>,单标记，不需要结束标记属性: src 引入图片资源的路径绝对路径：资源在服务器上的位置，该位置是从盘符出发相对路径：资源在服务器上的相对位置，从网页本身出发.。
HTML文档的简单编辑认识网页的实质；了解HTML文件的结构，掌握HTML文挡的编辑方法；能够读懂简单的HTML网页文件代码。
一、HTML(HyperText Markup Language,超文本标记语言)1.网页的实质：用HTML写成的文档，可以通过浏览器进行浏览。
2.HTML采用一组特定的标记来描述Web页面的元素结构、输出格式、图像显示和超级链接等。
二、HTML文档的结构<html> html文件开始<head>文件头开始……文件头</head> 文件头结束<body>文件体开始……文件体</body>文件体结束</html>html文件结束三、Html元素的表示方法1.<元素名>文件或超文本</元素名>2.<元素名属性名＝"属性值...">文本或超文本</元素名>3.<元素名>四、HTML的基本元素HTML元素含义和位置<html> </html>声明为一个html文件，在文件开头使用开始标记，结尾使用结束标记<head> </head>声明网页的头，紧跟在<html>开始标记之后<title> </title>声明网页的标题，在head开始和结束标记之间<body> </body>声明文件中包含的内容（所有的文本、图片及文档中其他标记）<a href=" "> </a>链接标记，用于定义超级链接来链接其他文件<img src=" ">插入一个图像文件<table> </table>插入一个表格，其内容还应有行与列的描述<br>换行标记<p> </p>段落标记，为文字、图片、表格等加一空行<font> </font>字体标记，设定字体、颜色和字号等<center></center>居中，使文字、图片、表格等居中显示<form></form>创建一个表单，定义表单的开始和结束位置<hr>插入一条水平分隔线HTML代码分析基本结构认识链接元素表单练习提示：查看→源文件知识拓展HTML语言教程思考与实践任务1.阅读教材114页任务1，教材115页任务2的程序代码2.实践练习:下载练习素材请使用Dreamweaver打开练习素材中的html-ex01.htm和html-ex02.htm文件，完善网页代码。
网页设计相关知识点总结一、网页设计的基本原则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. 图片和图标：选择合适的图片和图标，在不过分增加页面加载时间的情况下使页面更具吸引力。
html5所有知识点HTML5是一种用于构建和呈现网页的标准技术。
它引入了很多新的元素和功能，使得开发者能够创建更强大、更丰富的网页应用程序。
下面是HTML5的一些重要知识点：1. 语义化标签：HTML5引入了一些新的语义化标签，如`<header>`、`<nav>`、`<article>`等，以提供更清晰的结构和含义，使搜索引擎更好地理解网页内容。
2. 视频和音频：HTML5提供了`<video>`和`<audio>`元素，使开发者可以直接在网页上嵌入视频和音频内容，无需使用第三方插件，提高了用户体验。
3. 画布(Canvas)：HTML5的`<canvas>`元素允许开发者使用JavaScript在网页上绘制图形、动画和游戏等交互式内容，为用户提供更多的视觉效果。
4. 本地存储：HTML5引入了新的本地存储API，如Web Storage和IndexedDB，使得网页应用能够在用户的浏览器中存储数据，提供离线访问和更好的性能。
5. 地理定位：HTML5通过Geolocation API提供了获取用户地理位置的能力，使得开发者可以为用户提供基于地理位置的个性化体验，比如找到附近的餐厅或提供导航服务。
6. Web Workers：HTML5的Web Workers允许开发者在浏览器后台运行脚本，以提高应用的性能和响应能力，从而更好地处理复杂的计算任务。
7. 响应式设计：HTML5为开发者提供了媒体查询和弹性布局等技术，使得网页可以根据设备的屏幕大小和分辨率进行自适应布局和样式调整，实现响应式设计。
8. 语义化表单：HTML5引入了一些新的表单元素和属性，如`<inputtype="email">`、`<input type="date">`、`<input type="range">`等，提供了更丰富、更语义化的表单输入类型。
HTML知识点总结第一章知识总结1.HTML文档结构（括号里面的是注释）<html><head>（头部部分）<meta http-equiv=“Content-Type”content=“text/html”; charset=gb2312 >(可写可不写)<title>显示在浏览器标题栏中的标题</title></head><body>（主体部分）（页面容）</body></html>1)标签<body>中的属性有：bgcolor=颜色（背景颜色）background=图片的绝对路径或相对路径（背景图片）2.标题标签<Hn></Hn> n取1~6（设置文字标题）：1)<H1>一级标题</H1>2)<H2>二级标题</H2>3)<H3>三级标题</H3>4)<H4>四级标题</H4>5)<H5>五级标题</H5>6)<H6>六级标题</H6>3.<font></font>标签（设置文字属性）<font size="字体大小" color="字体颜色" face="字体类型">要设置的文字</font>4.特殊符号5.行的控制相关标签段落标签<p></p> <p align="left" (左对齐)/ "right" (右对齐)/ "center" (居中)>(段落的对其方式)换行标签<br>6.图片标签<img><img src="图片地址" width="图片宽度" height="图片高度" alt="图片的提示文字"align="top/bottom/middle/left/right" border="图片的边框宽度">(align是用于调整图片相对于周围文本的对其方式)7.文字布局1)水平线<hr size="厚度" width="宽度" color="颜色">2)有序列表的语法<ol type=序号类型>（序号类型有：1、a、A、ⅰ、I）<li>填写信息</li>（必须用<li></li>将容包括起来）<li>填写信息</li><li>填写信息</li>……</ol>3)无序列表语法<ul type="序号类型">（序号类型有：disc(默认值,实心圆点)、circle(空心圆环)、square(空心正方形)）<li>所写容<li>（必须用<li></li>将容包括起来）</ul>4)预格式文本语法<pre>(具体的文本格式，这个格式在时是不改变的哦！)</pre>8.页面语法1)到其他页面<a href=“地址”>连接标志</a>2)到本页面首先创建一个锚的锚记点：<a href=“#锚记点名称”>主题名称</a> 然后在具体要到的地方设置name:<a name=“锚记点名称”></a> （锚记点前面要加上#号）3)电子<a href=“mailto：地址”>站长</a>(注意不能忘了mailto)9.滚动标签的语法<marquee scrolldelay=滚动延迟时间direction=up/down/left/right(滚动方向) onmouseover=“this.stop()”(当鼠标指在上面时停止滚动)onmouseout=“this.start()”(当鼠标离开时继续滚动) >滚动的文字和图像</marquee>第二章知识点总结1.表格的基本框架语法<table border=表格的边框的宽度(一般不超过5)width=表格的宽度height=表格的高度bordercolor=表格边框线的颜色bgcolor=整个表格的背景颜色background=表格的背景图片地址(背景图片) align=表格对齐方式><tr bgcolor=行的背景颜色>(行)<td colspan=跨的列数rowspan=跨的行数bgcolor=本单元格的背景颜色background=本单元格的背景图片地址(背景图片) align=单元格中的容对齐方式(right/left/center/)></td>(单元格) </tr></table>2.填充、间距属性cellpadding:容与单元格边框线的距离（填充）cellspacing：单元格之间的距离（外间距）第三章知识点总结1.表单的基本结构<form action="URL" name=表单名字method=提交数据的方式（post/get）>具体的容</form>2.表单中的元素1).<input>元素<input name=“”type=text size=文本框的大小maxlenght=限制输入的最大字符>(单行文本框)<input name=“”type=password size=文本框的大小maxlenght=限制输入的最大字符>(单行文本框——设置密码)<input name=“name” type=radio value=“男”checked(默认选定)>(单选按钮——男)(设置单选按钮的时候名字一定要一样)<input name=“name”type=radio value=“女”>(单选按钮——女)<input name=“” type=submit value=提交>(按钮——提交)<input name=“” type=reset value=重置>(按钮——重置)<input name=“”type=checkbox value=play(必须有) checked>玩游戏(复选框)2).<select></select>下拉列表元素语法：<select name=“”><option value=“”(必须有)>容</option><option value=“”(必须有)>容</option><option value=“”(必须有)>容</option><option value=“”(必须有)>容</option>……</select>3).<textarea></textarea>多行文本框元素语法：<textarea name=“”cols=“宽度” rows=“高度”(不要和合并单元格的rowspan和colspan相混淆)>具体的容</textarea>3.框架1).框架的基本结构(注意：此时不能要<body></body>)<framset cols=“25%，*”(分隔成左右两部分) rows=“25%，*”(分隔成上下两部分) border=框架边框的大小bordercolor=框架边框的颜色><frame name=“窗口的名字”src=“此窗口要显示的文件地址”scrolling=yes/no(有无滚动条) noresize(禁止改变框架窗口的大小)></framset>2).框架页面之间的第一步：在设计好的框架页面中给每个部分定义一个名字；Eg:<frame name=”窗口的名字”src=“”>第二步：设置导航栏中的超的target目标窗口属性；Eg:<a href=“lianjie.html”target=“要显示的窗口的名字”>标志</a>第四章知识点总结1.样式类型，分为三种1）标签选择器语法：标签{属性:属性值;}<style type=”text/css”>P{font-size:20px;color:blue}</style>不需要调用，直接创建标签就能使用2）class选择器语法：.类名{属性:属性值;}<style type=”text/css”>.my{font-size:20px;color:blue}</style>调用：在需要使用的地方做为属性来调用（class=类名）3）ID选择器语法：#名称{属性:属性值;}<style type=”text/css”>#my{font-size:20px;color:blue}</style>调用：在需要使用的地方做为属性来调用（ID=名称）2.常用的样式属性1)文本属性font-size:字体大小font-family:字体类型font-style:字体样式（斜体）color:字体颜色text-algin:文本的对齐方式（left/right/center）2)背景属性background-color:背景颜色background-image:url(“图片地址”)背景图片background-repeat:（repeat/no-repeat/repeat-x/repeat-y）背景图片如何被重复显示3)方框属性(1)边界属性margin-left:设置对象的左边距margin-right: 设置对象的右边距margin-top: 设置对象的上边距margin-bottom: 设置对象的下边距(2)填充属性padding-left:设置容与左边框之间的距离padding-right: 设置容与右边框之间的距离padding-top: 设置容与上边框之间的距离padding-bottom:设置容与下边框之间的距离(3)边框属性border-style:(soild细边框/dashed/虚边框)边框样式border-width:边框宽度border-color:边框颜色4)超样式A:link{}未被访问的样式A:visited{}被访问过的样式A:hover{}鼠标悬浮在上时的样式A:active{}鼠标下在按下时文字的样式3.样式表的3类应用方式1)行样式表(改变某一行文字的样式)语法：<P style=”属性:属性值;”>文字</P>2)嵌样式表(在一个页面使用)语法：<style type=”test/css”>//样式规则</style>3)外部样式表(改变多个页面中的不同页面元素的样式)以CSS为后缀名的文件。
