css常用的网页布局样式属性
css常用属性

normal :默认值。默认行高 length :百分比数字 | 由浮点数字和单位标识符 组成的长度值,允许为负值。其百分比取值是基于字 体的高度尺寸
Code:ex04/css_news.htm
常用css属性——文本控制
text-align : left | right | center | justify 设置或检索对象中文本的对齐方式。 left :默认值。左对齐 right :右对齐 center :居中对齐 justify :两端对齐 auto :自动 baseline :基线对齐 sub :垂直对齐文本的下标 super :垂直对齐文本的上标 top :内容对象顶端对齐 text-top :将支持 valign 特性的对象的文本与对 象顶端对齐 middle :中部对齐 bottom :底端对齐 text-bottom :文本与对象底端对齐 length :CSS2功能 由浮点数字和单位标识符组成的长度值 | 百分数。 可为负数。定义由基线算起的偏移量。基线对于数值 来说为0,对于百分数来说就是0%。 normal :默认值。允许在词间换行 break-all :与 normal 相同。也允许非亚洲语言文 本行的任意字内断开。 keep-all :对于中文,韩文,日文,不允许字断开。 适合包含少量亚洲文本的非亚洲文本
background-color : transparent | color background-image : none | url ( url ) background-position : position || position background-repeat : repeat | no-repeat | repeat-x | repeat-y layer-background-color : transparent | color background:颜色 背景图片 重复性 位置; 应用举例: 1、表格的背景图像和背景色 2、给textarea生成水平笔记效果 3、制作重复性背景图片、图片虚线的技巧。 背景色 背景图像 背景图像的定位,位置坐标 指定背景图像是否重复,怎么重复 指定背景色透明 可仅用background代替上面各属性。
CSS列表样式自定义方法

CSS列表样式自定义方法CSS(层叠样式表)是一种用于定义网页布局和外观的语言。
使用CSS,我们可以更改列表的样式,以使其与网页的整体风格相匹配。
本文将介绍一些常用的CSS列表样式自定义方法。
一、使用内置列表样式CSS提供了一些内置的列表样式,包括无序列表(ul)和有序列表(ol)。
1. 无序列表样式:通过设置列表项(li)的样式(list-style-type)属性,我们可以更改无序列表的样式。
常见的样式选项包括:- none:不显示任何符号。
- disc:显示为实心圆点。
- circle:显示为空心圆点。
- square:显示为方块。
例如,可以使用以下CSS代码将无序列表的样式更改为方块:```ul {list-style-type: square;}```2. 有序列表样式:有序列表的样式可以通过设置列表项(li)的样式属性(list-style-type)进行更改。
常见的样式选项包括:- decimal:按数字顺序显示。
- lower-alpha:按小写字母顺序显示。
- upper-alpha:按大写字母顺序显示。
- lower-roman:按小写罗马数字显示。
- upper-roman:按大写罗马数字显示。
例如,可以使用以下CSS代码将有序列表的样式更改为小写字母:```ol {list-style-type: lower-alpha;}```二、使用自定义图像作为列表符号除了使用内置的列表样式外,我们还可以使用自定义图像作为列表项的符号。
这需要使用CSS的background-image属性。
1. 准备图像:首先,我们需要准备一个用作列表符号的图像,可以是PNG、JPEG或GIF格式。
确保图像的大小适合作为列表符号,并上传至服务器。
2. 设置背景图像:然后,使用CSS的background-image属性将图像设置为列表项的背景图像。
可以使用以下CSS代码来设置背景图像:```ul {list-style-image: url("path/to/image.png");}```请将"path/to/image.png"替换为实际图像文件的路径。
css教程菜鸟

css教程菜鸟CSS(层叠样式表)是一种用于描述网页上的元素布局和样式的语言,它能够使网页更加美观和易于阅读。
本文将介绍一些CSS的基础知识和常用属性,以帮助菜鸟入门。
首先,让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素,而声明块则包含了一系列属性-值对,用于描述要应用到元素上的样式。
下面是一个简单的示例:```p {color: red;font-size: 20px;}```上述代码中,选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色,字体大小为20像素。
接下来,我们将介绍一些常用的CSS属性。
1. 字体属性:用于设置文本的字体样式,如字体大小、字体族等。
例如:```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素,字体族为Arial或者sans-serif。
2. 背景属性:用于设置元素的背景样式,如背景颜色、背景图片等。
例如:```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色,背景图片为名为“bg.jpg”的图片。
3. 边框属性:用于设置元素的边框样式,如边框宽度、边框颜色等。
例如:```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素,边框颜色为黑色。
4. 盒模型属性:用于调整元素的尺寸和定位,如元素的宽度、高度、外边距等。
例如:```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素,高度设置为150像素,并且向上外边距10像素。
CSS帮助手册

CSS帮助手册2篇CSS帮助手册(上)CSS(层叠样式表)是一种用于描述网页中元素的样式和布局的标记语言。
它通过为HTML元素添加样式,实现了网页的美化和个性化。
本篇文章将为大家介绍CSS的基本语法、选择器和常用样式属性。
一、CSS基本语法CSS的语法由选择器和声明块组成。
选择器用于选择需要添加样式的HTML元素,而声明块则包含了一系列样式属性和值。
1. 选择器选择器是CSS中最重要的部分,它用于指定需要应用样式的HTML元素。
常见的选择器有:- 元素选择器:通过HTML元素的标签名选择元素,如`p`表示所有`<p>`元素。
- 类选择器:通过HTML元素的`class`属性选择元素,如`.red`表示所有`class`为red的元素。
- ID选择器:通过HTML元素的`id`属性选择元素,如`#header`表示`id`为header的元素。
- 属性选择器:通过HTML元素的属性选择元素,如`[type="text"]`表示所有`type`属性为text的元素。
- 伪类选择器:通过HTML元素的特殊状态选择元素,如`:hover`表示鼠标悬停时的元素。
2. 声明块声明块由一对花括号`{}`包裹,每个声明由属性和值构成。
属性用于指定需要修改的样式,值用于指定属性的具体取值。
例如,下面的CSS代码将为所有`<p>`元素设置红色字体:```cssp {color: red;}```二、常用的CSS样式属性CSS提供了众多样式属性,可以用来修改HTML元素的外观和布局。
以下是常用的样式属性及其作用:1. 字体样式- `color`:用于设置文本颜色,值可以是颜色名称或RGB值。
- `font-size`:用于设置字体大小,值可以是像素、百分比或者其他单位。
- `font-family`:用于设置字体样式,值可以是字体名称或者字体族名称。
2. 边框样式- `border`:用于设置边框样式,属性值由边框宽度、边框样式和边框颜色组成。
css style用法

css style用法CSS(CascadingStyleSheets)是一种用于网页设计的样式表语言。
它可以控制HTML文档中的元素的外观和布局,使得网页设计更加美观、简洁、易于维护。
在本篇文章中,我们将探讨CSS style用法的基础知识和常见技巧。
基础知识CSS样式表由一系列的规则(rule)组成,每个规则包含一个选择器(selector)和一组声明(declaration)。
选择器用于指定要应用样式的HTML元素,声明则用于定义这些元素的样式。
例如,下面的CSS规则将为所有h1元素设置红色字体、黑色背景和20像素的上下内边距:```cssh1 {color: red;background-color: black;padding: 20px 0;}```在这个例子中,h1是选择器,color、background-color和padding是声明,它们用冒号(:)分隔开来,每个声明以分号(;)结尾。
需要注意的是,CSS规则是区分大小写的,因此h1和H1是不同的选择器。
选择器选择器是指定要应用样式的HTML元素的标识符。
下面是一些常见的选择器类型:1. 元素选择器(Element Selector):通过HTML元素的名称来指定要应用样式的元素。
```cssp {color: blue;}```这个规则将为所有p元素设置蓝色字体。
2. ID选择器(ID Selector):通过HTML元素的id属性来指定要应用样式的元素。
```css#header {background-color: gray;}```这个规则将为id为“header”的元素设置灰色背景。
3. 类选择器(Class Selector):通过HTML元素的class属性来指定要应用样式的元素。
```css.highlight {font-weight: bold;}```这个规则将为所有class为“highlight”的元素设置粗体字。
css 模板

css 模板CSS 模板。
CSS(Cascading Style Sheets)是一种用来为网页添加样式和布局的标记语言。
它可以让我们在网页中实现各种各样的视觉效果,包括字体、颜色、间距、边框、背景等。
在网页开发中,使用CSS模板可以极大地提高工作效率,同时也能够保证网页的一致性和美观性。
本文将介绍一些常用的CSS模板,以及它们的应用场景和实际使用方法。
一、基础模板。
基础模板是最简单的一种CSS模板,它包含了网页的基本结构和样式,通常用于快速搭建简单的网页。
基础模板包括了网页的布局、字体、颜色等基本样式,可以作为其他模板的基础,也可以直接用于一些简单的静态网页。
二、响应式模板。
响应式模板是一种能够根据用户设备的屏幕大小和分辨率自动调整布局和样式的模板。
在移动设备使用越来越普及的今天,响应式模板变得越来越重要。
它可以让网页在不同设备上都能够呈现出良好的视觉效果,提高用户体验。
三、网格布局模板。
网格布局模板是一种通过网格系统来实现页面布局的模板。
网格布局可以让网页的布局更加灵活,同时也能够保证页面的整洁和美观。
使用网格布局模板可以让我们更加方便地进行网页布局设计,提高工作效率。
四、动画效果模板。
动画效果模板包含了一些常用的CSS动画效果,比如淡入淡出、旋转、缩放、平移等。
这些动画效果可以让网页更加生动和有趣,吸引用户的注意力。
在网页设计中,使用动画效果模板可以让我们更加方便地添加动画效果,而不需要从头开始编写CSS代码。
五、特效模板。
特效模板包含了一些特殊的CSS效果,比如阴影、渐变、边框样式等。
这些特效可以让网页看起来更加炫丽和有趣,提高用户体验。
使用特效模板可以让我们更加方便地添加特殊效果,而不需要深入研究CSS的各种属性和取值。
总结。
CSS模板在网页开发中起着非常重要的作用,它可以帮助我们快速搭建网页,提高工作效率,同时也能够保证网页的一致性和美观性。
本文介绍了一些常用的CSS模板,包括基础模板、响应式模板、网格布局模板、动画效果模板和特效模板,以及它们的应用场景和实际使用方法。
CSS中的布局自适应技巧

CSS中的布局自适应技巧在CSS中,布局自适应技巧是实现网页响应式设计非常重要的一部分。
通过灵活运用CSS属性和技巧,可以使网页在不同设备上具有良好的展示效果,让用户能够在各种屏幕尺寸下获得更好的浏览体验。
本文将介绍一些常用的CSS布局自适应技巧。
1. 弹性盒子布局弹性盒子布局(Flexbox)是CSS3中新增的一种布局模式。
通过设置弹性容器的属性,可以实现弹性盒子中各个项目的自适应排列。
弹性盒子通过设置主轴和侧轴的方向,可以实现不同排列方式,如水平排列、垂直排列或者混合排列。
通过设置项目的属性,可以实现弹性伸缩、对齐和排序等效果。
2. 栅格布局栅格布局是一种将网页内容划分为多列的布局方式。
通过将页面划分为等宽的列,可以实现页面的自适应布局。
栅格布局常用于响应式设计,可以根据设备屏幕尺寸改变列的数量。
可以使用CSS框架如Bootstrap等提供的栅格系统,也可以自定义栅格布局。
3. 媒体查询媒体查询是CSS中一种用于根据设备特性调整样式的方法。
通过使用@media规则,可以根据不同的媒体类型和特性,为不同的设备提供不同的样式。
媒体查询可以根据设备的宽度、高度、像素密度、触摸能力等特性来选择不同的样式表或样式规则。
4. vw和vh单位vw和vh是CSS3中引入的相对长度单位,代表视口宽度和视口高度的百分比。
通过使用vw和vh单位,可以根据设备的宽度和高度来设置元素的尺寸,实现自适应效果。
例如,可以使用vw单位设置文字大小、图片宽度等,使其根据设备屏幕尺寸进行适配。
5. flex和grid布局flex和grid是CSS中强大的布局模式,可以实现复杂的自适应布局效果。
flex布局通过设置容器和项目的属性,可以实现灵活的自适应布局,可以自动调整项目的位置和尺寸。
grid布局则将网页布局分割为网格,通过设置网格的属性,可以实现自由的排列和对齐效果。
总结CSS中的布局自适应技巧有很多种,以上只是其中的一部分。
css的三种使用方式

css的三种使用方式CSS的三种使用方式CSS(层叠样式表)是用于描述网页样式的语言,可以实现对网页的布局和样式的控制。
在使用CSS时,有三种常见的方式:内联样式、内部样式表和外部样式表。
一、内联样式内联样式是将CSS样式直接写在HTML标签的style属性中,它的优先级最高,会覆盖其他方式设置的样式。
使用内联样式的语法如下:```html<p style="color: red; font-size: 16px;">这是一段红色字体,字号为16px的文字。
</p>```内联样式的优点是简单快捷,适合对单个标签进行样式设置。
但是,当需要对多个标签设置相同的样式时,就显得非常繁琐和冗余了。
二、内部样式表内部样式表是将CSS样式写在HTML文档的<head>标签内的<style>标签中,使用内部样式表可以对整个HTML文档中的标签进行样式设置。
使用内部样式表的语法如下:```html<head><style>p {color: blue;font-size: 14px;}</style></head><body><p>这是一段蓝色字体,字号为14px的文字。
</p></body>```内部样式表的优点是可以在同一个HTML文档中集中管理样式,方便维护和修改。
但是,当需要在多个HTML文档中使用相同的样式时,就需要重复地将内部样式表复制到每个HTML文档中,这样会造成代码的冗余。
三、外部样式表外部样式表是将CSS样式写在一个独立的CSS文件中,然后在HTML 文档中通过<link>标签引入该CSS文件,使用外部样式表可以实现样式的重用。
使用外部样式表的语法如下:```html<head><link rel="stylesheet" href="style.css"></head><body><p>这是一段样式来自外部样式表的文字。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网页布局常用的样式属性一、PositionPosition有以下几个值:static,relative,absolute,fixed。
Static:静态定位。
如果你没有设置position属性,那么缺省就是static。
top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
Relative:相对定位。
元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
Absolute:绝对定位。
元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。
Fixed:固定定位。
元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。
形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。
需要注意的是IE6并不支持此属性。
注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:<div style="position: relative;"><div style="position: absolute; top: 10px; left: 10px;"></div></div><div style="position: Fixed; top: 10px; left: 10px;"></div></div> //元素位置固定浏览器位置不变二、Floatfloat 是css 的定位属性,fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的)使元素不浮动,Inherit 将会从父级元素获取float值。
Float的用处float 属性定义元素在哪个方向浮动。
以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素。
浮动非替换元素要指定一个明确的宽度;否则,它们会尽可能地窄。
注释: 假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
除了简单的在图片周围包围文字,浮动可用于创建全部网页布局。
参考地址:三、margin(外边距)定义margin 属性是用于在一个声明中设置四个外边距的所有属性的简写属性。
注释:允许使用负值。
继承性:No说明这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。
行内元素的的左右外边距不会合并。
同样地,浮动元素的外边距也不会合并。
允许指定负的外边距值,不过使用时要小心。
例子四个边距均为10px:h1 {margin: 10px}顶边距和底边距为10px,左边距和右边距是父元素宽度的2%:h1 {margin: 10px 2%}顶边距为10px,左边距和右边距是父元素宽度的2%,底边距是-10px:h1 {margin: 10px 2% -10px}顶边距为10px,右边距是父元素宽度的2%,底边距是-10px,而左边距由浏览器设置:h1 {margin: 10px 2% -10px auto}可能的值设置针对边距的属性。
margin-top margin-right margin-bottom margin-left值可以是:百分比(基于父对象总高度或宽度的百分比)长度值(定义一个固定的边距) auto(浏览器设定的值)。
默认值:未定义。
例子:<html><head><style type="text/css">p.margin {margin: 2cm 4cm 3cm4cm}</style></head><body><p>这个段落没有指定外边距。
</p><p class="margin">这个段落带有指定的外边距。
这个段落带有指定的外边距。
这个段落带有指定的外边距。
这个段落带有指定的外边距。
这个段落带有指定的外边距。
</p><p>这个段落没有指定外边距。
</p></body></html>四、padding(内边距)CSS中定义了一个盒式模型,关于这个网上有很多文章。
主要有margin(外边距),border(边框),padding(内边距)这三个名词,用来设置这个盒子的空隙。
W3C定义的盒式模型定义的width和height是指内容实体的,而不包括margin,border和padding,而传统的盒式模型则不同,他的width是包括border和padding,可以看下图帮助理解。
五、border(边框)border(边框)border-left border-right border-bottom border-topborder-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;六、left top right bottom这四个属性是设置一个偏移量,对于特定容器的一个偏移。
top是指元素的顶边相对于容器的顶边的偏移,right是元素的右边相对于容器的右边的便宜,但方向是从右到左。
正因为有方向,所以这四个属性也可以设置为负值,是向反方向偏移。
也可以设置百分比,这个值是相对于容器计算出来的,比如top:50%,就是容器的height*50%。
这四个属性必须与position共同使用,不然就没有效果,position值为static 时这四个属性也是无效的。
position还存在其他三个值absolute,relative,fixed,fixed和absolute类似,所以最大的区别还是absolute和relative。
absolute是相对于根容器偏移,而relative是相对于父级容器偏移。
偏移值指的是容器的内容实体到元素外边距的距离,就算说topleft定义的盒子左上角的坐标是margin-top和margin-left的交点,当然这个坐标是相对于容器来说的,传统模型也是如此。
七、(block)文字和字体相关字间距letter-spacing: normal; 数值对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle;bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group;table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性:(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)八、box(方框)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左九、(font)字体属性大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高line-height: normal;(正常) 单位:PX、PD、EM粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体font-variant: small-caps;(小型大写字母) normal;(正常)大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体:(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana十、(background)背景属性色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法background:#000 url(..) repeat fixed left top;其他常用样式一CSS文字属性:color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性:list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-; /*凸排*/list-style-; /*缩进*/四、CSS背景样式:background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/ 指定背景位置background- 90%; /*背景图片x与y轴的位置*/ background-; /*向上对齐*/background-; /*向下对齐*/background-; /*向左对齐*/background-; /*向右对齐*/background-; /*居中对齐*/五、CSS连接属性:a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式:链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表:border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用:文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式:margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded| inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultr a-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|mid dle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-width border-bottom-width border-left-width}宽度值:thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值:分别代表top、righ t、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset |ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示 {display:none|block|inline|list-item}2 控制空白 {white-space:normal|pre|nowarp}3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|up per-roman|lower-alpha|upper-alpha|none}4 图形列表 {list-style-image:URL}5 位置列表 {list-style-6 目录列表 {list-style:目录样式类型|目录样式位置|url}7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-res ize|w-resize|s-resize|se-resize|sw-resize}。