下载文档原格式
CSS动画制作从入门到精通CSS（层叠样式表）动画是一种用来为网页元素添加动态效果的技术。
通过使用CSS属性和关键帧，我们可以创建各种各样的动画，使网页更加生动有趣。
本文将从入门级别开始介绍CSS动画制作的基础知识，逐步深入，带你掌握CSS动画制作的各种技巧和实践。
一、入门篇1.1 CSS动画基础概念CSS动画可以通过提供的属性和关键帧来实现。
其中，常用的属性有animation、transform和transition等。
animation属性用于定义动画效果的名称、持续时间和动画方式；transform属性可以改变元素的形状、大小或者位置；transition属性用于定义元素过渡效果的属性和持续时间。
1.2 创建简单的CSS动画通过简单的代码示例，我们可以学习如何创建一个基本的CSS动画。
比如，通过设置animation属性的值，我们可以使一个元素在指定时间内从起始位置平滑地移动到目标位置。
通过设置transition属性的值，我们可以使元素的某个属性在一定时间内实现平滑的过渡效果。
二、进阶篇2.1 使用关键帧实现动画效果关键帧是CSS动画制作中非常重要的概念。
通过定义一系列关键帧，我们可以控制元素在动画过程中的各个状态和效果。
例如，通过设置@keyframes规则，我们可以定义一个元素在指定时间内逐渐改变颜色、旋转或者缩放的动画效果。
2.2 制作多个元素的动画组合有时候，我们需要让多个元素以一定的方式进行协调的动画效果。
比如，我们可以通过创建一个动画组，将多个元素的动画效果进行组合，使它们同时或者按照一定顺序进行动画播放。
这种方式可以制作更为复杂和炫酷的动画效果。
三、高级篇3.1 使用CSS库加速动画制作除了使用原生的CSS属性和关键帧制作动画效果外，我们还可以借助一些优秀的CSS库来加速动画的制作过程。
这些库提供了丰富的动画效果模板和封装好的API，使我们可以更快速地制作出专业级别的动画效果。
CSS超全笔记（适合新⼿⼊门）CSSCSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜⾊、背景的控制及整体排版等，⽽且还可以针对不同的浏览器设置不同的样式。
引⼊CSS样式表（书写位置）CSS可以写到那个位置？是不是⼀定写到html⽂件⾥⾯呢？内部样式表内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下：<head><style type="text/CSS">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head>语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
type="text/CSS" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
⾏内式（内联样式）内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>语法中style是标签的属性，实际上任何HTML标签都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标签及嵌套在其中的⼦标签起作⽤。
外部样式表（外链式）链⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：<head><link href="CSS⽂件的路径" rel="stylesheet" /></head>注意： link 是个单标签哦该语法中，link标签需要放在的三个属性head头部标签中，并且必须指定link标签，具体如下：href：定义所链接外部样式表⽂件的URL，可以是相对路径，也可以是绝对路径。
以下是一份关于CSS的笔记，涵盖了基础概念、属性和布局技巧等方面：一、基础概念CSS是层叠式样式表的简称，也称为级联样式表或样式表。
它主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。
CSS文件的后缀是.css，通常在HTML文档中嵌入或链接到外部CSS文件。
CSS不区分大小写，建议小写。
CSS具有层叠性，一个元素可以设置多个样式。
当样式冲突时，优先级高的样式生效；优先级相同时，写在后面的样式生效。
二、CSS属性和布局技巧文本样式：可以使用CSS设置文本的颜色、字体、大小、对齐方式等。
例如，color属性用于设置文本颜色，font-family属性用于设置字体，font-size属性用于设置字体大小，text-align属性用于设置文本对齐方式。
图片样式：可以使用CSS设置图片的宽度、高度、边框、边距等。
例如，width和height属性用于设置图片宽度和高度，border属性用于设置图片边框，margin和padding属性用于设置图片边距。
布局技巧：CSS提供了多种布局技巧，如浮动布局、定位布局、弹性布局等。
其中，浮动布局是最常用的布局方式之一，通过float属性可以让元素左右浮动；定位布局通过position属性可以实现元素的定位；弹性布局则是一种更灵活的布局方式，通过flexbox或grid属性可以实现元素的灵活布局。
三、CSS选择器CSS选择器是用于选择HTML元素的一种语法。
常用的选择器有元素选择器、类选择器、ID选择器等。
例如，p选择器可以选择所有的段落元素，.myClass选择器可以选择所有类名为myClass的元素，#myID选择器可以选择ID为myID的元素。
四、CSS的引入方式内联样式：在HTML标签内使用style属性直接定义CSS代码。
这种方式的优点是方便快捷，但只对当前元素生效。
内部样式表：在HTML文档的<head>部分使用<style>标签定义CSS代码。
CSS实训总结在这次CSS实训中，我学到了很多关于CSS的知识和技能。
通过实际操作，我深入了解了CSS的选择器、样式规则、布局和响应式设计等重要概念。
以下是我对这次实训的总结：1. CSS基础知识：在实训开始之前，我重新温习了CSS的基础知识，包括选择器、样式规则、颜色和字体、盒模型等。
这些基础知识对于理解CSS的核心概念非常重要。
2. 选择器：在实训中，我学习了更多的选择器，如类选择器、ID选择器、属性选择器等。
这些选择器让我能够更精确地定位和样式化页面元素。
通过使用不同的选择器，我可以根据需要选择单个元素或一组元素进行样式化。
3. 样式规则：在这次实训中，我学习了更多的CSS样式规则，如背景、边框、阴影、渐变等。
通过这些样式规则，我可以创建更加美观和专业的网页设计。
此外，我还学习了如何使用CSS动画和过渡效果，为网页添加动态效果。
4. 布局：在实训中，我学习了如何使用CSS进行页面布局。
通过使用Flexbox和Grid布局，我可以轻松地创建复杂的页面布局。
这些布局方法使得页面元素的排列和分布更加灵活和可控。
5. 响应式设计：在这次实训中，我学习了如何使用媒体查询和响应式设计。
通过使用媒体查询，我可以根据不同的设备和屏幕尺寸，应用不同的样式规则。
这使得我的网页能够在各种设备和屏幕尺寸上良好地显示和使用。
6. 实际应用：在实训中，我通过实际项目来应用所学的CSS知识。
我为一个虚构的网站设计了样式，并实现了响应式布局。
在这个过程中，我遇到了很多问题，但通过查阅文档和请教老师，我成功地解决了这些问题。
这个过程让我更加深入地理解了CSS的实际应用和技巧。
7. 总结：通过这次CSS实训，我不仅温习了基础知识，还学习了更多的高级技能。
我掌握了如何使用选择器、样式规则、布局和响应式设计来创建美观而专业的网页。
这次实训对我的专业技能的提升非常有帮助，也为我未来的职业发展打下了坚实的基础。
CSS入门和高级技巧第4天课堂笔记（本课程共8天）目录CSS入门和高级技巧 (1)目录 (2)一、复习 (3)二、深入了解浮动的性质 (5)2.1 浮动的元素脱离标准流，没有标准流的行块之分了 (5)2.2 依次贴边 (6)2.3 竖直方向上的margin塌陷现象消失 (7)2.4 让出了标准流 (7)2.5 字围 (8)三、清除浮动 (9)3.1 父亲不能被浮动的儿子撑出高 (9)3.2 治这个病的一个偏方 (10)3.3 有高度的盒子能够管住自己内部的浮动元素 (12)3.4 清除浮动方法1：clear:both; (13)3.5 清除浮动方法2：隔墙 (14)3.6 清除浮动方法3：内墙法 (15)3.7 清除浮动方法4：overflow:hidden;法 (15)一、复习● CSS ：负责样式层，层叠式样式表cascading style sheet。
CSS2.1，最新版本CSS3。
● CSS选择器：选择哪些元素加样式。
基本选择3种：标签p、id选择器#id、class选择器.；高级选择器4种：后代选择器div p 、交集选择器div.haha 、并集选择器div,p 、通配符*id选择器：全页面id唯一；class选择器：同一个标签可以带多个class：1<p class=”para1 spec”></p>class选择器不要求页面唯一1<p class=”para1 spec”></p>2<h3 class=”spec”></h3>●继承性：哪些属性能继承：color、font-、text-、line-开头的。
不能继承的：background-color、盒模型的属性、浮动、定位1body{2 font-size:12px;3}●层叠性：遇见冲突，听谁的。
有一个非常严密的图。
!important提升权重，要知道!important能提升什么，不能提升什么？比如不能影响就近原则：离得近的就是近的，远的写!important没用；不能把继承来的提升权重：选中了的就是选中了的，继承来的!important也无法干掉选中了的。
:visited a:visited选择所有访问过的链接:active a:active选择活动链接:hover a:hover选择鼠标在链接上面时:focus input:focus选择具有焦点的输入元素:first-letter p:first-letter选择每一个元素的第一个字母:first-line p:first-line选择每一个元素的第一行:first-child p:first-child 指定只有当元素是其父级的第一个子级的样式。
:before p:before在每个元素之前插入内容:after p:after在每个元素之后插入内容:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有元素element1~element2p~ul选择p元素之后的每一个ul元素[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素[attribute**=value*]a[src*="44lan"]选择每一个src属性的值包含子字符串"44lan"的元素:first-of-type p:first-of-type选择每个p元素是其父级的第一个p元素:last-of-type p:last-of-type选择每个p元素是其父级的最后一个p元素:only-of-type p:only-of-type选择每个p元素是其父级的唯一p元素:only-child p:only-child选择每个p元素是其父级的唯一子元素:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数:last-child p:last-child选择每个p元素是其父级的最后一个子级。
css笔记（Css笔记）css笔记(Css笔记)[CSS style sheet]Defined format:1, in the <head><style> CSS stylesheet </style></head>2, create a new CSS file, write the CSS style sheet sequence in the file, and then in the page by <Link Href=, "style.css", "Type=", "Text/CSS", "Stylesheet", "REL=" > this command to introduce CSS Style definition format:1, label name {The style property 1: value 1;The style property 2: value 2;....}* the label name here refers to the basic HTML element.For example, (P, table, div, span, DL, DD, DT, IMG, etc.)2. Class name {The style property 1: value 1;The style property 2: value 2;....}* you can first specify which class the object will use, and then set the style to the class.When calling a style, you must use the class= class name3, #ID name {The style property 1: value 1;The style property 2: value 2;....}* you can first set the object using which ID, and then set the style to the ID.When calling a style, you must use the form of the ID=ID name CSS style standard properties:First, font modification related1, font sequenceFormat: font-family: font sequence;For example: font-family: bold, italics, arial;2, font sizeFormat: font-size: font value;For example: font-size:20px; / * * / font size of 20 pixels Font-size:5in; / * * / font size 5 inchesFont-size:12pt; / * * / font size of 12 poundsFont-size:5cm; / * * / font size 5 cmFont-size:40mm; / * * / font size 40 mmFont-size:150%; 150%*/ / * font size for the original sizeFont-size:0.8em; 80%*/ / * font size for the original size3, font boldFormat: font-weight: style;For example: font-weight:bold; / * * /.Font-weight:normal; / * * / as normal4, font tiltFormat: font-style: style;For example: font-style:italic; / * * / tiltFont-style:normal; / * * / as normal5, font sizeFormat: text-transform: style;For example: text-transform:uppercase; / * * / all capsAll lowercase text-transform:lowercase; / * * /Text-transform:capitalize; / * * / initialsText-transform:none; / * * / cancel case conversion6, row heightFormat: line-height: row high value;For example: line-height:25px; / * will be set to 25 pixels high.* this property can also set Px, in, Pt, cm, mm, EM, and percentages 7, colorFormat: color: color values;For example: color:red; / * * / redColor:#00ff00; / * * / for greenColor:rgb (0,0255); / * * / to blueColor:rgb (100%, 100%, 100%) / * * / as white8, font decorationFormat: text-decoration: modify effect;For example: text-decoration:underline; / * * /.Text-decoration:overline; / * * / DText-decoration:line-through; / * * / delete lineText-decoration:underline overline; / * * /.Text-decoration:none; / * * / without any modificationTwo, background related1 background colorFormat: background-color: color values;* use method with color attribute2. Background imageFormat: background-image:url (background file);Example: background-image:url ("bg1.jpg");3, background map repeatFormat: background-repeat: attribute value;For example: background-repeat:no-repeat; / * * / A, not repeat Background-repeat:repeat-x; / * * / horizontal background repeat Background-repeat:repeat-y; / * * / longitudinal repeat background Background-repeat:repeat; / * * / background repeat4, background map positionFormat: background-position: location;Position: on -top, under -bottom, -centerLeft, -left, right, -right, -centerFor example: background-position:left top; / * * / the upper left corner of the backgroundBackground-position:center center; / * * / background CenterBackground-position:center bottom; / * * / lower backgroundBackground-position:30px 100px; / * level 30 vertical 100*/Background-position:10% 40%; / * level 10% vertical 40%*/5, background fixedFormat: background-attachment: property;For example: background-attachment:fixed; / * * / fixed background Background-attachment:scroll; / * * / background picture scroll Three, block1, word spacingFormat: word-spacing: value;For example: word-spacing:20px; / * the word distance is 20px*/ 2, letter spacingFormat: letter-spacing: value;For example: letter-spacing:5px; / * the letter spacing is set to5px*/3, text alignmentFormat: text-align: alignment;For example: text-align:left; / * * / text to the leftText-align:center; / * * / text to the centerText-align:right; / * * / text is right aligned4, vertical alignmentFormat: vertical-align: alignment;For example: vertical-align:top; / * * / alignment settings Vertical-align:bottom; / * * / alignment settingsVertical-align:middle; / * * / set justifycenter5, text indentationFormat: text-indent: text indent value;For example: text-indent:30px; / * * / text right indent 30px; Text-indent:-3cm; / * * / text left indent 3cm;Four, border1 width and heightFormat: width: width;Format: height: height;2, floatingFormat: float: mode;For example: float:left; / * * / content left floatingFloat:right; / * * / floating right content3, clear floatingFormat: clear: mode;For example: clear:left; / * * / has left floating clearance Clear:right; / * * / have the right to remove floatingClear:both; / * * / remove floating around4, boundary (outside of block)Format: margin-top:; / * * / object marginMargin-bottom:; / * * / object marginMargin-left:; / * * / object leftmarginMargin-right:; / * * / from the object on the rightMargin: 0px 20px; / * object bottom margin is 0px, about 20px*/ Margin: 5px 10px 20px 10px; / * set object, right, and left. Margin:5px; / * * / 5 pixel margin for object edges5, fill (within the block)Format: padding-top:; / * * / fill objectPadding-bottom:; / * * / object fillingPadding-left:; / * * / left fill objectPadding-right:; / * * / fill right objectPadding: 0px 20px; / * object filling is 0px, about 20px*/ Padding: 5px 10px 20px 10px; / * set object, right, left, * / fill Padding:5px; / * * / 5 pixel margin for object edgesFive, the sideline1, the sideline styleFormat: border-style: linear;For example: border-style:solid; / * * / lineBorder-style:dashed; / * * / lineBorder-style:dotted; / * * / dashBorder-style:double; / * * / double2, side widthFormat: border-width: thickness;For example: border-width:2px; /*2 pixel thick line *3, line colorFormat: border-color: thickness;For example: border-color:red; / * * / red line Expansion:Top line style border-top-styleTop line width border-top-widthTop line color border-top-colorLower line style border-bottom-styleLower line width border-bottom-width下边线颜色底部边框颜色左边线风格左边框样式左边线宽度左边框宽度左边线颜色左边框的颜色右边线风格边境风格右边线宽度权利边界的宽度右边线颜色边框颜色*可省略成边境:格式六、列表1、列表类型格式:列表样式类型:形状;例:列表样式类型:盘;/ * * /圆点目录样式类型:圆;/ * * /圆圈目录样式类型:广场;/ * * /方块目录样式类型:十进制;/ * * /数字目录样式类型:低/ * * /小写罗马数字罗马;目录样式类型:大写罗马数字;/ * * /大写罗马数字目录样式类型:低α;/ * * /小写字母目录样式类型:上α;/ * * /大写字母目录样式类型:无;/ * * /无2、列表图像格式:列表样式图像:URL(“图片文件”);例:列表样式图像:URL(”标志。
第12节 CSS Border(边框）12.1边框样式边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式可以设置的值:none: 默认无边框dotted:点线边框dashed:虚线边框solid:实线边框double: 双线边框groove: 3D沟槽边框ridge: 3D脊边框;inset: 3D嵌入边框。
12.2边框宽度border-width 属性为边框指定宽度。
可以设置的值:可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为border-color属性用于设置边框的颜色。
可以设置的值:name - 指定颜色的名称，如 "red"RGB - 指定 RGB 值, 如 "rgb(255,0,0)"Hex - 指定16进制值, 如 "#ff0000"12.4四个边框四个边框分别对应四个属性值：border-left左边框border-right右边框border-top上边框border-bottom下边框12.5每个边框上、右、下、左四个边框中，每个边框分别对应三个属性，比如对于上边框有：border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。
12.6使用方法[border].c{border-width:5px;border-style:solid; /*这个属性是必须的*/border-color:red;}也可以写为：.c{border:5px solid red;}12.7使用方法[border-style]-四个参数“上、右、下、左”.d{border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style: dashed;}也可以写为：.d{border-style:dotted solid double dashed;}12.8使用方法[border-style]-三个参数“上、左右、下”{border-top-style:dotted;border-right-style:solid;border-bottom-style:double;border-left-style: solid;}也可以写为：.e{border-style:dotted solid double;}12.9使用方法[border-style]-两个参数“上下、左右”.f{border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style: solid;}也可以写为：.f{border-style:dotted solid;}12.9使用方法[border-style]-一个参数“上右下左”.g{border-top-style:dotted;border-right-style: dotted;border-bottom-style:dotted;border-left-style: dotted;}也可以写为：.g{border-style:dotted;}12.9使用方法[其他]类似的用法。
css相关笔记【原创实用版】目录1.CSS 概述2.CSS 的基本语法3.CSS 选择器4.CSS 的盒模型5.CSS 的布局6.CSS 的样式7.CSS 的动画正文CSS，全称层叠样式表（Cascading Style Sheets），是一种用于描述HTML 或 XML 文档样式的样式表语言。
它是一种用来控制网页样式和布局的语言，使得网页开发者能够轻松地为网页设置字体、颜色、大小、间距、边框等样式。
CSS 的基本语法非常简单，主要由选择器（selector）、属性（property）和值（value）三部分组成。
例如：“p {color: red;}”，其中，“p”是选择器，表示所有段落元素；“color”是属性，表示文字颜色；“red”是值，表示文字颜色为红色。
CSS 选择器是 CSS 的核心功能之一，它可以用来选择需要应用样式的 HTML 元素。
CSS 选择器有很多种，包括标签选择器、类选择器、ID 选择器等。
例如，“p”是标签选择器，表示所有段落元素；“.classname”是类选择器，表示所有具有指定类名的元素；”#idname”是 ID 选择器，表示具有指定 ID 的元素。
CSS 的盒模型是 CSS 中一个重要的概念，它包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。
开发者可以通过设置这四个部分的样式，来控制元素在页面上的布局和显示效果。
CSS 的布局方式有很多种，包括浮动（float）、定位（position）、弹性盒子（flexbox）等。
开发者可以根据页面的需求，选择合适的布局方式。
CSS 的样式包括字体、颜色、大小、间距、边框等，开发者可以通过设置这些样式，来控制页面的显示效果。
CSS 的动画是一种可以让页面元素产生动态效果的技术，包括过渡（transition）、变换（transform）和动画（animation）等。
CSS动的实现知识点CSS动画的实现知识点CSS动画是一种通过使用CSS属性和值的变化来实现网页元素的动态效果的技术。
通过使用CSS动画，我们可以实现各种各样的交互和动态效果，使网页更加生动和吸引人。
本文将介绍一些CSS动画实现的关键知识点。
一、CSS transition过渡动画CSS transition是一种简单而强大的动画效果实现方式。
通过定义元素的初始状态和结束状态，以及过渡时间和过渡效果，就可以实现元素之间的平滑过渡动画。
以下是一些常用的transition属性：1. transition-property：指定需要过渡的CSS属性，比如width、height等。
2. transition-duration：指定过渡的持续时间，单位可以是毫秒(ms)或秒(s)。
3. transition-timing-function：指定过渡的时间曲线，比如ease、linear、ease-in、ease-out等。
4. transition-delay：指定过渡的延迟时间，可以用来实现元素按顺序出现的效果。
二、CSS keyframes关键帧动画CSS keyframes是一种更加灵活和复杂的动画实现方式。
通过定义一系列关键帧，指定每个关键帧的CSS属性值，就可以实现更加自由和多样化的动画效果。
以下是一些常用的keyframes属性：1. @keyframes：定义一个关键帧动画，可以指定动画的名字。
2. from和to：分别表示起始帧和结束帧，可以直接使用具体的百分比值（0%和100%）代替。
3. 百分比值：定义关键帧在动画过程中的具体位置，可以使用任意百分比值，比如50%、75%等。
4. animation-name：指定要使用的关键帧动画的名称。
5. animation-duration：指定动画的持续时间。
6. animation-timing-function：指定动画的时间曲线。
7. animation-delay：指定动画的延迟时间。
CSS视屏学习笔记第一章：字体的相关设置前面的相关介绍请看另一本笔记。
第一节：字体的颜色设置实例如下：1.h2{Color：rgb（0%,0%80%）；<!--括号里分别表示红色分量，绿色，和蓝色>}2.p{Color：#333333；<!--十六进制表示>}3.span{Color：red；}效果如下：第二节：字体1.font-size：设置字体：2.Font-weight：定义粗细，blod和lighter3.Font-style：定义斜体italic为斜体，normal 为正常的字体；4.Text-decoration：下滑线underline，顶划线overline，删除线线line-through，闪烁blink(只在fox浏览器中显示效果)5.Text-tansform：单词小写，capitalize首字母大写，lowercase全部小写，uppercase 全部大写。
摸拟google标记：代码：<html><head><title>文字字体</title><style type="text/css">p{font-size:60px;font-weight:bold;letter-spacing:-13px;/*设置字体的间距*/font-style:italic;/*斜体*/}.span1{color:rgb(0%,10%,80%);}.span2{color:red;}.span3{color:yellow;}.span4{color:rgb(0%,10%,80%);}.span5{color:rgb(0%,500%,10%);}.</style></head><body><p><span class="span1">G</span><span class="span2">o</span><span class="span3">o</span><span class="span4">g</span><span class="span5">l</span><span class="span2">e</span></p></body></html>第三节：段落对齐方式1.文字对齐方式：vertical-align：top，bottom，center，及顶对齐，底对齐，居中对齐2.首字放大：及<p>和<span>联合起来实现的效果图如下：代码及注释：<html><head><title>文字字体</title><style type="text/css">span{font-size:50px;font-weight:bold;color:blue;float:left; /* 首字下沉*/}</style></head><body><p><span>众</span>人继续欣赏景色，发现温泉中云雾、五彩斑谰，原来温泉水中有种细菌，它们的颜色能随水温改变。
常温时呈现黄褐色，温水中变成深红，热水则显碧绿，沸水中成为幽蓝。
</p></body></html>第二章：图片的相关设置第一节：图片边框的设置<html><head><title>文字字体</title><style type="text/css">.test{border-style:dotted;/*设置边框形状*/ border-color:red;/*设置边框颜色*/border-width:4px;/*设置边框宽度*//*Border:4px red dotted;*//*可以用border-left/right/top/bottom设置一条边得边框*/}</style></head><body><img src="grape.jpg" class="test"></body></html>效果图：实例2效果图：代码：<style type="text/css">.test{border-left-color:red;/*对左边框颜色的设置*/border-left-width:10px;border-left-style:solid;border-right:10px blue solid;/*对右边框的设置*/ border-bottom:10px gray groove;border-top:10px #CC00FF solid;float:left;}：图片的缩放Width：80px ;设置图片的宽度，Height:60px;设置图片的高度这里牙可以用百分比，不过显示时是浏览器的多少效果图：第二节：图片的对齐方式<p>竖直对齐<img src="donkey.jpg" style="vertical-align:baseline;">方式:baseline<img src="miki.jpg" style="vertical-align:baseline;">方式</p> 控制对齐方式的是style="vertical-align:baseline;"其值可以是：baseline，baseline，bottom，middle，sub，Super，text-bottom，text-top，top！第三节：图文混排主要是在图片的的css样式中添加了float：left；代码：<html><head><title>文字字体</title><style type="text/css">.test{border:4px red dotted;float:left;}.test1{font-size:50px;font-weight:blod;line-height:1.2em; /*设置文字行距*/float:left;}</style></head><body><img src="grape.jpg" class="test" ><p><span class="test1">总</span>是在我有是的时候找我，我真的很少衡器！</p></body></html>效果图：第四节：诗画效果效果图：文字竖排显示代码：writing-mode:tb-rl;竖排文字间隔代码：line-height:30px;第三章：CSS设置表格和表单样式第一节：表格的标记<table> 表<tr>行<td>列<th>第一行<caption>标题这些标记都是成对的！第二节：表格交互的变色利用css实现奇数行添加类寄存器Tr.altrow{ background-color：#777；}第三节：CSS与表单下拉框：<select name="color" id="color"><option value="red">红</option><option value="green">绿</option><option value="blue">蓝</option><option value="yellow">黄</option><option value="cyan">青</option><option value="purple">紫</option></select>复选框<input type="checkbox" name="hobby" id="book" value="book">看书<input type="checkbox" name="hobby" id="net" value="net">上网留言框：<textarea name="comments" id="comments" cols="30" rows="4"></textarea>按钮：<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">value的值为显示的值像文字一样的输入效果：效果：Css代码：.text{border:0px white solid;border-bottom:1px gray solid;}.submit{background-color:transparent;border:0px;}Body中的代码<p>请输入您的姓名：<input type="textbox" id="text" name="text" class="text"><input class="submit" type="button" name="tijiao" id="tijiao" value="提交" ></p>第四节：实现表格直接输入将表格的每一个单元格中嵌套输入框，同时在通过css 样式去掉输入框第四章：页面和浏览器元素第一节：动态链接的三个状态a{color:red; text-decoration:none;}第一次访问时字体为红色，没有下划线；a:hover{ /* 鼠标移到连接上的样式*/color:red; /* 深蓝*/text-decoration:none; /* 无下划线*/ }a:visited{ /* 访问过的超链接*/ color:#000000; /* 黑色*/text-decoration:none; /* 无下划线*/ }（无法显示）a:link{ /* 超链接正常状态下的样式*/color:red; /* 深蓝*/text-decoration:none; /* 无下划线*/ }（同上）第二节：按钮式的超链接效果图：注意事项：在显示这种效果时一定要注意在开始时上边框和左边框颜色一致，下边框和右边框颜色一致，当鼠标移到选项上时在css中的设置是原来的两组颜色对调；代码：a{color:red; /* 深蓝*/text-decoration:none;padding:4px 10px 4px 10px;border-top: 1px solid #EEEEEE; /* 边框实现阴影效果*/border-left: 1px solid #EEEEEE;border-bottom: 1px solid #717171;border-right: 1px solid #717171;background-color:#ecd8db;}a:hover{ /* 鼠标经过时的超链接*/color:#821818; /* 改变文字颜色*/padding:5px 8px 3px 12px; /* 改变文字位置*/background-color:#e2c4c9; /* 改变背景色*/border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果*/border-left: 1px solid #717171;border-bottom: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE;}第三节：浮雕式按钮：与背景图片结合使用第四节：鼠标的变动用css样式将你要设置的按钮的鼠标的样式进行简单的设置：列a.help:hover{cursor:help;}显示效果是在鼠标移到选项上时显示一个小问号在鼠标边上！滚动跳的设置（仅仅适合IE浏览器）效果图：设置滚动条的代码：.largetext { /* 文本框滚动条*/scrollbar-3dlight-color: #B0C4DE;/* 左边和上边的颜色*/scrollbar-arrow-color:#FFFFFF;/* 小三角形按钮的颜色*/scrollbar-base-color: #8BA9CF;/* 基本底色*/scrollbar-darkshadow-color: #436DA3;/* 右边和下边的颜色*/scrollbar-face-color: #34547E;/*滚动条显示的颜色*/scrollbar-highlight-color: #E6ECF4;/*滑动按钮下底部的颜色*/scrollbar-shadow-color:#000000;/* 右边和下边倒影的颜色*/}<textarea rows="6" cols="50"class="largetext"></textarea>有滚动条的文本框第四章：制作菜单第一节：项目列表<ul><li>dsdfsd<l/i></ul>Ul表示的是无符号的列表，但是在css中可以该表符号ul{list-style-type：decinal}显示为十进制图片作为项目符号：ul{list-style-image：url（1.jpg）；}此方法在ie和fi中显示不是一样的。
