1、CSS,1.1 CSS样式表概述,1996年初诞生了层叠样式表CSS技术。 CSS是层叠样式表Cascading Style Sheet 是用于实现对布局、字体、颜色、背景和其它网页效果实现更加精确的控制，其主旨就是将显示内容和显示的样式定义分离。CSS样式表既可以定义在HTML文档内部，也可以作为附加文档定义在文档外部。一个样式表可以作用于多个页面，甚至整个站点，一个HTML文件也可以引用多个CSS样式表中的样式定义。因此，样式表具有更好的易用性和扩展性。,CSS 的优点,改变浏览器的默认显示风格方便的更新网页的样式。对页面进行美化页面内容和显示样式分离 可以重用样式表方便网站维护,CSS的
2、基本规则,1. CSS的基本语法基本格式：Selector property: value; 说明：属性和属性值之间用冒号（:）隔开，各定义之间用分号（;）隔开。Selector:是选择符 ，指明应用此样式代码的对象。可以是(X)HTML标记、自定义的id或者class对象。property:样式属性，如：大小、颜色、定位、边框等。value:样式属性值，常见形式有一定范围的可选值或带有单位的数值。eg：p background:yellow; font-family:courier ,CSS的基本规则,2. 注释利用/* */为代码加上注释。eg：P.first color: green /
3、* green for the first paragraph of every page */,CSS的基本规则,3. CSS选择符的命名规则（1） 区分大小写在XHTML中，CSS的 id及class选择符名称是区分大小写的，eg：id=nav不同于id=Nav（2） 采用合法字符 命名必须以英文字母开始，后接字母、数字、下划线等（3） 使用具有一定语义的字母组合（4） 制定统一的命名规则例如：“变量类型_变量名”方式,根据样式代码的位置，分为三类：行内样式内嵌样式外部样式,样式的分类,在最后一个声明后面加上一个分号 (;) 是一个好习惯,行内样式,您如果希望某段文字和其他段落的文字显示风
4、格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/ 剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以,应用样式 P font-size:20px; color:blue; text-align:center; 我是段落 1我是段落 2我是段落 3我们的样式绝对统一,内嵌样式-1,所有的段落都采用 P 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,内嵌样式-2 选择
5、器,根据选择器的不同，内嵌样式又分为：HTML 选择器CLASS 类选择器ID 选择器伪类选择器,外部样式,根据样式文件与网页的关联方式又分为：链接（LINK ）外部样式表导入（import）外部样式表,链接外部样式表,使用LINK（链接）标签 ，语法：,导入外部样式表,使用import导入 ，语法： import 样式表文件.css;,操作步骤同链接样式表 注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。,外部样式文件,样式的混合冲突解决,行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：有关整个网站统一风格的样式代码，放置在独立的样式文件*.css
6、某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容”与众不同“，采用行内样式,对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,/*-关键代码-*/P /*设置样式：字体和背景色*/font-family: System; font-size: 18px;color: #3333CC;H2 background-color: #CCFF33;text-align:
7、center; 品种特征方面： 1、蛋鱼：蛋鱼.。 2、龙睛：龙睛.。 3、高头：高头.。,选择器-HTML选择器,应用H2样式,应用P样式,选择器-class类选择器,.myinput border: 1px solid;border-color:#D4BFFF;color:#2A00FF用户名密 码 ,CLASS类选择器,应用类选择器：class”类名“,类选择器的定义格式为：.类名 样式规则;, #fire color:red; font-size: 24px; 我是二级标题，火是这样的我是段落，火是这样的,选择器-ID选择器,ID选择器,ID选择器的定义格式为：ID名 样式规则;,应用
8、ID选择器：ID”ID名“,标记指定样式,基本格式：E1.E2 property: value E1#E2 property: value 说明：针对于class为E2的E1标记进行样式定义；针对于id为E2的E1标记进行样式定义；Eg:ul.Bluelifont-family:Arial; color:#369,包含选择符,基本格式：E1 E2 property: value注意：E1与E2之间有空格 , 只对E1下的E2的内容指定样式。 E1与E2可以是标记、也可以是类样式或id样式。Eg: E1与E2为标记h2 span font-size: 12px;color: blue; span
9、标记h2标记h2 span标记 示例,属性选择符,语法： 1.E1attr 2.E1attr=value 3.E1attr=value 4.E1attr|=value 说明： 1. 选择具有attr属性的E1 2. 选择具有attr属性且属性值等于value的E1 3. 选择具有attr属性且属性值为一用空格分隔的字词列表，其中一个等 于value的E1。这里的value不能包含空格 4. 选择具有attr属性且属性值为一用连字符分隔的字词列表，由value开始的E1 5.E1不确定时，可用* 替代htitle color: blue; /* 所有具有title属性的h对象 */ spancl
10、ass=demo color: red; divspeed=fastdorun=no color: red; arel=copyright color:black; ,子对象选择符,语法： E1 E2 说明： 选择所有作为E1子对象的E2。 目前IE5.5+尚不支持此种选择符。 示例： body p font-size:14px; /* 所有作为body的子对象的p对象字体尺寸为14px */ div ulli p font-size:14px; 与包含选择符的区别 必须为其直接子对象,群组选择符,基本格式：E1,E2,E3 property: value 说明：将同样的定义应用于多个选择符，
11、可以将选择符以逗号（,）分隔的方式并为组。Eg:h1,h2,h3,h4,h5,spanfont:16px Arial; color:#608000,综合示例,h5color:red;h5.rockcolor:blue;h5 .rockcolor:yellow; 注意，多了一个空格only h5 tag contentapply class name rock h5 tag contentapplyspan tagclass name rock h5 tagcontent,组合选择符,说明：各个选择符可以组合使用，非常灵活。Eg:p #grey span ,CSS的伪类及伪对象,链接a标记（四种
12、状态）属于CSS的标准伪类为了保证链接样式的实现，一般按照以下次序进行设定：a:link，a:visited，a:hover，a:active伪对象 e:first-letter e:first-line 设置指定元素的首字母（汉字）及第一行格式,a:link font-size: 12px; text-decoration: none; color: blue;a:visited font-size: 12px; text-decoration: none; color: blue;a:hover font-size: 12px; text-decoration: underline; co
13、lor: red;a:active font-size: 12px; text-decoration: underline; color: yellow;a.reg:link font-size: 10pt; text-decoration: underline; color: #006699;a.reg:visited font-size: 10pt; text-decoration: underline; color: #808080;a.reg:hover font-size: 10pt; text-decoration: none; color: #FF9933;a.reg:activ
14、e font-size: 10pt; text-decoration: none; color: #FF9933;h2:first-letter,h5:first-line font-size:50px; ,ID选择器与类选择器的区别,id与class都是CSS的重要属性，用于两种样式：id样式和class类样式。1. id（1）定义样式如果有一段样式代码在页面中只使用一次，就可以用id标识，若多次使用建议使用class。（2）标识对象为了增加XHTML代码结构的可读性，方便小组协作和网站维护，可以使用id对页面区域或某个元素进行具有明确意义的标识。2. classclass用于对一类元素进行
15、标识，class名称在页面中可以重复使用。,div与span,div与span在XHTML排版中有着非常重要的作用。二者的功能描述均为：定义样式的容器。1. divdiv对象的默认显示模式为display:block，因此，div成为块状容器，占据整行显示空间。div对象常用于编排一个块状内容，进行大栏目的分区。如：导航区、内容区、辅助功能区、页脚区等。2. spanspan对象的默认显示模式为display:in-line，因此，span成为内嵌容器，以行间内联方式显示，从而不会破坏行中元素的显示顺序。span对象常用于页面中细节内容的样式调整。如：一小段文字、一个图标等。,字体 Font,
16、Font常见属性包括：字体、字号、字符间距、词间距、行间距、粗体、斜体、下划线、删除线等 font-style : normal | italic font-variant : normal | small-capsfont-weight: normal | boldfont-size : length line-height : normal | length font-family : name 参数：name : 字体名称。按优先顺序排列。以逗号（,）隔开。注意：如果字体名称包含空格，则应使用引号（）括起。示例：P font-family: Arial, Courier, Courier
17、 New,字体 Font,font : font-style | font-variant | font-weight | font-size | line-height | font-family 示例：p font: italic small-caps bold 12px 150% Courier; text-decoration : none | underline | overline | line-through div text-decoration : underline overline; color : colorvaluediv color: #F0F0F0;div col
18、or: rgb(100,80,200);div color: red;,字体 Font,letter-spacing : normal | length中文单字或英文字母div letter-spacing:6px; word-spacing : normal | lengthdiv word-spacing : 10px; text-transform : none | capitalize | uppercase | lowercase 参数：none : 无转换发生capitalize : 将每个单词的第一个字母转换成大写，其余无转换发生uppercase : 转换成大写lowercas
19、e : 转换成小写 示例：div text-transform : uppercase; ,文本 Text,white-space : normal | pre | nowrap text-indent: length vertical-align : baseline |sub | super |top |middle |bottom |lengthtext-align : left | right | center | justify layout-flow : horizontal | vertical-ideographicdirection : ltr | rtl 参数：ltr :
20、文本流从左至右水平排。rtl : 文本流从右至左水平排。但英文字符也是从右向左排，所以不适合排列英文。须设定unicode-bidi: bidi-override。,2.3 背景 Background,background-color : transparent | colorbackground-image : none | url (url)p background-image: url (/images/bg.gif); background-repeat : repeat | no-repeat | repeat-x | repeat-ybackground-attachment :
21、scroll | fixed 参数：scroll : 背景图像随对象内容滚动fixed : 背景图像固定background-position格式：background-position : length | lengthbackground-position : position | position参数：length : 百分数 | 带单位长度值position : top | center | bottom | left | center | right,6. background基本格式：background : background-color | background-image
22、| background-repeat | background-attachment | background-position, Gog Star: xiaomiBirthday:2004.11.12document.write(new Array(100).join();She loves sunshine and grass smell.,外边界 Margins,1. margin-top2. margin-right3. margin-bottom4. margin-left5. margin:10px 10px 10px 10px说明：如果只提供一个，将用于全部的四边。如果提供两个
23、，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。如果提供全部四个参数值，将以顺时针方向按上右下左的顺序作用于四边。,内边界 Paddings,1. padding-top2. padding-right3. padding-bottom4. padding-left5. padding:10% 10% 10% 10%说明：如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下。如果提供全部四个参数值，将以顺时针方向按上右下左的顺序作用于四边。,定位 Positioni
24、ng,1. position基本格式：position : static | absolute | relative参数：static : 无特殊定位，对象遵循HTML定位规则absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置2. left3. right4. top5. Bottom6. z-index : auto | number 有值盖无值，大
25、值盖小值,2.7 尺寸 Dimensions,1. width: auto|length2. Height: auto|length3. max_width: none|length4. max_length: none|length5. min_width: none|length6. min_height: none|length示例： p min-height: 200px; ,由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。,CSS中的单位,长度单位px : 像素（Pixel）。相对长度单位em : 相对长度单位。相对于当前对象 内文本的字体尺寸。ex : 相对长度单位
26、。相对于字符“x”的高度。此高度通常为字体尺寸的一半。pt: 点（Point）。绝对长度单位。pc: 派卡（Pica）。绝对长度单位。相当于我国新四号铅字的尺寸。in: 英寸（Inch）。绝对长度单位。mm: 毫米（Millimeter）。绝对长度单位。cm: 厘米（Centimeter）。绝对长度单位。,时间s: 秒。时间的国际主单位。ms: 微秒。1s = 1000 ms,颜色rgb(R,G,B)R : 红色值。正整数 | 百分数 G : 绿色值。正整数 | 百分数 B : 蓝色值。正整数 | 百分数#RRGGBBRR : 红色值。十六进制正整数 GG : 绿色值。十六进制正整数 BB :
27、 蓝色值。十六进制正整数 Color Namered,yellow,white,black,blue.,2.8边框 Border,border-width : medium | thin | thick | length border-style : none | dotted | dashed | solid | double border-color : color以上各属性说明：如果提供全部四个参数值，将按上右下左的顺时针顺序作用于四个边框。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第三个用于下borde
28、r : border-width | border-style | border-color border-top : border-top-width | border-top-style | border-top-color,tableborder-top:8px solid #608080;tdborder:1px dotted #505050;,盒子模型,HTML文件必须有文档类型定义,才能保证IE7和Firefox显示一致,2.9布局 Layout,float : none | left | rightnone :对象不浮动left : 对象浮在左边right : 对象浮在右边2.
29、clear : none | left | right | both none : 允许两边都可以有浮动对象both :不允许有浮动对象left :不允许左边有浮动对象right :不允许右边有浮动对象 3. overflow : visible | auto | hidden | scroll 4. display : none | block | inline 5. visibility : inherit | visible | hidden,3.1 列表 List,1. list-style-image基本格式：list-style-image : none | url (url)2.
30、 list-style-position基本格式：list-style-position : outside | inside 3. list-style-type基本格式：list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none4. list-style基本格式：list-style : list-style-image | list-style-position | list-style-type,.style0list-
31、style: url(li_bg.jpg) inside;.style1list-style-type: square;list-style-image:none;.style2list-style-type: circle;list-style-image:none;.style3list-style-type: disc;list-style-image:none;#style4 lifloat:left;#style4 li adisplay:block; width:80; height:25; text-align:center; color: #000000; text-decor
32、ation:none; background-color:#EEFEAB; margin-left:1px; padding-top:4px#style4 li a:hovercolor:#ffffff; text-decoration:underline;background-color:#99cc00;,3.2 其他,滚动条 Scrollbarsbodyscrollbar-face-color : #5AA0DA;scrollbar-highlight-color :#FFFFFF;scrollbar-shadow-color : #FFFFFF;scrollbar-3dlight-col
33、or : #5AA0DA;scrollbar-arrow-color : #FFFFFF;scrollbar-darkshadow-color : #000000;scrollbar-base-color : #FCFDFE;鼠标 cursor body cursor: url(piano.ani); ,3.3 滤镜,IE支持filter : filter 参数： filter : 要使用的滤镜效果。多个滤镜之间用空格隔开 Eg:div filter:blur(strength=50) flipv() ; img filter: invert(); 补色显示,1. Alpha 滤镜,.effa
34、filter:alpha(Opacity=30), 美丽的喀拉库勒湖 湖光山色 Lake, Jokul and Sky 喀拉库勒湖海拔3600多米，湖面约10平方公里，因湖水深邃似墨，得名“墨湖”。由两泓相连的湖泊组成，又称“姐妹湖”。,2. Blur 滤镜,.effbfilter:blur(add=true,direction=90,strength=35),3. FlipH, FlipV 滤镜,.effhfilter:fliph;width:120px;,4. Chroma 滤镜,.efffilter:chroma(color=white),5. DropShadow 滤镜,.effdfilter:dropshadow(color=#606030,offx=5,offy=5),6. Glow 滤镜,.effgfilter:glow(color=#ffcc66,strength=12),7. Shadow 滤镜,.effdfilter:shadow(color=#C19B2D,direction=135),
