CSS视屏学习笔记
CSS动画制作从入门到精通
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超全笔记（适合新手入门）
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的笔记，涵盖了基础概念、属性和布局技巧等方面：一、基础概念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的知识和技能。
通过实际操作，我深入了解了CSS的选择器、样式规则、布局和响应式设计等重要概念。
以下是我对这次实训的总结：1. CSS基础知识：在实训开始之前，我重新温习了CSS的基础知识，包括选择器、样式规则、颜色和字体、盒模型等。
这些基础知识对于理解CSS的核心概念非常重要。
2. 选择器：在实训中，我学习了更多的选择器，如类选择器、ID选择器、属性选择器等。
这些选择器让我能够更精确地定位和样式化页面元素。
通过使用不同的选择器，我可以根据需要选择单个元素或一组元素进行样式化。
3. 样式规则：在这次实训中，我学习了更多的CSS样式规则，如背景、边框、阴影、渐变等。
通过这些样式规则，我可以创建更加美观和专业的网页设计。
此外，我还学习了如何使用CSS动画和过渡效果，为网页添加动态效果。
4. 布局：在实训中，我学习了如何使用CSS进行页面布局。
通过使用Flexbox和Grid布局，我可以轻松地创建复杂的页面布局。
这些布局方法使得页面元素的排列和分布更加灵活和可控。
5. 响应式设计：在这次实训中，我学习了如何使用媒体查询和响应式设计。
通过使用媒体查询，我可以根据不同的设备和屏幕尺寸，应用不同的样式规则。
这使得我的网页能够在各种设备和屏幕尺寸上良好地显示和使用。
6. 实际应用：在实训中，我通过实际项目来应用所学的CSS知识。
我为一个虚构的网站设计了样式，并实现了响应式布局。
在这个过程中，我遇到了很多问题，但通过查阅文档和请教老师，我成功地解决了这些问题。
这个过程让我更加深入地理解了CSS的实际应用和技巧。
7. 总结：通过这次CSS实训，我不仅温习了基础知识，还学习了更多的高级技能。
我掌握了如何使用选择器、样式规则、布局和响应式设计来创建美观而专业的网页。
这次实训对我的专业技能的提升非常有帮助，也为我未来的职业发展打下了坚实的基础。
CSS入门和高级技巧(4)
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也无法干掉选中了的。
超全CSS3笔记
: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笔记(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(”标志。
CSS学习笔记-边框(border)
第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相关笔记
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动画实现的关键知识点。
一、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-CSS初体验层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。
书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。
提示：属性名和属性值成对出现→键值对。
02-CSS引入方式•内部样式表：学习使用o CSS 代码写在 style 标签里面•外部样式表：开发使用o CSS 代码写在单独的 CSS 文件中（.css）o在 HTML 使用 link 标签引入•行内样式：配合 JavaScript 使用o CSS 写在标签的 style 属性值里03-选择器作用：查找标签，设置样式。
标签选择器标签选择器：使用标签名作为选择器→选中同名标签设置相同的样式。
例如：p, h1, div, a, img......注意：标签选择器无法差异化同名标签的显示效果。
类选择器作用：查找标签，差异化设置标签的显示效果。
步骤：•定义类选择器→.类名•使用类选择器→标签添加class="类名"注意：•类名自定义，不要用纯数字或中文，尽量用英文命名•一个类选择器可以供多个标签使用•一个标签可以使用多个类名，类名之间用空格隔开开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。
id选择器作用：查找标签，差异化设置标签的显示效果。
场景：id 选择器一般配合 JavaScript使用，很少用来设置 CSS 样式步骤：•定义 id 选择器→ #id名•使用 id 选择器→标签添加 id= "id名"规则：同一个 id 选择器在一个页面只能使用一次。
通配符选择器作用：查找页面所有标签，设置相同样式。
通配符选择器： *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。
CSS课堂笔记
CSS01课堂笔记一、什么是CSSCSS 层叠样式表，主要作用就是给HTML元素，以及元素的内容进行样式的设置。
二、CSS发展历史1996年12月CSS第一版1998年5月CSS第二版至今CSS第三版也没有定稿三、CSS语法选择器：选择需要设置样式的HTML元素声明：就是选择则到HTML元素之后，要设置什么样子，声明是由属性：值组成的，多个声明之间使用分好隔开属性：设置样式的名称值：根据各种不同的属性，对应设置不同的值四、CSS代码应该写在网页的哪一部分，怎么和HML结合1 内联样式（行内样式）在HTML标签中加入style=””属性，，在引号中写入CSS代码即可，内联不需要选择器2 内部样式表（内嵌样式表）在<head>标签中加入<style></style>标签，在这个标签内部写入CSS代码即可3 外部样式表（外链样式表）（W3C推荐使用）在<head>标签中加入<link >标签，在<link> 再加入href 属性在这个属性值中写上外部css文件的路径，在写上rel=“stylesheet”这个属性和值4 导入样式表(不常用)在<head>标签中加入<style>标签，在标签中写入@import “css文件”缺点:慢，在HTML页面加载的时候，把css同时导入，然后渲染当3中CSS链接方式都给一个HTML元素设置样式时，那个方式优先级最高？答: 内联优先级最大内部样式表和外部样式表，谁离目标元素近，谁的优先级就高一、CSS选择器1 基本选择器a）元素选择器（HTML标签选择器）只要是对应的标签就会适用对应的样式，（他可以选择对应的HTML标签）b）id选择器：给某一个元素加入id属性，单独起一个唯一的id号，然后在css中单独设置样式，id能不能重复，我们在后期学习过程中会再次使用，如果重复了，会造成影响使用方法：在css代码中#id属性的值c）class选择器：给某一个元素加入class属性，起一个class类名，类（class）选择器，可以重复使用使用方法：在CSS代码中使用.class属性值d）*（通配符）：就是把所有的标签统统设置统一的样式这个* 代表所有HTML元素就是这四种基本选择器同时使用，哪个的优先级最高id选择器> class选择器> html选择器> 通配符选择器2 伪类选择器：为元素添加一些特殊的效果:link 访问之前的样式:visited 访问过后的样式:hover 鼠标移入时的样式（最最常用的）:active 鼠标点击时的样式这四种为类型只有一种能用在其他标签上，三种都不能用3 后代选择器：使用空格把其他的元素组合到一起，查找符合条件的元素，是他的直接后代或者间接后代父级子元素<------他们之间的空格是有意义的4 子元素选择器(直接后代选择器)：使用> 符号连接父元素和子元素，他可以选择到的是直接后代5 相邻兄弟选择器：使用+ 号把选择器连接到一起注意点：相邻兄弟选择器只会选择到相邻的第一个兄弟6 兄弟选择器:使用~ 把选择器连接到一起，选择前面元素的所有兄弟元素注意点：他会把所有的兄弟元素选择到7 分组选择器：使用逗号把其他的选择器进行分组，让这一组的选择器都使用统一的样式例如：h1,h2,p,div{}8 组合选择器：（难点）把其他选择器组合起来使用，让选择的对象元素更加的精确例如：#aa b .demo{}9 属性选择器：按照HTML标签的属性来选择HTML元素，进行样式的设置E这里代表元素a E:[属性] 选择到含有对应属性的E元素b E:[属性=值]选择到含有属性和对应值的元素c E:[属性~=值] 选择到含有属性和值列表的元素d E:[属性^=值] 以值开头的元素会被选择到e E:[属性$=值] 以值结尾的元素会把选择到。
css100个必背知识点
css100个必背知识点CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等各个方面。
对于前端开发者来说，掌握CSS的基本知识是非常重要的。
下面是100个必背的CSS知识点，希望对大家有所帮助。
1. CSS是一种样式表语言，用于描述网页的外观和样式。
2. CSS可以通过选择器来选择HTML元素，并为其应用样式。
3. CSS样式可以通过内联样式、内部样式表和外部样式表来定义。
4. 内联样式是直接在HTML元素的style属性中定义的样式。
5. 内部样式表是在HTML文档的head部分中定义的样式。
6. 外部样式表是一个独立的CSS文件，通过link标签引入到HTML 文档中。
7. CSS选择器可以根据元素的标签名、类名、ID等属性来选择元素。
8. 标签选择器可以选择指定标签名的所有元素。
9. 类选择器可以选择具有指定类名的元素。
10. ID选择器可以选择具有指定ID的元素。
11. 后代选择器可以选择指定元素的后代元素。
12. 子元素选择器可以选择指定元素的直接子元素。
13. 相邻兄弟选择器可以选择指定元素的下一个兄弟元素。
14. 伪类选择器可以选择元素的特定状态或位置。
15. 伪元素选择器可以选择元素的特定部分。
16. CSS样式可以通过属性和值来定义。
17. 属性是用于描述元素的特性，如颜色、字体、边框等。
18. 值是属性的具体取值，如红色、宋体、1px等。
19. CSS样式可以通过简写属性来定义，如font、border等。
20. CSS样式可以通过继承来应用到子元素。
21. CSS样式可以通过层叠来决定最终的样式。
22. CSS样式可以通过优先级来决定应用的顺序。
23. 内联样式的优先级最高，其次是ID选择器、类选择器和标签选择器。
24. 伪类选择器的优先级比类选择器和标签选择器高。
25. 伪元素选择器的优先级比伪类选择器高。
26. !important关键字可以提高样式的优先级。
前端基础--CSS（pink老师课程笔记）
前端基础--CSS （pink ⽼师课程笔记）⼊门：CSS引⼊⽅式1、内嵌式：css写在style标签中style标签虽然可以写在页⾯任意位置，但是通常约定卸载head标签中2、外联式：CSS写在⼀个单独的.css⽂件中需要通过link标签在⽹页中引⽤3、⾏内式：CSS写在标签的style属性中配合js使⽤注意：局部会覆盖全局外联式相当于全局定义，⾏内式相当于局部定义选择页⾯中对应的标签(找她)，⽅便后续设置样式(改她)结构：标签名{css属性名:属性值；}作⽤：通过标签名，找到页⾯中所有这类标签，设置样式注意点：1、标签选择器选择的是⼀类标签，⽽不是单独某⼀个2、标签选择器⽆论嵌套有多深，都能找到对应的标签结构：.类名{css属性名:属性值；}作⽤：通过类名，找到页⾯中所有带有这个类名的标签，设置样式注意点：1、所有标签上都有class属性，class属性的属性值成为类名(类似于名字)引⼊⽅式书写位置作⽤范围使⽤场景内嵌式css 写在style 标签中当前⽹页⼩案例外联式css 写在单独的.css ⽂件中，通过link 标签引⼊多个页⾯项⽬开发⾏内式css 写在标签的style 属性中当前标签配合js 使⽤101|0基础选择器111|1 选择器的作⽤121|2 标签选择器131|3 类选择器||||2、类名由数字、字母、下划线、中划线组成，但不能以数字或者划线开头3、⼀个标签可以同时有多个类名，类名之间以空格隔开4、类名可以重复，⼀个类选择器可以同时选中多个标签结构：#id属性值{css属性名:属性值；}作⽤：通过id属性值，找到页⾯中带有这个id属性值的标签，设置样式注意点：1、所有标签上都有id属性2、id属性值类似于⾝份号码，在⼀个页⾯中是唯⼀的，不可重复。
3、⼀个标签上只能有⼀个id属性值4、⼀个id选择器只能选中⼀个标签类和id的区别class类名与id属性值的区别：class类名相当于姓名，可以重复，⼀个标签可以同时有多个class类名id属性值相当于⾝份证号码，不可重复，已给标签只能有⼀个id属性值css书写类选择器和id选择器的区别：类选择器以 . 开头id选择器以 # 开头实际开发的情况类选择器⽤的多id选择器配合js使⽤，除⾮特殊情况，否则不要使⽤id设置样式实际开发中会遇到冗余代码的抽取（可以将⼀些公共的代码抽取到⼀个公共的类中去）结构：*{css属性名:属性值；}作⽤：找到页⾯中所有的标签，设置样式注意点：1、开发中极少使⽤通配符选择器，只会在特殊情况下才会使⽤2、⽤于去除标签中默认的margin和padding141|4 id 选择器151|5 通配符选择器202|0字体和⽂本样式|||1.字体⼤⼩：font-size2.字体粗细：font-weight3.字体样式：font-style4.字体类型：font-family5.字体类型：font属性连写2、⽂本样式3、line-height⾏⾼属性名：font-size 取值：数字+px 注意点：⾕歌浏览器默认⽂字⼤⼩是16px 单位需要设置，否则⽆效属性名：font-weight 取值：关键字纯数字：100-900的整百数：注意点：不是所有字体都提供了九种粗细，因此部分取值页⾯中⽆变化实际开发中：正常、加粗两种取值使⽤最多属性名：font-style 取值：正常(默认值)：normal212|1 字体⼤⼩222|2 字体粗细加粗bold 正常normal加粗700正常400232|3 字体样式(是否倾斜)|||常见字体系列2.4.1 ⽆衬线字体（sans-serif ）1、特点：⽂字笔画粗细均匀，并且⾸尾⽆笔锋装饰2、场景：⽹页中⼤多采⽤⽆衬线字体3、常见该系列字体：⿊体、Arial 2.4.2 衬线字体(serif)1、特点：⽂字壁画粗细不均，并且⾸尾有笔锋装饰2、场景：报刊书籍中应⽤⼴泛3、常见该系列字体：宋体、Times New Roman 2.4.3 等宽字体(monospace)1、特点：每个字母或⽂字的宽度相等2、场景：⼀般⽤于程序代码编写，有利于代码的阅读和编写3、常见该系列字体：Consolas、fira code属性名：font 取值：font：style weight size family 顺序要求：swsf 省略要求只能省略前两个，如果省略了相当于设置默认值注意：如果需要同时设置单独和连写形式1、要么把单独的样式写在连写的下⾯2、要么把单独的样式写在连写的⾥⾯给同⼀个标签设置了相同的样式，此时样式会层叠（覆盖），写在下⾯的会⽣效Tips1、css层叠样式表242|4 字体类型：252|5 字体相关属性连写262|6 样式的层叠问题|||2、所谓层叠就是叠加的意思，表⽰样式可以⼀层⼀层的层叠覆盖使⽤字体和⽂本相关样式修改元素外观样式1、字体样式2、⽂本样式2.1⽂本缩进：text-indent 2.2⽂本⽔平对齐⽅式：text-align 2.3⽂本修饰：text-decoration3.line-height⾏⾼属性名：text-indent 取值：数字+px数字+em（推荐：1em=当前标签的font-size的⼤⼩）属性名：text-align 取值：注意：如果需要让⽂本⽔平居中，rext-align属性给⽂本所在标签（⽂本的⽗元素）设置属性名：text-decoration 取值：303|0⽂本和⽂本样式313|1 ⽂本缩进（⾸⾏缩进）323|2 ⽂本⽔平对齐⽅式属性值效果left 左对齐center 居中对齐right右对齐333|3 ⽂本修饰属性值效果||||注意：开发中会使⽤text-decoration ：none；来清除a标签默认的下划线text-align：center 能让⽂本、span标签、a标签、input标签、img标签⽔平居中margin:0 auto 让 div 、p标签、h标签⽔平居中注意：1、如果要让 dic、p、h(⼤盒⼦)⽔平居中，直接给当前元素本⾝设置计科2、margin⼀般针对有固定宽度的盒⼦，如果⼤盒⼦没有设置宽度，此时会默认占满⽗元素的宽度作⽤：控制⾏间距（给⼀⾏上下怎加间距）属性名：line-height 取值：数字+px倍数（当前标签font-size的倍数）应⽤：1、让单⾏⽂本垂直居中可以设置 line-height：⽂字⽗元素⾼度2、⽹页精准布局时，会设置 line-height ：1 可以取消上下间距⾏⾼与font连写的注意点：1、如果同时设置了⾏⾼和font连写，注意覆盖问题2、font:style weight size/line-height family能够认识Chrome调试⼯具的基础操作，能够使⽤Chrome调试⼯具修改和调试样式1 打开⽅式右击-->检查2 选择元素3 控制样式4 特殊情况underline 下划线line-through 删除线overline 上划线none⽆装饰线343|4 ⽔平居中⽅法总结 text-align ：center 353|5 ⾏⾼404|0Chrome 调试⼯具|||作⽤：根据HTML标签的嵌套关系，选择⽗元素 后代中 满⾜条件的元素选择器语法：.father 选择器1 选择器2 选择器3{css}结果：在father标签下所找到的后代标签（⼉⼦、孙⼦、、、）中，找到满⾜选择器2 选择器3的标签，设置样式（满⾜条件：即有选择器2 也有选择器3）注意点：1、后代包括：⼉⼦、孙⼦、重孙⼦、、、2、后代选择器中，选择器与选择器之间通过 空格 隔开作⽤：根据HTML标签的嵌套关系，选择⽗元素 ⼦代中 满⾜条件的元素选择器语法：选择器1 > 选择器2{css}结果：在选择器1中所找到的标签的⼦代(⼉⼦)中，找到满⾜选择器2的标签，设置样式注意：1、⼦代只包括：⼦⼀代（⼉⼦）2、⼦代选择器中，选择器与选择器之前通过 > 隔开414|1 505|0进阶选择器515|1 后代选择器：空格525|2 ⼦代选择器：>535|3 并集选择器 ，|||||作⽤：同时选择多组标签，设置相同的样式选择器语法：选择器1 ， 选择器2{css}结果：找到选择器1 和选择器2 选中的标签，设置样式注意点：1、并集选择器中的每组选择器之间通过 ， 分隔2、并集选择器中的每组选择器可以是基础选择器也可以是复合选择器3、并集选择器中的每组选择器通常⼀⾏写⼀个，提⾼代码的可读性作⽤：选中页⾯中 同时满⾜ 多个选择器的标签选择器语法：选择器1选择器2{css}结果：既⼜原则：找到页⾯中既能被选择器1选择，⼜能被选择器2选中的标签注意点：1、交集选择器中的选择器之间是紧挨着的，没有东西分隔2、交集选择器中如果有标签选择器，标签选择器必须写在最前⾯作⽤：通过简写语法，快速⽣成代码语法：类似于选择器的写法：(⾮常好⽤)53545|4 交集选择器 紧挨着555|5 emmet 语法记忆⽰例效果标签名div < div></ div>类选择器.red < div class="red"></ div>id 选择器#one <div id="one”>< div>交集选择器p.red#one < p class="red" id="one"></ p>⼦代选择器ul>li< ul>< li></ li></ ul>内部⽂本ul>li{我是li 的内容}< ul>< li>我是li 的内容</ li></ ul>创建多个ul>li*3< ul>< li></ li>< li></ li>< li></ li></ ul>565|6 hover 伪类选择器||||作⽤：选中⿏标 悬停 在元素上的状态，设置样式选择器语法：选择器:hover{css}注意点：1、伪类选择器选中的元素的某种状态能够使⽤ 背景相关属性 装饰元素样式属性名：background-color(bgc)属性值：颜⾊取值：关键字、rgb表⽰法、rgba表⽰法、⼗六进制。
CSS入门和高级技巧(5)
CSS入门和高级技巧第5天课堂笔记（本课程共8天）目录CSS入门和高级技巧 (1)目录 (2)一、超级链接美化 (3)1.1 伪类 (3)1.2 爱恨准则 (4)1.3 常见写法 (4)二、background系列属性 (6)2.1 background-color (6)2.2 background-image (6)2.3 background-repeat (7)2.4 background-position (8)2.5 background-attachment (11)三、背景图的应用 (12)3.1 图换文字 (12)3.2 先导符号放在padding里 (13)3.3 精灵的摆放 (13)一、超级链接美化1.1 伪类同一个超级链接，根据用户的点击情况，有自己样式：没有点击过：点击过后：超级链接根据用户点选情况，有4种状态：a:link 没有访问的超级链接a:visited 已经访问的超级链接a:hover 鼠标悬停的时候a:active 鼠标按下的时候1<style type="text/css">2a:link{3color:orange;4}5a:visited{6color:green;7}8a:hover{9color:black;10font-size: 20px;11border: 1px solid black;12}13a:active{14font-size: 30px;15}16</style>.在css里面叫做类，这个东西是工程师加的，可以明确的指定某一个标签是什么类；但是:link、:visited，是用户指定的状态，在页面编辑的时候，我们只能定义，但是不知道是属于什么类，所以叫做“伪类”。
1.2 爱恨准则先爱了，才能恨。
css有规定，四个伪类的顺序必须是：l ink、v isited、h over、a ctive和l o v e ha te的顺序一样，所以可以帮助记忆，叫做“爱恨准则”。
CSS3学习笔记
border-image:url("/52e22a1c0001406e03040221.jpg颜色RGBAcolor：rgba(R,G,B,A)background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号normal为浏览器默认值，break-word设置在长单词地址内部进行换行，此属性不常用，用浏览器长单词或URL地址文本阴影text-shadowtext-shadow可以用来设置文本的阴影效果。
语法：text-shadow: X-Offset Y-Offset blur color;X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color：是指阴影的颜色，其可以使用rgba色。
比如，我们可以用下面代码实现设置阴影效果。
text-shadow: 0 1px 1px #fffbackground-origin原始起始位置。
设置元素背景图片的原始起始位置语法：background-origin ： border-box | padding-box | content-box;内容区域开始显示。
内边距（默认值），或者是内容区域参数分别表示背景图片是从边框边框，还是内边距（默认值）效果如下：需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。
需要注意的是background-clip裁剪以适应实际需要。
用来将背景图片做适当的裁剪语法：background-clip ： border-box | padding-box | content-box | no-clip参数border-box 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。
CSS入门和高级技巧(7)
CSS入门和高级技巧第7天课堂笔记（本课程共8天）目录CSS入门和高级技巧 (1)目录 (2)一、浏览器兼容问题 (3)1.1 现在中国网民用什么浏览器？ (3)1.2 浏览器的渲染能力 (3)二、Hack (5)2.1 HTML Hack (5)2.2 CSS 值Hack (6)2.3 CSS 选择器Hack (8)三、IE6的问题 (10)3.1 选择器的兼容问题 (10)3.2 盒模型的兼容性问题 (10)3.3 浮动的兼容性问题 (12)3.4 定位的兼容问题 (15)3.5 文字样式的兼容问题 (15)四、透明 (16)4.1 盒子的透明 (16)4.2 图片的透明 (17)4.2.1 jpg/jpeg： (17)4.2.2 png (17)4.2.3 gif (18)4.2.4 bmp (19)一、浏览器兼容问题1.1 现在中国网民用什么浏览器？中国流量最大的网站就是百度，百度在统计着每一个访问者的浏览器、地域、操作系统、分辨率等等信息。
百度流量研究院：/data/Chrome 41.86% 谷歌浏览器，内核名称webkitIE8 18% win7内置的浏览器IE9 5% win8内置的浏览器IE6 2% winxp内置的浏览器其他14.52% 火狐、safari、网景、欧朋浏览器等等Chrome浏览器的是免费的、开源的；360极速浏览器、百度浏览器、QQ浏览器都是使用的Chrome的内核，这个内核的名字叫做webkit内核。
使用Chrome内核的浏览器，超过50%。
1.2 浏览器的渲染能力最好的判断一个浏览器能力的测试，就是HTML5的支持测试。
满分555分，是所有HTML5、CSS3的新特性，支持就得1分，不支持不得分。
一切的罪恶的起源，就是IE6、7、8、9、10分数太低，对HTML5、CSS3的支持太差。
但是没有办法，中国人就是喜欢守旧、并且网银仅对IE支持，所以很多国人不升级浏览器。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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中显示不是一样的。