css学习文档.doc

一、 Css背景background 属性，定义元素背景效果 background-color background-image background-repeat background-attachment background-position 设置背景颜色: background-color 颜色名依然有三种表达方式：1. 颜色名字：red，(其中有一个特殊的值：transparent 透明)；2. 十六进制表示：#ffffff； 3.函数形式：rgb(r,g,b)。对同一类的标签做不同的样式，可采取不同的类名，如：。定义其样式方法为：p.no1 Css代码body background-color: yellowh1 background-color: #00ff00h2 background-color: transparentp background-color: rgb(250,0,255)p.no2 background-color: gray实例：css_set_background_color.htmlbody background-color: yellowh1 background-color: #00ff00h2 background-color: transparentp.no1 background-color: rgb(250,0,255)p.no2 background-color: grayspan.highlight background-color:red标题 1标题 2段落该段落设置了内边距。有颜色文本。 无颜色文本。 无颜色文本。无颜色文本。无颜色文本。无颜色文本。无颜色文本。无颜色文本。无颜色文本。有颜色文本。 设置背景图片background-image可以选择在任何互联网或本地的不同格式的图片选取背景图片要考虑页面上的显示效果，要有利用整体网页的可视性效果。background-repeat 控制背景图片在无法铺满屏幕时，是否重复显示。 选项为：repeat 允许背景图片重复显示；no-repeat 不允许背景图片重复显示，即背景图片仅显示一次； repeat-x 背景图片在水平方向重复显示； repeat-y背景图片在竖直方向重复显示。 在未指定background-repeat的情况下默认为repeat。background-attachment设置背景图像是否固定或者随着页面的其余部分滚动scroll 默认。背景图像会随着页面其余部分的滚动而移动； fixed 当页面的其余部分滚动时，背景图像不会移动。将其属下设为fixed（即为background-attachment:fixed）才能保证属性在Firefox和Opera中正常工作。background-position 背景图片的位置 有三种值的表达方式：1. 名称： top left top center top right center left center center center right bottom left bottom center bottom right如果仅规定了一个关键字，则第二个值默认为center 默认值为：0% 0%，即为top left。2. 百分号表示x% y%第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%3. 像素表示第一个值是水平位置，第二个值为垂直位置。左上角是0 0。单位是像素(0px 0px) 或者其他的css单位。如果您仅规定了一个值，另一个值将是 50%可以和%以及position值混和使用。 Css代码：body background-image:url(*);实例：body background-image:url(zhy.jpg);css_background_image.htmlcss背景图片 body background-color: yellow; background-image:url(bg2.jpg);background-repeat: no-repeat;background-attachment:fixed;background-position:top left;h1 background-color: #00ffff; background-image:url(bg3.jpg); background-repeat:no-repeat; h2 background-color: #0030ff;p background-color: #abcd00;p.no2 background-color: rgb(255,0,255);input background-image:url(bg6.jpg);textarea background-image:url(bg3.jpg); 吴光旭 四川长虹 用户信息 姓名：学号：20092110001 20092110002 20092110003 20092110004 20092110005 其他 性别： Male Female 用户名：密码：爱好： 看书 打篮球 踢足球 打游戏简介：css_background.htmlcss背景颜色body background-color: yellow; background-image:url(1.jpg);background-repeat: no-repeat;background-attachment:fixed;background-position:600px,400px;h1 background-color: #00ffff; color:rgb(0,0,255); letter-spacing:20px; h2 background-color: #0030ff; color:#ff0000p background-color: #abcd00; color:#00dfefp.no2 background-color: rgb(255,0,255); padding: 20px;input color:red form color:blueselect color:greenoption color:greentextarea color:redlegend color:red电子科技大学研究生院 用户信息 姓名：学号：20092110001 20092110002 20092110003 20092110004 20092110005 其他 性别： Male Female 用户名：密码：爱好： 看书 打篮球 踢足球 打游戏简介：该网页为电子科技大学 二、 Css文本CSS 文本属性color设置文本颜色direction设置文本方向。line-height设置行高。letter-spacing设置字符间距。text-align对齐元素中的文本。text-decoration向文本添加修饰。text-indent缩进元素中文本的首行。text-shadow设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。text-transform控制元素中的字母。unicode-bidi设置文本方向。white-space设置元素中空白的处理方式。word-spacing设置字间距。color 设置文本颜色 还是三种表示方式：（略）direction 设置文本的方向。 ltr 默认，文本方向从左到右 rtl 文本方向从右到左line-height 设置行间距 nomal 默认。设置合理的行间距 number 设置数字，此数字会和当前的字体尺寸相乘来设置行间距 length 设置固定的行间距 % 基于当前字体尺寸的百分比行间距letter-spacing 增加或减少字符间的空白 normal 默认，标准空间 length 定义固定空间text-align 对其文本 left 文本排列到左边（一般为默认，和浏览器有关） right 文本排列到右边 center 文本排列居中text-decoration 对文本进行修饰 none 默认，无修饰 underline 定义文本下的一条线 overline 定义文本上的一条线 line-through 定义文本下的一条线 blink 定义闪烁文本( 无法在IE和Opera上运行)text-indent 缩进元素中的首行文本 length 固定的缩进 % 基于父元素宽度的百分比的缩进text-transform 对元素中字母进行控制 none 默认，不做任何修改 capitation 文本中每个单词以大写字母开头 uppercase 仅以大写字母显示 lowercase 仅以小写字母显示 white-space 设置处理元素内的空白 normal 默认，空格被忽略 pre 空格保留，类似于 nowrap 文本不换行，正行显示word-space 增加或减少单词间的空白 normal 默认，标准空间 length 固定单词间距实例： css_text.htmlcss背景颜色body background-color: yellow; background-image:url(bg2.jpg);background-repeat: repeat-x;background-attachment:fixed;background-position:0px,0px;h1 background-image: url(bg6.jpg); background-position:0px,0px; color:rgb(0,0,255); letter-spacing:15px; padding:25px; h2 color:#ff0000;h3 text-decoration: overline; text-align: center; h4 text-decoration: line-through; text-align: right; h5 text-decoration: underline; text-align: left; h6 text-decoration:blinkp.word color:yellow; word-spacing:30px; p.space color:yellow; word-spacing:400px; p.no1 text-transform:uppercase; color: red; text-indent: 1cm; p.wgxnew color: blue; text-indent: 1cm; white-space: nowrap; p.wgx color: blue; text-indent: 1cm; p.no2 text-transform:lowercase; color: blue; text-indent: 2cm; p.no3 text-transform:capitalize; color: blue; text-indent: 2cm; input color:red form color:blueselect color:greenoption color:greentextarea color:red;background-image:url(bg5.jpg);legend color:red电子科技大学研究生院 简历门户注释台头用户信息 姓名：学号：20092110001 20092110002 20092110003 20092110004 20092110005 其他 性别： Male Female 用户名：密码：爱好： 看书 打篮球 踢足球 打游戏简介：吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 电子科技大学 2011-3-16 UESTC march-16th 该网页为电子科技大学唯一解释 UESTC March-16th UESTC March-16th my name is wuguangxu 研究生院 三、 Css字体字体名字font-family 其值为 字体名字 可以选择多个名字，以逗号隔开。运行时浏览器会选择第一个系统中有的字体。 字体大小 字体大小 font-size 其值为 xx-small x-small small medium 大large x-large xx-large 默认尺寸为medium，xx-smallxx-large 逐渐增大 smaller设置为比父元素更小的尺寸 larger设置为比父元素更大的尺寸 length 设为固定值 % 设为基于父元素的百分比字体风格font-style 其值为 normal 默认风格 italic 斜体 oblique 倾斜字体异体字体 font-variant 其值为 normal 默认 small-caps显示小型大写字母的字体 字体粗细 font-weight 其值为 normal 标准字符大小，默认 bold 粗体 bold 更粗体 lighter 更细体 数字（整百100900）定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold字体的所有属性都可以直接在font里直接加以说明font:italic bold 12px/30px arial,sans-serif 实例：css_font.htmlcss字体h1 font-family: 华文新魏,华文行楷,华文楷体;p.no1 font-family:Times New Roman,华文隶书; font-style:italic; p.no1_other font-family:Times New Roman,华文隶书; font-style:oblique; p.no2 font-family:Arial,方正楷体; p.no3 font-family:Times New Roman,华文隶书; font-size:xx-small; p.no4 font-family:Times New Roman,华文隶书; font-size:x-small; p.no5 font-family:Times New Roman,华文隶书; font-size:small; p.no6 font-family:Times New Roman,华文隶书; font-size: medium; p.no7 font-family:Times New Roman,华文隶书; font-size:large; p.no8 font-family:Times New Roman,华文隶书; font-size:x-large; p.no9 font-family:Times New Roman,华文隶书; font-size:xx-large; p.no10 font-family:Times New Roman,华文隶书; font-size:smaller; p.no11 font-family:Times New Roman,华文隶书; font-size:larger; p.no12 font-family:Times New Roman,华文隶书; font-size:12; p.no13 font-family:Times New Roman,华文隶书; font-size:20; p.no14 font-family:Times New Roman,华文隶书; font-size:200%; CSS字体设置该字体英文显示为： Times New Roman font.中文显示为： 华文隶书 。字体默认该字体英文显示为： Times New Roman font.中文显示为： 华文隶书 。字体默认该字体英文显示为： Arial font. 方正楷体 字体默认设置字体的大小(set font size) 字体大小：xx-small 设置字体的大小(set font size) 字体大小：x-small 设置字体的大小(set font size) 字体大小：small 设置字体的大小(set font size) 字体大小：medium 设置字体的大小(set font size) 字体大小：large 设置字体的大小(set font size) 字体大小：x-large 设置字体的大小(set font size) 字体大小：xx-large 设置字体的大小(set font size) 字体大小：smaller 设置字体的大小(set font size) 字体大小：larger 设置字体的大小(set font size) 字体大小：length=12 设置字体的大小(set font size) 字体大小：length=20 设置字体的大小(set font size) 字体大小：200% 四、 css边框CSS 边框元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。边框的宽度、样式和颜色每个边框有 3 个方面：其宽度或粗细、其样式或外观，以及其颜色。边框宽度默认为 medium，这个值没有明确定义，不过通常是 2 个像素。尽管如此，你不一定能看到边框，原因是边框的默认值为 none，这样一来，就不会有边框了。如果边框没有样式，就不会存在。默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果一个元素没有任何文本，那么该元素将继承其父元素的文本颜色。边框与背景CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。元素的背景是内容、内边距和边框区的背景。Css边框属性border 简写属性 可以将四个边的属性均设置在一起边框颜色border-color 其值为 color：三种表达，和以前所述的颜色属性类似 transparent 边框透明边框样式border-style 其值为 none 默认，定义无边框 hidden 与none作用一样，其只要用于表中，解决与表边框冲突的问题 dotted 点状边框 dashed 虚线边框（有的浏览器中还是呈现为实线） solid 实线边框 double 双线边框 groove 3D凹槽边框效果取决于border-color 的值 ridge 3D垄槽边框 inset 3D inset 边框 outset 3D outset边框 边框宽度 border-width 其值为 thin 细边框 medium 默认，中等边框 thick 粗边框 length 指定宽度的边框 相应的边框属性可以应用到每条边框上border-bottomborder-topborder-leftborder-right其都有相应的color、style、width属性。例如：border-bottom-color，实例：css_border.htmlcss边框p.dotted border-style: dotted; border-color: green; p.dashed border-style: dashed; border-color: #ff00ff; p.solid border-style: solid; border-color: rgb(200,0,0); p.double border-style: double; border-color: #abcdef; p.groove border-style: groove; border-color: #ffddff; p.ridge border-style: ridge; border-color: rgb(200 200 200); p.inset border-style: insetp.outset border-style: outsetp.soliddouble border-style: solid doublep.doublesolid border-style: double solidp.groovedouble border-style: groove doublep.three border-style: solid double grooveA dotted borderA dashed borderA solid borderA double borderA groove borderA ridge borderAn inset borderAn outset borderSome textSome textSome textSome text五、 外边距&内边距CSS 外边距 (margin)。CSS 边距属性定义元素周围的空间。可以用用负值对内容进行叠加。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。CSS 外边距大多数正常流元素间出现的间隔都是因为存在元素的外边距。设置外边距会在元素外创建额外的“空白”。“空白”通常指不能放其它元素的区域，而且在这个区域中可以看到父元素的背景。设置外边距的最简单的方法就是使用属性 margin。外边距属性的值margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：h1 margin : 0.25in;margin 接受很多长度单位，比如像素、英寸、毫米或 em 等。不过 margin 的默认值是 0，所有如果没有为 margin 声明一个值，就不会出现外边距。下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：h1 margin : 10px 0px 15px 5px;这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：margin: top right bottom left不过，在实际中，浏览器对许多元素提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。另外，还可以为 margin 设置一个百分比数值：p margin : 10%;百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。提示和注释提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。Margin ：p.margin margin: 2cm 4cm 3cm 4cm2cm 4cm 3cm 4cm 上右下左 CSS 内边距 (padding)CSS 内边距属性定义元素边框与元素内容之间的空白。负值是不被允许的。通过使用单独的属性，可以分别设置上、右、下、左内边距。也可以通过简写内边距属性 padding 来同时控制元素的多个边。内边距属性接受长度值或百分比值。 整体的与外边距类似，不加细说六、 css列表属性 list-style 简写属性，可将所以的属性一起描述 将图片设为列表项标识 list-style-image list-style-image: url(image-path); 列表标识位置list-style-position列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处， 其值为： inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside默认。保持标