PHP基础教程_零基础学习PHP_PHP基础教程_兄弟连PHP教程_CSS简介

1、CSS简介 网址： 电话：400 700 1307CSS DHTML简介 何为CSS(层叠样式表) CSS的几种设置方式 样式规则的选择器 样式规则的注释与有效范围 用DreamWeaver产生CSS 样式属性详解DHTML 简介DHTML=HTML脚本语言脚本语言JavaScript+层叠样式表层叠样式表CSS指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素DHTML 是制作是制作动态动态 HTML 页面的技术！页面的技术！DHTML 示例闪烁文本移动文本消隐文本设置属性 这个段落应用了样式这个段落按默认样式显示什么是样式？指定显示样式样式规则何为层叠样式表 CSS是Cascadin

2、g Style Sheets的简写，它除了可以轻松设置网页元素的显示位置和格式处，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。 简而言之，CSS就是要对网页的显示效果实现与Word一样的排版控制。常用的样式属性属 性CSS名称说 明颜色 color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素) border-style边框样式border-width边框宽度 border-color边框颜色 定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz 轴索引号，用于层

3、CSS的几种方式 内联样式表(Inline styles) 嵌入样式表(Embedded style sheets) 外部样式表(Linked style sheets) 输入样式表(imported sytle sheets)内联样式表您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。/*关键代码-*/ 剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以应用样式 P font-size:20px; color:

4、blue; text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一嵌入样式表样式表样式规则所有的段落都采用 P 样式，保证样式统一行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。选择器用分号隔开 在标签对中定义的每条样式规则的基本格式如下： Selectorproperty:value; property:value; Selector:当定义一条样式规则时，必须指定受这条样式规则作用的网页元素。 property:指定那些将要被修改的样式名称，即CSS属性，如color、font-size等。 value:赋给p

5、roperty的值，即CSS属性值。样式规则的选择器 HTML selector Class selector ID selector 关联选择器 组合选择器 伪元素选择器/*-关键代码-*/P /*设置样式：字体和背景色*/font-family: System; font-size: 18px;color: #3333CC;H2 background-color: #CCFF33;text-align: center; 品种特征方面： 1、蛋鱼：蛋鱼.。 2、龙睛：龙睛.。 3、高头：高头.。内嵌样式- HTML选择器HTML选择器应用H2样式应用P样式内嵌样式- class类选择器.my

6、input border: 1px solid;border-color:#D4BFFF;color:#2A00FF用户名密  码 CLASS类选择器应用类选择器：class”类名“类选择器的定义格式为：.类名 样式规则; Class selector要将一种HTML标签所创建的各处网页元素分成几类，需要将这个HTML标签的class属性设置为不同的值。paragraph1paragraph2paragraph3在样式表中，可以分别为某个HTML标签的各个类别定义样式规则：p.stopcolor:redp.warningcolor:yellow在样式表中，可以为某个类别的所有

7、HTML标签定义样式规则：.blueonecolor:blue蓝色的题目蓝色的段落 #fire color:red; font-size: 24px; 我是二级标题，火是这样的我是二级标题，火是这样的内嵌样式- ID选择器ID选择器ID选择器的定义格式为：ID名 样式规则; 应用ID选择器：ID”ID名“ID selector ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值，ID Selector就是为样式规则定义语名选择具有某一ID属性值的HTML元素。text here 在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下：

8、选择器声明关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串，例如： P EMbackground:yellow.special emcolor:red;#top emcolor:bluep.top.top1 strongcolor:green 其中的“P EM”就是关联选择器，它表示段落中的强调文本（标签对中的内容）的背景为黄色，而其它地方出现的强调文本则不受影响。 关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权高，即使用在P EMbackground:yellow的后面部分定义了如下样式规则：EMbackground:green但是，在段落标签中定义的强调

9、文本仍用黄色背景。组合选择器 为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号（，）隔开。例如，H1, H2, H3, H4, H5, H6, TDcolor:red;全局选择器 希望页面所有的标记都使用同一种CSS样式，又不希望逐个来生命，这时候可以利用全局生命符号“*”外部样式 根据样式文件与网页的关联方式又分为： 链接（link ）外部样式表 导入（import）外部样式表样式文件P.网页2网页3网页1链接外部样式表使用LINK（链接）标签 ，语法：第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联样式文件：样式文件：

10、newstyle.css P.Onel.htmanother.htm 第三步：浏览查看各网页演示演示：链接样式表示例样式表示例导入外部样式表使用import导入 ，语法：import 样式表文件.css;import url(样式表文件.css);操作步骤同链接样式表 导入样式表 使用import声明的例子语句如下：外部样式文件外部样式文件样式的混合使用行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式对于

11、某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式内嵌样式 行内样式行内样式 某个HTML标签样式规则的注释与有效范围 样式表中的注释 使用“/*要注释的内容*/”格式进行注释，注释不能嵌套，例如，“/*xxx/*yyy*/xxx*/”这样的注释是不允许的。 样式规则的继承 所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。 样式规则的优先级 ID选择器CLASS选择器HTML标签选择器 内联样式表嵌入样

12、式表链接样式表样式属性分类 CSS中的样式属性非常之多，大体上可以分为以下几类： 字体 文本 边框 背景 列表 位置 布局 其它字体 font-family：字体类型 font-size 绝对大小的设置为xx-small、x-small、small、medium、large、x-large、xx-large中的任意一个，xx-small为最小取值，xx-large为最大取值。 相对大小的设置可以为larger或smaller. 绝对单位有：px、mm、 cm、 in、 pt、 pc. 相对单位有：em、ex、% color 三种表示方法：RRGGBB、rgb(R, G, B)、red. fon

13、t-weight：字体粗细 font-style：字体斜体 text-decoration：下划线、顶划线、删除线、闪烁 text-transform：英文字母大小写 font：合并设置字体样式 例如，Pfont:italic bold 12pt Times, seriffont-family: 宋体宋体, sans-serif;font-weight: normal;color: #0000FF;font-style: normal;font-size: 12px;line-height: 140%;text-decoration: underline;文本段落 text-align：段落水

14、平对齐 设置值：center、right、left、justify vertical-align：段落垂直对齐 设置值：sub、super、top、middle、bottom、10px、-10px、相对于元素行高属性的百分比 letter-spacing：字母的间距 word-spacing：单词的间距 line-height：文本行高 text-indent：缩进方式 white-space：排版方式 设置值：normal、pre、nowraptext-align: center;text-indent: 24px; (可为负数可为负数)display: block;边框、宽度与高度bord

15、er-width：边框宽度(border-top-width、border-right-width、border-bottom-width、border-left-width) 设置值：thin、medium、thick或数值border-color：边框颜色(border-top-color、border-right-color、border-bottom-color、border-left-color)border-style：边框样式(border-top-style、border-right-style、border-bottom-style、border-left-style) 设置

16、值：none、dotted、dashed、solid、double、groove、ridge、inset、outset。border：合并设置边框样式(border-top、border-right、border-bottom、border-left) 例如，A:activeborder:thick double redwidth：宽度 设置值：10px绝对值、50%相对值height：高度border-left-width: 1px;border-left-style: solid;border-left-color: #0000FF;背景 background-color：背景颜色 bac

17、kground-color:transparent;/*透明色*/ background-image：背景图片 例如，background-image:url(/logo.gif) background-repeat：背景重复方式 设置值：no-repeat、repeat、repeat-x、repeat-y background-position：背景位置 设置值：left、center、right、20px 20px、20% 70%、top、bottom background-attachment：固定或滚动背景 设置值：fixed、scroll

18、 background：合并设置背景样式 例如，background:#00cc00 url(logo.jpg) no-repeat bottom rightbackground-color: #CCCCCC;background-image: url(img/bg.gif);background-repeat: repeat-x;background-position: center top;页面和浏览器元素的CSS 表格 表单 超链接 鼠标 滚动条控制表格 tablecaption-side:bottom; tableborder-collapse:collapse; tr:hoverco

19、lor:red;控制表单 给input添加背景色 一条线的文本框 像文字一样的按钮 彩色的下拉框 类似Excel表格的表单伪元素选择器 伪元互选择器是指对同一个HTML元素的各种状态和其所包括的部分内容是一种定义方式。例如，对于超链接标签()的正常状态（没有任何动作前）、访问的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可使用伪元素选择器来定义。 使用伪元素作为选择器的样式规则定义格式： HTML元素：伪元素属性：值 常用的伪元素： a:link超链接的正常状态（没有任何动作前） a:visited访问过的超链接状态 a:hover光标移动到超链接上的状态 a:active选中超链接时的状态 p:first-line段落中的第一行文本 p:first-letter段落中的第一个字母 类选择器与伪元素一起使用的格式： HTML元素.类名：伪元素属性：值 鼠标样式cursor： bodycursor:pointer; 设置值：help、move、crosshair. 滚动条样式scrollbar： s