CSS属性值Word文档下载推荐.docx
- 文档编号:619097
- 上传时间:2023-04-29
- 格式:DOCX
- 页数:16
- 大小:30.48KB
CSS属性值Word文档下载推荐.docx
《CSS属性值Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《CSS属性值Word文档下载推荐.docx(16页珍藏版)》请在冰点文库上搜索。
background-position
设置背景图像的起始位置。
background-repeat
设置背景图像是否及如何重复。
缩进文本:
text-indent属性
该属性可以方便地实现文本缩进,用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进5em:
p{text-indent:
5em;
}p{text-indent:
-5em;
}一个行内元素的第一行“缩进”
注意:
一般来说,可以为所有块级元素应用text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用text-indent属性
text-indent可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。
换句话说,如果将缩进值设置为20%,所影响元素的第一行会缩进其父元素宽度的20%。
在下例中,缩进值是父元素的20%,即100个像素:
div{width:
500px;
20%;
<
div>
p>
thisisaparagragh<
/p>
/div>
text-indent属性可以继承,
水平对齐:
text-align属性
影响一个元素中的文本行互相之间的对齐方式,值left、right和center会导致元素中的文本分别左对齐、右对齐和居中,最后一个水平对齐属性是justify,两端对齐文本.
字间隔:
word-spacing属性
可以改变字(单词)之间的标准间隔。
其默认值normal与设置值为0是一样的
p.spread{word-spacing:
30px;
}p.tight{word-spacing:
-0.5em;
字母间隔:
letter-spacing属性
与word-spacing的区别在于,字母间隔修改的是字符或字母之间的间隔
h1{letter-spacing:
-0.5em}h4{letter-spacing:
20px}
字符转换:
text-transform属性
处理文本的大小写。
这个属性有4个值:
默认值none对文本不做任何改动,将使用源文档中的原有大小写。
uppercase和lowercase将文本转换为全大写和全小写字符。
capitalize只对每个单词的首字母大写。
h1{text-transform:
uppercase}
文本装饰:
text-decoration属性
这个属性有5个值:
默認值none值会关闭原本应用到一个元素上的所有装饰,underline会对元素加下划线。
overline的作用恰好相反,会在文本的顶端画一个上划线。
值line-through则在文本中间画一个贯穿线。
blink会让文本闪烁,类似于Netscape支持的颇招非议的blink标记。
还可以在一个规则中结合多种装饰。
如果希望所有超链接既有下划线,又有上划线,则规则如下:
a{text-decoration:
none;
a:
linka:
visited{text-decoration:
underlineoverline;
如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值
处理空白符:
white-space属性
影响到用户代理对源文档中的空格、换行和tab字符的处理,默認值normal:
丢掉多余的空白符。
如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格;
值pre:
空白符不会被忽略;
值nowrap:
会防止元素中的文本换行;
值
空白符
换行符
自动换行
pre-line
合并
保留
允许
normal
忽略
nowrap
不允许
pre
pre-wrap
文本方向:
direction属性
direction属性有两个值:
ltr和rtl。
默认值是ltr,显示从左到右的文本。
如果显示从右到左的文本,应使用值rtl
属性
描述
color设置文本颜色
direction:
设置文本方向。
line-height
设置行高。
letter-spacing
设置字符间距。
text-align
对齐元素中的文本。
text-decoration
向文本添加修饰。
text-indent
缩进元素中文本的首行。
text-transform
控制元素中的字母。
unicode-bidi
white-space
设置元素中空白的处理方式。
word-spacing
设置字间距。
指定字体系列:
font-family属性
定义文本的字体系列
body{font-family:
sans-serif;
p{font-family:
'
NewCenturySchoolbook'
Georgia,'
NewYork'
serif;
注意到了,上面的例子中使用了单引号。
只有当字体名中有一个或多个空格(比如NewYork),或者如果字体名包括#或$之类的符号,才需要在font-family声明中加引号
字体风格:
font-style属性
属性有三个值:
normal-文本正常显示italic-文本斜体显示oblique-文本倾斜显示
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。
与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
字体变形:
font-variant属性
设定小型大写字母
p{font-variant:
small-caps;
字体加粗:
font-weight属性
文本的粗细,bold关键字可以将文本设置为粗体,关键字100~900为字体指定了9级加粗度。
如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100对应最细的字体变形,900对应最粗的字体变形。
数字400等价于normal,而700等价于bold。
p.normal{font-weight:
normal;
}p.thick{font-weight:
bold;
p.thicker{font-weight:
900;
字体大小:
font-size属性
如果您没有规定字体大小,普通文本(比如段落)的默认大小是16像素(16px=1em)。
font
简写属性。
作用是把所有针对字体的属性设置在一个声明中。
font-family
设置字体系列。
font-size
设置字体的尺寸。
font-style
设置字体风格。
font-variant
以小型大写字体或者正常字体显示文本。
font-weight
设置字体的粗细。
设置链接的样式
链接的四种状态:
∙a:
link-普通的、未被访问的链接
visited-用户已访问的链接
hover-鼠标指针位于链接的上方
active-链接被点击的时刻
当为链接的不同状态设置样式时,请按照以下次序规则:
hover必须位于a:
link和a:
visited之后
active必须位于a:
hover之后
列表類型:
list-style-type属性
修改用于列表项的标志类型,把无序列表中的列表项标志设置为方块
ul.disc{list-style-type:
disc}實心圓ul.circle{list-style-type:
circle}空心圓
ul.square{list-style-type:
square}方塊ul.none{list-style-type:
none}
列表項圖像:
list-style-image
对各标志使用一个图像
ulli{list-style-image:
url(xxx.gif)}
列表標誌位置:
list-style-position
确定标志出现在列表项内容之外还是内容内部
ul.inside{list-style-position:
inside}ul.outside{list-style-position:
outside}
簡寫列表樣式:
list-style属性
将以上列表样式属性合并为一个方便的属性
li{list-style:
url(example.gif)squareinside}
ul{list-style:
squareinsideurl('
/i/eg_arrow.gif'
)}
list-style
用于把所有用于列表的属性设置于一个声明中。
list-style-image
将图象设置为列表项标志。
list-style-position
设置列表中列表项标志的位置。
list-style-type
设置列表项标志的类型。
表格边框:
border属性
设置表格边框,表格具有双线条边框
table,th,td{border:
1pxsolidblue;
折叠边框:
border-collapse属性
设置表格边框折叠为单一边框,显示为单线条边框
table{border-collapse:
collapse;
表格宽度和高度:
width和height属性
table{width:
100%;
}th{height:
50px;
}
表格文本对齐:
text-align和vertical-align属性
text-align属性设置水平对齐方式,比如左对齐、右对齐或者居中
vertical-align属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:
td{text-align:
right;
}td{height:
vertical-align:
bottom;
表格内边距:
padding属性
控制表格中内容与边框的距离
td{padding:
15px;
表格颜色:
backgroup-color與color属性
设置边框的颜色,以及th元素的文本和背景颜色
table,td,th{border:
1pxsolidgreen;
th{background-color:
green;
color:
white;
border-collapse
设置是否把表格边框合并为单一的边框。
border-spacing
设置分隔单元格边框的距离。
caption-side
设置表格标题的位置。
empty-cells
设置是否显示表格中的空单元格。
table-layout
设置显示单元、行和列的算法。
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSSoutline属性规定元素轮廓的样式、颜色和宽度。
CSS
outline
在一个声明中设置所有的轮廓属性。
2
outline-color
设置轮廓的颜色。
outline-style
设置轮廓的样式。
outline-width
设置轮廓的宽度。
p{border:
redsolidthin;
outline:
#00ff00dottedthick;
p.dotted{outline-style:
dotted}
单边内边距属性:
padding屬性
按照上、右、下、左的顺序分别设置各边的内边距
padding
作用是在一个声明中设置元素的所内边距属性。
padding-bottom
设置元素的下内边距。
padding-left
设置元素的左内边距。
padding-right
设置元素的右内边距。
padding-top
设置元素的上内边距。
边框:
元素的边框(border)是围绕元素内容和内边距的一条或多条线。
CSSborder属性允许你规定元素边框的样式、宽度和颜色。
边框的样式:
border-style属性,默認值為none
linkimg{border-style:
outset;
}把一幅图片的边框定义为outset,像是“凸起按钮”
p.aside{border-style:
soliddotteddasheddouble;
}为一个边框定义多个样式
上面这条规则为类名为aside的段落定义了四种边框样式:
实线上边框、点线右边框、虚线下边框和一个双线左边框。
(top-right-bottom-left的顺序)
定義單邊樣式:
∙border-top-styleborder-right-styleborder-bottom-styleborder-left-style
p{border-style:
solidsolidsolidnone;
solid;
border-left-style:
如果要使用第二种方法,必须把单边属性放在简写属性之后。
因为如果把单边属性放在border-style之前,简写属性的值就会覆盖单边值none。
边框的宽度:
border-width属性
为边框指定宽度有两种方法:
可以指定长度值,比如2px或0.1em;
或者使用3个关键字之一,它们分别是thin、medium(默认值)和thick。
border-width:
5px;
定義邊框單邊寬度:
按照top-right-bottom-left的顺序设置元素的各边边框:
∙border-top-widthborder-right-widthborder-bottom-widthborder-left-width
15px5px15px5px;
边框的颜色:
border-color属性
p{border-style:
border-color:
bluergb(25%,35%,45%)#909090red;
定義邊框單邊顏色:
∙border-top-colorborder-right-colorborder-bottom-colorborder-left-color
透明邊框:
如果边框没有样式,就没有宽度。
不过有些情况下您可能希望创建一个不可见的边框。
边框颜色值transparent。
这个值用于创建有宽度的不可见边框
link,a:
visited{border-style:
transparent;
CSS边框属性
border
简写属性,用于把针对四个边的属性设置在一个声明。
border-style
用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width
简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color
简写属性,设置元素的所有边框中可见部分的颜色,或为4个边分别设置颜色。
border-bottom
简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color
设置元素的下边框的颜色。
border-bottom-style
设置元素的下边框的样式。
border-bottom-width
设置元素的下边框的宽度。
border-left
简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color
设置元素的左边框的颜色。
border-left-style
设置元素的左边框的样式。
border-left-width
设置元素的左边框的宽度。
border-right
简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color
设置元素的右边框的颜色。
border-right-style
设置元素的右边框的样式。
border-right-width
设置元素的右边框的宽度。
border-top
简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color
设置元素的上边框的颜色。
border-top-style
设置元素的上边框的样式。
border-top-width
设置元素的上边框的宽度。
外边距:
margin属性
margin属性接受任何长度单位,可以是像素、英寸、毫米或em。
h1{margin:
10px0px15px5px;
}margin:
toprightbottomleft
p{margin:
0.5em1em0.5em1em;
}====p{margin:
0.5em1em;
}兩行規則一致
∙如果缺少左外边距的值,则使用右外边距的值。
∙如果缺少下外边距的值,则使用上外边距的值。
∙如果缺少右外边距的值,则使用上外边距的值。
换句话说,如果为外边距指定了3个值,则第4个值(即左外边距)会从第2个值(右外边距)复制得到。
如果给定了两个值,第4个值会从第2个值复制得到,第3个值(下外边距)会从第1个值(上外边距)复制得到。
最后一个情况,如果只给定一个值,那么其他3个外边距都由这个值(上外边距)复制得到。
h1{margin:
0.25em1em0.5em;
}/*等价于0.25em1em0.5em1em*/
h2{margin:
}/*等价于0.5em1em0.5em1em*/
1px;
}/*等价于1px1px1px1px*/
单边外边距属性:
∙margin-topmargin-rightmargin-bottommargin-left
使用单边外边距属性为元素单边上的外边距设置值
margin
在一个声明中设置所有外边距属性。
margin-bottom
设置元素的下外边距。
margin-left
设置元素的左外边距。
margin-right
设置元素的右外边距。
margin-top
设置元素的上外边距。
div、h1或p元素常常被称为块级元素。
这意味着这些元素显示为一块内容,即“块框”。
与之相反,span和strong等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
一切皆为框
您可以使用
display属性改变生成的框的类型。
这意味着,通过将display属性设置为block,可以让行内元素(比如<
a>
元素)表现得像块级元素一样。
还可以通过把display设置为none,让生成的元素根本没有框。
这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
CSSposition属性
通过使用
position属性,我们可以选择4种不同类型的定位,这会影响元素框生成的方式。
position属性值的含义:
static
元素框正常生成。
块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
Relative(相對定位)
元素框偏移某个距离。
元素仍保持其未定位前的形状,它原本所占的空间仍保留。
Absolute(絕對定位)
元素框从文档流完全删除,并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。
提示:
相对定位实际上被看作普通流定位模型的一部分,因为元素的位置
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 属性