css使用方法Word格式文档下载.docx

1、/* -文字样式开始- */* 梦之都白色12象素文字 */.dreamduwhite12px color:white; font-size:12px;/* 梦之都黑色16象素文字 */.dreamdublack16px black;16px;/* -文字样式结束- */style3.内联引用CSS内联引用可以把CSS样式直接作用在HTML标签中.p style=font-size: 10px; #FFFFFF; 使用CSS内联引用表现段落./p4.CSS选择符CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符（C

2、SS的名字）来指定此HTML标签使用此CSS样式.选择符语法选择符名字 声明;一个CSS选择符就定义了一个样式比如下面这三个例子p.dreamdublueblue;.dreamdu18px18px;#dreamduredred;dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.选择符取名规则CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.英文字母大写与小写 A-Z a-z 数字 0-9 连字号 - 下划线 _ 冒号 :句号 . 提示: CSS选择符只能以字母开头.常用的三种选择符xhtml标签选择符,比如 p标签选择符（代表所有的段

3、落都使用这个CSS样式）,比如 pfont-size: id选择符,唯一性选择符,比如 #dreamduredcolor:,就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次（这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了）. class选择符,多重选择符,比如.dreamdubluecolor:,就是在名字前增加了一个.,class选择符在一个页面中可以出现多次（注意下面的示例中class选择符的用法）. p梦之都xhtml标签选择符p id=dreamdured梦之都id选择符p class=dreamdublue梦之都clas

4、s选择符dreamdublue dreamdu18px梦之都class选择符2,出现了多次.一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.5.CSS声明CSS声明是由属性,冒号（:）属性值和分号（;组成的.语法:属性:属性值;font-size代表字体大小. 12px字体大小的值. 下面介绍两个常用的技巧1,选择符的名字一样,声明是可以组合的例如: 声明1; 声明2; 声明3;可以组合为:div与下面的是等价的2,声明全部一样,选择符的名字也可以组合选择符名字1选择符名字2选择符名字3选择符名字1,选择符名字2,选择符名字3.dreamd

5、udivwhite12pxh1.dreamdudivwhite12px,h1,divCSS的语法是比较简单的,声明也比较直接,难点是选择符的名字,有很多种变化,高级教程中我将详细介绍.lightblue;h1, p, div border:1px solid black;通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.6.css注释CSS注释的开始使用/*,结束使用*/CSS注释语法/* 注释内容 */.dreamduwhite12px.dreamdubla

6、ck16pxCSS属性及示例Css的使用主要是要熟练使用css的常用属性，一些不常用的大家可以参考css手册。下面介绍一下css的常用属性。1背景background属性 五个背景属性可以全部在此定义 取值: | background-repeatbackground-attachmentbackground-position | inherit 初始值: 根据五个背景属性的默认值 继承性: 否 适用于: 所有元素 前面的讲的五个背景属性完全可以使用background属性代替.body background:transparent url（list-orange.png） repeat-x

7、scroll center;使用background解决所有问题.url（由于背景颜色background-color的默认值为transparent,所以可以省略,这个例子和上面的例子是等价的.） repeat-x center;由于背景图片随滚动轴的移动方式background-attachment的默认值为scroll,所以可以省略,背景图片的位置background-position中的属性值center center等价于center,这个例子和上面的例子也是等价的。1.1 background-attachment 定义背景图片随滚动轴的移动方式 scroll | fixed |

8、inherit o scroll: 随着页面的滚动轴背景图片将移动 o fixed: 随着页面的滚动轴背景图片不会移动 o inherit: 继承 scroll background:背景.attachment:附着. background-image:）; background-attachment:fixed; background-repeat:repeat-x; background-position:center center;1.2. background-color背景色,定义背景的颜色 color | transparent | inherit o | none | inher

9、it URI o none: 无 none 背景.image:图片. html_table.pngp none;div 1.4. background-repeat定义背景图片的重复方式 repeat | repeat-x | repeat-y | no-repeat | inherit o repeat: 平铺整个页面,左右与上下 o repeat-x: 在x轴上平铺,左右 o repeat-y: 在y轴上平铺,上下 o no-repeat: 图片不重复 repeat 背景.repeat:重复. bodyno-repeat;repeat-y;right;1.5. background-pos

10、ition定义背景图片的位置 | | left | center | right | top | center | bottom ? | left | center | right | top | center | bottom | inherit o 水平 left: 左；center: 中；right: 右；o 垂直 top: 上； center: bottom: 下；o 垂直与水平的组合 x-% y-% x-pos y-pos 0% 0% 背景.position:位置. right bottom ;50% 20% ;2.文本2.1 letter-spacing 定义文本中字母的间距（中文

11、为文字的间距） normal | | inherit o normal: 正常（主要是根据用户所使用的浏览器等设备） 长度表示法 normal letter:字母.spacing:间隔. letter-spacing定义了字与字之间的距离. word-spacing是控制字与字之间空格的宽度. .ls3px letter-spacing:3px;.lsn3px-3px;正值为增大距离,负值为缩小距离.2.2 word-spacing定义以空格间隔文字的间距（就是空格本身的宽度） 正常 word:词.spacing:.ws30 word-spacing:30px;.wsn30-10px;比较2.

12、3 text-decoration定义文本是否有划线以及划线的方式 none | underline | overline | line-through | blink | inherit 定义正常显示的文本 o underline | overline | line-through | blink: 四个值中的一个或多个 underline: 定义有下划线的文本 overline: 定义有上划线的文本 line-through: 定义直线穿过文本 blink: 定义闪烁的文本 text:文本.decoration:装饰. p#underline text-decoration:underli

13、ne;p#overlineoverline;p#line-throughline-through;p#blinkblink;p#underoverunderline overline;p#underoverthroughblinkunderline overline line-through blink;2.4 text-transform定义文本的大小写状态,此属性对中文无意义 capitalize | uppercase | lowercase | none | inherit o capitalize: 首字母大写 o uppercase: 大写 o lowercase: 小写 正常无变

14、化 文本.transform:转换. p#capitalize text-transform:capitalize;p#uppercaseuppercase;p#lowercaselowercase;2.5 text-align 定义文本的对齐方式 left | right | center | justify | inherit o left: 左对齐 o right: 右对齐 o center: 居中 o justify: 对齐每行的文字 如果是ltr就为left,如果是rtl就为right 文本.align:排列.示例：p#left text-align:left;p#rightp#ce

15、ntercenter;p#justifyjustify;2.6 text-indent 定义文本首行的缩进（在首行文字之前插入指定的长度） 百分比表示法 0 文本.indent:缩进. text-indent:58%;如果段落p的父级元素是body，那么段落p第一行的缩进总是相对于body元素的58%（什么是父级元素我将在CSS高级教程中介绍）.p#indent2em;p#unindent-2em;正值向后缩,负值向前进.2.7 white-space通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 normal | pre | nowrap | pre-wrap | pre-li

16、ne | inherit 正常无变化（默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行） o pre: 保持HTML源代码的空格与换行,等同与pre标签 o nowrap: 强制文本在一行,除非遇到br换行标签 o pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行 o pre-line: 同pre属性,但是遇到连续空格会被看作一个空格 white:白色.space:间隔,距离. p#pre white-space:pre;3.字体3.1 font-family定义使用什么字体 generic-family , | * | inherit o relative-sizeabso