二.css视频教程4天视频

1、主讲教师：.神龙教主学院 htt 发布播客1.1顾1、框架a)框架集：b)框架：c)=框架的名称超要在指定的框架中打开，d)框架是 HTML5 新标准中淘汰的2、内嵌框架a)在 HTML5 的标准中用来代替框架的b)c)超要在内嵌框架中打开，3、关于基本概念a)位图：由像素点组成的图，放大失真，颜色比较丰富，操作位图的PS，FWb) 矢量图：由线条和面组成的图形，放大不失真，体积小，颜色数没有位图丰富。操作矢量图的ai，FW脚下留心：矢量图不能直接放到网页上，必须通过图像处理持的格式（jpg、gif、png）(ps、fw)转换成网页支c)分辨率：长度中像素点的多少，（长度指的是英寸）。分辨率是

2、衡量位图质量好坏的指标，分辨率越大，质量越好，但是体积也最佳的分辨率是 72 像素/英寸越大。网页4、网页常见的图象格式回a)Jpg：是有损压缩，颜色数达到一千六百多万种，是目前使用量很大的一种格式，jpg 不支持透明，不支持动画b)Gif：颜色数很少，只有 256 种，支持透明，支持动画，质量很差，现在已经用的很少。c)Png：无损压缩格式，体积小，支持透明。是用的越来越多的一种格式。压缩 png 格式要使用专门的压缩工具。5、格式转换a)打开源文件，文件另存为选一个格式保存6、的优化a)改尺寸b)改分辨率c)压缩d)切片7、几个常用快捷键a)ctrl+加号放大b)ctrl+减号缩小c)自适

3、应显示双击手型工具d)显示隐藏工具ps 和 fw 用 Tabfw 和 dw 用 F4e)快速切换到手型工具按住空格f)按住 ctrl 键快速切换到选择工具8、网页基本概念a)：所有网页的集合b)首页：但收入以后，默认打开的页面叫首页，服务器通过名词判断是否是首页，首页的名称一般是 index 或是 defaultc)子页命名规则：除了首页以外的页面都叫子页面，命名规则用小写的因为字母和数字，不能用中文。也不能用中文。d)页面宽度：以不出现水平滚动条为准。9、通过设计器，文字a)可以执行命令：图像b)还可以直接从站点中拖放到页面上c)回车是换段，d)Shift+回车是换行10、 在设计器下做超a

4、)选中和文字，是属性面板上点击浏览文件或指向文件。11、 设计器中表格a)表格可以嵌套b)表格的有两个，一个是百分比，一个是像素，最外层的表格是像素，嵌套的表格是像素或百分比c)在属性面板上有两个按钮可以用来快速合并和拆分单元格12、选择器a)快速选择 HTML 对象13、 合并单元格和拆分单元格14、 表格的特性a)可以被内容撑开，不能被背景撑开b) 背景默认是平铺的c)如果要实现 A 图在 B 图上，或者字在 B 图上，则 B 图是背景图。15、 背景图a)图在图上，字在图上，这个图是背景图b) 如果一个图重复出现，这个图是做为背景图。1.2作业具体代码参见例题1.3CSS 层叠样式表CS

5、S 是 Cascading Style Sheet(层叠样式表)的缩写。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。思考题：为什么 css 叫层叠样式表，”层叠”表示什么意思？将分成两个部分，表现和内容，表现由 CSS 来控制，内容由从数据库中。样式以开头，结束样式一般写在之间1.4CSS 基本语法CSS 的定义是由三个部分：选择器属性属性的取值（value）基本格式如下：选择器 属性：值;小结：一个选择器中可以有多个属性，每个属性都有对应的值，属性和值之间用冒号隔开，属性和属性之间用分号隔开。1.5按选择器不同来分类1.5.1类选择器（class）语则：1、必须以点开头

6、2、通过 class 属性来调用3、类样式可以被多次调用1.5.2ID 选择器（id）Id 是唯一的语则：1、以#开头2、通过元素的 id 属性来调用3、只能被调用一次1.5.3标记选择器直接选择 HTML 的标记。多学一招：font-family:黑体, 隶书, 微软雅黑;后面跟多个字体，默认使用第一个字体，如果第一个没有，就使用第二个，依次类推，如果样式中的字体客户端一个都没有，就使用客户端的默认字体，中文操作系统，默认是宋体。1.5.4关联选择器P 下面所有的 b,b 只要是 p 的后代就行pb:b 必须是 p 的子级关联选择器的总结：p .aa表示 p 下面的.aa(p 的后代)p.a

7、a表示 p 的子级中的.aap.aa同时具备 p 和.aa 的元素。1.5.5组合选择器多个样式使用相同的属性，用组合选择器,每个选择器之间都用逗号隔开。1.5.6伪类选择器思考：伪类？类可以被多个元素，有一个状态，超有 4 个状态:link：正常连接时候的状态:visited：已经点击过的状态:hover当鼠标移上去时候的状态:active当鼠标点击下去的状态/*正常连接时候状态*/ a:linkcolor:#F00; font-size:14px;text-decoration:none; /*没有下划线*/*点击后的状态*/ a:visitedcolor:#F0F; font-size:

8、14px;text-decoration:none;/*但鼠标移上去的时候*/ a:hovercolor:#060; font-size:24px;text-decoration:underline;/*点击下去的状态*/ a:activecolor:#00F; font-size:24px;text-decoration:underline;锄禾日当午伪类有四个状态，可以省略其中的某个状态，如果省略就使用默认样式，但是如果要写这些状态，必须按照 l(link)v(visited)h(hover)a(active)Lvlove(爱)hahate（恨）思考：如下代码表示什么意思？p:hover但

9、鼠标移动到 p 上的时候思考：如果在一个页面上，一部分的超是一种样式，另一部分超是另一种样式，如果实现？答：使用伪类和类的组合。1.6按 CSS 的位置来分类1、内嵌样式：在 HTML 页面中以开头，结束，这里边的样式只能供本页面使用2、外部样式：写一个 css 文件，在需要使用 css 的页面中引入外部 css。可以将页面公用的 css 写到外部 css 中3、行内样式：通过元素的 style 属性直接写的样式。1.6.1内嵌样式在 HTML 页面的内部嵌入样式1.6.2行内样式通过元素的 style 属性直接写的样式1.6.3外部样式首先新建一个 css 文件。在 HTML 页面中或导入的方法来外部样式。1、外部样式语法：rel:表示的类型，这个属性不能省略 rel=stylesheet表示的类型是样式表type=text/