1、一、 Css背景 background 属性,定义元素背景效果 · background-color · background-image · background-repeat · background-attachment · background-position 设置背景颜色: background-color 颜色名依然有三种表达方式: 1. 颜色名字:red,……(其中有一个特殊的值:transparent 透明); 2. 十六进制表示:#ffffff; 3.函数形式:rgb(r,g,b)。 对同一类的标签做不同的样式,可采取不同的类名,如:<
2、p class="no1">。定义其样式方法为:p.no1 {……} Css代码 实例: css_set_background_color.html
3、
4、
段落
该段落设置了内边距。
有颜色文本。 无颜色文本。 无颜色文本。无颜色文本。无颜色文本。 无颜色文本。无颜色文本。无颜色文本。无颜色文本。 有颜色文本。
设置背景图片 background-image可以选择在任何互联网或本地的不同格式的图片 选取背景图片要考虑页面上的显示效果,要有利用整体网页的可视性5、效果。 background-repeat 控制背景图片在无法铺满屏幕时,是否重复显示。 选项为:repeat 允许背景图片重复显示; no-repeat 不允许背景图片重复显示,即背景图片仅显示一次; repeat-x 背景图片在水平方向重复显示; repeat-y背景图片在竖直方向重复显示。 在未指定background-repeat的情况下默认为repeat。 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动 scroll 默认。 背景图像会随着页面其
6、余部分的滚动而移动; fixed 当页面的其余部分滚动时,背景图像不会移动。 将其属下设为fixed(即为background-attachment:fixed)才能保证属性在Firefox和Opera中正常工作。 background-position 背景图片的位置 有三种值的表达方式: 1. 名称: · top left · top center · top right · center left · center center · center right · bottom left · bot
7、tom center · bottom right 如果仅规定了一个关键字,则第二个值默认为center 默认值为:0% 0%,即为top left。 2. 百分号表示 x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50% 3. 像素表示 第一个值是水平位置,第二个值为垂直位置。 左上角是0 0。单位是像素(0px 0px) 或者其他的css单位。 如果您仅规定了一个值,另一个值将是 50% 可以和%以及position值混和使用。
8、 Css代码: 实例:
css_background_image.html11、 四川长虹
css_background.html
17、set>
该网页为电子科技大学
二、 Css文本 CSS 文本属性 color 设置文本颜色 direction 设置文本方向。 line-height 设置行高。 letter-spacing 设置字符间距。 text-align 对齐元素中的文本。 text-decoration 向文本添加修饰。 text-indent 缩进元素中文本的首行。 text-shadow 设置文本阴影。CSS22、2 包含该属性,但是 CSS2.1 没有保留该属性。 text-transform 控制元素中的字母。 unicode-bidi 设置文本方向。 white-space 设置元素中空白的处理方式。 word-spacing 设置字间距。 color 设置文本颜色 还是三种表示方式:(略) direction 设置文本的方向。 ltr 默认,文本方向从左到右 rtl 文本方向从右到左 line-height 设置行间距 nomal 默认。设置合理的行间距 number 设置数字,此数字会和当前的字体尺寸相乘来设置
23、行间距 length 设置固定的行间距 % 基于当前字体尺寸的百分比行间距 letter-spacing 增加或减少字符间的空白 normal 默认,标准空间 length 定义固定空间 text-align 对其文本 left 文本排列到左边(一般为默认,和浏览器有关) right 文本排列到右边 center 文本排列居中 text-decoration 对文本进行修饰 none 默认,无修饰 underline 定义文本下的一条线 over
24、line 定义文本上的一条线 line-through 定义文本下的一条线 blink 定义闪烁文本( 无法在IE和Opera上运行) text-indent 缩进元素中的首行文本 length 固定的缩进 % 基于父元素宽度的百分比的缩进 text-transform 对元素中字母进行控制 none 默认,不做任何修改 capitation 文本中每个单词以大写字母开头 uppercase 仅以大写字母显示 lowercase 仅以小写字母显示 white-space 设置处理元
25、素内的空白 normal 默认,空格被忽略 pre 空格保留,类似于
nowrap 文本不换行,正行显示
word-space 增加或减少单词间的空白
normal 默认,标准空间
length 固定单词间距
实例:
css_text.html
css背景颜色
电子科技大学
研究生院
简历
门户
注释
台头
吴
34、光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。 吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。吴光旭。
电子科技大学 2011-3-16 UESTC march-16th
35、s="no2">该网页为电子科技大学唯一解释 UESTC March-16th
UESTC March-16th
my name is wuguangxu
研究生院
三、 Css字体 字体名字 font-family 其值为 字体名字 可以选择多个名字,以逗号隔开。运行时浏览器会选择第一个系统中有的字体。 字体大小 字体大小 f36、ont-size 其值为 xx-small x-small small medium 大 large x-large xx-large 默认尺寸为medium,xx-smallàxx-large 逐渐增大 smaller设置为比父元素更小的尺寸 larger设置为比父元素更大的尺寸 length 设为固定值 % 设为基于父元素的百分比 字体风格 font-style
37、 其值为 normal 默认风格 italic 斜体 oblique 倾斜字体 异体字体 font-variant 其值为 normal 默认 small-caps显示小型大写字母的字体 字体粗细 font-weight 其值为 normal 标准字符大小,默认 bold 粗体
38、 bold 更粗体 lighter 更细体 数字(整百100~900)定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold 字体的所有属性都可以直接在font里直接加以说明 font:italic bold 12px/30px arial,sans-serif …… 实例: css_font.html
该字体英文显示为: Times New Roman font.中文显示为: 华文隶书 。字体默认
该字体英文显示为: Times New Roman font.中文显示为: 华文隶书 。字体默认
该字体英文显示为: Arial font. 方正楷体 字体默认
设置字体的大小(set font size) 字体大小:xx-small
44、
设置字体的大小(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
设置字体
46、的大小(set font size) 字体大小:200%
四、 css边框 CSS 边框 元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。 边框的宽度、样式和颜色 每个边框有 3 个方面:其宽度或粗细、其样式或外观,以及其颜色。 边框宽度默认为 medium,这个值没有明确定义,不过通常是 2 个像素。尽管如此,你不一定能看到边框,原因是边框的默认值为 none,这样一来,就不会有边框了。如果边框没有样式,就不会存在。 默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色,它将与元47、素的文本颜色相同。另一方面,如果一个元素没有任何文本,那么该元素将继承其父元素的文本颜色。 边框与背景 CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。 元素的背景是内容、内边距和边框区的背景。 Css边框属性 border 简写属性 可以将四个边的属性均设置在一起 边框颜色 border-color 其值为 color:三种表达,和以前所述的颜色属性类似 transparent 边框透明 边框样式 bo
48、rder-style 其值为 none 默认,定义无边框 hidden 与none作用一样,其只要用于表中,解决与表边框冲突的问题 dotted 点状边框 dashed 虚线边框(有的浏览器中还是呈现为实线) solid 实线边框 double 双线边框 groove 3D凹槽边框 效果取决于border-color 的值 ridge 3D垄槽边框 i
49、nset 3D inset 边框 outset 3D outset边框 边框宽度 border-width 其值为 thin 细边框 medium 默认,中等边框 thick 粗边框 length 指定宽度的边框 相应的边框属性可以应用到每条边框上 border-bottom border-top border-left border-right 其都有相应的color、style、width属性。例如:border-bottom-color,…… 实例: css_border.html